<!-- source-hash: 4f36d6b4b32c3b253b88e445f6e633a8 -->
A display component that shows context compaction status in a styled card, indicating either an in-progress summarization or a completed one.

## Key Components

- **`ContextCompactionDisplay`** — A forwarded-ref `div` component that renders a status banner with a label and icon based on the `status` prop
- **`status`** — Accepts `'started'` (in-progress) or any other value (completed), driving both the label text and icon displayed
- **Icons** — Uses `DotsLoaderIcon` for in-progress state and `CheckCircleIcon` for completed state

## Usage Example

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

// In-progress state
<ContextCompactionDisplay status="started" />
// Renders: "Context limit reached. Summarizing earlier messages." + spinner

// Completed state
<ContextCompactionDisplay status="completed" />
// Renders: "Earlier context summarized." + check icon

// With custom className
<ContextCompactionDisplay
  status="done"
  className="my-2 w-full"
/>
```

## Props

| Prop | Type | Description |
|------|------|-------------|
| `status` | `string` | `'started'` shows loader; any other value shows check icon |
| `className` | `string` | Optional additional CSS classes |
| `ref` | `React.Ref<HTMLDivElement>` | Forwarded ref to the root `div` |