Proposal review
An agent proposes, a person approves, rejects or edits: who proposes, what, how sure it is (in words and figures), the evidence as a signed diff, and the decision announced.
import { ProposalReview, DiffView } from "@krizaka/ui/proposal";Web only — React, from @krizaka/ui/proposal. Beta: its API may still change in a minor version.
- Mobile · ✗ to build. The Orazaka Mac app renders the web block (orazaka#109); a phone twin follows with the first phone approval screen. issue #673
Why it is here. Orazaka's runs: approvals in the run timeline and the review queue (orazaka-web-client#270, #275) and the Mac app's diffs (orazaka#109; krizaka-ui#673, B09).
When to use
- A run needs a human to approve what an agent proposes (a timeline step, a review queue, a diff with approval).
- Any proposal whose approval must be explicit, keyboard-reachable and announced.
When not to use
- For a plain yes/no question.Use instead: Confirm button
- For a destructive action you chose yourself.Use instead: Confirm button
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ProposalReview, DiffView } from "@krizaka/ui/proposal";Examples
Approve a change
A planner agent proposes a reminder change; the diff shows the lines; Approve, Reject and Edit.
Props
DiffView
The lines of a change, signed and labelled; colour only reinforces.
| Prop | Type | Default | Description |
|---|---|---|---|
linesrequired | readonly DiffLine[] | — | The lines of the change, in order. |
wordsrequired | DiffViewWords | — | The words, passed translated. |
ProposalReview
One proposal of an agent, its evidence, and the person's decision.
| Prop | Type | Default | Description |
|---|---|---|---|
agentrequired | string | — | The agent that proposes: its name, with its bird or mark in mark. |
confidencerequired | ProposalConfidence | — | How sure the agent is: in words, with the figure when known. |
onApproverequired | () => void | — | The person approves. |
onRejectrequired | () => void | — | The person rejects. |
staterequired | ProposalState | — | Where the decision stands; the host owns it. |
summaryrequired | string | — | What it proposes, in one sentence. |
wordsrequired | ProposalWords | — | The words, passed translated. |
busy | boolean | false | Blocks the actions while the host saves the decision. |
children | ReactNode | — | The evidence: a DiffView, a list, a quote. |
irreversible | boolean | false | The approval cannot be undone: it takes two presses. |
locale | string | — | BCP 47 language for the percentage. |
mark | ReactNode | — | The agent's bird or mark, drawn small beside its name. |
onEdit | (() => void) | — | The person edits the proposal first; the button shows only when given. |
Accessibility
- There is no slide-to-approve: a drag has no keyboard or screen-reader path (ADR-006).
DiffViewprefixes every line with a sign and a hidden word (Added, Removed, Unchanged); the colour is never the only signal.- The state is an
outputregion: it is read when it changes. - At 360 px the buttons wrap and the diff lines wrap; nothing scrolls sideways.
Keyboard
| Keys | Action |
|---|---|
| Tab | Approve, Reject, then Edit, in that order. |
| Enter / Space | Presses the focused button; an irreversible approval needs a second press. |
Best practices
- The host owns the state: pass
waitinguntil the decision is saved, thenapproved,rejectedorexpired; the new state is announced. - Set
irreversiblewhen approving cannot be undone: the primary button takes two presses. - Say the confidence in words (
label) and add the figure (percent); the chip's tone only reinforces. - Examples use a fictitious run with round demo amounts, never a ledger line.
Related components
Generated from the code of @krizaka/ui 3.69.0: its meta.ts, its examples and its types.Edit this documentation on GitHub