<!-- source-hash: 2177d7e46f18605feaab85e2a98af352 -->
Storybook stories for the `ApprovalRequestMessage` component, covering all approval states (pending, approved, rejected, cancelled) and content variants (structured fields vs. explanation prose).

## Key Components

| Export | Description |
|---|---|
| `Pending` | Default state with Approve/Reject action buttons visible |
| `Approved` | Resolved state showing a green status tag |
| `Rejected` | Resolved state showing a red status tag |
| `Cancelled` | Resolved state showing a grey status tag |
| `WithExplanation` | Pending state using free-text explanation instead of structured fields |
| `constrainedDecorator` | Local helper that wraps each story in a `400px`-wide container to simulate chat bubble constraints |

## Usage Example

```typescript
import { ApprovalRequestMessage } from "../components/chat/approval-request-message";
import type { ApprovalRequestData } from "../components/chat/types";

const data: ApprovalRequestData = {
  command: `Get-CimInstance Win32_Process | Select-Object ProcessId, Name`,
  requestId: "req-1",
  approvalType: "ADMIN",
  fields: [
    { label: "Tool", value: "OpenFrame RMM" },
    { label: "RunAsUser", value: "False" },
    { label: "timeoutSeconds", value: "60" },
  ],
};

// Pending — shows Approve / Reject buttons
<ApprovalRequestMessage
  data={data}
  status="pending"
  onApprove={() => handleApprove()}
  onReject={() => handleReject()}
/>

// Resolved — buttons replaced by a status tag
<ApprovalRequestMessage data={data} status="approved" />
```

## Notes

- This is the **legacy single-command variant**. For new surfaces, prefer `ApprovalBatchMessage`, which additionally tracks per-tool execution results.
- The `fields` array and `explanation` string are mutually exclusive — use one or the other to provide context below the command bar.
- Stories are registered under `Chat/Admin/ApprovalRequestMessage` in the Storybook sidebar.

**Source:** [`ApprovalRequestMessage.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ApprovalRequestMessage.stories.tsx)