labelled by the title and the command (so stacked prompts have distinct names). `data-decision="pending" | "approved" | "denied" | "always"`, `data-risk`. - **Title** (`data-slot="approval-prompt-title"`) — Heading; mutes once resolved. - **Risk** (`data-slot="approval-prompt-risk"`) — Risk badge with a coloured dot and text. - **Command** (`data-slot="approval-prompt-command"`) — Mono command well; the
 is `approval-prompt-code`.
- **Details** (`data-slot="approval-prompt-details"`) — Collapsible details (grid-rows transition, inert when closed).
- **Footer** (`data-slot="approval-prompt-footer"`) — Fixed-height footer holding actions and the resolution, so resolving never shifts layout.
- **Waiting** (`data-slot="approval-prompt-waiting"`) — Jade “Needs approval” pill — the view's one accent while pending.
- **Actions** (`data-slot="approval-prompt-actions"`) — Always allow / Deny (Esc) / Approve (⌘↵); inert once resolved.
- **Resolution** (`data-slot="approval-prompt-resolution"`) — role="status" line that cross-fades in: Approved / Denied / Always allowed.

## Accessibility

- Role: `region`
- A  labelled by the title and described by the description, so screen-reader users land on the whole request.
- Buttons expose their shortcuts with aria-keyshortcuts; keycaps are also rendered visually.
- The resolution is a status region, so the decision is announced; the action row becomes inert and hidden.
- Risk is conveyed in text (“High risk”), not only colour. No dark patterns: Deny is as prominent as Approve.
- Reduced motion: The waiting pulse stops and resolved states cross-fade without blur; details open without height travel.

| Keys | Action |
| --- | --- |
| Mod+Enter | Approve (while pending, when shortcuts is on) |
| Escape | Deny (while pending, when shortcuts is on; not while typing in an input) |
| Tab | Details, Always allow, Deny, Approve |

## Notes for agents

- Show the command verbatim — never paraphrase what will run.
- The decision is only UI state: actually gate the side effect on onApprove / onDecisionChange in your agent loop.
- Render past prompts with `defaultDecision` (or controlled `decision`) set to the stored outcome and `shortcuts={false}`.
- When several prompts are visible, enable `shortcuts` on the newest pending one only.

## Examples

### Low-risk command (minimal)

Title, command and risk.

```tsx
import { ApprovalPrompt } from "@kura-ui/react/approval-prompt";

export function ApprovalPromptMinimal() {
  return (
    
  );
}
```

### High-risk, every option (full)

Description, details, controlled decision, callbacks, Always allow, custom labels and ⌘↵ / Esc.

```tsx
"use client";

import { RotateCcw } from "lucide-react";
import * as React from "react";
import { Button } from "@kura-ui/react/button";
import { type ApprovalDecision, ApprovalPrompt } from "@kura-ui/react/approval-prompt";

export function ApprovalPromptFull() {
  const [decision, setDecision] = React.useState("pending");
  const [log, setLog] = React.useState([]);
  const note = (s: string) => setLog((l) => [...l.slice(-2), s]);
  return (
    
      
            Working directory: ~/code/kura-ui
            Requested by step 3 of 5, “Rebuild the docs”
            Not tracked by git — cannot be restored from history
          
        }
        decision={decision}
        onDecisionChange={setDecision}
        onApprove={() => note("approved")}
        onDeny={() => note("denied")}
        onAlwaysAllow={() => note("always allowed")}
        shortcuts
        approveLabel="Run anyway"
        denyLabel="Deny"
        alwaysAllowLabel="Always allow"
      />
      
        
          {log.length ? log.join(" → ") : "Try ⌘↵ or Esc"}
        
        
      
    
  );
}
```

### Resolved states (state)

Approved, denied and always-allowed, as they appear in history.

```tsx
"use client";

import { ApprovalPrompt } from "@kura-ui/react/approval-prompt";

export function ApprovalPromptResolved() {
  return (
    
      
      
       {}}
        shortcuts={false}
      />
    
  );
}
```

### Approve a file edit (composition)

A diff CodeBlock in the details, driving a ToolCall's status.

```tsx
"use client";

import { FilePen } from "lucide-react";
import * as React from "react";
import { CodeBlock } from "@kura-ui/react/code-block";
import { ToolCall } from "@kura-ui/react/tool-call";
import { type ApprovalDecision, ApprovalPrompt } from "@kura-ui/react/approval-prompt";

const DIFF = `@@ -1,4 +1,5 @@
 export const config = {
-  retries: 1,
+  retries: 3,
+  backoff: "exponential",
   timeout: 12_000,
 };`;

export function ApprovalPromptWithDiff() {
  const [decision, setDecision] = React.useState("pending");
  return (
    
      }
        status={
          decision === "pending" ? "awaiting-approval" : decision === "denied" ? "error" : "success"
        }
        error={decision === "denied" ? "Denied by user." : undefined}
        duration={decision === "approved" ? 240 : undefined}
        summary="+2 −1"
      />
      }
        risk="low"
        decision={decision}
        onDecisionChange={setDecision}
        shortcuts={false}
        approveLabel="Apply"
        details={}
      />
    
  );
}
```

## Dependencies

- npm: `lucide-react`
- Kura registry items: `kura-theme`, `button`, `kbd`, `use-controllable-state`, `use-hotkey`, `utils`
- Related: `tool-call`, `agent-timeline`, `code-block`, `kbd-shortcut`