<!-- source-hash: 8ff0735cc63d1ea7a83dab6aab9e0cc6 -->
A React component that renders an AI approval request card with pending (Approve/Reject buttons) and resolved (status tag) states, used in Mingo AI's chat interface for human-in-the-loop action confirmation.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `ApprovalRequestMessage` | `forwardRef` component | Main approval card with pending/resolved display states |
| `ApprovalCardBody` | Internal component | Shared card body (command block + fields/explanation) |
| `ApprovalFieldList` | Internal component | Stacked label/value `<dl>` rows for structured fields |

## Usage Example

```typescript
import { ApprovalRequestMessage } from "./approval-request-message"

// Pending state — shows Approve / Reject buttons
<ApprovalRequestMessage
  data={{
    requestId: "req_abc123",
    command: "apt-get install nginx --yes",
    explanation: "Installing nginx on the production web server.",
    fields: [
      { label: "Host", value: "web-01.prod" },
      { label: "Risk", value: "Low" },
    ],
  }}
  status="pending"
  onApprove={async (id) => await approveAction(id)}
  onReject={async (id) => await rejectAction(id)}
/>

// Resolved state — shows Approved/Rejected tag
<ApprovalRequestMessage
  data={{ requestId: "req_abc123", command: "apt-get install nginx --yes" }}
  status="approved"
/>
```

## Behavior Notes

- `status` defaults to `"pending"`; transitions to `"approved"` or `"rejected"` render a `<Tag>` with a `CheckCircle` or `XCircle` icon respectively
- Both `handleApprove` and `handleReject` set `isProcessing = true` during the async callback, disabling both buttons to prevent double-submission
- `fields` take rendering priority over `explanation` — if both are provided, only `fields` is shown
- The command block is scrollable (`max-h-32 overflow-y-auto`) for long commands