A React notification tile component for displaying and acting on approval requests, supporting optimistic UI updates, collapsible command previews, and auto-dismiss behavior. ## Key Components ### `ApprovalRequestNotificationTileProps` | Prop | Type | Description | |---|---|---| | `notification` | `Notification` | Source notification data | | `onApprove` | `(id: string) => void \| Promise` | Callback fired on approval | | `onReject` | `(id: string) => void \| Promise` | Callback fired on rejection | | `onComplete` | `(id: string) => void` | Called after successful resolution | | `onSettle` | `(id: string) => void` | Optional settle lifecycle hook | | `liveDurationMs` | `number` | Auto-dismiss duration for live tiles | | `defaultExpanded` | `boolean` | Whether the command section starts open | ### Internal State - **`localStatus`** — Optimistic `ChatApprovalStatus` set immediately on click; rolls back on request failure; defers to resolved backend status once available. - **`pinned`** — Prevents auto-dismiss when the user expands the command section mid-read. - **`processing`** — Disables action buttons and pauses the tile timer during async resolution. ### `resolve()` Internal async handler that applies optimistic status, calls the appropriate action callback, rolls back on error, and calls `onComplete` only after confirmed server-side success. ## Usage Example ```typescript import { ApprovalRequestNotificationTile } from './approval-request-notification-tile' { await api.approvals.approve(id) }} onReject={async (id) => { await api.approvals.reject(id) }} onComplete={(id) => dismissNotification(id)} onSettle={(id) => markSeen(id)} /> ``` **Source:** [`approval-request-notification-tile.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/approval-request-notification-tile.tsx)