<!-- source-hash: a00c050a6f1eac8477435dd9a06e4ae0 -->
Storybook stories for `ContextCompactionDisplay`, a chat UI component that renders inline status pills when conversation context is compacted — showing a dots loader for the `started` state and a green check for `completed`.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Started` | `Story` | Displays the in-progress state with a dots loader (`status: "started"`) |
| `Completed` | `Story` | Displays the finished state with a green check (`status: "completed"`) |
| `meta` | `Meta` | Storybook metadata wiring `ContextCompactionDisplay` under `Chat/ContextCompactionDisplay` |

## Usage Example

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

// In-progress: shows "Context limit reached…" with a dots loader
<ContextCompactionDisplay status="started" />

// Finished: shows "Earlier context summarized." with a check
<ContextCompactionDisplay status="completed" />
```

## Notes

- Stories are tagged with `autodocs` for automatic Storybook documentation generation.
- The `plainDecorator` wraps each story in a `max-width: 640px` container with the `--color-bg` CSS variable applied, matching the chat surface background.
- The underlying component (`context-compaction-display`) lives at [`components/chat/context-compaction-display`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/chat/context-compaction-display.tsx).