# AI Review Panel > A side panel for checking extracted values one by one — each field shows its value, the model's reasoning and verbatim evidence that highlights in the source, with accept, dismiss and apply-all-pending. - Category: review - Job: Trust — Check results against sources, diffs and confidence, and make AI content and data handling visible. - Slug: `ai-review-panel` - HTML: https://ai-patterns.app/patterns/review/ai-review-panel - JSON: https://ai-patterns.app/api/patterns/review/ai-review-panel - Seen in: [datamaran](https://www.datamaran.com/) ## Summary A side panel for checking values the model extracted from a source document. Each field is a collapsible card showing the extracted value, the model's reasoning, and the exact passages it relied on. Hovering a passage highlights it in the source; clicking scrolls to it. The user accepts or dismisses each field, or applies every pending one at once, and a segmented status bar and filter tabs show how much is left to review. ## When to use - Document extraction: contracts, regulatory notices, invoices, filings, medical or insurance forms, where each value must be traceable to the text. - Reviews where the user is accountable for the result and needs to see *why* the model chose a value, not just the value. - Long sources where finding the supporting passage by hand would take longer than checking it. ## When not to use - Values with no single source passage (summaries, sentiment, scores). Show reasoning in a trace instead. - Enrichment from the open web, where the user mostly fills empty fields. Use AI Fill Drawer. - One or two fields. Inline suggestions next to the input are lighter than a panel. - When values can be edited freely and checked later. Without an accountable review step, the per-field ceremony is overhead. ## Anatomy - **Header** — ✦ title, "View source", close. - **Status bar** — a segmented bar, one segment per status (dismissed, pending, accepted), each sized by its share of fields, with "N of M reviewed". - **Filter tabs** — All, Pending, Accepted, Dismissed, each with a count badge tinted in its status color. - **Search** — filters by field name or value. - **Field card** — collapsed: status dot, field name, value preview, chevron. Expanded: - **Value** — the extracted value, marked ✦. - **Reasoning** — one short paragraph, collapsible. - **Evidence** — one or more verbatim quotes with an accent rule on the left and the hint "Hover to preview · click to view in text", collapsible. - **Actions** — Pending: Dismiss / Accept. Accepted: Undo. Dismissed: Restore. - **Footer** — a full-width "Apply all pending (N)" button, which becomes "All fields reviewed" when nothing is pending. ## Behavior - Every field starts pending unless the host already knows otherwise (e.g. accepted in an earlier session). - One card is open at a time. Opening another closes the previous one. - Accept and Dismiss change the dot, the tab counts and the status bar together; segments animate to their new widths. - Restore and Undo both return a field to pending. Nothing is final until the host saves. - Under a status tab, a field whose status changes leaves the list with a short exit animation, so the user sees where it went. - "Apply all pending" accepts only pending fields. Dismissed fields stay dismissed. - Hovering or focusing a quote previews it: the matching passage is highlighted in the source. Leaving clears the preview. Clicking pins the highlight and scrolls the source to it. - Evidence must be a verbatim substring of the source. Drop any quote the host can't find in the source before passing it in, rather than highlighting the wrong passage. - Search and the tab filter combine. An empty result says what was searched ("No fields match 'date'"). ## Content guidelines - Field names are the reviewer's vocabulary ("Degree of binding force"), sentence case. - Values are short and normalized: dates in one format, enums from the field's allowed list. - Reasoning is one to three sentences, cites what in the text decided it, and states doubt plainly ("It may not count as a consultation deadline") rather than hedging every value. - Quotes are the shortest passage that supports the value — a clause, not a paragraph. - Count, don't celebrate: "6 of 8 reviewed", "Apply all pending (3)". ## Accessibility - Filter tabs are a `tablist` with roving focus; ←/→ move between them. - Each card header is a button inside a heading, with `aria-expanded` and `aria-controls`; the status is in its accessible name, so color is never the only signal. - The status bar has a text alternative ("5 accepted, 2 pending, 1 dismissed"). - Each quote is a button labelled "View in source: ". Focus triggers the same preview as hover. - Status changes and "Apply all" are announced in a polite live region. - With `prefers-reduced-motion`, cards fade instead of expanding and the bar jumps to its new widths. ## Related patterns - **AI Fill Drawer** — Use it instead when values fill empty record fields from the web rather than coming from one document. - **Inline Citation** — Use it instead when the source links belong inside generated prose rather than beside extracted values. - **Confidence Indicator** — Use it as well next to a value when the model reports how sure it is. - **Human in the Loop Question** — Use it instead when a single agent action needs approval rather than a set of values. ## Implementation Reference implementation (React, TypeScript, Tailwind v4, Motion, Radix). Keep every rule from the spec above; if the host project has its own design system, re-express the markup and motion in it rather than copying these classes. npm dependencies: `lucide-react`, `motion` Local imports to provide: `@/lib/utils` (`cn` is the usual `clsx` + `tailwind-merge` helper). ```tsx title="component.tsx" "use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ArrowUpRight, Check, ChevronDown, Eye, RotateCcw, Search, Sparkles, X, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; export type ReviewStatus = "pending" | "accepted" | "dismissed"; export interface Evidence { id: string; /** The exact passage the value was extracted from. */ quote: string; } export interface ReviewField { key: string; label: string; /** The value the model extracted. */ value: string; /** Why the model chose this value — one short paragraph. */ reasoning: string; evidence: Evidence[]; /** Starting status. Defaults to "pending". */ status?: ReviewStatus; } export interface AiReviewPanelProps { fields: ReviewField[]; title?: string; /** Fires on every accept, dismiss, restore or undo — and once per field on "Apply all". */ onStatusChange?: (key: string, status: ReviewStatus) => void; /** Hover / focus on a quote: highlight it in the source. `null` clears. */ onEvidencePreview?: (evidence: Evidence | null) => void; /** Click on a quote: scroll the source to it. */ onEvidenceOpen?: (evidence: Evidence) => void; onViewSource?: () => void; onClose?: () => void; className?: string; } type Filter = "all" | ReviewStatus; const STATUS: Record< ReviewStatus, { label: string; dot: string; bar: string; badge: string } > = { dismissed: { label: "Dismissed", dot: "bg-red-500", bar: "bg-red-500", badge: "bg-red-500/10 text-red-600 dark:text-red-400", }, pending: { label: "Pending", dot: "bg-amber-500", bar: "bg-amber-500", badge: "bg-amber-500/15 text-amber-700 dark:text-amber-400", }, accepted: { label: "Accepted", dot: "bg-emerald-500", bar: "bg-emerald-500", badge: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400", }, }; const FILTERS: Filter[] = ["all", "pending", "accepted", "dismissed"]; export function AiReviewPanel({ fields, title = "AI Review", onStatusChange, onEvidencePreview, onEvidenceOpen, onViewSource, onClose, className, }: AiReviewPanelProps) { const reduceMotion = useReducedMotion(); const [status, setStatus] = React.useState>(() => Object.fromEntries(fields.map((f) => [f.key, f.status ?? "pending"])) ); const [filter, setFilter] = React.useState("all"); const [query, setQuery] = React.useState(""); const [expanded, setExpanded] = React.useState(null); const [announcement, setAnnouncement] = React.useState(""); const tabRefs = React.useRef>({}); const listId = React.useId(); const counts = React.useMemo(() => { const c = { all: fields.length, pending: 0, accepted: 0, dismissed: 0 }; for (const f of fields) c[status[f.key]] += 1; return c; }, [fields, status]); const q = query.trim().toLowerCase(); const visible = fields.filter( (f) => (filter === "all" || status[f.key] === filter) && (!q || f.label.toLowerCase().includes(q) || f.value.toLowerCase().includes(q)) ); function set(key: string, next: ReviewStatus) { setStatus((s) => ({ ...s, [key]: next })); onStatusChange?.(key, next); const label = fields.find((f) => f.key === key)?.label ?? key; setAnnouncement(`${label} ${next === "pending" ? "moved back to pending" : next}`); } function applyAll() { const pending = fields.filter((f) => status[f.key] === "pending"); setStatus((s) => ({ ...s, ...Object.fromEntries(pending.map((f) => [f.key, "accepted" as const])) })); pending.forEach((f) => onStatusChange?.(f.key, "accepted")); setAnnouncement(`${pending.length} field${pending.length === 1 ? "" : "s"} accepted`); } function onTabKey(e: React.KeyboardEvent, i: number) { const dir = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0; if (!dir) return; e.preventDefault(); const next = FILTERS[(i + dir + FILTERS.length) % FILTERS.length]; setFilter(next); tabRefs.current[next]?.focus(); } return ( ); } function FieldCard({ field, status, open, onToggle, onSet, onEvidencePreview, onEvidenceOpen, }: { field: ReviewField; status: ReviewStatus; open: boolean; onToggle: () => void; onSet: (s: ReviewStatus) => void; onEvidencePreview?: (e: Evidence | null) => void; onEvidenceOpen?: (e: Evidence) => void; }) { const reduceMotion = useReducedMotion(); const bodyId = React.useId(); return (

{open && (
Value {field.value}

{field.reasoning}

{field.evidence.length > 0 && (
    {field.evidence.map((ev) => (
    • ))}
)}
{status === "pending" ? ( <> onSet("dismissed")}> Dismiss onSet("accepted")}> Accept ) : ( onSet("pending")}> {status === "dismissed" ? "Restore" : "Undo"} )}
)}
); } function Section({ title, children }: { title: string; children: React.ReactNode }) { const [open, setOpen] = React.useState(true); const id = React.useId(); return (
{open && (
{children}
)}
); } function ActionButton({ primary, onClick, children, }: { primary?: boolean; onClick: () => void; children: React.ReactNode; }) { return ( ); } ```