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 uniquement — React, depuis @krizaka/ui/proposal. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. The Orazaka Mac app renders the web block (orazaka#109); a phone twin follows with the first phone approval screen. issue #673
Pourquoi il est là. 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).
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
- For a plain yes/no question.À la place : Confirm button
- For a destructive action you chose yourself.À la place : Confirm button
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ProposalReview, DiffView } from "@krizaka/ui/proposal";Exemples
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 | Défaut | Description |
|---|---|---|---|
linesrequis | readonly DiffLine[] | — | The lines of the change, in order. |
wordsrequis | DiffViewWords | — | The words, passed translated. |
ProposalReview
One proposal of an agent, its evidence, and the person's decision.
| Prop | Type | Défaut | Description |
|---|---|---|---|
agentrequis | string | — | The agent that proposes: its name, with its bird or mark in mark. |
confidencerequis | ProposalConfidence | — | How sure the agent is: in words, with the figure when known. |
onApproverequis | () => void | — | The person approves. |
onRejectrequis | () => void | — | The person rejects. |
staterequis | ProposalState | — | Where the decision stands; the host owns it. |
summaryrequis | string | — | What it proposes, in one sentence. |
wordsrequis | 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. |
Accessibilité
- 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.
Clavier
| Touches | Action |
|---|---|
| Tab | Approve, Reject, then Edit, in that order. |
| Enter / Space | Presses the focused button; an irreversible approval needs a second press. |
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.69.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub