@actuate-media/cms-admin 0.57.3 → 0.58.1

package/src/lib/seo-service.ts

@@ -356,6 +356,269 @@ export async function reopenSeoIssue(issueId: string): Promise<{ error?: string
   return res.error ? { error: res.error } : {}
 }
 
+// ─── Inline audit fixes (Phase 1 — deterministic, approval-gated) ───
+
+export interface SeoFixFieldChange {
+  field: string
+  label: string
+  before: string | boolean | null
+  after: string | boolean | null
+}
+
+export interface SeoIssueFixSuggestion {
+  autoFixable: boolean
+  source?: 'deterministic' | 'ai'
+  aiUnavailable?: boolean
+  fingerprint: string
+  patch: Record<string, unknown>
+  changes: SeoFixFieldChange[]
+  justification: string
+}
+
+export async function fetchSeoIssueFixSuggestion(issueId: string): Promise<{
+  suggestion?: SeoIssueFixSuggestion
+  error?: string
+}> {
+  const res = await cmsApi<{ suggestion: SeoIssueFixSuggestion }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/suggest-fix`,
+    { method: 'POST' },
+  )
+  if (res.error) return { error: res.error }
+  return { suggestion: res.data?.suggestion }
+}
+
+export async function applySeoIssueFix(
+  issueId: string,
+  fingerprint: string,
+): Promise<{ issue?: SeoIssue; error?: string }> {
+  const res = await cmsApi<{ issue: SeoIssue }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/apply-fix`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ fingerprint }),
+    },
+  )
+  if (res.error) return { error: res.error }
+  return { issue: res.data?.issue }
+}
+
+export interface SeoFixBriefExport {
+  markdown: string
+  filename: string
+  issueCount: number
+}
+
+export interface SeoFixBriefExportQuery {
+  severity?: SeoSeverity | 'all'
+  status?: SeoIssueStatus | 'all'
+  auditRunId?: string
+  /** Default true — only issues needing dev/content handoff. */
+  manualOnly?: boolean
+  /** Default true — embed cached AI content briefs when available. */
+  includeContentBriefs?: boolean
+  /** Default true — embed cached topic research when available. */
+  includeContentResearch?: boolean
+}
+
+export async function exportSeoFixBrief(
+  query: SeoFixBriefExportQuery = {},
+): Promise<{ data?: SeoFixBriefExport; error?: string }> {
+  const params = new URLSearchParams()
+  if (query.severity && query.severity !== 'all') params.set('severity', query.severity)
+  if (query.status && query.status !== 'all') params.set('status', query.status)
+  if (query.auditRunId) params.set('auditRunId', query.auditRunId)
+  if (query.manualOnly === false) params.set('manualOnly', 'false')
+  if (query.includeContentBriefs === false) params.set('includeContentBriefs', 'false')
+  if (query.includeContentResearch === false) params.set('includeContentResearch', 'false')
+  const qs = params.toString()
+  const res = await cmsApi<SeoFixBriefExport>(`/seo/issues/export-brief${qs ? `?${qs}` : ''}`)
+  if (res.error) return { error: res.error }
+  return { data: res.data }
+}
+
+/** Issue types with inline Approve fix in the Audit tab (keep in sync with cms-core). */
+export const SEO_INLINE_FIX_ISSUE_TYPES = new Set([
+  'meta-title-length',
+  'meta-description-length',
+  'accidental-noindex',
+  'missing-meta-title',
+  'missing-meta-description',
+  'missing-canonical',
+  'duplicate-meta-title',
+  'duplicate-meta-description',
+  'missing-structured-data',
+])
+
+export function isInlineSeoFixIssue(type: string): boolean {
+  return SEO_INLINE_FIX_ISSUE_TYPES.has(type)
+}
+
+export const SEO_CONTENT_BRIEF_ISSUE_TYPES = [
+  'thin-content',
+  'missing-h1',
+  'multiple-h1',
+  'missing-alt-text',
+] as const
+
+export function supportsSeoContentBrief(type: string): boolean {
+  return (SEO_CONTENT_BRIEF_ISSUE_TYPES as readonly string[]).includes(type)
+}
+
+export interface SeoContentBriefSection {
+  heading: string
+  bullets: string[]
+}
+
+export interface SeoContentBrief {
+  issueType: string
+  entityId: string
+  fingerprint: string
+  generatedAt: string
+  summary: string
+  suggestedH1: string | null
+  targetWordCount: number | null
+  topics: string[]
+  sections: SeoContentBriefSection[]
+  keyTakeawayDraft: string | null
+  geoNote: string | null
+}
+
+export async function fetchSeoContentBrief(issueId: string): Promise<{
+  supported?: boolean
+  brief?: SeoContentBrief | null
+  stale?: boolean
+  error?: string
+}> {
+  const res = await cmsApi<{ supported: boolean; brief: SeoContentBrief | null; stale: boolean }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/content-brief`,
+  )
+  if (res.error) return { error: res.error }
+  return {
+    supported: res.data?.supported,
+    brief: res.data?.brief,
+    stale: res.data?.stale,
+  }
+}
+
+export async function generateSeoContentBrief(
+  issueId: string,
+): Promise<{ brief?: SeoContentBrief; error?: string }> {
+  const res = await cmsApi<{ brief: SeoContentBrief }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/content-brief`,
+    { method: 'POST' },
+  )
+  if (res.error) return { error: res.error }
+  return { brief: res.data?.brief }
+}
+
+export const SEO_RESEARCH_ISSUE_TYPES = ['thin-content'] as const
+
+export function supportsSeoContentResearch(type: string): boolean {
+  return (SEO_RESEARCH_ISSUE_TYPES as readonly string[]).includes(type)
+}
+
+export interface SeoContentResearchCompetitor {
+  url: string
+  title: string
+  note: string
+}
+
+export interface SeoContentResearch {
+  issueType: string
+  entityId: string
+  fingerprint: string
+  generatedAt: string
+  focusKeyword: string | null
+  suggestedWordCount: number | null
+  outline: string[]
+  faqCandidates: string[]
+  entitiesToMention: string[]
+  competitorInsights: SeoContentResearchCompetitor[]
+  summary: string
+}
+
+export async function fetchSeoContentResearch(issueId: string): Promise<{
+  supported?: boolean
+  research?: SeoContentResearch | null
+  stale?: boolean
+  error?: string
+}> {
+  const res = await cmsApi<{
+    supported: boolean
+    research: SeoContentResearch | null
+    stale: boolean
+  }>(`/seo/issues/${encodeURIComponent(issueId)}/content-research`)
+  if (res.error) return { error: res.error }
+  return {
+    supported: res.data?.supported,
+    research: res.data?.research,
+    stale: res.data?.stale,
+  }
+}
+
+export async function generateSeoContentResearch(
+  issueId: string,
+  competitorUrls?: string[],
+): Promise<{ research?: SeoContentResearch; error?: string }> {
+  const res = await cmsApi<{ research: SeoContentResearch }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/content-research`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ competitorUrls: competitorUrls?.filter(Boolean) }),
+    },
+  )
+  if (res.error) return { error: res.error }
+  return { research: res.data?.research }
+}
+
+export async function researchAndBriefSeoIssue(
+  issueId: string,
+  competitorUrls?: string[],
+): Promise<{ research?: SeoContentResearch | null; brief?: SeoContentBrief; error?: string }> {
+  const res = await cmsApi<{ research: SeoContentResearch | null; brief: SeoContentBrief }>(
+    `/seo/issues/${encodeURIComponent(issueId)}/research-and-brief`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ competitorUrls: competitorUrls?.filter(Boolean) }),
+    },
+  )
+  if (res.error) return { error: res.error }
+  return { research: res.data?.research, brief: res.data?.brief }
+}
+
+export interface BatchContentBriefResult {
+  generated: number
+  skipped: number
+  failed: number
+  results: Array<{ issueId: string; status: 'generated' | 'skipped' | 'failed'; error?: string }>
+}
+
+export interface BatchContentBriefQuery {
+  severity?: SeoSeverity | 'all'
+  status?: SeoIssueStatus | 'all'
+  issueIds?: string[]
+  skipExisting?: boolean
+  includeResearch?: boolean
+}
+
+export async function batchGenerateSeoContentBriefs(
+  query: BatchContentBriefQuery = {},
+): Promise<{ data?: BatchContentBriefResult; error?: string }> {
+  const body: Record<string, unknown> = {}
+  if (query.severity && query.severity !== 'all') body.severity = query.severity
+  if (query.status && query.status !== 'all') body.status = query.status
+  if (query.issueIds?.length) body.issueIds = query.issueIds
+  if (query.skipExisting === false) body.skipExisting = false
+  if (query.includeResearch) body.includeResearch = true
+
+  const res = await cmsApi<BatchContentBriefResult>('/seo/issues/batch-content-briefs', {
+    method: 'POST',
+    body: JSON.stringify(body),
+  })
+  if (res.error) return { error: res.error }
+  return { data: res.data }
+}
+
 // ─── Technical (sitemap / robots / crawl) ────────────────────────────
 
 export interface SitemapStatus {

package/src/views/seo/AuditTab.tsx

@@ -1,10 +1,15 @@
 'use client'
 
-import { useMemo, useState } from 'react'
-import { ClipboardCheck, Clock, CheckCircle2 } from 'lucide-react'
+import { Fragment, useMemo, useState } from 'react'
+import { ClipboardCheck, Clock, CheckCircle2, FileDown, Sparkles } from 'lucide-react'
+import { toast } from 'sonner'
 import {
   fetchSeoIssues,
   fetchSeoAuditRuns,
+  batchGenerateSeoContentBriefs,
+  exportSeoFixBrief,
+  isInlineSeoFixIssue,
+  supportsSeoContentBrief,
   type SeoIssue,
   type SeoIssueQuery,
   type SeoSeverity,
@@ -17,8 +22,10 @@ import {
   SeoErrorState,
   severityMeta,
   SeoStatusBadge,
+  btnSecondary,
 } from '../../components/seo/primitives.js'
 import { SeoIssueFixDrawer } from '../../components/seo/SeoIssueFixDrawer.js'
+import { SeoIssueFixPanel, SeoIssueFixToggle } from '../../components/seo/SeoIssueFixPanel.js'
 import { useSeoResource } from './useSeoResource.js'
 
 const SEVERITY_FILTERS: { id: SeoSeverity | 'all'; label: string }[] = [
@@ -95,7 +102,10 @@ export function AuditTab({
 }) {
   const [severity, setSeverity] = useState<SeoSeverity | 'all'>('all')
   const [status, setStatus] = useState<SeoIssueStatus | 'all'>('open')
-  const [openIssue, setOpenIssue] = useState<string | null>(initialIssueId ?? null)
+  const [expandedIssueId, setExpandedIssueId] = useState<string | null>(initialIssueId ?? null)
+  const [detailIssueId, setDetailIssueId] = useState<string | null>(null)
+  const [exportingBrief, setExportingBrief] = useState(false)
+  const [batchGenerating, setBatchGenerating] = useState(false)
 
   const query: SeoIssueQuery = useMemo(() => ({ severity, status }), [severity, status])
   const { data, loading, error, refetch } = useSeoResource(
@@ -105,45 +115,142 @@ export function AuditTab({
 
   const issues = data ?? []
 
+  const briefEligibleCount = useMemo(
+    () => issues.filter((i) => supportsSeoContentBrief(i.type)).length,
+    [issues],
+  )
+
+  function toggleExpanded(issueId: string) {
+    setExpandedIssueId((current) => (current === issueId ? null : issueId))
+  }
+
+  function handleChanged() {
+    setExpandedIssueId(null)
+    refetch()
+  }
+
+  async function handleBatchGenerateBriefs() {
+    const issueIds = issues.filter((i) => supportsSeoContentBrief(i.type)).map((i) => i.id)
+    if (issueIds.length === 0) {
+      toast.message('No content-brief issues in the current list.')
+      return
+    }
+    setBatchGenerating(true)
+    try {
+      const res = await batchGenerateSeoContentBriefs({
+        severity,
+        status,
+        issueIds,
+        skipExisting: true,
+      })
+      if (res.error || !res.data) {
+        toast.error(res.error ?? 'Batch generation failed.')
+        return
+      }
+      const { generated, skipped, failed } = res.data
+      if (generated === 0 && failed === 0) {
+        toast.message(`All ${skipped} brief(s) already cached for the current filters.`)
+      } else {
+        toast.success(
+          `Generated ${generated} brief(s)${skipped ? `, skipped ${skipped} cached` : ''}${failed ? `, ${failed} failed` : ''}.`,
+        )
+      }
+      refetch()
+    } finally {
+      setBatchGenerating(false)
+    }
+  }
+
+  async function handleExportBrief() {
+    setExportingBrief(true)
+    try {
+      const res = await exportSeoFixBrief({ severity, status, manualOnly: true })
+      if (res.error || !res.data?.markdown) {
+        toast.error(res.error ?? 'Export failed.')
+        return
+      }
+      const blob = new Blob([res.data.markdown], { type: 'text/markdown;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = res.data.filename || 'seo-fix-brief.md'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      setTimeout(() => URL.revokeObjectURL(url), 0)
+      if (res.data.issueCount === 0) {
+        toast.message('Brief downloaded — no manual fixes matched the current filters.')
+      } else {
+        toast.success(`Exported ${res.data.issueCount} manual fix(es) for your dev team.`)
+      }
+    } finally {
+      setExportingBrief(false)
+    }
+  }
+
   return (
     <div className="space-y-4">
       <AuditSummaryCards refetchKey={refetchKey} />
 
       <SectionCard>
-        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by severity">
-            {SEVERITY_FILTERS.map((f) => (
-              <button
-                key={f.id}
-                type="button"
-                aria-pressed={severity === f.id}
-                onClick={() => setSeverity(f.id)}
-                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
-                  severity === f.id
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-              >
-                {f.label}
-              </button>
-            ))}
+        <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+            <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by severity">
+              {SEVERITY_FILTERS.map((f) => (
+                <button
+                  key={f.id}
+                  type="button"
+                  aria-pressed={severity === f.id}
+                  onClick={() => setSeverity(f.id)}
+                  className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                    severity === f.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  }`}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by status">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.id}
+                  type="button"
+                  aria-pressed={status === f.id}
+                  onClick={() => setStatus(f.id)}
+                  className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                    status === f.id
+                      ? 'bg-accent text-foreground'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  }`}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
           </div>
-          <div className="flex flex-wrap gap-1" role="group" aria-label="Filter by status">
-            {STATUS_FILTERS.map((f) => (
-              <button
-                key={f.id}
-                type="button"
-                aria-pressed={status === f.id}
-                onClick={() => setStatus(f.id)}
-                className={`focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${
-                  status === f.id
-                    ? 'bg-accent text-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-foreground'
-                }`}
-              >
-                {f.label}
-              </button>
-            ))}
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              className={btnSecondary}
+              onClick={handleBatchGenerateBriefs}
+              disabled={batchGenerating || loading || briefEligibleCount === 0}
+              aria-busy={batchGenerating}
+            >
+              <Sparkles className="h-4 w-4" aria-hidden />
+              {batchGenerating ? 'Generating…' : 'Generate briefs'}
+            </button>
+            <button
+              type="button"
+              className={btnSecondary}
+              onClick={handleExportBrief}
+              disabled={exportingBrief || loading}
+              aria-busy={exportingBrief}
+            >
+              <FileDown className="h-4 w-4" aria-hidden />
+              {exportingBrief ? 'Exporting…' : 'Export fix brief'}
+            </button>
           </div>
         </div>
 
@@ -178,37 +285,53 @@ export function AuditTab({
               <tbody className="divide-border divide-y">
                 {issues.map((issue: SeoIssue) => {
                   const meta = severityMeta(issue.severity)
+                  const expanded = expandedIssueId === issue.id
                   return (
-                    <tr key={issue.id} className="hover:bg-accent/40">
-                      <td className="py-2.5 pr-4">
-                        <span className={`inline-flex items-center gap-1.5 text-sm ${meta.text}`}>
-                          <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
-                          {meta.label}
-                        </span>
-                      </td>
-                      <td className="py-2.5 pr-4">
-                        <span className="text-foreground block font-medium">{issue.title}</span>
-                        <span className="text-muted-foreground block capitalize">
-                          {issue.category}
-                        </span>
-                      </td>
-                      <td className="text-muted-foreground py-2.5 pr-4">
-                        <span className="block truncate">
-                          {issue.entityTitle || issue.url || '—'}
-                        </span>
-                      </td>
-                      <td className="py-2.5 pr-4">
-                        <SeoStatusBadge label={issue.status} tone={issueStatusTone(issue.status)} />
-                      </td>
-                      <td className="py-2.5 text-right">
-                        <button
-                          onClick={() => setOpenIssue(issue.id)}
-                          className="text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none"
-                        >
-                          {issue.fixable ? 'Fix' : 'View'}
-                        </button>
-                      </td>
-                    </tr>
+                    <Fragment key={issue.id}>
+                      <tr className={`hover:bg-accent/40 ${expanded ? 'bg-accent/20' : ''}`}>
+                        <td className="py-2.5 pr-4">
+                          <span className={`inline-flex items-center gap-1.5 text-sm ${meta.text}`}>
+                            <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+                            {meta.label}
+                          </span>
+                        </td>
+                        <td className="py-2.5 pr-4">
+                          <span className="text-foreground block font-medium">{issue.title}</span>
+                          <span className="text-muted-foreground block capitalize">
+                            {issue.category}
+                          </span>
+                        </td>
+                        <td className="text-muted-foreground py-2.5 pr-4">
+                          <span className="block truncate">
+                            {issue.entityTitle || issue.url || '—'}
+                          </span>
+                        </td>
+                        <td className="py-2.5 pr-4">
+                          <SeoStatusBadge
+                            label={issue.status}
+                            tone={issueStatusTone(issue.status)}
+                          />
+                        </td>
+                        <td className="py-2.5 text-right">
+                          <SeoIssueFixToggle
+                            expanded={expanded}
+                            fixable={
+                              issue.fixable ||
+                              isInlineSeoFixIssue(issue.type) ||
+                              supportsSeoContentBrief(issue.type)
+                            }
+                            onToggle={() => toggleExpanded(issue.id)}
+                          />
+                        </td>
+                      </tr>
+                      <SeoIssueFixPanel
+                        issue={issue}
+                        expanded={expanded}
+                        onChanged={handleChanged}
+                        onNavigate={onNavigate}
+                        onOpenDetails={() => setDetailIssueId(issue.id)}
+                      />
+                    </Fragment>
                   )
                 })}
               </tbody>
@@ -218,10 +341,10 @@ export function AuditTab({
       </SectionCard>
 
       <SeoIssueFixDrawer
-        open={openIssue !== null}
-        onOpenChange={(o) => !o && setOpenIssue(null)}
-        issueId={openIssue}
-        onChanged={refetch}
+        open={detailIssueId !== null}
+        onOpenChange={(o) => !o && setDetailIssueId(null)}
+        issueId={detailIssueId}
+        onChanged={handleChanged}
         onNavigate={onNavigate}
       />
     </div>