# Build the "Follow-up suggestions" pattern: `FollowUpChips`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Post-response chips that propose the next reasonable move, keeping momentum without new typing.

Use it when: Multi-turn work where the next step is predictable and cheap to offer.

## What to build
A short row of next-step chips shown under an AI response, generated from what the response said. Each chip states its cost or duration, so a cheap reply and an expensive run never look the same. It renders at the end of a chat or answer message.

### Props
- `suggestions`: Array<{ id: string; text: string; kind: "reply" | "run"; costLabel?: string }>, at most three, e.g. { text: "Research the price change by cohort", kind: "run", costLabel: "Deep research, about 2 min" }.
- `label?`: string, a heading such as "Follow-ups from this answer".
- `status`: "loading" | "ready" | "used" | "hidden", controlled by the parent.
- `usedId?`: string, the chip that was chosen, shown as selected in the used state.
- `onPick(id: string)`: called when a chip is chosen. The component never sends the message or starts the run itself.
- `onEdit?(text: string)`: puts the chip text into the composer for editing instead of sending.

### States it must render
- Loading: up to three slim placeholders after the response, so text does not jump when chips arrive.
- Ready: up to three chips; quick replies show "Instant" or nothing, runs show their cost label and a distinct marker.
- Used: the chosen chip stays visible as selected and the others are disabled, so the thread shows which path was taken.
- Hidden: nothing renders, used when the response has no sensible next step.

### Interactions
- Clicking a quick-reply chip calls `onPick` immediately.
- Clicking a run chip shows its cost on the chip and requires a second confirm (or the parent's own gate) before `onPick` fires.
- An edit affordance on each chip calls `onEdit` with its text, so a person can adjust before sending.

### Edge cases
- More than three suggestions passed in: render only the first three.
- Near-duplicate suggestions: the component cannot judge meaning, but it must drop exact or case-insensitive duplicates.
- A run chip with no `costLabel`: show "Cost unknown" rather than presenting it like a free reply.
- A new response arrives: the previous message's chips switch to used or hidden so only the latest set is actionable.

## Must avoid
Suggesting three variations of the same question, or chips that fire expensive runs with no cost signal.

## Engineering constraint
Generate follow-ups from the response, not the prompt, and cap at three to protect scan cost.

## Accessibility
- Chips are a labelled group of buttons; the cost label is part of each button's accessible name.
- Announce once when suggestions become available; do not move focus away from the response.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.