<!-- source-hash: 4ea3d14913c5982b17e29bcfa31d3441 -->
A React component that displays the status of context compaction (summarization) for AI chat interfaces, showing either an in-progress or completed state.

## Key Components

**`ContextCompactionDisplay`** — A `forwardRef` component that renders a styled status banner indicating whether context summarization is in progress or has completed.

| Status | Label | Icon |
|---|---|---|
| `started` | "Context limit reached. Summarizing earlier messages." | `DotsLoaderIcon` (animated) |
| *(any other)* | "Earlier context summarized." | `CheckCircleIcon` (success) |

**Props** (`ContextCompactionDisplayProps`):
- `status` — Controls which state is displayed (`'started'` or completed)
- `className` — Optional class overrides merged via `cn()`
- Forwards all other `HTMLDivElement` props and the `ref`

## Usage Example

```typescript
import { ContextCompactionDisplay } from "./context-compaction-display"

// In-progress state
<ContextCompactionDisplay status="started" />

// Completed state
<ContextCompactionDisplay status="completed" />

// With custom className
<ContextCompactionDisplay
  status="started"
  className="mt-2 mx-4"
/>
```

## Notes

- Styled with ODS design tokens (`bg-ods-card`, `border-ods-border`, `text-ods-text-secondary`, `text-ods-success`) — ensure your project includes the OpenFrame Design System token definitions.
- The `displayName` is explicitly set to `"ContextCompactionDisplay"` for better React DevTools visibility.
- Source: [`context-compaction-display.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/context-compaction-display.tsx)