# Build the "Branches" pattern: `VersionTree`

## 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
Iteration that forks rather than overwrites, so earlier good states stay reachable.

Use it when: Exploratory work where the fifth attempt is often worse than the second.

## What to build
A navigator for an iterative session modelled as a tree: every attempt is a node with a stable id, and retrying from an earlier version forks a new branch instead of overwriting later ones. A person can view, compare, continue from or link to any version. It renders as a compact version switcher with an expandable tree beside the output.

### Props
- `nodes`: Array<{ id: string; parentId: string | null; label: string; createdAt: Date; summary?: string; starred?: boolean; instruction?: string }>, the session tree.
- `currentId`: string, the version shown in the main view.
- `onSelect(id)`: show that version without changing anything.
- `onBranchFrom(id)`: start a new attempt from this version; the parent adds the child node.
- `onStar?(id, starred)`, `onCopyLink?(id)` and `onCompare?(aId, bId)`: callbacks.
- `status`: "idle" | "generating", with `generatingFromId?` to show where a new node will appear.
- `view`: "switcher" | "tree", controlled with `onViewChange`.

### States it must render
- Switcher: "v2 of 5" with previous and next among siblings, plus the branch's path (v1 > v2 > v5).
- Tree: every version as a node with label, summary and time; the current one highlighted and starred ones marked.
- Generating: a placeholder child node under the version being branched from, labelled "New attempt".
- Viewing an earlier version: a banner "You're viewing v2. Later versions v3 and v4 are kept" with "Try again from here".
- Single version: the switcher hides; the tree reads "Only one version so far".

### Interactions
- Selecting a node calls `onSelect`; it never deletes or reorders other nodes.
- "Try again from here" calls `onBranchFrom` with the shown version; the new node appears as a sibling of later attempts, not a replacement.
- Compare: choosing two nodes calls `onCompare`.
- Copy link calls `onCopyLink` with the node's stable id.

### Edge cases
- Deep or wide trees: collapse branches not on the current path, showing "+3 versions".
- A linked id that no longer exists: show "This version isn't available" and fall back to the latest on the same branch.
- Branching while a generation is in progress: queue or disable "Try again" with the reason.
- Nodes with identical summaries: always show the label and time so they stay distinguishable.

## Must avoid
A linear history where regenerating destroys the version the user actually preferred.

## Engineering constraint
Model the session as a tree, not a list; every node needs a stable, linkable ID.

## Accessibility
- The tree uses `role="tree"` with `treeitem`s, arrow-key navigation and `aria-current` on the shown version.
- Announce "Branched from v2: new attempt v5" when a new node arrives.

## 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.