Approval

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add approval

Usage#

Anatomy#

A header that says what and why, a preview sheet that shows exactly what will happen, an optional scope row, and the actions. Once decided, everything below the title folds away on one timing and the decision unfolds in the description's place, so the card you answered becomes the receipt instead of being swapped for one.

import {
  Approval,
  ApprovalHeader,
  ApprovalIcon,
  ApprovalHeading,
  ApprovalTitle,
  ApprovalDescription,
  ApprovalDecision,
  ApprovalRisk,
  ApprovalExpiry,
  ApprovalPreview,
  ApprovalScope,
  ApprovalActions,
  ApprovalEdit,
  ApprovalDeny,
  ApprovalApprove,
} from "@/components/ui/approval"

<Approval>
  <ApprovalHeader>
    <ApprovalIcon />
    <ApprovalHeading>
      <ApprovalTitle />
      <ApprovalDescription />
      <ApprovalDecision />
    </ApprovalHeading>
    <ApprovalRisk />
    <ApprovalExpiry />
  </ApprovalHeader>
  <ApprovalPreview />
  <ApprovalScope />
  <ApprovalActions>
    <ApprovalEdit />
    <ApprovalDeny />
    <ApprovalApprove />
  </ApprovalActions>
</Approval>

Command#

ApprovalCommand shows the exact command on a CodeSnippet sheet, wrapped rather than scrolled, so nothing hides past the edge of the card.

pnpm test --filter auth -- --coverage

File diff#

ApprovalDiff marks the lines that change, with real line numbers and a Show more clamp for long excerpts. Label the sheet with the file path.

export const session = {
  cookie: "koala_session",
Removed:   maxAge: 60 * 60 * 24 * 7,
Added:   maxAge: 60 * 60 * 12,
Added:   rolling: true,
}

Email draft#

ApprovalEmail lays out recipients and subject like a mail header, then the body as it will be sent.

Payment#

ApprovalPayment puts the amount first, large and in tabular figures, and formats it with a fixed locale so the server and the browser agree. Say the amount on the button too: a person should never approve a charge they did not read.

Parameters#

For any other tool, ApprovalParams lists the arguments as key and value rows. Anything richer goes in a bare ApprovalPreview, which is just the sheet.

Risk levels#

Five levels, set once on the root. ApprovalRisk words and tones the chip from it. Destructive requests get the soft destructive fill on Approve, and destructive and financial requests ignore the Enter shortcut: those take a deliberate press.

Scope#

ApprovalScope asks how long the yes holds: once, for this session, or always for this tool. It is a segmented ToggleGroup bound to the root's scope, and the choice comes back in onApprove.

Expiry#

An agent waiting on a person should not wait forever. ApprovalExpiry counts down in tabular figures, turns to the warning ink for the last ten seconds and expires the request at zero, which calls onExpire. Nothing runs.

Edit before approving#

ApprovalEdit switches the card to editing. The command and email previews turn into editors in the same type, Approve becomes Allow edited, and the edited text arrives as edited in onApprove. Esc or Discard edits goes back to the original. For your own preview, read and write the draft with useApproval().

Deny with a reason#

A bare no leaves the agent guessing. With withReason, the first press on Deny opens a field in place, above the buttons; Enter or a second press denies and hands the text to onDeny, so the agent can change course. The reason is optional and Esc closes the field.

drafts/q3-pricing-v1.md
drafts/q3-pricing-v2.md
drafts/q3-pricing-old.md

Receipts#

Every decided state, rendered from stored data. Pass the state, the scope or reason and the time, and the card renders as a receipt from the first frame with no animation.

Queue#

When an agent stacks up several requests, show one at a time with a count, and keep the answered ones as receipts above it. The next card takes focus, so Enter and Esc work down the queue without the mouse (the payment still takes a press).

  team: {
Removed:     price: 19,
Added:     price: 24,
    seats: "per seat",

API reference#

FAQ#