@prenta/admin 1.13.0 → 1.15.0

package/src/__tests__/views/seo-proposals-tab.render.test.tsx

@@ -0,0 +1,531 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import type {
+  SeoAutoApplyList,
+  SeoProposal,
+  SeoProposalBulkApplyResult,
+  SeoProposalsPayload,
+} from '../../lib/seo-service.js'
+
+function proposal(over: Partial<SeoProposal> = {}): SeoProposal {
+  return {
+    id: 'issue:i1',
+    kind: 'issue-fix',
+    title: 'Duplicate meta title',
+    entity: { type: 'page', id: 'd1', title: 'Pricing', url: '/pricing' },
+    changes: [{ field: 'metaTitle', label: 'Meta title', before: 'Dup', after: 'Unique Pricing' }],
+    justification: 'AI drafted a unique title.',
+    source: 'ai',
+    confidence: null,
+    brandAlignment: 88,
+    generatedAt: new Date(Date.now() - 3600_000).toISOString(),
+    fingerprint: 'fp-1',
+    stale: false,
+    issueType: 'duplicate-meta-title',
+    severity: 'warning',
+    issueId: 'i1',
+    suggestionId: null,
+    ...over,
+  }
+}
+
+function payload(over: Partial<SeoProposalsPayload> = {}): SeoProposalsPayload {
+  return {
+    proposals: [
+      proposal(),
+      proposal({
+        id: 'issue:i2',
+        issueId: 'i2',
+        fingerprint: 'fp-2',
+        title: 'Missing description',
+        brandAlignment: 60,
+      }),
+      proposal({
+        id: 'redirect:s1',
+        kind: 'redirect',
+        title: 'Redirect /old → /new',
+        source: 'ai-404-recovery',
+        confidence: 0.82,
+        brandAlignment: null,
+        fingerprint: null,
+        issueId: null,
+        suggestionId: 's1',
+        severity: null,
+        changes: [{ field: 'redirect', label: 'Redirect', before: '/old', after: '/new' }],
+      }),
+    ],
+    counts: { issueFixes: 2, redirects: 1, stale: 0, eligibleForGeneration: 5 },
+    governance: { issueFixBulk: true, redirectBulk: true },
+    autopilot: { enabled: false, pausedReason: null, lastRunAt: null, appliedLast7d: 0 },
+    ...over,
+  }
+}
+
+const fetchSeoProposals = vi.fn(async () => payload())
+const fetchAutopilotApplied = vi.fn(
+  async (_params: unknown): Promise<SeoAutoApplyList> => ({
+    docs: [],
+    total: 0,
+    page: 1,
+    pageSize: 20,
+    canRevert: false,
+  }),
+)
+const revertAutopilotChange = vi.fn(async (_id: string, _force?: boolean) => ({
+  ok: true as const,
+}))
+const generateSeoProposals = vi.fn(async () => ({
+  result: { generated: 2, skipped: 0, failed: 0, remaining: 0, haltedReason: null },
+}))
+const bulkApplySeoProposals = vi.fn(
+  async (_items: unknown): Promise<{ result?: SeoProposalBulkApplyResult; error?: string }> => ({
+    result: { results: [], applied: 0, failed: 0, pending: 0 },
+  }),
+)
+const dismissSeoIssueFix = vi.fn(async (_id: string): Promise<{ error?: string }> => ({}))
+const dismissRedirectSuggestion = vi.fn(async (_id: string): Promise<{ error?: string }> => ({}))
+
+vi.mock('../../lib/seo-service.js', () => ({
+  fetchSeoProposals: () => fetchSeoProposals(),
+  generateSeoProposals: () => generateSeoProposals(),
+  bulkApplySeoProposals: (items: unknown) => bulkApplySeoProposals(items),
+  dismissSeoIssueFix: (id: string) => dismissSeoIssueFix(id),
+  dismissRedirectSuggestion: (id: string) => dismissRedirectSuggestion(id),
+  fetchAutopilotApplied: (params: unknown) => fetchAutopilotApplied(params),
+  revertAutopilotChange: (id: string, force?: boolean) => revertAutopilotChange(id, force),
+}))
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn(), loading: vi.fn() },
+}))
+
+const { ProposalsTab } = await import('../../views/seo/ProposalsTab.js')
+const { toast } = await import('sonner')
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+/** Let any already-settled promise continuations run. */
+async function flushMicrotasks() {
+  await new Promise((r) => setTimeout(r, 0))
+}
+
+beforeEach(() => {
+  fetchSeoProposals.mockClear()
+  fetchSeoProposals.mockImplementation(async () => payload())
+  generateSeoProposals.mockClear()
+  bulkApplySeoProposals.mockClear()
+  dismissSeoIssueFix.mockClear()
+  dismissRedirectSuggestion.mockClear()
+  fetchAutopilotApplied.mockClear()
+  revertAutopilotChange.mockClear()
+  vi.mocked(toast.success).mockClear()
+  vi.mocked(toast.error).mockClear()
+})
+
+describe('ProposalsTab', () => {
+  it('renders rows with kind, badges, and expandable change preview', async () => {
+    render(<ProposalsTab planInfo={null} />)
+    expect(await screen.findByText('Duplicate meta title')).toBeTruthy()
+    expect(screen.getByText('82%')).toBeTruthy()
+    expect(screen.getByLabelText('Brand voice score 88 out of 100')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Show changes for Duplicate meta title' }))
+    expect(screen.getByRole('table', { name: 'Proposed SEO changes' })).toBeTruthy()
+    expect(screen.getByText('Unique Pricing')).toBeTruthy()
+  })
+
+  it('select-all selects only live rows and shows the bulk bar', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({
+        proposals: [
+          proposal(),
+          proposal({ id: 'issue:stale', issueId: 'stale', stale: true, title: 'Stale one' }),
+        ],
+        counts: { issueFixes: 1, redirects: 0, stale: 1, eligibleForGeneration: 1 },
+      }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Stale one')
+    expect(screen.getByText('Stale — regenerate')).toBeTruthy()
+    expect(screen.queryByLabelText('Select proposal Stale one')).toBeNull()
+    fireEvent.click(screen.getByLabelText('Select all proposals'))
+    expect(screen.getByRole('region', { name: 'Bulk actions' }).textContent).toContain('1 selected')
+  })
+
+  it('disables batch approve with a settings callout when governance forbids bulk apply', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({ governance: { issueFixBulk: false, redirectBulk: true } }),
+    )
+    const onNavigate = vi.fn()
+    render(<ProposalsTab planInfo={null} onNavigate={onNavigate} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select proposal Duplicate meta title'))
+    fireEvent.click(screen.getByLabelText('Select proposal Missing description'))
+    const approve = screen.getByRole('button', { name: 'Approve selected' })
+    expect(approve).toHaveProperty('disabled', true)
+    expect(screen.getByText(/Allow bulk apply/)).toBeTruthy()
+    expect(screen.queryByRole('link')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Open Settings → AI' }))
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=ai')
+  })
+
+  it('renders the governance callout without a settings control when onNavigate is absent', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({ governance: { issueFixBulk: false, redirectBulk: true } }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select all proposals'))
+    expect(screen.getByText(/Allow bulk apply/)).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Open Settings → AI' })).toBeNull()
+    expect(screen.queryByRole('link')).toBeNull()
+  })
+
+  it('issues a single bulk-apply request when approve is triggered twice while in flight', async () => {
+    const inflight = deferred<{ result?: SeoProposalBulkApplyResult; error?: string }>()
+    bulkApplySeoProposals.mockImplementationOnce(() => inflight.promise)
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    const approve = screen.getByRole('button', { name: 'Approve Duplicate meta title' })
+    fireEvent.click(approve)
+    fireEvent.click(approve)
+    fireEvent.click(screen.getByRole('button', { name: 'Approve Missing description' }))
+    await flushMicrotasks()
+    expect(bulkApplySeoProposals).toHaveBeenCalledTimes(1)
+    expect(approve).toHaveProperty('disabled', true)
+    inflight.resolve({ result: { results: [], applied: 0, failed: 0, pending: 0 } })
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Approve Duplicate meta title' })).toHaveProperty(
+        'disabled',
+        false,
+      ),
+    )
+  })
+
+  it('disables every other mutation control while an apply is in flight', async () => {
+    const inflight = deferred<{ result?: SeoProposalBulkApplyResult; error?: string }>()
+    bulkApplySeoProposals.mockImplementationOnce(() => inflight.promise)
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select all proposals'))
+    fireEvent.click(screen.getByRole('button', { name: 'Approve selected' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Apply 3 proposals' }))
+    await waitFor(() => expect(bulkApplySeoProposals).toHaveBeenCalledTimes(1))
+    expect(screen.getByRole('button', { name: 'Dismiss selected' })).toHaveProperty(
+      'disabled',
+      true,
+    )
+    expect(screen.getByRole('button', { name: 'Approve selected' })).toHaveProperty(
+      'disabled',
+      true,
+    )
+    expect(screen.getByRole('button', { name: 'Dismiss Duplicate meta title' })).toHaveProperty(
+      'disabled',
+      true,
+    )
+    expect(screen.getByRole('button', { name: 'Generate proposals (5 eligible)' })).toHaveProperty(
+      'disabled',
+      true,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss selected' }))
+    expect(dismissSeoIssueFix).not.toHaveBeenCalled()
+    inflight.resolve({ result: { results: [], applied: 0, failed: 0, pending: 0 } })
+    await waitFor(() =>
+      expect(
+        screen.getByRole('button', { name: 'Generate proposals (5 eligible)' }),
+      ).toHaveProperty('disabled', false),
+    )
+  })
+
+  it('re-enables controls and toasts when the apply request throws', async () => {
+    bulkApplySeoProposals.mockRejectedValueOnce(new Error('network down'))
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByRole('button', { name: 'Approve Duplicate meta title' }))
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('network down'))
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Approve Duplicate meta title' })).toHaveProperty(
+        'disabled',
+        false,
+      ),
+    )
+    expect(screen.getByRole('button', { name: 'Dismiss Duplicate meta title' })).toHaveProperty(
+      'disabled',
+      false,
+    )
+  })
+
+  it('stops the generate loop and stays silent after unmount', async () => {
+    const firstPass = deferred<{
+      result: {
+        generated: number
+        skipped: number
+        failed: number
+        remaining: number
+        haltedReason: null
+      }
+    }>()
+    generateSeoProposals.mockImplementationOnce(() => firstPass.promise)
+    const { unmount } = render(<ProposalsTab planInfo={null} />)
+    fireEvent.click(await screen.findByRole('button', { name: 'Generate proposals (5 eligible)' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Generate' }))
+    await waitFor(() => expect(generateSeoProposals).toHaveBeenCalledTimes(1))
+    unmount()
+    firstPass.resolve({
+      result: { generated: 1, skipped: 0, failed: 0, remaining: 1, haltedReason: null },
+    })
+    await flushMicrotasks()
+    await flushMicrotasks()
+    expect(generateSeoProposals).toHaveBeenCalledTimes(1)
+    expect(toast.success).not.toHaveBeenCalled()
+    expect(toast.error).not.toHaveBeenCalled()
+  })
+
+  it('confirming batch approve calls bulkApplySeoProposals with selected items and reports partial results', async () => {
+    bulkApplySeoProposals.mockResolvedValueOnce({
+      result: {
+        results: [
+          { kind: 'issue-fix', id: 'i1', status: 'applied' },
+          { kind: 'issue-fix', id: 'i2', status: 'stale', reason: 'stale' },
+        ],
+        applied: 1,
+        failed: 1,
+        pending: 0,
+      },
+    })
+    const { toast } = await import('sonner')
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select proposal Duplicate meta title'))
+    fireEvent.click(screen.getByLabelText('Select proposal Missing description'))
+    fireEvent.click(screen.getByRole('button', { name: 'Approve selected' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Apply 2 proposals' }))
+    await waitFor(() =>
+      expect(bulkApplySeoProposals).toHaveBeenCalledWith([
+        { kind: 'issue-fix', id: 'i1', fingerprint: 'fp-1' },
+        { kind: 'issue-fix', id: 'i2', fingerprint: 'fp-2' },
+      ]),
+    )
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('1 proposal applied.'))
+    expect(toast.error).toHaveBeenCalledWith(expect.stringContaining('1 could not be applied'))
+  })
+
+  it('offers "Apply remaining" when the server reports pending items', async () => {
+    bulkApplySeoProposals.mockResolvedValueOnce({
+      result: {
+        results: [
+          { kind: 'issue-fix', id: 'i1', status: 'applied' },
+          { kind: 'issue-fix', id: 'i2', status: 'pending' },
+        ],
+        applied: 1,
+        failed: 0,
+        pending: 1,
+      },
+    })
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select all proposals'))
+    fireEvent.click(screen.getByRole('button', { name: 'Approve selected' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Apply 3 proposals' }))
+    expect(await screen.findByRole('button', { name: 'Apply remaining (1)' })).toBeTruthy()
+  })
+
+  it('dismiss selected fans out to the per-kind dismiss helpers', async () => {
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(screen.getByLabelText('Select all proposals'))
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss selected' }))
+    await waitFor(() => expect(dismissSeoIssueFix).toHaveBeenCalledTimes(2))
+    expect(dismissRedirectSuggestion).toHaveBeenCalledWith('s1')
+  })
+
+  it('generate loops while remaining > 0 and shows the eligible count', async () => {
+    generateSeoProposals
+      .mockResolvedValueOnce({
+        result: { generated: 10, skipped: 0, failed: 0, remaining: 3, haltedReason: null },
+      })
+      .mockResolvedValueOnce({
+        result: { generated: 3, skipped: 0, failed: 0, remaining: 0, haltedReason: null },
+      })
+    const { toast } = await import('sonner')
+    render(<ProposalsTab planInfo={null} />)
+    const button = await screen.findByRole('button', { name: 'Generate proposals (5 eligible)' })
+    fireEvent.click(button)
+    fireEvent.click(await screen.findByRole('button', { name: 'Generate' }))
+    await waitFor(() => expect(generateSeoProposals).toHaveBeenCalledTimes(2))
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith('13 proposals generated.'))
+  })
+
+  it('disables Generate when nothing is eligible and shows the empty state', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({
+        proposals: [],
+        counts: { issueFixes: 0, redirects: 0, stale: 0, eligibleForGeneration: 0 },
+      }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    expect(await screen.findByText('No proposals yet')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Generate proposals (0 eligible)' })).toHaveProperty(
+      'disabled',
+      true,
+    )
+  })
+
+  it('renders the applied-by-autopilot section under the proposals card', async () => {
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    expect(await screen.findByText('Applied by autopilot')).toBeTruthy()
+    await waitFor(() => expect(fetchAutopilotApplied).toHaveBeenCalledTimes(1))
+    expect(await screen.findByText('Autopilot has not applied anything yet')).toBeTruthy()
+  })
+
+  it('shows no autopilot chip while autopilot is disabled', async () => {
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    expect(screen.queryByRole('button', { name: /autopilot (on|paused)/i })).toBeNull()
+  })
+
+  it('shows an "Autopilot on" chip with the weekly count that opens SEO settings', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({
+        autopilot: {
+          enabled: true,
+          pausedReason: null,
+          lastRunAt: '2026-09-07T03:00:00.000Z',
+          appliedLast7d: 4,
+        },
+      }),
+    )
+    const onNavigate = vi.fn()
+    render(<ProposalsTab planInfo={null} onNavigate={onNavigate} />)
+    await screen.findByText('Duplicate meta title')
+    const chip = screen.getByRole('button', { name: 'Autopilot on · 4 applied this week' })
+    fireEvent.click(chip)
+    expect(onNavigate).toHaveBeenCalledWith('/settings?tab=seo')
+  })
+
+  it('shows a paused chip with a short reason when autopilot is paused', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({
+        autopilot: {
+          enabled: true,
+          pausedReason: 'outcome_regression',
+          lastRunAt: null,
+          appliedLast7d: 1,
+        },
+      }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    expect(
+      screen.getByRole('button', { name: 'Autopilot paused — traffic regression' }),
+    ).toBeTruthy()
+    expect(screen.queryByRole('button', { name: /applied this week/ })).toBeNull()
+  })
+
+  it.each([
+    ['owner_unavailable', 'Autopilot paused — owner unavailable'],
+    ['manual', 'Autopilot paused — paused by admin'],
+    ['some_future_reason', 'Autopilot paused — some_future_reason'],
+  ])('labels the %s pause reason as "%s"', async (pausedReason, name) => {
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({ autopilot: { enabled: true, pausedReason, lastRunAt: null, appliedLast7d: 0 } }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    expect(screen.getByRole('button', { name })).toBeTruthy()
+  })
+
+  it('shows no chip when autopilot was disabled while still paused', async () => {
+    // `PUT { enabled: false }` does not clear the pause; a disabled engine is
+    // simply off, not "paused".
+    fetchSeoProposals.mockImplementationOnce(async () =>
+      payload({
+        autopilot: { enabled: false, pausedReason: 'manual', lastRunAt: null, appliedLast7d: 0 },
+      }),
+    )
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    expect(screen.queryByRole('button', { name: /autopilot/i })).toBeNull()
+  })
+
+  it('shows no chip and does not throw when the payload predates autopilot', async () => {
+    fetchSeoProposals.mockImplementationOnce(async () => {
+      // A `@prenta/core` deployed before autopilot shipped omits the field entirely.
+      const legacy: Partial<SeoProposalsPayload> = payload()
+      delete legacy.autopilot
+      return legacy as SeoProposalsPayload
+    })
+    render(<ProposalsTab planInfo={null} />)
+    expect(await screen.findByText('Duplicate meta title')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: /autopilot (on|paused)/i })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Generate proposals (5 eligible)' })).toBeTruthy()
+  })
+
+  it('refreshes the applied section after a proposal is approved', async () => {
+    render(<ProposalsTab planInfo={null} />)
+    await screen.findByText('Duplicate meta title')
+    await waitFor(() => expect(fetchAutopilotApplied).toHaveBeenCalledTimes(1))
+    fireEvent.click(screen.getByRole('button', { name: 'Approve Duplicate meta title' }))
+    await waitFor(() => expect(bulkApplySeoProposals).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(fetchAutopilotApplied).toHaveBeenCalledTimes(2))
+  })
+
+  it('refetches the inbox and notifies the parent after an autopilot change is reverted', async () => {
+    fetchAutopilotApplied.mockImplementation(async () => ({
+      docs: [
+        {
+          id: 'la-1',
+          kind: 'issue-fix',
+          issueType: 'missing-meta-title',
+          entityId: 'd1',
+          collection: 'pages',
+          entityTitle: 'Pricing',
+          entityUrl: '/pricing',
+          path: '/pricing',
+          before: { metaTitle: null },
+          after: { metaTitle: 'Pricing for growing teams' },
+          gate: { source: 'ai', brandAlignment: 92, confidence: null, checks: {} },
+          status: 'applied',
+          outcome: 'pending',
+          outcomeMetrics: null,
+          appliedAt: new Date().toISOString(),
+          revertedAt: null,
+          revertReason: null,
+        },
+      ],
+      total: 1,
+      page: 1,
+      pageSize: 20,
+      canRevert: true,
+    }))
+    const onChanged = vi.fn()
+    render(<ProposalsTab planInfo={null} onChanged={onChanged} />)
+    await screen.findByText('Duplicate meta title')
+    fireEvent.click(await screen.findByRole('button', { name: 'Revert change to Pricing' }))
+    fireEvent.click(await screen.findByRole('button', { name: 'Revert change' }))
+    await waitFor(() => expect(revertAutopilotChange).toHaveBeenCalledWith('la-1', false))
+    // The revert reopened the issue server-side: the inbox and the SEO page must both refresh.
+    await waitFor(() => expect(fetchSeoProposals).toHaveBeenCalledTimes(2))
+    await waitFor(() => expect(onChanged).toHaveBeenCalledTimes(1))
+    // The ledger reloads itself once; the parent must not bump `refreshKey` on top.
+    await waitFor(() => expect(fetchAutopilotApplied).toHaveBeenCalledTimes(2))
+    await flushMicrotasks()
+    expect(fetchAutopilotApplied).toHaveBeenCalledTimes(2)
+  })
+
+  it('hides Generate behind the plan callout when seo.inlineApply is off', async () => {
+    render(<ProposalsTab planInfo={{ tier: 'starter', features: [], upgradeUrl: null }} />)
+    await screen.findByText('Duplicate meta title')
+    expect(screen.queryByRole('button', { name: /Generate proposals/ })).toBeNull()
+    expect(screen.getByText(/Upgrade to unlock SEO inline apply/)).toBeTruthy()
+  })
+})

package/src/__tests__/views/seo-settings.render.test.tsx

@@ -2,10 +2,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
-// The SEO defaults tab reads six shared backends: /seo/config (meta defaults +
+// The SEO defaults tab reads seven shared backends: /seo/config (meta defaults +
 // verification), /seo/crawl-settings (sitemap toggles), /seo/sitemap/status
 // (read-only summary), /seo/index-status (environment), /seo/search-console
-// (Search data card), and /seo/digest-settings (Weekly SEO digest card).
+// (Search data card), /seo/autopilot/settings (SEO Autopilot card), and
+// /seo/digest-settings (Weekly SEO digest card).
 // `defaultApi` is the per-path route map; individual tests override the mock
 // implementation and delegate back to it for unrelated paths.
 type MockApiResponse = { data?: unknown; error?: string; status: number }
@@ -80,6 +81,28 @@ async function defaultApi(
       status: 200,
     }
   }
+  if (endpoint === '/seo/autopilot/settings' && method === 'GET') {
+    return {
+      data: {
+        enabled: false,
+        enabledById: null,
+        pausedAt: null,
+        pausedReason: null,
+        types: {},
+        pausedTypes: {},
+        minBrandAlignment: 85,
+        redirectMinConfidence: 85,
+        maxPerRun: 5,
+        maxPerDay: 20,
+        verifyFailuresPerRun: 2,
+        outcomeWatch: { enabled: true, days: 14, dropRatio: 0.4, minPriorClicks: 50 },
+        lastRunAt: null,
+        lastRun: null,
+        governance: { issueFixApprovalRequired: false, redirectApprovalRequired: false },
+      },
+      status: 200,
+    }
+  }
   return { data: {}, status: 200 }
 }
 
@@ -98,6 +121,7 @@ vi.mock('sonner', () => ({
     success: (...args: unknown[]) => toastSuccess(...args),
     error: (...args: unknown[]) => toastError(...args),
     warning: vi.fn(),
+    info: vi.fn(),
     loading: vi.fn(),
   },
 }))
@@ -331,6 +355,23 @@ describe('SeoSettingsTab', () => {
     expect(body.serviceAccountKey).toContain('svc@acme.iam.gserviceaccount.com')
   })
 
+  it('renders the SEO Autopilot card between Search data and the digest', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    // The title also renders in the card's skeleton state; wait for a control
+    // that only exists once the settings have loaded.
+    const toggle = await screen.findByRole('switch', { name: 'Enable autopilot' })
+    expect(toggle.getAttribute('aria-checked')).toBe('false')
+    const regions = screen
+      .getAllByRole('region')
+      .map((r) => r.getAttribute('aria-labelledby'))
+      .map((id) => (id ? document.getElementById(id)?.textContent : null))
+    const order = ['Search data', 'SEO Autopilot', 'Weekly SEO digest'].map((t) =>
+      regions.indexOf(t),
+    )
+    expect(order.every((i) => i >= 0)).toBe(true)
+    expect(order).toEqual([...order].sort((a, b) => a - b))
+  })
+
   it('renders the Weekly SEO digest card with the toggle off by default', async () => {
     render(<SeoSettingsTab role="ADMIN" />)
     expect(await screen.findByText('Weekly SEO digest')).toBeTruthy()
@@ -342,12 +383,13 @@ describe('SeoSettingsTab', () => {
 
   it('saves recipients as a trimmed, comma-split list', async () => {
     render(<SeoSettingsTab role="ADMIN" />)
-    await screen.findByText('Weekly SEO digest')
+    // 'Weekly SEO digest' is also the loading-state title; wait for the form.
+    const save = await screen.findByRole('button', { name: 'Save recipients' })
 
     fireEvent.change(screen.getByLabelText('Recipients'), {
       target: { value: ' a@x.com , b@x.com ' },
     })
-    fireEvent.click(screen.getByRole('button', { name: 'Save recipients' }))
+    fireEvent.click(save)
 
     await waitFor(() =>
       expect(cmsApi).toHaveBeenCalledWith(
@@ -370,9 +412,7 @@ describe('SeoSettingsTab', () => {
       return defaultApi(endpoint, options)
     })
     render(<SeoSettingsTab role="ADMIN" />)
-    await screen.findByText('Weekly SEO digest')
-
-    fireEvent.click(screen.getByRole('button', { name: /Send test digest/ }))
+    fireEvent.click(await screen.findByRole('button', { name: /Send test digest/ }))
 
     await waitFor(() =>
       expect(toastError).toHaveBeenCalledWith('No completed SEO audit yet — run an audit first'),

package/src/components/seo/ChangePreview.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import type { SeoFixFieldChange } from '../../lib/seo-service.js'
+
+function formatValue(value: string | boolean | null): string {
+  if (value === null || value === '') return '—'
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (value.length > 280) return `${value.slice(0, 277)}…`
+  return value
+}
+
+/** Before/after table for a proposed SEO change set. Shared by the issue fix panel and the proposals inbox. */
+export function ChangePreview({ changes }: { changes: SeoFixFieldChange[] }) {
+  if (changes.length === 0) return null
+  return (
+    <div className="border-border overflow-x-auto rounded-md border">
+      <table className="w-full min-w-[480px] text-sm" aria-label="Proposed SEO changes">
+        <thead>
+          <tr className="border-border bg-muted/40 text-muted-foreground border-b text-left">
+            <th scope="col" className="py-2 pr-3 pl-3 font-medium">
+              Field
+            </th>
+            <th scope="col" className="py-2 pr-3 font-medium">
+              Current
+            </th>
+            <th scope="col" className="py-2 pr-3 font-medium">
+              Proposed
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-border divide-y">
+          {changes.map((c) => (
+            <tr key={c.field}>
+              <td className="text-foreground py-2 pr-3 pl-3 font-medium">{c.label}</td>
+              <td className="text-muted-foreground max-w-48 py-2 pr-3 wrap-break-word">
+                {formatValue(c.before)}
+              </td>
+              <td className="text-foreground max-w-48 py-2 pr-3 wrap-break-word">
+                {formatValue(c.after)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}