<!-- source-hash: 53c5e53d9aa5256ad542ac1abea08fb2 -->
Renders an approval batch message UI component that displays pending AI tool calls requiring user approval, with support for both admin and client (end-user) variants, expandable tool call details, and real-time execution status tracking.

## Key Components

### `ApprovalBatchMessage` (default export)
The main `forwardRef` component rendering a bordered card containing one or more tool call rows, explanation bullets, and Approve/Reject action buttons.

**Key props:**
- `data` — batch segment data including tool calls and approval request ID
- `status` — `"pending"` | `"approved"` | `"rejected"` | `"cancelled"`
- `onApprove` / `onReject` — async callbacks receiving the `requestId`
- `variant` — `"admin"` (full preview, expandable args/results) or `"client"` (titles + actions only)
- `maxBodyHeight` — constrains tool list height with internal scroll
- `showExecutionStatus` — toggles per-tool execution spinner/check/cross icons
- `showFooterActions` — hides Approve/Reject when host owns the action row
- `resolvedByName` — name shown alongside the resolved status tag

### `ApprovalStatusTag`
Standalone badge for resolved batches. Renders a `Tag` component with icon for `approved`, `rejected`, or `cancelled` states; returns `null` while pending. Supports `inlineResolver` to embed `"by {name}"` inside the pill.

### `ToolCallRow` (internal)
Admin-only collapsible row showing tool icon, command preview, execution status icon, and expandable arguments/result block.

### `ExecutionStatusIcon` (internal)
Resolves the correct icon based on batch status and per-tool execution state: `DotsLoaderIcon` while queued/executing, `CheckCircleIcon` on success, `XmarkCircleIcon` on failure.

## Usage Example

```typescript
import { ApprovalBatchMessage } from "@openframe/ui"

// Admin view — full command preview with execution tracking
<ApprovalBatchMessage
  data={batch.data}
  status={batch.status}
  variant="admin"
  showExecutionStatus
  maxBodyHeight={400}
  resolvedByName="Jane Doe"
  onApprove={async (requestId) => {
    await approveRequest(requestId)
  }}
  onReject={async (requestId) => {
    await rejectRequest(requestId)
  }}
/>

// Client (Fae end-user) view — titles + action buttons only
<ApprovalBatchMessage
  data={batch.data}
  status={batch.status}
  variant="client"
  resolvedByName="Jane Doe"
  onApprove={handleApprove}
  onReject={handleReject}
/>

// Notification tile — host owns the action row
<ApprovalBatchMessage
  data={batch.data}
  status={batch.status}
  showFooterActions={false}
  showExecutionStatus={false}
/>
```