<!-- source-hash: 42e35c13ea5f57f4bad0c0ee1df57d09 -->
Storybook stories for the `ApprovalBatchMessage` chat component, covering all approval lifecycle states (pending, executing, done, rejected, cancelled) for the "Command Block" UI pattern from Figma node 1092-2807.

## Key Components

| Export | Type | Description |
|---|---|---|
| `Pending` | `Story` | Shows Approve/Reject buttons; row is expandable to reveal call arguments |
| `ApprovedExecuting` | `Story` | Approved state with a grey loader while the tool call runs |
| `ApprovedDone` | `Story` | Approved and finished; green check with an expandable Result block |
| `Rejected` | `Story` | Red status tag, no execution initiated |
| `Cancelled` | `Story` | Grey status tag, no execution initiated |
| `AllStates` | `Story` | All five states rendered vertically for side-by-side Figma comparison |

**Helpers:**

- `toolCall` — a `PendingToolCallData` fixture for a `run_script` RMM tool requiring admin approval
- `makeData()` — factory producing `ApprovalBatchData` with optional per-call `ApprovalBatchExecutionState` overrides
- `constrainedDecorator()` — wraps stories in a `max-width` container (default 400 px) to match chat panel dimensions

## Usage Example

```typescript
import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";

// Pending approval
<ApprovalBatchMessage
  data={{
    approvalRequestId: "batch-1",
    approvalType: "ADMIN",
    toolCalls: [toolCall],
  }}
  status="pending"
  onApprove={() => handleApprove()}
  onReject={() => handleReject()}
/>

// Approved and finished
<ApprovalBatchMessage
  data={doneData}
  status="approved"
  resolvedByName="Michael Johnson"
/>
```

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