# Extraction review

Check the values an agent extracted from a document against the page, correct what's wrong and send what the person accepted.

For: Whoever signs off what an extraction agent read: a clerk entering invoices, a claims handler, a reviewer in finance or legal.

Web page: https://candor.themethodic.com/screens/document-extraction

## Layouts

### Fields beside the page

Pick it when: The default: one document of a few pages, with a list of fields to check one by one.

Layout: The page on the left with boxes over the values the agent found; the fields on the right, each with its value, confidence and Accept or Change; the summary and Send review at the foot.

Items:

- **Extraction review** (`extraction-review`, Pro; https://candor.themethodic.com/docs/extraction-review.md): The fields beside the pages: value, confidence, where it came from, Accept or Change, and Send review with exactly what was decided.
- **Document viewer** (`document-viewer`, Pro; https://candor.themethodic.com/docs/document-viewer.md): The pages your app rendered, with the agent's boxes over them; selecting a box picks out its field.
- **Confidence mark** (`confidence-mark`, Pro; https://candor.themethodic.com/docs/confidence-mark.md): How sure the extraction is, with what it rests on.
- **Change hash** (`change-hash`, Pro; https://candor.themethodic.com/docs/change-hash.md): The sha256 of the reviews, the same in the browser and on the server, so the record holds exactly what was accepted.

```bash
npx candor-ui add extraction-review document-viewer confidence-mark change-hash
```

### A queue of documents

Pick it when: Documents arrive faster than one person opens them, and each extraction waits until someone reviews it.

Layout: A table of documents with how many fields each has open; opening one fills the rest of the screen with its review.

Items:

- **Document progress queue** (`document-progress-queue`, Pro; https://candor.themethodic.com/docs/document-progress-queue.md): The batch as the agent works through it: each document queued, working with its stage, done, or failed with the reason and Retry.
- **Data table** (`data-table`, Pro; https://candor.themethodic.com/docs/data-table.md): The documents waiting, with search, sort and filters over them.
- **Assignee picker** (`assignee-picker`, Pro; https://candor.themethodic.com/docs/assignee-picker.md): Who reviews a document, a person or an agent, with the load and availability your app passes; nobody is suggested.
- **Extraction review** (`extraction-review`, Pro; https://candor.themethodic.com/docs/extraction-review.md): The opened document's fields beside its pages.
- **useKeyboardReview** (`use-keyboard-review`, Pro; https://candor.themethodic.com/docs/use-keyboard-review.md): J and K to move, Y to keep and N to drop, for a list of extracted rows your app draws itself, such as an invoice's line items.
- **Page state** (`page-state`, free; https://candor.themethodic.com/docs/page-state.md): An empty queue, or a document that couldn't be loaded, with one next step.

```bash
npx candor-ui add document-progress-queue data-table assignee-picker extraction-review use-keyboard-review page-state
```

### In the conversation

Pick it when: The agent read the document during a chat, and the person checks it without leaving the thread.

Layout: The thread on the left; a side panel tab holds the pages above the fields to review.

Items:

- **Thread** (`thread`, free; https://candor.themethodic.com/docs/thread.md): The conversation in which the agent read the document.
- **Side panel** (`side-panel`, Pro; https://candor.themethodic.com/docs/side-panel.md): The panel beside the thread; the review is one of its tabs.
- **Extraction review** (`extraction-review`, Pro; https://candor.themethodic.com/docs/extraction-review.md): The pages above the fields when the panel is narrow.

```bash
npx candor-ui add thread side-panel extraction-review
```

## Rules that matter most here

- **Nothing is pre-selected in a decision** (https://candor.themethodic.com/principles#nothing-preselected): No field starts accepted, and Send review sends only the fields the person accepted or changed.
- **Unknown stays unknown** (https://candor.themethodic.com/principles#unknown-stays-unknown): A field with no confidence shows it as unknown, and one whose location wasn't recorded says so rather than showing a plausible box.
- **Approve the exact change** (https://candor.themethodic.com/principles#approve-the-exact-change): The reviews are hashed with changeHash, so the record holds exactly what the person accepted.
- **The agent is always named, by the app** (https://candor.themethodic.com/principles#agents-are-named): The values and the boxes are the agent's, and the app names the agent.

## Patterns that cover part of it

- Document review: extracted values beside the page: https://candor.themethodic.com/patterns/document-review.md
- Show a PDF beside the agent's work: https://candor.themethodic.com/patterns/pdf-rendering.md

## Brief for a coding agent

Paste this to the agent that builds the screen.

```text
Build extraction review with Candor UI.
Render the document's pages in your app (pdf.js onto a canvas, or images from your server) and pass them to ExtractionReview, which shows them with DocumentViewer.
Give each page its width and height in its own units, and each field's region in the same units, measured from the page's top-left corner.
Draw only the page on screen: render it when onPageChange names it, and mark it loading until it is drawn and as an error with the reason if it can't be.
Pass each field's confidence with its basis from the extraction; leave both out when there are none, and leave out a region the extraction didn't record.
Name the agent from your app's data with the agent prop, never from model output.
Start with nothing accepted. Send the reviews onSubmit gives you with their changeHash, and check the hash on your server before saving.
Pass locked with the reason when the person can read the fields but not decide them.
For a batch, show DocumentProgressQueue while the agent works through it: it never shows time left, and a stage's bar only when your pipeline measured how far it is; give each finished document a reviewer with AssigneePicker.
For a list of extracted rows you draw yourself, useKeyboardReview gives it the same keys: J and K, Y keep, N drop, U undo.

Start from the "Fields beside the page" layout: The page on the left with boxes over the values the agent found; the fields on the right, each with its value, confidence and Accept or Change; the summary and Send review at the foot.
Candor items: extraction-review (https://candor.themethodic.com/docs/extraction-review.md), document-viewer (https://candor.themethodic.com/docs/document-viewer.md), confidence-mark (https://candor.themethodic.com/docs/confidence-mark.md), change-hash (https://candor.themethodic.com/docs/change-hash.md).
Install: npx candor-ui add extraction-review document-viewer confidence-mark change-hash
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.
```