Screens / Judging the output

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.

Markdown

3 ways to lay it out

1. A document beside the conversation

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

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

Side panelProThe panel beside the thread: one tab per open item, each closable.
Artifact panelProA document or file to read beside the work.
CitationFreeAn inline [n] that opens its source in a popover.
Attachment previewFreeA file waiting to be sent, as a chip in the composer.
Document viewerProA PDF or scan in a tab of its own: the pages your app rendered, with labelled boxes over them.

Install a document beside the conversation

Pro and Premium items need a licence key; free ones install as they are.

2. Before and after

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

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

Compare sliderProTwo versions of the same thing with a divider the person drags.
DiffProA token-level diff.
Details listProTitled groups of label and value rows the person reads and confirms.
Code listingProA code file the agent changed, with its changes line by line against the version before.

Install before and after

Pro and Premium items need a licence key; free ones install as they are.

3. A record with its facts

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

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

Artifact panelProThe document.
Attributes railProA record's key and value facts as a definition list.
TreeProA hierarchy, with the keyboard behaviour of a tree.

Install a record with its facts

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

Model output is text, never markup
A document the model wrote is shown as text; a link in it is not clickable.
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
Keeping one version says whether the other is still available.

Already covered elsewhere

Pattern: Show a PDF beside the agent's work
Pattern: Document review: extracted values beside the page

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

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.