@prenta/admin 1.15.0 → 1.17.0

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

@@ -27,10 +27,51 @@ function proposal(over: Partial<SeoProposal> = {}): SeoProposal {
     severity: 'warning',
     issueId: 'i1',
     suggestionId: null,
+    fixStrategy: null,
+    section: null,
+    grounding: null,
+    signals: null,
     ...over,
   }
 }
 
+/** An `add-section` FAQ proposal with three grounded questions and both signal kinds. */
+function faqProposal(over: Partial<SeoProposal> = {}): SeoProposal {
+  return proposal({
+    id: 'issue:faq1',
+    issueId: 'faq1',
+    fingerprint: 'fp-faq',
+    title: 'Page lacks an FAQ section',
+    issueType: 'missing-faq',
+    severity: 'info',
+    entity: { type: 'page', id: 'd9', title: 'Solar installs', url: '/solar' },
+    changes: [{ field: 'sections', label: 'Sections', before: null, after: 'FAQ (3 questions)' }],
+    justification: 'Answer engines cite this page; an FAQ makes the answers extractable.',
+    fixStrategy: 'add-section',
+    section: {
+      sectionType: 'faq',
+      content: {
+        heading: 'Questions',
+        items: [
+          { question: 'How long does it take?', answer: 'Three to five days.' },
+          { question: 'Can I finance?', answer: 'Yes, zero down.' },
+          { question: 'Warranty?', answer: '25 years.' },
+        ],
+      },
+    },
+    grounding: [
+      { sourceQuote: 'take three to five days' },
+      { sourceQuote: 'zero down' },
+      { sourceQuote: '' },
+    ],
+    signals: {
+      geo: { referralVisits: 14, retrievalHits: 0, engines: ['chatgpt'] },
+      queries: [{ query: 'how long does it take', impressions: 120, clicks: 3 }],
+    },
+    ...over,
+  })
+}
+
 function payload(over: Partial<SeoProposalsPayload> = {}): SeoProposalsPayload {
   return {
     proposals: [
@@ -54,6 +95,7 @@ function payload(over: Partial<SeoProposalsPayload> = {}): SeoProposalsPayload {
         suggestionId: 's1',
         severity: null,
         changes: [{ field: 'redirect', label: 'Redirect', before: '/old', after: '/new' }],
+        fixStrategy: 'redirect',
       }),
     ],
     counts: { issueFixes: 2, redirects: 1, stale: 0, eligibleForGeneration: 5 },
@@ -86,11 +128,23 @@ const bulkApplySeoProposals = vi.fn(
 )
 const dismissSeoIssueFix = vi.fn(async (_id: string): Promise<{ error?: string }> => ({}))
 const dismissRedirectSuggestion = vi.fn(async (_id: string): Promise<{ error?: string }> => ({}))
+const applySeoIssueFix = vi.fn(
+  async (
+    _issueId: string,
+    _fingerprint: string,
+    _opts?: { includeItems?: number[]; headingOverride?: string },
+  ): Promise<{ issue?: unknown; error?: string }> => ({}),
+)
 
 vi.mock('../../lib/seo-service.js', () => ({
   fetchSeoProposals: () => fetchSeoProposals(),
   generateSeoProposals: () => generateSeoProposals(),
   bulkApplySeoProposals: (items: unknown) => bulkApplySeoProposals(items),
+  applySeoIssueFix: (
+    issueId: string,
+    fingerprint: string,
+    opts?: { includeItems?: number[]; headingOverride?: string },
+  ) => applySeoIssueFix(issueId, fingerprint, opts),
   dismissSeoIssueFix: (id: string) => dismissSeoIssueFix(id),
   dismissRedirectSuggestion: (id: string) => dismissRedirectSuggestion(id),
   fetchAutopilotApplied: (params: unknown) => fetchAutopilotApplied(params),
@@ -125,6 +179,8 @@ beforeEach(() => {
   bulkApplySeoProposals.mockClear()
   dismissSeoIssueFix.mockClear()
   dismissRedirectSuggestion.mockClear()
+  applySeoIssueFix.mockClear()
+  applySeoIssueFix.mockImplementation(async () => ({}))
   fetchAutopilotApplied.mockClear()
   revertAutopilotChange.mockClear()
   vi.mocked(toast.success).mockClear()
@@ -522,6 +578,308 @@ describe('ProposalsTab', () => {
     expect(fetchAutopilotApplied).toHaveBeenCalledTimes(2)
   })
 
+  describe('FAQ (add-section) proposals', () => {
+    function faqPayload(row: SeoProposal = faqProposal()): SeoProposalsPayload {
+      return payload({
+        proposals: [row],
+        counts: { issueFixes: 1, redirects: 0, stale: 0, eligibleForGeneration: 0 },
+      })
+    }
+
+    it('shows the FAQ badge and a question-count summary with the strongest signal', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      expect(screen.getByText(/^3 questions · Cited by chatgpt 14× in 28 days/)).toBeTruthy()
+    })
+
+    it('approves a FAQ proposal through applySeoIssueFix with includeItems and headingOverride', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} onNavigate={vi.fn()} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      // The third grounding row is malformed (`''`): it must render as "no quote".
+      expect(screen.getByText(/take three to five days/)).toBeTruthy()
+      expect(screen.queryByText(/“”/)).toBeNull()
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      fireEvent.change(screen.getByLabelText('Section heading'), {
+        target: { value: 'Top questions' },
+      })
+      fireEvent.click(screen.getByRole('button', { name: /^Approve$/ }))
+      await waitFor(() =>
+        expect(applySeoIssueFix).toHaveBeenCalledWith('faq1', 'fp-faq', {
+          includeItems: [0, 1],
+          headingOverride: 'Top questions',
+        }),
+      )
+      expect(bulkApplySeoProposals).not.toHaveBeenCalled()
+      await waitFor(() => expect(toast.success).toHaveBeenCalledWith('FAQ section added.'))
+      await waitFor(() => expect(fetchSeoProposals).toHaveBeenCalledTimes(2))
+    })
+
+    it('sends neither includeItems nor headingOverride when nothing was changed', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' }))
+      await waitFor(() => expect(applySeoIssueFix).toHaveBeenCalledTimes(1))
+      expect(applySeoIssueFix).toHaveBeenCalledWith('faq1', 'fp-faq', {})
+      expect(bulkApplySeoProposals).not.toHaveBeenCalled()
+    })
+
+    it('does not send a heading override that only differs by whitespace', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.change(screen.getByLabelText('Section heading'), {
+        target: { value: '  Questions  ' },
+      })
+      fireEvent.click(screen.getByRole('button', { name: /^Approve$/ }))
+      await waitFor(() => expect(applySeoIssueFix).toHaveBeenCalledWith('faq1', 'fp-faq', {}))
+    })
+
+    it('falls back to the drafted heading when the heading field is cleared', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.change(screen.getByLabelText('Section heading'), { target: { value: '' } })
+      expect(screen.getByText('3 of 3 questions will be added.')).toBeTruthy()
+      const approve = screen.getByRole('button', { name: /^Approve$/ })
+      expect(approve).toHaveProperty('disabled', false)
+      fireEvent.click(approve)
+      await waitFor(() => expect(applySeoIssueFix).toHaveBeenCalledWith('faq1', 'fp-faq', {}))
+    })
+
+    it('disables approve with a hint once fewer than two questions are selected', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      fireEvent.click(screen.getByRole('checkbox', { name: /Can I finance\?/ }))
+      // The visible hint (the sr-only copy on the row button is asserted separately).
+      expect(
+        screen.getByText(/Select at least 2 questions to approve \(1 selected\)/, {
+          selector: '[role="status"]',
+        }),
+      ).toBeTruthy()
+      const approve = screen.getByRole('button', { name: /^Approve$/ })
+      expect(approve).toHaveProperty('disabled', true)
+      expect(
+        screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' }),
+      ).toHaveProperty('disabled', true)
+      fireEvent.click(approve)
+      expect(applySeoIssueFix).not.toHaveBeenCalled()
+      // Re-checking one restores the button.
+      fireEvent.click(screen.getByRole('checkbox', { name: /Can I finance\?/ }))
+      expect(screen.getByRole('button', { name: /^Approve$/ })).toHaveProperty('disabled', false)
+    })
+
+    it('exposes the blocker on the collapsed row approve button', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      fireEvent.click(screen.getByRole('checkbox', { name: /Can I finance\?/ }))
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Hide changes for Page lacks an FAQ section' }),
+      )
+      const approve = screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' })
+      expect(approve).toHaveProperty('disabled', true)
+      expect(approve.getAttribute('title')).toMatch(/Select at least 2 questions/)
+      const describedBy = approve.getAttribute('aria-describedby') ?? ''
+      expect(describedBy).not.toBe('')
+      expect(document.getElementById(describedBy)?.textContent).toMatch(
+        /Select at least 2 questions to approve \(1 selected\)/,
+      )
+    })
+
+    it('keeps per-row drafts isolated between two FAQ rows', async () => {
+      const rowB = faqProposal({
+        id: 'issue:faq2',
+        issueId: 'faq2',
+        fingerprint: 'fp-faq2',
+        title: 'Roofing page lacks an FAQ section',
+        entity: { type: 'page', id: 'd10', title: 'Roofing', url: '/roofing' },
+        section: {
+          sectionType: 'faq',
+          content: {
+            heading: 'Roofing questions',
+            items: [
+              { question: 'Is it insured?', answer: 'Yes.' },
+              { question: 'Do you travel?', answer: 'Statewide.' },
+              { question: 'Deposit?', answer: '10%.' },
+            ],
+          },
+        },
+        grounding: null,
+      })
+      fetchSeoProposals.mockImplementationOnce(async () =>
+        payload({ proposals: [faqProposal(), rowB] }),
+      )
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findAllByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Roofing page lacks an FAQ section' }),
+      )
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      expect(screen.getByRole('checkbox', { name: /Warranty\?/ })).toHaveProperty('checked', false)
+      for (const name of [/Is it insured\?/, /Do you travel\?/, /Deposit\?/]) {
+        expect(screen.getByRole('checkbox', { name })).toHaveProperty('checked', true)
+      }
+      fireEvent.click(screen.getByRole('checkbox', { name: /Deposit\?/ }))
+      expect(screen.getByRole('checkbox', { name: /Deposit\?/ })).toHaveProperty('checked', false)
+      expect(screen.getByRole('checkbox', { name: /Is it insured\?/ })).toHaveProperty(
+        'checked',
+        true,
+      )
+      expect(screen.getByRole('checkbox', { name: /Warranty\?/ })).toHaveProperty('checked', false)
+      expect(screen.getByRole('checkbox', { name: /How long does it take\?/ })).toHaveProperty(
+        'checked',
+        true,
+      )
+    })
+
+    it('starts a fresh draft when a refetch returns new questions under the same id and fingerprint', async () => {
+      const regenerated = faqProposal({
+        section: {
+          sectionType: 'faq',
+          content: {
+            heading: 'Common questions',
+            items: [
+              { question: 'Is it insured?', answer: 'Yes.' },
+              { question: 'Do you travel?', answer: 'Statewide.' },
+              { question: 'Deposit?', answer: '10%.' },
+            ],
+          },
+        },
+        grounding: null,
+      })
+      fetchSeoProposals
+        .mockImplementationOnce(async () => payload({ proposals: [proposal(), faqProposal()] }))
+        .mockImplementationOnce(async () => payload({ proposals: [regenerated] }))
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      fireEvent.change(screen.getByLabelText('Section heading'), {
+        target: { value: 'Top questions' },
+      })
+      // Dismissing another row refetches the inbox; the FAQ row comes back regenerated.
+      fireEvent.click(screen.getByRole('button', { name: 'Dismiss Duplicate meta title' }))
+      await screen.findByRole('checkbox', { name: /Deposit\?/ })
+      for (const name of [/Is it insured\?/, /Do you travel\?/, /Deposit\?/]) {
+        expect(screen.getByRole('checkbox', { name })).toHaveProperty('checked', true)
+      }
+      expect(screen.getByLabelText('Section heading')).toHaveProperty('value', 'Common questions')
+      expect(screen.getByText('3 of 3 questions will be added.')).toBeTruthy()
+    })
+
+    it('degrades when the cached section is unreadable: badge + signal, approve disabled', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () =>
+        faqPayload(faqProposal({ section: null, grounding: null })),
+      )
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      expect(screen.getByText(/Cited by chatgpt 14× in 28 days/)).toBeTruthy()
+      const rowApprove = screen.getByRole('button', {
+        name: 'Approve Page lacks an FAQ section',
+      })
+      expect(rowApprove).toHaveProperty('disabled', true)
+      expect(rowApprove.getAttribute('title')).toMatch(/could not be read/i)
+      expect(
+        document.getElementById(rowApprove.getAttribute('aria-describedby') ?? '')?.textContent,
+      ).toMatch(/could not be read/i)
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      // Once in the expanded body, once as the row button's sr-only description.
+      expect(screen.getAllByText(/could not be read/i)).toHaveLength(2)
+      expect(screen.queryByRole('checkbox', { name: /Warranty\?/ })).toBeNull()
+      expect(screen.queryByRole('button', { name: /^Approve$/ })).toBeNull()
+    })
+
+    it('surfaces a server error and re-enables the controls', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () => faqPayload())
+      applySeoIssueFix.mockResolvedValueOnce({ error: 'Fix suggestion is stale.' })
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' }))
+      await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Fix suggestion is stale.'))
+      await waitFor(() =>
+        expect(
+          screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' }),
+        ).toHaveProperty('disabled', false),
+      )
+      expect(fetchSeoProposals).toHaveBeenCalledTimes(1)
+    })
+
+    it('issues a single request when approve is clicked twice while in flight', async () => {
+      // Persistent: the row must survive the post-approve refetch so the button can be re-read.
+      fetchSeoProposals.mockImplementation(async () => faqPayload())
+      const inflight = deferred<{ issue?: unknown; error?: string }>()
+      applySeoIssueFix.mockImplementationOnce(() => inflight.promise)
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      const approve = screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' })
+      fireEvent.click(approve)
+      fireEvent.click(approve)
+      await flushMicrotasks()
+      expect(applySeoIssueFix).toHaveBeenCalledTimes(1)
+      expect(approve).toHaveProperty('disabled', true)
+      expect(
+        screen.getByRole('button', { name: 'Dismiss Page lacks an FAQ section' }),
+      ).toHaveProperty('disabled', true)
+      inflight.resolve({})
+      await waitFor(() =>
+        expect(
+          screen.getByRole('button', { name: 'Approve Page lacks an FAQ section' }),
+        ).toHaveProperty('disabled', false),
+      )
+      expect(applySeoIssueFix).toHaveBeenCalledTimes(1)
+    })
+
+    it('bulk approve still sends the whole section through bulk-apply', async () => {
+      fetchSeoProposals.mockImplementationOnce(async () =>
+        payload({ proposals: [proposal(), faqProposal()] }),
+      )
+      render(<ProposalsTab planInfo={null} />)
+      await screen.findByText('FAQ section')
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Show changes for Page lacks an FAQ section' }),
+      )
+      fireEvent.click(screen.getByRole('checkbox', { name: /Warranty\?/ }))
+      fireEvent.click(screen.getByLabelText('Select all proposals'))
+      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: 'faq1', fingerprint: 'fp-faq' },
+        ]),
+      )
+      expect(applySeoIssueFix).not.toHaveBeenCalled()
+    })
+  })
+
   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')

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

@@ -2,11 +2,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
-// The SEO defaults tab reads seven shared backends: /seo/config (meta defaults +
+// The SEO defaults tab reads eight 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), /seo/autopilot/settings (SEO Autopilot card), and
-// /seo/digest-settings (Weekly SEO digest card).
+// (Search data card), /seo/geo-settings (AI visibility 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 }
@@ -75,6 +76,9 @@ async function defaultApi(
       status: 200,
     }
   }
+  if (endpoint === '/seo/geo-settings' && method === 'GET') {
+    return { data: { enabled: true, retentionDays: 90 }, status: 200 }
+  }
   if (endpoint === '/seo/digest-settings' && method === 'GET') {
     return {
       data: { enabled: false, recipients: [], lastSentAt: null, lastError: null },
@@ -355,23 +359,40 @@ describe('SeoSettingsTab', () => {
     expect(body.serviceAccountKey).toContain('svc@acme.iam.gserviceaccount.com')
   })
 
-  it('renders the SEO Autopilot card between Search data and the digest', async () => {
+  it('renders Search data, AI visibility, SEO Autopilot, and the digest in that order', 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.
+    // Titles also render in the cards' skeleton states; wait for controls
+    // that only exist once each card's settings have loaded.
     const toggle = await screen.findByRole('switch', { name: 'Enable autopilot' })
     expect(toggle.getAttribute('aria-checked')).toBe('false')
+    const geoToggle = await screen.findByRole('switch', {
+      name: 'Record AI crawler and referral activity',
+    })
+    expect(geoToggle.getAttribute('aria-checked')).toBe('true')
     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) =>
+    const order = ['Search data', 'AI visibility', '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('PUTs the AI visibility kill switch to /seo/geo-settings', async () => {
+    render(<SeoSettingsTab role="ADMIN" />)
+    fireEvent.click(
+      await screen.findByRole('switch', { name: 'Record AI crawler and referral activity' }),
+    )
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/seo/geo-settings',
+        expect.objectContaining({ method: 'PUT', body: JSON.stringify({ enabled: false }) }),
+      ),
+    )
+  })
+
   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()

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

@@ -78,6 +78,21 @@ beforeEach(() => {
   pendingPut = null
 })
 
+describe('TechnicalTab AI crawler card', () => {
+  it('links to the AI visibility tab via onNavigate', async () => {
+    const onNavigate = vi.fn()
+    render(<TechnicalTab onNavigate={onNavigate} />)
+    fireEvent.click(await screen.findByRole('button', { name: /view trends/i }))
+    expect(onNavigate).toHaveBeenCalledWith('/seo/ai-visibility')
+  })
+
+  it('omits the trends link when the host gives no navigator', async () => {
+    render(<TechnicalTab />)
+    await screen.findByRole('switch', { name: /Audit rendered public HTML/i })
+    expect(screen.queryByRole('button', { name: /view trends/i })).toBeNull()
+  })
+})
+
 describe('TechnicalTab rendered audit setting', () => {
   it('renders the accessible setting and persists changes', async () => {
     render(<TechnicalTab />)

package/src/components/seo/FaqProposalPreview.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+/**
+ * Expanded-row body for an `add-section` (FAQ) proposal in the SEO inbox:
+ * the signal that earned the page a proposal, an editable section heading,
+ * and one checkbox per drafted question so the reviewer can drop weak ones
+ * before approving. Fully controlled — the tab owns the draft.
+ */
+import { MessageCircleQuestionMark } from 'lucide-react'
+import { useId } from 'react'
+import type { SeoFaqSignals } from '../../lib/seo-service.js'
+
+/** Server-enforced floor: a FAQ section with one question is not a FAQ. */
+export const FAQ_MIN_SELECTED = 2
+/** Mirrors core's `FAQ_HEADING_MAX` (measured after trim). */
+export const FAQ_HEADING_MAX = 80
+/** The window core aggregates FAQ signals over (`FAQ_SIGNAL_WINDOW_DAYS`). */
+const SIGNAL_WINDOW_DAYS = 28
+
+export interface FaqProposalPreviewItem {
+  question: string
+  answer: string
+  /** Verbatim page quote the answer was grounded in; omit / `''` when none survived. */
+  sourceQuote?: string
+}
+
+export interface FaqProposalPreviewProps {
+  /** The heading the AI drafted (shown as the input's placeholder). */
+  heading: string
+  items: FaqProposalPreviewItem[]
+  signals: SeoFaqSignals | null
+  /** Controlled; parallel to `items`. */
+  selected: boolean[]
+  onToggle: (index: number) => void
+  /** Controlled heading field value. */
+  headingValue: string
+  onHeadingChange: (value: string) => void
+  disabled?: boolean
+}
+
+/**
+ * One-line "why this page" summary: referral citations win over retrieval
+ * fetches, and the top question-shaped query is appended when present.
+ * Engine names are rendered as the server sends them (registry display names).
+ */
+export function faqSignalLine(signals: SeoFaqSignals | null): string | null {
+  if (!signals) return null
+  const parts: string[] = []
+  const g = signals.geo
+  const engines = g?.engines.join(', ') || 'AI engines'
+  if (g && g.referralVisits > 0) {
+    parts.push(`Cited by ${engines} ${g.referralVisits}× in ${SIGNAL_WINDOW_DAYS} days`)
+  } else if (g && g.retrievalHits > 0) {
+    parts.push(`Fetched by ${engines} ${g.retrievalHits}× in ${SIGNAL_WINDOW_DAYS} days`)
+  }
+  const q = signals.queries[0]
+  if (q) parts.push(`asked "${q.query}" ${q.impressions}× on Google`)
+  return parts.length > 0 ? parts.join(' · ') : null
+}
+
+/**
+ * Why the current draft cannot be approved, or `null` when it can. Shared by
+ * the status line below and the tab's Approve buttons so both agree. The
+ * heading is deliberately not a blocker: a blank field means "use the drafted
+ * heading" (the input's placeholder), and the tab sends no override.
+ */
+export function faqDraftBlocker(selected: boolean[]): string | null {
+  const count = selected.filter(Boolean).length
+  if (count < FAQ_MIN_SELECTED) {
+    return `Select at least ${FAQ_MIN_SELECTED} questions to approve (${count} selected).`
+  }
+  return null
+}
+
+export function FaqProposalPreview(props: FaqProposalPreviewProps) {
+  const headingId = useId()
+  const selectedCount = props.selected.filter(Boolean).length
+  const line = faqSignalLine(props.signals)
+  const blocker = faqDraftBlocker(props.selected)
+  return (
+    <div className="space-y-4">
+      {line ? (
+        <p className="text-muted-foreground flex items-center gap-2 text-sm">
+          <MessageCircleQuestionMark size={16} aria-hidden="true" />
+          <span>{line}</span>
+        </p>
+      ) : null}
+      <div className="space-y-1">
+        <label htmlFor={headingId} className="text-foreground block text-sm font-medium">
+          Section heading
+        </label>
+        <input
+          id={headingId}
+          type="text"
+          value={props.headingValue}
+          placeholder={props.heading}
+          maxLength={FAQ_HEADING_MAX}
+          disabled={props.disabled}
+          onChange={(e) => props.onHeadingChange(e.target.value)}
+          className="bg-input-background text-foreground border-border focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+        />
+      </div>
+      <ul className="divide-border divide-y" aria-label="Proposed questions">
+        {props.items.map((item, i) => {
+          const id = `${headingId}-item-${i}`
+          return (
+            <li key={id} className="flex gap-3 py-3">
+              <input
+                id={id}
+                type="checkbox"
+                checked={props.selected[i] ?? true}
+                disabled={props.disabled}
+                onChange={() => props.onToggle(i)}
+                className="border-border text-primary focus-visible:ring-ring mt-1 h-4 w-4 shrink-0 rounded"
+              />
+              <div className="min-w-0 space-y-1">
+                <label htmlFor={id} className="text-foreground block text-sm font-medium">
+                  {item.question}
+                </label>
+                <p className="text-foreground text-sm">{item.answer}</p>
+                {item.sourceQuote ? (
+                  <p className="text-muted-foreground text-sm">Source: “{item.sourceQuote}”</p>
+                ) : null}
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+      <p role="status" className="text-muted-foreground text-sm">
+        {blocker ?? `${selectedCount} of ${props.items.length} questions will be added.`}
+      </p>
+    </div>
+  )
+}

package/src/components/seo/SeoIssueFixPanel.tsx

@@ -24,6 +24,9 @@ import { PlanUpgradeCallout } from '../PlanUpgradeCallout.js'
 import { ChangePreview } from './ChangePreview.js'
 import { SeoErrorState, btnPrimary, btnSecondary } from './primitives.js'
 
+// Redirect suggestions always carry `fixStrategy: 'redirect'` (core
+// `issue-fix-redirect.ts`); an undefined strategy is a metadata / schema patch
+// (meta title, description, canonical, structured data, FAQPage node).
 function approveButtonLabel(strategy: SeoIssueFixSuggestion['fixStrategy']): string {
   switch (strategy) {
     case 'fix-link':
@@ -31,8 +34,9 @@ function approveButtonLabel(strategy: SeoIssueFixSuggestion['fixStrategy']): str
     case 'insert-link':
       return 'Approve link'
     case 'redirect':
-    case undefined:
       return 'Approve redirect'
+    case undefined:
+      return 'Approve fix'
     default: {
       const _exhaustive: never = strategy
       return _exhaustive
@@ -47,8 +51,9 @@ function approveSuccessToast(strategy: SeoIssueFixSuggestion['fixStrategy']): st
     case 'insert-link':
       return 'Link added and issue resolved.'
     case 'redirect':
-    case undefined:
       return 'Redirect created and issue resolved.'
+    case undefined:
+      return 'Fix applied and issue resolved.'
     default: {
       const _exhaustive: never = strategy
       return _exhaustive