# Playbook check

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Government & legal](https://beamline.io/components/apps/government-legal) app. Live demo: https://beamline.io/components/playbook-check

A document's changes checked against a versioned playbook (a rulebook of what's acceptable). Each change shows what it was and is now, then two records that never merge: what the playbook says (acceptable, needs a change, not acceptable or unclear, with its confidence, the rule, why, and the playbook version and revision it was made on) and what a person decided (accept, reject or counter, with a comment, who and when; a decision against the advice is said). Advice on an older revision says to run again. How many are decided shows as progress, and closing the cycle, which makes decisions final, warns first and says how many stay open. Each change reads as a redline: words taken out struck in red, words put in underlined in blue (a sentence mostly rewritten is struck whole, then the new one).

## Use it for

- Checking a contract, policy or proposal against a written rulebook, with people deciding each point.
- Any review where automated advice and a person's decision must stay apart on the record.

## Not for

- Accepting or rejecting suggested edits inline in the text (the suggestion-layer signature).
- Approving a whole document ([document-review](https://beamline.io/components/document-review)).

## Anatomy

- header: the product's mark, the title, the document and revision
- toolbar: the playbook and version, Run review, how many are decided, Close review cycle
- each change: where, what, was and now; the playbook's record (verdict, confidence, rule, why, its stamp, stale advice); the decision record (Accept, Reject, Counter with a comment; or the decision, who and when, against the advice, Change)
- the close warning: decisions become final, how many stay open

## States

- not reviewed, reviewing, reviewed, refused (earlier advice unchanged), advice on an older revision
- change: undecided, deciding (a comment needed to reject or counter), saving, refused, decided, against the advice
- cycle: open, closing (warned), closed (final), refused
- phone: the records stack
- right to left: mirrors

## Keyboard

- Tab through the playbook, Run, Close, then each change's Why, Accept, Reject, Counter, the comment and Save; the close warning traps focus

## Motion

None of its own.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `document` (required) | `string` | — | The document's name. |
| `revision` (required) | `number` | — | The revision being reviewed. |
| `changes` (required) | `DocChange[]` | — |  |
| `playbooks` (required) | `Playbook[]` | — |  |
| `defaultPlaybook` | `string` | — |  |
| `assessments` | `Assessment[]` | — | Advice already given (it may be on an older revision: said). |
| `decisions` | `ChangeDecision[]` | — |  |
| `user` | `string` | — | Who decides. |
| `onRun` | `((playbookId: string) => Promise<Assessment[]>)` | — | Run the playbook over the changes; resolve with its advice. |
| `onDecide` | `((decision: ChangeDecision) => Promise<void>)` | — | Save a decision; reject to leave the change undecided. |
| `onClose` | `(() => Promise<void>)` | — | Close the review cycle; decisions become final. |
| `defaultDeciding` | `{ changeId: string; action: "accept" \| "counter" \| "reject"; comment?: string \| undefin…` | — | A change open for a decision at first, with its action chosen. |
| `product` | `string` | — |  |
| `className` | `string` | — | Classes on the documented visual root; no override by default. |
| `ref` | `Ref<HTMLDivElement>` | — | Receives the documented native target or imperative handle; omitted by default. |

## Built from

- [Alert Dialog](https://beamline.io/components/alert-dialog.md)
- [Avatar](https://beamline.io/components/avatar.md)
- [Button](https://beamline.io/components/button.md)
- [Empty state](https://beamline.io/components/empty-state.md)
- [Label](https://beamline.io/components/label.md)
- [Progress](https://beamline.io/components/progress.md)
- [Select](https://beamline.io/components/select.md)
- [Slot text](https://beamline.io/components/slot-text.md)
- [Spinner](https://beamline.io/components/spinner.md)
- [Textarea](https://beamline.io/components/textarea.md)

## Dependencies

`lucide-react`

## Import

```tsx
import { PlaybookCheck } from "@beamline/playbook-check";
```

## Get it

Playbook check is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Government & legal

- [Permit application](https://beamline.io/components/permit-application): A permit application filled in over several sittings on a city's portal. Steps with how many answers each still misses; the draft saved as you go and…
- [Permit services](https://beamline.io/components/permit-services): Where a permit starts on a city's permitting portal. The work's address resolved to the city (its permits are here) or the county around it (that office…
- [Permit fees](https://beamline.io/components/permit-fees): An applicant's permit fees on a city's portal. What's owed across how many permits and how much of it is overdue; every unpaid invoice with its permit…
- [Permit record](https://beamline.io/components/permit-record): A submitted permit seen by the applicant. The overview leads with what's waiting on them: the corrections to answer before the next version goes in, each…
- [Parcel record](https://beamline.io/components/parcel-record): A property's parcel on a permitting portal. The lot drawn to scale as a site plan: the street, the property lines with their lengths, the dashed setback…
- [Document review](https://beamline.io/components/document-review): A PDF going through review: the document in the viewer with every comment pinned to its place, the reviewers' threads beside it (open or resolved, one…
- [Signing request](https://beamline.io/components/signing-request): A document sent for signature, its signature page drawn in miniature with each side's block in order. Sides sign as numbered stages that move earlier or…
- [Audit room](https://beamline.io/components/audit-room): A compliance audit seen by the company preparing it or by the auditor reviewing it. Evidence keeps the company's readiness (not ready, flagged, ready for…
- [Agency book](https://beamline.io/components/agency-book): An insurance agency's book in two places. Estimated commission: the report named an estimate (not received or earned), as of a time; each source system…
- [Applicant company](https://beamline.io/components/applicant-company): A contractor's company on a permitting portal. Its identity with the licence and insurance it applies under, each said valid, expiring within 60 days…
- [Applicant projects](https://beamline.io/components/applicant-projects): An applicant's permits on a city's portal in one place. Projects through saved views (theirs, their company's, expiring within 30 days) and a search…
- [Lease renewals](https://beamline.io/components/lease-renewals): Leases coming up for renewal. The window leads: every tracked lease placed on the days ahead at its end date, coloured by whose step it is (yours, the…
- [Queue display](https://beamline.io/components/queue-display): The screen in a waiting room, read from across the room. It draws only a public projection of the queue (ticket codes and counters, never a name or a…
- [Visitor journey](https://beamline.io/components/visitor-journey): A visitor's way into a walk-in queue, on their phone. Branches first: each card names its address, whether it's open (until when, closing soon, full, or…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).
