@prenta/admin 2.6.0 → 2.7.0

package/dist/__tests__/views/jobs-drawer.render.test.js

@@ -0,0 +1,908 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+/*
+ * The job drawer (P-18): a modal dialog with Overview, Review or Results,
+ * Activity and Details, on the real endpoints. The list's refresh is
+ * answered by the `fetch` stub; the drawer's reads and decisions by the
+ * `cmsApi` mock. Both read `server` below.
+ */
+const MIN = 60_000;
+const server = {
+    jobs: [],
+    details: {},
+    events: {},
+    items: {},
+    reviewError: null,
+    decide: () => ({ error: 'not stubbed', status: 500 }),
+    approveAll: () => ({ error: 'not stubbed', status: 500 }),
+    calls: [],
+};
+function ok(data, extra = {}) {
+    return { data, body: { data, ...extra }, status: 200 };
+}
+function cmsApiStub(endpoint, init = {}) {
+    const method = (init.method ?? 'GET').toUpperCase();
+    const body = typeof init.body === 'string' ? JSON.parse(init.body) : undefined;
+    server.calls.push({ endpoint, method, body });
+    const url = new URL(endpoint, 'http://x');
+    const [, , jobId, part, itemId] = url.pathname.split('/');
+    const job = server.jobs.find((entry) => entry.id === jobId);
+    if (method === 'GET' && part === undefined) {
+        return job ? ok({ ...job, ...server.details[job.id] }) : { error: 'Job not found', status: 404 };
+    }
+    if (method === 'GET' && part === 'events')
+        return ok({ events: server.events[jobId] ?? [] });
+    if (method === 'GET' && part === 'review') {
+        if (server.reviewError)
+            return { error: server.reviewError.message, status: server.reviewError.status };
+        const limit = Number(url.searchParams.get('limit'));
+        const cursor = url.searchParams.get('cursor');
+        const all = [...(server.items[jobId] ?? [])].sort((a, b) => a.id.localeCompare(b.id));
+        const after = cursor ? all.filter((item) => item.id > cursor) : all;
+        const items = after.slice(0, limit);
+        const last = items.at(-1);
+        return ok({ items, nextCursor: items.length === limit && last ? last.id : null });
+    }
+    if (method === 'POST' && part === 'review' && itemId === 'approve-all')
+        return server.approveAll(jobId);
+    if (method === 'POST' && part === 'review')
+        return server.decide(jobId, itemId, body);
+    return { error: `unexpected ${method} ${endpoint}`, status: 404 };
+}
+vi.mock('../../lib/api.js', () => ({
+    getApiBase: () => '/api/cms',
+    cmsApi: vi.fn(async (endpoint, init) => cmsApiStub(endpoint, init)),
+}));
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn() }));
+vi.mock('sonner', () => ({ toast }));
+/** The list's refresh reads through fetch (it needs response headers). */
+function fetchStub(url) {
+    const endpoint = url.replace(/^\/api\/cms/, '');
+    const data = endpoint.endsWith('/jobs/worker')
+        ? { lastTickAt: null, lastTickMs: null, nextTickAt: null, budgetMs: 20000, schedules: [] }
+        : { jobs: server.jobs };
+    return Promise.resolve({
+        ok: true,
+        status: 200,
+        headers: { get: () => null },
+        json: async () => ({ data }),
+    });
+}
+const { Jobs } = await import('../../views/Jobs.js');
+function iso(offsetMs) {
+    return new Date(Date.now() + offsetMs).toISOString();
+}
+function batch(overrides) {
+    const { done = 19, total = 42, ...rest } = overrides;
+    return {
+        id: 'job_417',
+        type: 'batch-ai',
+        status: 'running',
+        title: 'Rewrite meta descriptions',
+        scope: '42 posts with a missing or over-length description',
+        runAt: iso(0),
+        attempts: 0,
+        maxAttempts: 3,
+        progress: { done, total, unit: 'documents', cursor: String(done), completed: done },
+        lastError: null,
+        explain: null,
+        summary: null,
+        lockedAt: iso(-5_000),
+        cancelRequestedAt: null,
+        cancelledBy: null,
+        createdBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+        createdAt: iso(-19 * MIN),
+        updatedAt: iso(0),
+        finishedAt: null,
+        usage: { tokensIn: 11_500, tokensOut: 5_800 },
+        payload: {
+            operation: 'meta',
+            instruction: 'Plain, specific, under 155 characters.',
+            source: 'blog',
+            statusFilter: 'all',
+            documentIds: ['d1', 'd2', 'd3'],
+            review: 'review',
+            onApprove: 'draft',
+        },
+        review: { pending: 0, approved: 0, rejected: 0 },
+        ...rest,
+    };
+}
+function item(id, overrides = {}) {
+    return {
+        id,
+        jobId: 'job_417',
+        documentId: `doc-${id}`,
+        documentTitle: `Post ${id}`,
+        url: `/blog/${id}`,
+        field: 'metaDescription',
+        before: '',
+        after: `Suggested description for ${id}.`,
+        editedAfter: null,
+        status: 'pending',
+        decidedBy: null,
+        decidedAt: null,
+        appliedRevisionId: null,
+        ...overrides,
+    };
+}
+/** Items r01…rNN on a job, all pending. */
+function pending(jobId, count) {
+    return Array.from({ length: count }, (_, index) => item(`r${String(index + 1).padStart(2, '0')}`, { jobId }));
+}
+function decided(entry, status) {
+    return {
+        ...entry,
+        status,
+        decidedAt: iso(0),
+        decidedBy: { id: 'u1', name: 'Brandon West', initials: 'BW' },
+    };
+}
+beforeEach(() => {
+    vi.stubGlobal('fetch', vi.fn(fetchStub));
+    Object.assign(server, {
+        jobs: [],
+        details: {},
+        events: {},
+        items: {},
+        reviewError: null,
+        calls: [],
+        approveAll: () => ({ error: 'not stubbed', status: 500 }),
+    });
+    // By default a decision goes through: the change takes the new status.
+    server.decide = (jobId, itemId, body) => {
+        const list = server.items[jobId] ?? [];
+        const index = list.findIndex((entry) => entry.id === itemId);
+        const current = list[index];
+        const next = body.action === 'undo'
+            ? { ...current, status: 'pending', decidedAt: null, decidedBy: null }
+            : decided(body.after ? { ...current, editedAfter: String(body.after) } : current, body.action === 'approve' ? 'approved' : 'rejected');
+        list[index] = next;
+        return ok(next, { documentStatus: body.onApprove === 'publish' ? 'PUBLISHED' : 'DRAFT' });
+    };
+    toast.mockClear();
+    toast.error.mockClear();
+});
+afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+});
+function rowButton(id) {
+    const button = document.getElementById(`job-open-${id}`);
+    if (!button)
+        throw new Error(`no row ${id}`);
+    return button;
+}
+async function renderJobs(onNavigate = () => { }) {
+    render(_jsx(Jobs, { onNavigate: onNavigate }));
+    await screen.findByRole('list', { name: 'Jobs' });
+}
+async function openJob(id, tab) {
+    const row = rowButton(id);
+    row.focus();
+    fireEvent.click(row);
+    const dialog = await screen.findByRole('dialog');
+    if (tab)
+        fireEvent.click(within(dialog).getByRole('tab', { name: new RegExp(`^${tab}`) }));
+    return dialog;
+}
+function card(id) {
+    const element = document.querySelector(`[data-review-item="${id}"]`);
+    if (!element)
+        throw new Error(`no change ${id}`);
+    return element;
+}
+/** Radix hides its positioned menu in happy-dom, so the items are queried with `hidden`. */
+async function approveWith(entry, option) {
+    const trigger = within(entry).getByRole('button', { name: /^Approve/ });
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('true'));
+    fireEvent.click(screen.getByRole('menuitem', { name: option, hidden: true }));
+}
+async function menuOptions(entry) {
+    const trigger = within(entry).getByRole('button', { name: /^Approve/ });
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('true'));
+    const options = screen
+        .getAllByRole('menuitem', { hidden: true })
+        .map((option) => option.textContent ?? '');
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' });
+    await waitFor(() => expect(trigger.getAttribute('aria-expanded')).toBe('false'));
+    return options;
+}
+const posts = (method, part) => server.calls.filter((call) => call.method === method && call.endpoint.includes(part));
+/** A change's note (not a live region). */
+function noteOf(entry) {
+    return entry.querySelector('[data-review-note]')?.textContent ?? '';
+}
+/** What the drawer's live region last announced. */
+function announced() {
+    return document.querySelector('[data-job-drawer] [aria-live="polite"]')?.textContent ?? '';
+}
+/** Let "Approve all" act: it ignores activations for 600ms after Review opens. */
+async function waitOutArming() {
+    await act(async () => {
+        await vi.advanceTimersByTimeAsync(700);
+    });
+}
+describe('Jobs drawer', () => {
+    it('opens from the row and returns focus to it when Escape closes it', async () => {
+        server.jobs = [batch({})];
+        await renderJobs();
+        const row = rowButton('job_417');
+        expect(row.getAttribute('aria-haspopup')).toBe('dialog');
+        const dialog = await openJob('job_417');
+        expect(dialog.getAttribute('aria-modal')).toBe('true');
+        expect(screen.getByRole('dialog', { name: 'Rewrite meta descriptions' })).toBe(dialog);
+        expect(row.closest('li')?.className).toContain('bg-acc-l');
+        fireEvent.keyDown(document.activeElement ?? document, { key: 'Escape' });
+        await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+        await waitFor(() => expect(document.activeElement).toBe(row));
+        expect(row.closest('li')?.className).not.toContain('bg-acc-l');
+    });
+    it('focuses the row when the opener never took focus (Safari clicks)', async () => {
+        server.jobs = [batch({})];
+        await renderJobs();
+        const row = rowButton('job_417');
+        document.activeElement?.blur();
+        fireEvent.click(row);
+        await screen.findByRole('dialog');
+        fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+        await waitFor(() => expect(document.activeElement).toBe(row));
+    });
+    it('shows the overview: status sentence, progress, facts and instruction', async () => {
+        server.jobs = [batch({ review: { pending: 6, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 6);
+        await renderJobs();
+        const dialog = await openJob('job_417');
+        expect(within(dialog).getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected')).toBe('true');
+        expect(dialog.textContent).toContain('Running slice 20 of 42 now. Each slice applies the operation to one document.');
+        expect(dialog.textContent).toContain('19 / 42 documents');
+        const facts = within(dialog).getByText('Attempts').closest('div');
+        expect(facts.textContent).toBe('Attempts1 of 3');
+        expect(within(dialog).getByText('17,300 tokens')).toBeTruthy();
+        expect(within(dialog).getByText('Rewrite meta descriptions', { selector: 'dd' })).toBeTruthy();
+        expect(dialog.textContent).toContain('“Plain, specific, under 155 characters.”');
+        expect(within(dialog).getByRole('button', { name: 'Review 6 changes' })).toBeTruthy();
+    });
+    it('shows the full error with Copy and the AI explanation on a failed job', async () => {
+        const stack = 'ProviderError: 429 Too Many Requests\n  at callModel (lib/ai/provider.ts:88)';
+        server.jobs = [
+            batch({
+                id: 'job_415',
+                status: 'dead',
+                attempts: 3,
+                done: 7,
+                total: 30,
+                lockedAt: null,
+                lastError: 'ProviderError: 429 Too Many Requests',
+                explain: 'Your AI provider was rate-limiting requests.',
+            }),
+        ];
+        server.details.job_415 = { lastError: stack };
+        const writeText = vi.fn(async () => { });
+        Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true });
+        await renderJobs();
+        const dialog = await openJob('job_415');
+        expect(dialog.textContent).toContain('Stopped after 3 attempts at document 8.');
+        await waitFor(() => expect(dialog.querySelector('pre')?.textContent).toBe(stack));
+        expect(within(dialog).getByText('What happened')).toBeTruthy();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Copy' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Error copied'));
+        expect(writeText).toHaveBeenCalledWith(stack);
+    });
+    it('counts from the API: badge and footer use review.pending, and changes load 20 at a time', async () => {
+        server.jobs = [batch({ review: { pending: 30, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 30);
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => expect(dialog.querySelectorAll('[data-review-item]')).toHaveLength(20));
+        expect(within(dialog).getByRole('tab', { name: /^Review/ }).textContent).toBe('Review30 waiting');
+        expect(within(dialog).getByRole('button', { name: 'Approve all 30' })).toBeTruthy();
+        expect(dialog.textContent).toContain('30 waiting · 0 approved · 0 rejected');
+        const reads = posts('GET', '/review');
+        expect(reads.at(-1)?.endpoint).toBe('/jobs/job_417/review?limit=20');
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Show 10 more' }));
+        // Loading and drawing 10 more changes takes about 0.2s here, but CI runs
+        // the suite 9-13 times slower with coverage on, past waitFor's 1s default.
+        await waitFor(() => expect(dialog.querySelectorAll('[data-review-item]')).toHaveLength(30), {
+            timeout: 5_000,
+        });
+        expect(posts('GET', '/review').at(-1)?.endpoint).toBe('/jobs/job_417/review?limit=20&cursor=r20');
+        expect(within(dialog).queryByRole('button', { name: /^Show/ })).toBeNull();
+        await waitFor(() => expect(document.activeElement).toBe(card('r21')), { timeout: 5_000 });
+    });
+    it('keeps focus on the footer button as Review n changes becomes Approve all', async () => {
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        await renderJobs();
+        const dialog = await openJob('job_417');
+        const footer = within(dialog).getByRole('button', { name: 'Review 2 changes' });
+        footer.focus();
+        fireEvent.click(footer);
+        await waitFor(() => expect(footer.textContent).toBe('Approve all 2'));
+        expect(document.activeElement).toBe(footer);
+        expect(within(dialog)
+            .getByRole('tab', { name: /^Review/ })
+            .getAttribute('aria-selected')).toBe('true');
+    });
+    it('offers Save as draft and Publish, and publishes when asked', async () => {
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        expect(await menuOptions(card('r01'))).toEqual(['Save as draft', 'Publish']);
+        await approveWith(card('r01'), 'Publish');
+        const undo = await within(card('r01')).findByRole('button', { name: 'Undo' });
+        expect(posts('POST', '/review/r01').at(-1)?.body).toEqual({
+            action: 'approve',
+            onApprove: 'publish',
+        });
+        expect(within(card('r01')).getByText('Approved')).toBeTruthy();
+        await waitFor(() => expect(document.activeElement).toBe(undo));
+    });
+    it('reads Keep current status on a published document and leaves its change in review', async () => {
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        server.decide = (_jobId, _itemId, body) => body.onApprove === 'publish'
+            ? ok(decided(server.items.job_417[0], 'approved'), { documentStatus: 'PUBLISHED' })
+            : {
+                error: 'This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+                status: 409,
+            };
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        await approveWith(card('r01'), 'Save as draft');
+        await waitFor(() => expect(noteOf(card('r01'))).toContain('so the change stays in review'));
+        // The note isn't a live region (it appears with its text); the drawer announces it.
+        expect(card('r01').querySelector('[role="status"], [role="alert"]')).toBeNull();
+        expect(announced()).toBe('Post r01: This document is published, so the change stays in review. Approve it with Publish to apply it live.');
+        expect(within(card('r01')).queryByText('Approved')).toBeNull();
+        expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish']);
+        // Another document isn't known to be published.
+        expect(await menuOptions(card('r02'))).toEqual(['Save as draft', 'Publish']);
+    });
+    it('assumes published documents when the job only took published ones', async () => {
+        server.jobs = [
+            batch({
+                review: { pending: 1, approved: 0, rejected: 0 },
+                payload: { ...batch({}).payload, statusFilter: 'published' },
+            }),
+        ];
+        server.items.job_417 = pending('job_417', 1);
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish']);
+    });
+    it.each([
+        [
+            'changed while saving',
+            'The document changed while this was being saved, so nothing was written. Try again.',
+        ],
+        [
+            'the publish state moved',
+            'This document is published, so the change stays in review. Approve it with Publish to apply it live.',
+        ],
+    ])('explains a 409 when %s, and keeps the change pending', async (_, message) => {
+        server.jobs = [batch({ review: { pending: 1, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 1);
+        server.decide = () => ({ error: message, status: 409 });
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        await approveWith(card('r01'), 'Save as draft');
+        await waitFor(() => expect(card('r01').textContent).toContain(message));
+        expect(within(card('r01')).getByRole('button', { name: /^Approve/ })).toBeTruthy();
+    });
+    it('shows link changes as text, and explains a link whose page is gone', async () => {
+        const markup = 'Compare <b>plans</b> & pricing <img src=x onerror=alert(1)> on the page.';
+        server.jobs = [
+            batch({
+                id: 'job_413',
+                status: 'succeeded',
+                lockedAt: null,
+                title: 'Add internal links',
+                review: { pending: 1, approved: 0, rejected: 1 },
+            }),
+        ];
+        server.items.job_413 = [
+            item('l1', {
+                jobId: 'job_413',
+                field: 'body',
+                before: 'Learn more about us before you get in touch.',
+                after: 'Learn more <a href="/about">about us</a> before you get in touch.',
+            }),
+            item('l2', {
+                jobId: 'job_413',
+                field: 'body',
+                status: 'rejected',
+                before: markup,
+                after: markup.replace('the page', '<a href="/platform">the page</a>'),
+            }),
+        ];
+        server.decide = () => ({
+            error: "The page this links to, /about, isn't published at that address any more.",
+            status: 409,
+        });
+        await renderJobs();
+        await openJob('job_413', 'Review');
+        await waitFor(() => card('l2'));
+        expect(card('l2').querySelector('img, b, a[href="/platform"]')).toBeNull();
+        expect(card('l2').textContent).toContain('<b>plans</b>');
+        expect(card('l1').querySelector('mark')?.textContent).toBe('about us');
+        expect(card('l1').textContent).toContain('→ /about');
+        expect(within(card('l1')).queryByRole('button', { name: 'Edit' })).toBeNull();
+        await approveWith(card('l1'), 'Publish');
+        await waitFor(() => expect(noteOf(card('l1'))).toContain("isn't published at that address any more"));
+        expect(announced()).toContain("isn't published at that address any more");
+    });
+    it('shows the notice when undo leaves a document published', async () => {
+        const approvedItem = decided(item('r01'), 'approved');
+        server.jobs = [batch({ review: { pending: 0, approved: 1, rejected: 0 } })];
+        server.items.job_417 = [approvedItem];
+        const notice = 'The document stays published. Undo put back the previous text, and the page shows it now.';
+        server.decide = () => ok({ ...approvedItem, status: 'pending' }, { documentStatus: 'PUBLISHED', notice });
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        fireEvent.click(within(card('r01')).getByRole('button', { name: 'Undo' }));
+        await waitFor(() => expect(noteOf(card('r01'))).toContain(notice));
+        expect(announced()).toBe(`Post r01 is back in review. ${notice}`);
+        await waitFor(() => expect(document.activeElement).toBe(within(card('r01')).getByRole('button', { name: /^Approve/ })));
+        // The document is now known to be published.
+        expect(await menuOptions(card('r01'))).toEqual(['Keep current status', 'Publish']);
+    });
+    it('keeps an edit in progress across a poll and a tab switch, then approves the edit', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        fireEvent.click(within(card('r01')).getByRole('button', { name: 'Edit' }));
+        const box = within(card('r01')).getByRole('textbox', { name: 'Edit suggestion for Post r01' });
+        await waitFor(() => expect(document.activeElement).toBe(box));
+        fireEvent.change(box, { target: { value: 'Edited by hand.' } });
+        // A slice adds a suggestion: the list refresh sees the job change and the changes are read again.
+        server.items.job_417.push(item('r03'));
+        server.jobs = [
+            batch({ updatedAt: iso(5_000), review: { pending: 3, approved: 0, rejected: 0 } }),
+        ];
+        const before = posts('GET', '/review').length;
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(6_000);
+        });
+        await waitFor(() => expect(posts('GET', '/review').length).toBeGreaterThan(before));
+        await waitFor(() => card('r03'));
+        expect(within(card('r01')).getByRole('textbox').value).toBe('Edited by hand.');
+        fireEvent.click(within(dialog).getByRole('tab', { name: 'Overview' }));
+        fireEvent.click(within(dialog).getByRole('tab', { name: /^Review/ }));
+        await waitFor(() => card('r01'));
+        expect(within(card('r01')).getByRole('textbox').value).toBe('Edited by hand.');
+        await approveWith(card('r01'), 'Save as draft');
+        await within(card('r01')).findByRole('button', { name: 'Undo' });
+        expect(posts('POST', '/review/r01').at(-1)?.body).toEqual({
+            action: 'approve',
+            onApprove: 'draft',
+            after: 'Edited by hand.',
+        });
+        expect(card('r01').textContent).toContain('Edited by hand.');
+    });
+    it('re-reads the changes when one was decided elsewhere', async () => {
+        server.jobs = [batch({ review: { pending: 1, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 1);
+        let answer = () => { };
+        server.decide = () => new Promise((resolve) => {
+            answer = resolve;
+        });
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        await approveWith(card('r01'), 'Save as draft');
+        const trigger = within(card('r01')).getByRole('button', { name: /^Approve/ });
+        await waitFor(() => expect(document.activeElement).toBe(trigger));
+        server.items.job_417[0] = decided(server.items.job_417[0], 'rejected');
+        answer({ error: 'This change was already decided.', status: 409 });
+        await waitFor(() => expect(within(card('r01')).getByText('Rejected')).toBeTruthy());
+        expect(card('r01').textContent).toContain('This change was already decided.');
+        expect(announced()).toBe('Post r01: This change was already decided.');
+        // Approve went with the re-read; focus goes to the Undo that replaced it.
+        await waitFor(() => expect(document.activeElement).toBe(within(card('r01')).getByRole('button', { name: 'Undo' })));
+    });
+    it('puts focus on the panel when the change pressed is gone', async () => {
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        server.decide = () => {
+            server.items.job_417 = server.items.job_417.filter((entry) => entry.id !== 'r01');
+            return { error: 'This change no longer exists.', status: 409 };
+        };
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        const reject = within(card('r01')).getByRole('button', { name: 'Reject' });
+        reject.focus();
+        fireEvent.click(reject);
+        await waitFor(() => expect(dialog.querySelector('[data-review-item="r01"]')).toBeNull());
+        await waitFor(() => expect(document.activeElement).toBe(within(dialog).getByRole('tabpanel')));
+    });
+    it('leaves focus where the reviewer moved it while a decision was out', async () => {
+        server.jobs = [batch({ review: { pending: 2, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 2);
+        let answer = () => { };
+        server.decide = () => new Promise((resolve) => {
+            answer = resolve;
+        });
+        await renderJobs();
+        await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        await approveWith(card('r01'), 'Publish');
+        // The closed menu hands focus back to Approve (on a timer), while the request is out.
+        const trigger = within(card('r01')).getByRole('button', { name: /^Approve/ });
+        await waitFor(() => expect(document.activeElement).toBe(trigger));
+        // Meanwhile they start editing the next change.
+        fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }));
+        const box = within(card('r02')).getByRole('textbox');
+        await waitFor(() => expect(document.activeElement).toBe(box));
+        answer(ok(decided(server.items.job_417[0], 'approved'), { documentStatus: 'PUBLISHED' }));
+        await within(card('r01')).findByRole('button', { name: 'Undo' });
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(document.activeElement).toBe(box);
+    });
+    it('doesn’t approve all on a second click, a second Enter or a held key', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 3);
+        server.approveAll = () => ok({ approved: 3, skipped: 0, remaining: 0 });
+        await renderJobs();
+        const dialog = await openJob('job_417');
+        const footer = within(dialog).getByRole('button', { name: 'Review 3 changes' });
+        footer.focus();
+        // A double-click: the first opens Review, the second lands on Approve all.
+        fireEvent.click(footer);
+        fireEvent.click(footer);
+        await waitFor(() => card('r01'));
+        expect(footer.textContent).toBe('Approve all 3');
+        // Enter again, quickly.
+        fireEvent.keyDown(footer, { key: 'Enter' });
+        fireEvent.click(footer);
+        expect(posts('POST', '/approve-all')).toHaveLength(0);
+        await waitOutArming();
+        // A held Enter: its repeats click too.
+        fireEvent.keyDown(footer, { key: 'Enter', repeat: true });
+        fireEvent.click(footer);
+        expect(posts('POST', '/approve-all')).toHaveLength(0);
+        fireEvent.keyUp(footer, { key: 'Enter' });
+        fireEvent.keyDown(footer, { key: 'Enter' });
+        fireEvent.click(footer);
+        await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1));
+    });
+    it('approves an edit still open as edited when approving all', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 3);
+        server.approveAll = () => ok({ approved: 2, skipped: 0, remaining: 0 });
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r02'));
+        fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }));
+        fireEvent.change(within(card('r02')).getByRole('textbox'), {
+            target: { value: 'Rewritten by hand.' },
+        });
+        await waitOutArming();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('3 changes approved · saved as drafts', undefined));
+        const order = server.calls.filter((call) => call.method === 'POST').map((call) => call.endpoint);
+        expect(order).toEqual(['/jobs/job_417/review/r02', '/jobs/job_417/review/approve-all']);
+        expect(posts('POST', '/review/r02')[0]?.body).toEqual({
+            action: 'approve',
+            after: 'Rewritten by hand.',
+        });
+    });
+    it.each([
+        ['an emptied edit (400)', 400, 'The approved text is empty.'],
+        [
+            'changed while saving (409)',
+            409,
+            'The document changed while this was being saved, so nothing was written. Try again.',
+        ],
+        ['a server error', 500, 'Internal server error'],
+    ])('stops approving all when an open edit is refused: %s', async (_, status, message) => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 3);
+        server.decide = () => ({ error: message, status });
+        server.approveAll = () => ok({ approved: 3, skipped: 0, remaining: 0 });
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r02'));
+        fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }));
+        fireEvent.change(within(card('r02')).getByRole('textbox'), { target: { value: '' } });
+        await waitOutArming();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }));
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Approve all stopped', {
+            description: '1 edited change couldn’t be approved, so nothing else was, and the AI’s text doesn’t replace an edit. Each change says why.',
+        }));
+        // The server's approve-all never ran, so it couldn't apply the AI's text to r02.
+        expect(posts('POST', '/approve-all')).toHaveLength(0);
+        expect(announced()).toContain(`Post r02: ${message}`);
+        expect(noteOf(card('r02'))).toContain(message);
+        expect(within(card('r02')).getByRole('textbox')).toBeTruthy();
+        expect(within(card('r02')).queryByText('Approved')).toBeNull();
+    });
+    it('locks every change while approving all', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 3);
+        const approveEdit = server.decide;
+        let editAnswered = () => { };
+        server.decide = (jobId, itemId, body) => new Promise((resolve) => {
+            editAnswered = () => resolve(approveEdit(jobId, itemId, body));
+        });
+        let bulkAnswered = () => { };
+        server.approveAll = () => new Promise((resolve) => {
+            bulkAnswered = resolve;
+        });
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r02'));
+        fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }));
+        const box = within(card('r02')).getByRole('textbox');
+        fireEvent.change(box, { target: { value: 'Mine.' } });
+        await waitOutArming();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }));
+        const locked = () => {
+            // The open edit is read-only, so what's sent is what's shown.
+            expect(box.readOnly).toBe(true);
+            fireEvent.change(box, { target: { value: 'Mine, changed.' } });
+            expect(box.value).toBe('Mine.');
+            // Another change can't be edited or decided.
+            const edit = within(card('r01')).getByRole('button', { name: 'Edit' });
+            expect(edit.getAttribute('aria-disabled')).toBe('true');
+            fireEvent.click(edit);
+            expect(within(card('r01')).queryByRole('textbox')).toBeNull();
+            fireEvent.click(within(card('r01')).getByRole('button', { name: 'Reject' }));
+            expect(posts('POST', '/review/r01')).toHaveLength(0);
+        };
+        // While the edit is being approved…
+        await waitFor(() => expect(posts('POST', '/review/r02')).toHaveLength(1));
+        locked();
+        // …and while the server's approve-all runs.
+        act(() => editAnswered());
+        await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1));
+        expect(posts('POST', '/review/r02')[0]?.body).toEqual({ action: 'approve', after: 'Mine.' });
+        const edit = within(card('r01')).getByRole('button', { name: 'Edit' });
+        expect(edit.getAttribute('aria-disabled')).toBe('true');
+        fireEvent.click(edit);
+        expect(within(card('r01')).queryByRole('textbox')).toBeNull();
+        bulkAnswered(ok({ approved: 2, skipped: 0, remaining: 0 }));
+        await waitFor(() => expect(edit.getAttribute('aria-disabled')).toBeNull());
+        fireEvent.click(edit);
+        expect(within(card('r01')).getByRole('textbox')).toBeTruthy();
+    });
+    it('still approves all when an open edit stays in review on a published document', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({ review: { pending: 3, approved: 0, rejected: 0 } })];
+        server.items.job_417 = pending('job_417', 3);
+        const published = 'This document is published, so the change stays in review. Approve it with Publish to apply it live.';
+        server.decide = () => ({ error: published, status: 409 });
+        // The server skips that change too: it's published and the job saves drafts.
+        server.approveAll = () => ok({ approved: 2, skipped: 1, remaining: 1 });
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r02'));
+        fireEvent.click(within(card('r02')).getByRole('button', { name: 'Edit' }));
+        await waitOutArming();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 3' }));
+        await waitFor(() => expect(posts('POST', '/approve-all')).toHaveLength(1));
+        await waitFor(() => expect(announced()).toContain(`Post r02: ${published}`));
+    });
+    it('approves all, asking again while changes are left that it didn’t get to', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [
+            batch({
+                status: 'succeeded',
+                lockedAt: null,
+                review: { pending: 45, approved: 0, rejected: 0 },
+            }),
+        ];
+        server.items.job_417 = pending('job_417', 45);
+        const rounds = [
+            { approved: 20, skipped: 2, remaining: 25 },
+            { approved: 20, skipped: 3, remaining: 5 },
+            { approved: 2, skipped: 3, remaining: 3 },
+        ];
+        server.approveAll = () => ok(rounds.shift() ?? { approved: 0, skipped: 0, remaining: 0 });
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Review');
+        await waitFor(() => card('r01'));
+        await waitOutArming();
+        fireEvent.click(within(dialog).getByRole('button', { name: 'Approve all 45' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('42 changes approved · saved as drafts', {
+            description: '3 changes stayed in review. Changes to published documents need Publish, so approve those one at a time.',
+        }));
+        expect(posts('POST', '/approve-all')).toHaveLength(3);
+    });
+    it('hides Review from someone who can’t read the suggested changes', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [
+            batch({
+                status: 'succeeded',
+                lockedAt: null,
+                review: { pending: 6, approved: 0, rejected: 0 },
+            }),
+        ];
+        server.items.job_417 = pending('job_417', 6);
+        server.reviewError = {
+            status: 403,
+            message: 'Only people who can edit content can read suggested changes',
+        };
+        await renderJobs();
+        // The list's Review button asks for the Review tab.
+        fireEvent.click(within(rowButton('job_417').closest('li')).getByRole('button', { name: /Review/ }));
+        const dialog = await screen.findByRole('dialog');
+        await waitFor(() => expect(within(dialog)
+            .getAllByRole('tab')
+            .map((tab) => tab.textContent)).toEqual(['Overview', 'Activity', 'Details']));
+        expect(within(dialog).getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected')).toBe('true');
+        expect(within(dialog).queryByRole('button', { name: /Review \d/ })).toBeNull();
+        // The job changing doesn't ask again: the 403 stands while the drawer is open.
+        const asked = posts('GET', '/review').length;
+        server.jobs = [
+            batch({
+                status: 'succeeded',
+                lockedAt: null,
+                updatedAt: iso(5_000),
+                review: { pending: 7, approved: 0, rejected: 0 },
+            }),
+        ];
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(6_000);
+        });
+        await waitFor(() => expect(dialog.textContent).toContain('Activity'));
+        expect(posts('GET', '/review')).toHaveLength(asked);
+    });
+    it('shows an SEO scan’s results, linking each issue to its screen', async () => {
+        const onNavigate = vi.fn();
+        const seo = batch({
+            id: 'job_414',
+            type: 'seo-scan',
+            status: 'succeeded',
+            title: 'SEO scan',
+            scope: 'All indexable pages',
+            lockedAt: null,
+            createdBy: { kind: 'cron', schedule: 'weekly-seo' },
+            payload: { trigger: 'cron' },
+            summary: 'Score is up 4 points from last week.',
+            done: 340,
+            total: 340,
+            finishedAt: iso(-60 * MIN),
+        });
+        delete seo.review;
+        server.jobs = [seo];
+        server.details.job_414 = {
+            results: {
+                score: 78,
+                prevScore: 74,
+                found: 23,
+                resolved: 11,
+                categories: [
+                    {
+                        key: 'missing-meta',
+                        label: 'Missing meta description',
+                        count: 5,
+                        href: '/seo/content',
+                    },
+                    { key: 'bad', label: 'Somewhere else', count: 1, href: 'javascript:alert(1)' },
+                ],
+                digest: { sentAt: iso(-60 * MIN), recipients: 3 },
+            },
+        };
+        await renderJobs(onNavigate);
+        const dialog = await openJob('job_414', 'Results');
+        await within(dialog).findByText('Site score');
+        expect(within(dialog).getByText('+4')).toBeTruthy();
+        expect(dialog.textContent).toContain('Fixed since last scan11');
+        expect(within(dialog).getByText('Score is up 4 points from last week.')).toBeTruthy();
+        const link = within(dialog).getByRole('link', { name: /Missing meta description/ });
+        expect(link.getAttribute('href')).toBe('/seo/content');
+        fireEvent.click(link);
+        expect(onNavigate).toHaveBeenCalledWith('/seo/content');
+        expect(within(dialog).queryByRole('link', { name: /Somewhere else/ })).toBeNull();
+        expect(dialog.textContent).toContain('SEO digest: Sent to 3 people');
+    });
+    it('lists activity newest first, folding older finished slices', async () => {
+        server.jobs = [batch({})];
+        const slice = (minutes, n) => [
+            {
+                at: iso(-minutes * MIN),
+                kind: 'yielded',
+                message: 'Slice finished',
+                detail: `Processed ${n} of 42`,
+                durationMs: 11_800,
+                tokens: 920,
+            },
+            { at: iso(-minutes * MIN - 12_000), kind: 'claimed', message: 'Slice started' },
+        ];
+        server.events.job_417 = [
+            { at: iso(0), kind: 'claimed', message: 'Slice started' },
+            ...slice(1, 18),
+            ...slice(2, 17),
+            ...slice(3, 16),
+            ...slice(4, 15),
+            { at: iso(-19 * MIN), kind: 'queued', message: 'Queued' },
+        ];
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Activity');
+        const list = await within(dialog).findByRole('list');
+        const titles = within(list)
+            .getAllByRole('listitem')
+            .map((entry) => entry.querySelector('b, button')?.textContent);
+        expect(titles).toEqual([
+            'Slice started',
+            'Slice finished',
+            'Slice finished',
+            '2 earlier slices',
+            'Slice started',
+            'Queued',
+        ]);
+        expect(list.textContent).toContain('Processed 18 of 42 · 11.8s · 920 tokens · yielded');
+        expect(list.textContent).toContain('Brandon West started it');
+        const fold = within(list).getByRole('button', { name: '2 earlier slices' });
+        fireEvent.click(fold);
+        expect(fold.getAttribute('aria-expanded')).toBe('true');
+        expect(list.textContent).toContain('Processed 15 of 42');
+    });
+    it('keeps an open fold open, with focus on it, as the job’s events grow', async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        server.jobs = [batch({})];
+        const finished = (minutes, n) => ({
+            at: iso(-minutes * MIN),
+            kind: 'yielded',
+            message: 'Slice finished',
+            detail: `Processed ${n} of 42`,
+        });
+        server.events.job_417 = [
+            { at: iso(0), kind: 'claimed', message: 'Slice started' },
+            finished(1, 18),
+            finished(2, 17),
+            finished(3, 16),
+            finished(4, 15),
+            { at: iso(-19 * MIN), kind: 'queued', message: 'Queued' },
+        ];
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Activity');
+        const fold = await within(dialog).findByRole('button', { name: '2 earlier slices' });
+        fireEvent.click(fold);
+        fold.focus();
+        // A slice finishes: the newest event moves the fold's newer edge.
+        server.events.job_417 = [
+            { at: iso(5_000), kind: 'claimed', message: 'Slice started' },
+            finished(-0.05, 19),
+            ...server.events.job_417.slice(1),
+        ];
+        server.jobs = [batch({ updatedAt: iso(5_000), done: 20 })];
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(6_000);
+        });
+        await waitFor(() => expect(dialog.textContent).toContain('Processed 19 of 42'));
+        const after = within(dialog).getByRole('button', { name: '3 earlier slices' });
+        expect(after).toBe(fold);
+        expect(after.getAttribute('aria-expanded')).toBe('true');
+        expect(document.activeElement).toBe(fold);
+    });
+    it('shows the raw row, with the document ids counted', async () => {
+        server.jobs = [batch({})];
+        await renderJobs();
+        const dialog = await openJob('job_417', 'Details');
+        expect(dialog.textContent).toContain('The raw job row, for developers. Read only.');
+        const raw = within(dialog).getByLabelText('Job row as JSON').textContent ?? '';
+        expect(raw).toContain('"documentIds": "[3 ids]"');
+        expect(raw).toContain('"id": "job_417"');
+    });
+});
+//# sourceMappingURL=jobs-drawer.render.test.js.map