@prenta/admin 0.97.4 → 0.98.0

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

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+
+const baseRun = {
+  id: 'audit-1',
+  status: 'COMPLETED',
+  scope: 'full',
+  startedAt: '2026-08-11T12:00:00.000Z',
+  finishedAt: '2026-08-11T12:00:01.000Z',
+  siteScoreBefore: 70,
+  siteScoreAfter: 82,
+  pagesScanned: 10,
+  issuesFound: 3,
+  criticalCount: 0,
+  warningCount: 2,
+  infoCount: 1,
+  errorMessage: null,
+}
+
+let latestRun: Record<string, unknown> = { ...baseRun }
+
+const cmsApi = vi.fn(async (endpoint: string) => {
+  if (endpoint === '/seo/audits') {
+    return { data: { runs: [latestRun] }, status: 200 }
+  }
+  if (endpoint.startsWith('/seo/issues')) {
+    return { data: { issues: [] }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (endpoint: string) => cmsApi(endpoint),
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), message: vi.fn() },
+}))
+
+const { AuditTab } = await import('../../views/seo/AuditTab.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  latestRun = { ...baseRun }
+})
+
+describe('AuditTab rendered audit coverage', () => {
+  it('shows safe coverage details and a warning for partial runs', async () => {
+    latestRun = {
+      ...baseRun,
+      metadata: {
+        renderedAudit: {
+          enabled: true,
+          originSource: 'override',
+          verified: 8,
+          unverified: 2,
+          notAttempted: 0,
+          partial: true,
+          bytesRead: 2048,
+          durationMs: 50,
+          reasons: [{ reason: 'timeout', count: 2 }],
+        },
+      },
+    }
+
+    render(<AuditTab />)
+
+    expect(await screen.findByText('8 verified')).toBeTruthy()
+    expect(screen.getByText('2 unverified')).toBeTruthy()
+    const warning = screen.getByRole('status')
+    expect(warning.textContent).toContain('The score covers 8 verified pages.')
+    expect(warning.textContent).toContain('their prior rendered-dependent issues were preserved.')
+    expect(screen.queryByText(/timeout/i)).toBeNull()
+    expect(screen.queryByText(/https?:\/\//i)).toBeNull()
+    expect(screen.queryByText(/transport error/i)).toBeNull()
+  })
+
+  it('does not show a partial warning for complete coverage', async () => {
+    latestRun = {
+      ...baseRun,
+      metadata: {
+        renderedAudit: {
+          enabled: true,
+          originSource: 'config',
+          verified: 10,
+          unverified: 0,
+          notAttempted: 0,
+          partial: false,
+          bytesRead: 4096,
+          durationMs: 40,
+          reasons: [],
+        },
+      },
+    }
+
+    render(<AuditTab />)
+
+    expect(await screen.findByText('10 verified')).toBeTruthy()
+    expect(screen.getByText('0 unverified')).toBeTruthy()
+    expect(screen.queryByText('Partial rendered audit')).toBeNull()
+    expect(screen.queryByRole('status')).toBeNull()
+  })
+
+  it('renders legacy audit runs without coverage or warnings', async () => {
+    render(<AuditTab />)
+
+    await waitFor(() => expect(screen.getByText('10')).toBeTruthy())
+    expect(screen.queryByText(/verified$/i)).toBeNull()
+    expect(screen.queryByText('Partial rendered audit')).toBeNull()
+    expect(screen.queryByRole('status')).toBeNull()
+  })
+})

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

@@ -0,0 +1,156 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { toast } from 'sonner'
+
+const initialCrawlSettings = {
+  indexEntireSite: true,
+  includeImagesInSitemap: true,
+  includePostsInSitemap: true,
+  sitemapEnabled: true,
+  autoRegenerateSitemapOnPublish: true,
+  pingSearchEnginesOnPublish: true,
+  auditRenderedHtml: true,
+}
+
+let crawlSettings = { ...initialCrawlSettings }
+let failNextPut = false
+let pendingPut: Promise<{ data?: unknown; error?: string }> | null = null
+
+const cmsApi = vi.fn(async (endpoint: string, options?: RequestInit) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/seo/crawl-settings' && method === 'GET') {
+    return { data: { ...crawlSettings }, status: 200 }
+  }
+  if (endpoint === '/seo/crawl-settings' && method === 'PUT') {
+    if (pendingPut) await pendingPut
+    if (failNextPut) {
+      failNextPut = false
+      return { error: 'Unable to save crawl settings.', status: 500 }
+    }
+    crawlSettings = {
+      ...crawlSettings,
+      ...(JSON.parse(String(options?.body)) as Partial<typeof initialCrawlSettings>),
+    }
+    return { data: { ...crawlSettings }, status: 200 }
+  }
+  if (endpoint === '/seo/sitemap/status') {
+    return {
+      data: {
+        sitemapUrl: 'https://example.test/sitemap.xml',
+        lastGeneratedAt: null,
+        pagesIncluded: 10,
+        pagesExcluded: 0,
+        autoRegenerateOnPublish: true,
+        errors: [],
+        warnings: [],
+      },
+      status: 200,
+    }
+  }
+  if (endpoint === '/seo/robots') {
+    return { data: { body: 'User-agent: *\nAllow: /', generated: true }, status: 200 }
+  }
+  if (endpoint === '/ai-crawlers') {
+    return {
+      data: { enabled: false, rows: [], totals: { hits: 0, bots: 0, honeypot: 0 } },
+      status: 200,
+    }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (endpoint: string, options?: RequestInit) => cmsApi(endpoint, options),
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn(), message: vi.fn() },
+}))
+
+const { TechnicalTab } = await import('../../views/seo/TechnicalTab.js')
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  vi.mocked(toast.error).mockClear()
+  crawlSettings = { ...initialCrawlSettings }
+  failNextPut = false
+  pendingPut = null
+})
+
+describe('TechnicalTab rendered audit setting', () => {
+  it('renders the accessible setting and persists changes', async () => {
+    render(<TechnicalTab />)
+
+    const renderedAudit = await screen.findByRole('switch', {
+      name: /Audit rendered public HTML/i,
+      description: 'Fetch public page output so audits grade crawler-visible headings and content.',
+    })
+    expect(renderedAudit.getAttribute('aria-checked')).toBe('true')
+
+    fireEvent.click(renderedAudit)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/crawl-settings',
+        expect.objectContaining({
+          method: 'PUT',
+          body: JSON.stringify({ auditRenderedHtml: false }),
+        }),
+      ),
+    )
+  })
+
+  it('disables crawl switches while a setting is saving', async () => {
+    let resolvePut: (() => void) | undefined
+    pendingPut = new Promise((resolve) => {
+      resolvePut = () => resolve({})
+    })
+    render(<TechnicalTab />)
+
+    fireEvent.click(await screen.findByRole('switch', { name: /Audit rendered public HTML/i }))
+
+    await waitFor(() => {
+      for (const toggle of screen.getAllByRole('switch')) {
+        expect((toggle as HTMLButtonElement).disabled).toBe(true)
+      }
+    })
+
+    resolvePut?.()
+    await waitFor(() =>
+      expect(
+        (
+          screen.getByRole('switch', {
+            name: /Audit rendered public HTML/i,
+          }) as HTMLButtonElement
+        ).disabled,
+      ).toBe(false),
+    )
+  })
+
+  it('reports save failures and refetches the server value', async () => {
+    failNextPut = true
+    render(<TechnicalTab />)
+
+    const renderedAudit = await screen.findByRole('switch', {
+      name: /Audit rendered public HTML/i,
+    })
+    const getCallsBeforeSave = cmsApi.mock.calls.filter(
+      ([endpoint, options]) =>
+        endpoint === '/seo/crawl-settings' &&
+        ((options as RequestInit | undefined)?.method ?? 'GET') === 'GET',
+    ).length
+
+    fireEvent.click(renderedAudit)
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Unable to save crawl settings.'))
+    await waitFor(() => expect(renderedAudit.getAttribute('aria-checked')).toBe('true'))
+    expect(
+      cmsApi.mock.calls.filter(
+        ([endpoint, options]) =>
+          endpoint === '/seo/crawl-settings' &&
+          ((options as RequestInit | undefined)?.method ?? 'GET') === 'GET',
+      ).length,
+    ).toBeGreaterThan(getCallsBeforeSave)
+  })
+})

package/src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@
 
 import * as Dialog from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
-import { type ReactNode, type RefObject } from 'react'
+import { type ReactNode, type RefObject, useRef } from 'react'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 
 const MODAL_SIZE_CLASS = {
@@ -41,6 +41,22 @@ export interface ModalProps {
   onDismiss?: () => void
 }
 
+/**
+ * True when the event originated inside a *different* `[role="dialog"]` than
+ * `content` (e.g. MediaPickerModal / ConfirmDialog portaled above this Modal).
+ * Nested dialogs must own their own dismiss; treating their clicks as "outside"
+ * would discard the parent form before the nested selection can apply
+ * (UpChat #27 / featured-image picker).
+ */
+export function isNestedDialogEvent(
+  target: EventTarget | null,
+  content: EventTarget | null,
+): boolean {
+  if (!(target instanceof Element) || !(content instanceof Element)) return false
+  const owningDialog = target.closest('[role="dialog"]')
+  return Boolean(owningDialog && owningDialog !== content)
+}
+
 /**
  * The canonical admin modal. Built on Radix `Dialog`, which provides the
  * accessibility contract for free: focus is trapped while open and restored to
@@ -64,6 +80,7 @@ export function Modal({
   onDismiss,
 }: ModalProps) {
   const scrollBody = size === 'xl'
+  const contentRef = useRef<HTMLDivElement>(null)
 
   function handleDismissAttempt() {
     if (onDismiss) onDismiss()
@@ -80,8 +97,15 @@ export function Modal({
       <Dialog.Portal container={adminPortalContainer()}>
         <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
         <Dialog.Content
+          ref={contentRef}
           className={`bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none ${MODAL_SIZE_CLASS[size]}`}
           onInteractOutside={(event) => {
+            // Radix dispatches this custom event on the outside target, so
+            // `event.currentTarget` is not the parent Dialog.Content.
+            if (isNestedDialogEvent(event.target, contentRef.current)) {
+              event.preventDefault()
+              return
+            }
             if (!onDismiss) return
             event.preventDefault()
             handleDismissAttempt()

package/src/lib/seo-service.ts

@@ -299,6 +299,18 @@ export function applyContentSeoQuery(
 
 export type SeoAuditScope = 'full' | 'content' | 'technical' | 'redirect'
 
+export interface RenderedAuditSummary {
+  enabled: boolean
+  originSource: 'override' | 'config' | null
+  verified: number
+  unverified: number
+  notAttempted: number
+  partial: boolean
+  bytesRead: number
+  durationMs: number
+  reasons: Array<{ reason: string; count: number }>
+}
+
 export interface SeoAuditRun {
   id: string
   status: 'RUNNING' | 'COMPLETED' | 'FAILED'
@@ -313,12 +325,27 @@ export interface SeoAuditRun {
   warningCount: number
   infoCount: number
   errorMessage: string | null
+  metadata: {
+    renderedAudit?: RenderedAuditSummary
+  } | null
+}
+
+export interface SeoAuditRunResponse {
+  id: string
+  status: 'COMPLETED'
+  siteScoreAfter: number
+  issuesFound: number
+  criticalCount: number
+  warningCount: number
+  infoCount: number
+  pagesScanned: number
+  renderedAudit: RenderedAuditSummary
 }
 
 export async function runSeoAudit(
   scope: SeoAuditScope = 'full',
-): Promise<{ run?: SeoAuditRun; error?: string }> {
-  const res = await cmsApi<SeoAuditRun>('/seo/audit', {
+): Promise<{ run?: SeoAuditRunResponse; error?: string }> {
+  const res = await cmsApi<SeoAuditRunResponse>('/seo/audit', {
     method: 'POST',
     body: JSON.stringify({ scope }),
   })
@@ -662,6 +689,7 @@ export interface CrawlSettings {
   sitemapEnabled: boolean
   autoRegenerateSitemapOnPublish: boolean
   pingSearchEnginesOnPublish: boolean
+  auditRenderedHtml: boolean
 }
 
 export async function fetchSitemapStatus(): Promise<SitemapStatus | null> {

package/src/views/seo/AuditTab.tsx

@@ -1,7 +1,14 @@
 'use client'
 
 import { Fragment, useMemo, useState } from 'react'
-import { ClipboardCheck, Clock, CheckCircle2, FileDown, Sparkles } from 'lucide-react'
+import {
+  AlertTriangle,
+  ClipboardCheck,
+  Clock,
+  CheckCircle2,
+  FileDown,
+  Sparkles,
+} from 'lucide-react'
 import { toast } from 'sonner'
 import {
   fetchSeoIssues,
@@ -61,34 +68,60 @@ function issueStatusTone(status: SeoIssueStatus) {
 function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
   const { data, loading } = useSeoResource(fetchSeoAuditRuns, [refetchKey])
   const last = (data ?? [])[0]
+  const coverage = last?.metadata?.renderedAudit
   return (
-    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
-      <div className="border-border bg-card rounded-lg border p-4">
-        <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
-          <Clock className="h-3.5 w-3.5" aria-hidden /> Last audit
-        </p>
-        <p className="text-foreground mt-1 text-sm font-medium">
-          {loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never'}
-        </p>
-      </div>
-      <div className="border-border bg-card rounded-lg border p-4">
-        <p className="text-muted-foreground text-sm">Pages scanned</p>
-        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
-          {last?.pagesScanned ?? 0}
-        </p>
-      </div>
-      <div className="border-border bg-card rounded-lg border p-4">
-        <p className="text-muted-foreground text-sm">Issues found</p>
-        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
-          {last?.issuesFound ?? 0}
-        </p>
-      </div>
-      <div className="border-border bg-card rounded-lg border p-4">
-        <p className="text-muted-foreground text-sm">Site score</p>
-        <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
-          {last?.siteScoreAfter ?? '—'}
-        </p>
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
+            <Clock className="h-3.5 w-3.5" aria-hidden /> Last audit
+          </p>
+          <p className="text-foreground mt-1 text-sm font-medium">
+            {loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never'}
+          </p>
+        </div>
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-muted-foreground text-sm">Pages scanned</p>
+          <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+            {last?.pagesScanned ?? 0}
+          </p>
+          {coverage ? (
+            <p className="text-muted-foreground mt-1 flex flex-wrap gap-x-3 text-sm">
+              <span>{coverage.verified} verified</span>
+              <span>{coverage.unverified} unverified</span>
+            </p>
+          ) : null}
+        </div>
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-muted-foreground text-sm">Issues found</p>
+          <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+            {last?.issuesFound ?? 0}
+          </p>
+        </div>
+        <div className="border-border bg-card rounded-lg border p-4">
+          <p className="text-muted-foreground text-sm">Site score</p>
+          <p className="text-foreground mt-1 text-2xl font-medium tabular-nums">
+            {last?.siteScoreAfter ?? '—'}
+          </p>
+        </div>
       </div>
+      {coverage?.partial ? (
+        <div
+          role="status"
+          className="border-warning/30 bg-warning/10 text-foreground rounded-lg border p-4"
+        >
+          <div className="flex items-start gap-3">
+            <AlertTriangle size={20} className="text-warning shrink-0" aria-hidden="true" />
+            <div>
+              <p className="font-medium">Partial rendered audit</p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                The score covers {coverage.verified} verified pages. Evidence was unavailable for{' '}
+                {coverage.unverified}; their prior rendered-dependent issues were preserved.
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/views/seo/TechnicalTab.tsx

@@ -55,6 +55,11 @@ const CRAWL_TOGGLES: { key: keyof CrawlSettings; label: string; help: string }[]
     label: 'Ping search engines on publish',
     help: 'Notify Google and Bing when the sitemap changes (production only).',
   },
+  {
+    key: 'auditRenderedHtml',
+    label: 'Audit rendered public HTML',
+    help: 'Fetch public page output so audits grade crawler-visible headings and content.',
+  },
 ]
 
 function Toggle({