<!-- source-hash: 3206ceb65aad5349f453e11274a069c1 -->
Storybook stories for the **client-facing (Fae end-user) variant** of the `ApprovalRequestMessage` component, covering all approval lifecycle states as seen by the end client — where only the BE-generated explanation title is shown, never the raw command.

## Key Components

- **`meta`** — Storybook metadata configuring the story group under `Chat/Client/ApprovalRequestMessage`, with `variant="client"` applied globally via `args`
- **`baseData`** — Shared `ApprovalRequestData` fixture (`approvalType: "CLIENT"`, `command`, `explanation`, `requestId`) used across all stories
- **`plainDecorator`** — Wrapper utility that constrains story width and applies the CSS background token

## Exported Stories

| Story | Status | Description |
|---|---|---|
| `Pending` | `pending` | Title + Approve/Reject buttons; no command block rendered |
| `ApprovedByUser` | `approved` | Green `APPROVED BY JOHN SMITH` pill |
| `Approved` | `approved` | Plain `APPROVED` pill (no resolver name) |
| `RejectedByUser` | `rejected` | Red `REJECTED BY JOHN SMITH` pill |
| `Cancelled` | `cancelled` | Grey status pill |
| `NoTitleFallback` | `pending` | `explanation: undefined` triggers `"Approval required"` placeholder |

## Usage Example

```typescript
// Render the client approval card in pending state
import { ApprovalRequestMessage } from "../components/chat/approval-request-message";

<ApprovalRequestMessage
  variant="client"
  data={{
    command: "brew install --cask slack",
    requestId: "req-client-1",
    approvalType: "CLIENT",
    explanation: "Install Slack via Homebrew Cask on macOS",
  }}
  status="pending"
  onApprove={() => handleApprove()}
  onReject={() => handleReject()}
/>
```

> **Note:** With `variant="client"`, the raw `command` string is never rendered — only the `explanation` title is visible to the end user, per Figma node 203-11947 (`fae-approval-block`).