@prenta/admin 1.12.0 → 1.14.0

package/src/views/seo/ProposalsTab.tsx

@@ -0,0 +1,681 @@
+'use client'
+
+/**
+ * SEO → Proposals: every cached AI issue fix and open 404-redirect suggestion
+ * in one review surface. Batch approve honours server governance
+ * (`allowBulkApply`); the UI only pre-disables the button using the flags the
+ * list payload exposes. Generation is human-triggered, capped per pass, and
+ * loops client-side while the server reports `remaining > 0`.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ArrowRightLeft,
+  Check,
+  ChevronDown,
+  Inbox,
+  Loader2,
+  Sparkles,
+  Square,
+  X,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  bulkApplySeoProposals,
+  dismissRedirectSuggestion,
+  dismissSeoIssueFix,
+  fetchSeoProposals,
+  generateSeoProposals,
+  type SeoProposal,
+  type SeoProposalBulkApplyItem,
+} from '../../lib/seo-service.js'
+import { hasPlanFeature, type PlanInfo } from '../../lib/plan.js'
+import { brandAlignmentLabel, brandAlignmentTone } from '../../lib/brand-voice-client.js'
+import { PlanUpgradeCallout } from '../../components/PlanUpgradeCallout.js'
+import { ChangePreview } from '../../components/seo/ChangePreview.js'
+import {
+  SectionCard,
+  SeoEmptyState,
+  SeoErrorState,
+  SeoLoading,
+  SeoStatusBadge,
+  btnPrimary,
+  btnSecondary,
+} from '../../components/seo/primitives.js'
+import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { useSeoResource } from './useSeoResource.js'
+
+const GENERATE_BATCH_SIZE = 10
+const AI_SETTINGS_PATH = '/settings?tab=ai'
+/** Stable empty list so memoised derivations don't recompute while loading. */
+const NO_PROPOSALS: SeoProposal[] = []
+
+/** The one mutation allowed in flight at a time; every control is disabled while set. */
+type Mutation = 'apply' | 'dismiss' | 'generate'
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error && err.message ? err.message : 'Request failed.'
+}
+
+function relativeAge(iso: string | null): string {
+  if (!iso) return ''
+  const ms = Date.now() - new Date(iso).getTime()
+  if (!Number.isFinite(ms) || ms < 0) return ''
+  const minutes = Math.round(ms / 60_000)
+  if (minutes < 60) return `${Math.max(1, minutes)}m ago`
+  const hours = Math.round(minutes / 60)
+  if (hours < 48) return `${hours}h ago`
+  return `${Math.round(hours / 24)}d ago`
+}
+
+function confidenceTone(c: number): 'good' | 'fair' | 'poor' {
+  return c >= 0.7 ? 'good' : c >= 0.4 ? 'fair' : 'poor'
+}
+
+function plural(count: number, noun: string): string {
+  return `${count} ${noun}${count === 1 ? '' : 's'}`
+}
+
+function toBulkItem(p: SeoProposal): SeoProposalBulkApplyItem {
+  return p.kind === 'redirect'
+    ? { kind: 'redirect', id: p.suggestionId ?? '' }
+    : { kind: 'issue-fix', id: p.issueId ?? '', fingerprint: p.fingerprint ?? undefined }
+}
+
+function BrandScoreBadge({ score }: { score: number }) {
+  return (
+    <span
+      className="border-border bg-muted/40 inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs"
+      aria-label={`Brand voice score ${score} out of 100`}
+    >
+      <span className={`font-medium ${brandAlignmentTone(score)}`}>{score}/100</span>
+      <span className="text-muted-foreground">{brandAlignmentLabel(score)}</span>
+    </span>
+  )
+}
+
+function SourceBadge({ source }: { source: SeoProposal['source'] }) {
+  switch (source) {
+    case 'ai':
+      return (
+        <span className="bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+          <Sparkles className="h-3 w-3" aria-hidden />
+          AI
+        </span>
+      )
+    case 'ai-404-recovery':
+      return (
+        <span className="bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
+          <ArrowRightLeft className="h-3 w-3" aria-hidden />
+          404 recovery
+        </span>
+      )
+    case 'deterministic':
+      return (
+        <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium">
+          Rule-based
+        </span>
+      )
+    default: {
+      const _exhaustive: never = source
+      return _exhaustive
+    }
+  }
+}
+
+export function ProposalsTab({
+  planInfo,
+  onChanged,
+  onNavigate,
+}: {
+  planInfo: PlanInfo | null
+  onChanged?: () => void
+  onNavigate?: (path: string) => void
+}) {
+  const { data, loading, error, refetch } = useSeoResource(fetchSeoProposals, [])
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
+  const [confirmApply, setConfirmApply] = useState(false)
+  const [confirmGenerate, setConfirmGenerate] = useState(false)
+  const [mutation, setMutation] = useState<Mutation | null>(null)
+  const [pendingItems, setPendingItems] = useState<SeoProposalBulkApplyItem[]>([])
+  const [generating, setGenerating] = useState<{ done: number; total: number } | null>(null)
+  const stopRef = useRef(false)
+  /** Mirrors `mutation` synchronously so a second call in the same tick cannot slip past. */
+  const mutationRef = useRef<Mutation | null>(null)
+  const mountedRef = useRef(true)
+  const busy = mutation !== null
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      stopRef.current = true
+    }
+  }, [])
+
+  /** Claims the mutation slot; returns false when another mutation is already running. */
+  const beginMutation = useCallback((kind: Mutation): boolean => {
+    if (mutationRef.current !== null) return false
+    mutationRef.current = kind
+    setMutation(kind)
+    return true
+  }, [])
+  const endMutation = useCallback(() => {
+    mutationRef.current = null
+    if (mountedRef.current) setMutation(null)
+  }, [])
+
+  const inlineApplyEnabled = hasPlanFeature(planInfo, 'seo.inlineApply')
+  const proposals = data?.proposals ?? NO_PROPOSALS
+  const live = useMemo(() => proposals.filter((p) => !p.stale), [proposals])
+  const selectedProposals = useMemo(() => live.filter((p) => selected.has(p.id)), [live, selected])
+
+  const bulkBlockedReason = useMemo(() => {
+    if (!data || selectedProposals.length <= 1) return null
+    const hasIssue = selectedProposals.some((p) => p.kind === 'issue-fix')
+    const hasRedirect = selectedProposals.some((p) => p.kind === 'redirect')
+    if (hasIssue && !data.governance.issueFixBulk) return 'SEO metadata generation'
+    if (hasRedirect && !data.governance.redirectBulk) return '404 recovery'
+    return null
+  }, [data, selectedProposals])
+
+  const allSelected = live.length > 0 && selected.size === live.length
+  const toggleSelectAll = useCallback(() => {
+    setSelected((cur) => (cur.size === live.length ? new Set() : new Set(live.map((p) => p.id))))
+  }, [live])
+  const toggleSelect = useCallback((id: string) => {
+    setSelected((cur) => {
+      const next = new Set(cur)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+  const toggleExpanded = useCallback((id: string) => {
+    setExpanded((cur) => {
+      const next = new Set(cur)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const afterMutation = useCallback(() => {
+    setSelected(new Set())
+    refetch()
+    onChanged?.()
+  }, [refetch, onChanged])
+
+  const runApply = useCallback(
+    async (items: SeoProposalBulkApplyItem[]) => {
+      if (items.length === 0) return
+      if (!beginMutation('apply')) return
+      try {
+        const res = await bulkApplySeoProposals(items)
+        if (!mountedRef.current) return
+        const result = res.result
+        if (res.error || !result) {
+          toast.error(res.error ?? 'Unexpected response from the server.')
+          return
+        }
+        if (result.applied > 0) {
+          toast.success(`${plural(result.applied, 'proposal')} applied.`)
+        }
+        if (result.failed > 0) {
+          const reasons = result.results
+            .filter((r) => r.status !== 'applied' && r.status !== 'pending')
+            .map((r) => `${r.id}: ${r.reason ?? r.status}`)
+            .slice(0, 3)
+            .join('; ')
+          toast.error(`${result.failed} could not be applied. ${reasons}`)
+        }
+        const pendingIds = new Set(
+          result.results.filter((r) => r.status === 'pending').map((r) => r.id),
+        )
+        setPendingItems(items.filter((i) => pendingIds.has(i.id)))
+        afterMutation()
+      } catch (err) {
+        if (mountedRef.current) toast.error(errorMessage(err))
+      } finally {
+        endMutation()
+      }
+    },
+    [afterMutation, beginMutation, endMutation],
+  )
+
+  const handleDismissSelected = useCallback(async () => {
+    const targets = selectedProposals
+    if (targets.length === 0) return
+    if (!beginMutation('dismiss')) return
+    try {
+      const results = await Promise.allSettled(
+        targets.map((p) =>
+          p.kind === 'redirect'
+            ? dismissRedirectSuggestion(p.suggestionId ?? '')
+            : dismissSeoIssueFix(p.issueId ?? ''),
+        ),
+      )
+      if (!mountedRef.current) return
+      const failed = results.filter((r) => r.status === 'rejected' || r.value.error).length
+      if (failed > 0) toast.error(`${failed} of ${targets.length} could not be dismissed.`)
+      else toast.success(`${plural(targets.length, 'proposal')} dismissed.`)
+      afterMutation()
+    } finally {
+      endMutation()
+    }
+  }, [selectedProposals, afterMutation, beginMutation, endMutation])
+
+  const handleDismissOne = useCallback(
+    async (p: SeoProposal) => {
+      if (!beginMutation('dismiss')) return
+      try {
+        const res =
+          p.kind === 'redirect'
+            ? await dismissRedirectSuggestion(p.suggestionId ?? '')
+            : await dismissSeoIssueFix(p.issueId ?? '')
+        if (!mountedRef.current) return
+        if (res.error) {
+          toast.error(res.error)
+          return
+        }
+        afterMutation()
+      } catch (err) {
+        if (mountedRef.current) toast.error(errorMessage(err))
+      } finally {
+        endMutation()
+      }
+    },
+    [afterMutation, beginMutation, endMutation],
+  )
+
+  const handleGenerate = useCallback(async () => {
+    if (!beginMutation('generate')) return
+    const eligible = data?.counts.eligibleForGeneration ?? 0
+    stopRef.current = false
+    let total = 0
+    let done = 0
+    let transportError = false
+    setGenerating({ done: 0, total: eligible })
+    try {
+      for (;;) {
+        const res = await generateSeoProposals()
+        // The tab may have unmounted mid-pass; stop issuing requests and stay silent.
+        if (!mountedRef.current) return
+        const r = res.result
+        if (res.error || !r) {
+          toast.error(res.error ?? 'Unexpected response from the server.')
+          transportError = true
+          break
+        }
+        total += r.generated
+        done += r.generated + r.skipped + r.failed
+        setGenerating({ done, total: eligible })
+        if (r.haltedReason) {
+          toast.error(`Generation stopped: ${r.haltedReason}`)
+          break
+        }
+        if (r.failed > 0) {
+          toast.error(`${plural(r.failed, 'issue')} failed to generate.`)
+          break
+        }
+        if (r.remaining <= 0 || stopRef.current) break
+      }
+      if (!transportError) toast.success(`${plural(total, 'proposal')} generated.`)
+      afterMutation()
+    } catch (err) {
+      if (mountedRef.current) toast.error(errorMessage(err))
+    } finally {
+      if (mountedRef.current) setGenerating(null)
+      endMutation()
+    }
+  }, [data, afterMutation, beginMutation, endMutation])
+
+  const eligible = data?.counts.eligibleForGeneration ?? 0
+
+  const generateAction = inlineApplyEnabled ? (
+    generating ? (
+      <div className="flex items-center gap-2">
+        <span
+          className="text-muted-foreground flex items-center gap-2 text-sm"
+          role="status"
+          aria-live="polite"
+        >
+          <Loader2 className="h-4 w-4 motion-safe:animate-spin" aria-hidden />
+          Generating… {generating.done} of {generating.total}
+        </span>
+        <button
+          type="button"
+          className={btnSecondary}
+          onClick={() => {
+            stopRef.current = true
+          }}
+        >
+          <Square className="h-4 w-4" aria-hidden />
+          Stop
+        </button>
+      </div>
+    ) : (
+      <button
+        type="button"
+        className={btnPrimary}
+        onClick={() => setConfirmGenerate(true)}
+        disabled={eligible === 0 || loading || busy}
+      >
+        <Sparkles className="h-4 w-4" aria-hidden />
+        Generate proposals ({eligible} eligible)
+      </button>
+    )
+  ) : null
+
+  return (
+    <div className="space-y-6">
+      {!inlineApplyEnabled ? (
+        <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />
+      ) : null}
+
+      <SectionCard
+        title="Proposals"
+        description="Review, approve, or dismiss what the AI proposes across issue fixes and 404 redirects."
+        action={generateAction}
+      >
+        {loading ? (
+          <SeoLoading />
+        ) : error ? (
+          <SeoErrorState message={error} onRetry={refetch} />
+        ) : proposals.length === 0 ? (
+          <SeoEmptyState
+            icon={<Inbox size={24} />}
+            title="No proposals yet"
+            description="Generate proposals to draft fixes for open, fixable issues, or run 404 recovery from the Redirects tab."
+          />
+        ) : (
+          <div className="space-y-3">
+            {pendingItems.length > 0 && (
+              <div
+                className="border-border bg-muted/40 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                role="status"
+                aria-live="polite"
+              >
+                <span className="text-foreground">
+                  {plural(pendingItems.length, 'proposal')} not reached within the time budget.
+                </span>
+                <button
+                  type="button"
+                  className="text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                  onClick={() => void runApply(pendingItems)}
+                  disabled={busy}
+                >
+                  Apply remaining ({pendingItems.length})
+                </button>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-auto rounded-md px-2 py-1 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                  onClick={() => setPendingItems([])}
+                >
+                  Dismiss
+                </button>
+              </div>
+            )}
+
+            {selected.size > 0 && (
+              <div
+                className="border-border bg-accent/40 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                role="region"
+                aria-label="Bulk actions"
+              >
+                <span className="text-foreground font-medium">{selected.size} selected</span>
+                <span className="bg-border mx-1 h-4 w-px" aria-hidden />
+                <button
+                  type="button"
+                  className="text-foreground hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                  onClick={() => setConfirmApply(true)}
+                  disabled={busy || bulkBlockedReason !== null}
+                >
+                  Approve selected
+                </button>
+                <button
+                  type="button"
+                  className="text-foreground hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                  onClick={() => void handleDismissSelected()}
+                  disabled={busy}
+                >
+                  Dismiss selected
+                </button>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-auto rounded-md px-2 py-1 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                  onClick={() => setSelected(new Set())}
+                >
+                  Clear
+                </button>
+                {bulkBlockedReason && (
+                  <p className="text-muted-foreground basis-full text-sm" role="status">
+                    Applying several {bulkBlockedReason} proposals at once needs “Allow bulk apply”.
+                    {onNavigate ? (
+                      <button
+                        type="button"
+                        onClick={() => onNavigate(AI_SETTINGS_PATH)}
+                        className="text-primary focus-visible:ring-ring ml-1 rounded-sm font-medium hover:underline focus-visible:ring-2 focus-visible:outline-none"
+                      >
+                        Open Settings → AI
+                      </button>
+                    ) : null}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <div className="border-border overflow-x-auto rounded-md border">
+              <table className="w-full text-sm" aria-label="AI proposals">
+                <thead>
+                  <tr className="border-border bg-muted/40 text-muted-foreground border-b text-left text-xs">
+                    <th scope="col" className="w-10 px-3 py-2.5">
+                      <input
+                        type="checkbox"
+                        checked={allSelected}
+                        onChange={toggleSelectAll}
+                        disabled={live.length === 0}
+                        aria-label="Select all proposals"
+                        className="border-border text-primary focus-visible:ring-ring h-4 w-4 rounded"
+                      />
+                    </th>
+                    <th scope="col" className="px-3 py-2.5 font-medium">
+                      Proposal
+                    </th>
+                    <th scope="col" className="px-3 py-2.5 font-medium">
+                      Change
+                    </th>
+                    <th scope="col" className="px-3 py-2.5 font-medium">
+                      Signals
+                    </th>
+                    <th scope="col" className="px-3 py-2.5 font-medium">
+                      Age
+                    </th>
+                    <th scope="col" className="px-3 py-2.5">
+                      <span className="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-border divide-y">
+                  {proposals.map((p) => {
+                    const first = p.changes[0]
+                    return (
+                      <ProposalRow
+                        key={p.id}
+                        proposal={p}
+                        selected={selected.has(p.id)}
+                        expanded={expanded.has(p.id)}
+                        summary={
+                          first
+                            ? `${String(first.before ?? '—')} → ${String(first.after ?? '—')}`
+                            : p.justification
+                        }
+                        onToggleSelect={() => toggleSelect(p.id)}
+                        onToggleExpanded={() => toggleExpanded(p.id)}
+                        onApprove={() => void runApply([toBulkItem(p)])}
+                        onDismiss={() => void handleDismissOne(p)}
+                        busy={busy}
+                        canApply={inlineApplyEnabled || p.kind === 'redirect'}
+                      />
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </SectionCard>
+
+      <ConfirmDialog
+        open={confirmApply}
+        onClose={() => setConfirmApply(false)}
+        onConfirm={() => void runApply(selectedProposals.map(toBulkItem))}
+        title={`Apply ${plural(selectedProposals.length, 'proposal')}?`}
+        description="Approved fixes write SEO fields, content links, or redirects immediately and mark their issues resolved. Each document keeps a version you can restore."
+        confirmLabel={`Apply ${plural(selectedProposals.length, 'proposal')}`}
+      />
+      <ConfirmDialog
+        open={confirmGenerate}
+        onClose={() => setConfirmGenerate(false)}
+        onConfirm={() => void handleGenerate()}
+        title={`Generate proposals for ${plural(eligible, 'eligible issue')}?`}
+        description={`Runs in passes of ${GENERATE_BATCH_SIZE}. AI tokens are spent for each issue; you can stop between passes.`}
+        confirmLabel="Generate"
+      />
+    </div>
+  )
+}
+
+function ProposalRow({
+  proposal: p,
+  selected,
+  expanded,
+  summary,
+  onToggleSelect,
+  onToggleExpanded,
+  onApprove,
+  onDismiss,
+  busy,
+  canApply,
+}: {
+  proposal: SeoProposal
+  selected: boolean
+  expanded: boolean
+  summary: string
+  onToggleSelect: () => void
+  onToggleExpanded: () => void
+  onApprove: () => void
+  onDismiss: () => void
+  busy: boolean
+  canApply: boolean
+}) {
+  return (
+    <>
+      <tr className={`${selected ? 'bg-accent/30' : ''} hover:bg-accent/20 transition-colors`}>
+        <td className="px-3 py-3 align-top">
+          {p.stale ? null : (
+            <input
+              type="checkbox"
+              checked={selected}
+              onChange={onToggleSelect}
+              aria-label={`Select proposal ${p.title}`}
+              className="border-border text-primary focus-visible:ring-ring h-4 w-4 rounded"
+            />
+          )}
+        </td>
+        <td className="px-3 py-3 align-top">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-foreground font-medium">{p.title}</span>
+            {p.severity ? (
+              <SeoStatusBadge
+                label={p.severity}
+                tone={
+                  p.severity === 'critical'
+                    ? 'critical'
+                    : p.severity === 'warning'
+                      ? 'fair'
+                      : 'neutral'
+                }
+              />
+            ) : null}
+            {p.stale ? <SeoStatusBadge label="Stale — regenerate" tone="poor" /> : null}
+          </div>
+          {p.entity.title || p.entity.url ? (
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              {p.entity.title ?? ''}
+              {p.entity.title && p.entity.url ? ' · ' : ''}
+              {p.entity.url ?? ''}
+            </p>
+          ) : null}
+        </td>
+        <td className="px-3 py-3 align-top">
+          <p className="text-foreground max-w-md truncate">{summary}</p>
+          <button
+            type="button"
+            className="text-primary hover:bg-accent focus-visible:ring-ring mt-1 inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs focus-visible:ring-2 focus-visible:outline-none"
+            onClick={onToggleExpanded}
+            aria-expanded={expanded}
+            aria-label={`${expanded ? 'Hide' : 'Show'} changes for ${p.title}`}
+          >
+            {expanded ? 'Hide changes' : 'Show changes'}
+            <ChevronDown
+              className={`h-3 w-3 motion-safe:transition-transform ${expanded ? 'rotate-180' : ''}`}
+              aria-hidden
+            />
+          </button>
+        </td>
+        <td className="px-3 py-3 align-top">
+          <div className="flex flex-wrap items-center gap-2">
+            <SourceBadge source={p.source} />
+            {typeof p.confidence === 'number' ? (
+              <SeoStatusBadge
+                label={`${Math.round(p.confidence * 100)}%`}
+                tone={confidenceTone(p.confidence)}
+              />
+            ) : null}
+            {typeof p.brandAlignment === 'number' ? (
+              <BrandScoreBadge score={p.brandAlignment} />
+            ) : null}
+          </div>
+        </td>
+        <td className="text-muted-foreground px-3 py-3 align-top text-xs whitespace-nowrap">
+          {relativeAge(p.generatedAt)}
+        </td>
+        <td className="px-3 py-3 align-top">
+          <div className="flex items-center justify-end gap-1">
+            {!p.stale && canApply ? (
+              <button
+                type="button"
+                onClick={onApprove}
+                disabled={busy}
+                className="text-success hover:bg-accent focus-visible:ring-ring rounded-md p-1.5 focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                aria-label={`Approve ${p.title}`}
+              >
+                <Check className="h-4 w-4" aria-hidden />
+              </button>
+            ) : null}
+            <button
+              type="button"
+              onClick={onDismiss}
+              disabled={busy}
+              className="text-muted-foreground hover:bg-accent focus-visible:ring-ring rounded-md p-1.5 focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+              aria-label={`Dismiss ${p.title}`}
+            >
+              <X className="h-4 w-4" aria-hidden />
+            </button>
+          </div>
+        </td>
+      </tr>
+      {expanded ? (
+        <tr>
+          <td colSpan={6} className="bg-muted/30 px-4 py-4">
+            <div className="space-y-3">
+              <p className="text-foreground text-sm">{p.justification}</p>
+              <ChangePreview changes={p.changes} />
+            </div>
+          </td>
+        </tr>
+      ) : null}
+    </>
+  )
+}