# Document review

Read a document or file an agent produced beside the work, compare it with what was there, and decide what to keep.

For: Anyone checking what an agent wrote or changed.

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

## Layouts

### A document beside the conversation

Pick it when: The default: the agent made a document and the person reads it while they keep talking.

Layout: The thread on the left; on the right a panel with one tab per open document.

Items:

- **Side panel** (`side-panel`, Pro; https://candor.themethodic.com/docs/side-panel.md): The panel beside the thread: one tab per open item, each closable.
- **Artifact panel** (`artifact-panel`, Pro; https://candor.themethodic.com/docs/artifact-panel.md): A document or file to read beside the work.
- **Citation** (`citation`, free; https://candor.themethodic.com/docs/citation.md): An inline [n] that opens its source in a popover.
- **Attachment preview** (`attachment-preview`, free; https://candor.themethodic.com/docs/attachment-preview.md): A file waiting to be sent, as a chip in the composer.
- **Document viewer** (`document-viewer`, Pro; https://candor.themethodic.com/docs/document-viewer.md): A PDF or scan in a tab of its own: the pages your app rendered, with labelled boxes over them.

```bash
npx candor-ui add side-panel artifact-panel citation attachment-preview document-viewer
```

### Before and after

Pick it when: The question is what changed: a rewrite against the original, or a restore against what is there now.

Layout: Two versions with a divider to drag, and the changed words marked beneath.

Items:

- **Compare slider** (`compare-slider`, Pro; https://candor.themethodic.com/docs/compare-slider.md): Two versions of the same thing with a divider the person drags.
- **Diff** (`diff`, Pro; https://candor.themethodic.com/docs/diff.md): A token-level diff.
- **Details list** (`details-list`, Pro; https://candor.themethodic.com/docs/details-list.md): Titled groups of label and value rows the person reads and confirms.
- **Code listing** (`code-listing`, Pro; https://candor.themethodic.com/docs/code-listing.md): A code file the agent changed, with its changes line by line against the version before.

```bash
npx candor-ui add compare-slider diff details-list code-listing
```

### A record with its facts

Pick it when: The document is about a record and the person needs its facts beside it.

Layout: The document in the middle, the record's facts on a rail at the side and its structure in a tree.

Items:

- **Artifact panel** (`artifact-panel`, Pro; https://candor.themethodic.com/docs/artifact-panel.md): The document.
- **Attributes rail** (`attributes-rail`, Pro; https://candor.themethodic.com/docs/attributes-rail.md): A record's key and value facts as a definition list.
- **Tree** (`tree`, Pro; https://candor.themethodic.com/docs/tree.md): A hierarchy, with the keyboard behaviour of a tree.

```bash
npx candor-ui add artifact-panel attributes-rail tree
```

## Rules that matter most here

- **Model output is text, never markup** (https://candor.themethodic.com/principles#model-text-is-text): A document the model wrote is shown as text; a link in it is not clickable.
- **Approve the exact change** (https://candor.themethodic.com/principles#approve-the-exact-change): What the person accepts is the change they were shown, word for word.
- **Say what can and can't be undone** (https://candor.themethodic.com/principles#say-what-can-be-undone): Keeping one version says whether the other is still available.

## Patterns that cover part of it

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

## Brief for a coding agent

Paste this to the agent that builds the screen.

```text
Build document review with Candor UI.
Show the agent's document in ArtifactPanel, as a tab of SidePanel beside the thread or full width.
For a PDF or a scan, render its pages in your app and show them in DocumentViewer in a tab of their own.
Render the model's text as text. Do not make links or HTML in it live.
Where the question is what changed, use CompareSlider for a visual comparison and Diff for the words.
Citation puts a source one step from the claim it supports.
Show the facts of the record in AttributesRail; use Tree for a document with a structure.
Say plainly whether the version the person isn't keeping can be got back.

Start from the "A document beside the conversation" layout: The thread on the left; on the right a panel with one tab per open document.
Candor items: side-panel (https://candor.themethodic.com/docs/side-panel.md), artifact-panel (https://candor.themethodic.com/docs/artifact-panel.md), citation (https://candor.themethodic.com/docs/citation.md), attachment-preview (https://candor.themethodic.com/docs/attachment-preview.md), document-viewer (https://candor.themethodic.com/docs/document-viewer.md).
Install: npx candor-ui add side-panel artifact-panel citation attachment-preview document-viewer
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.
```