Read docs/PROMPT_liveview_fixes.md

# Prompt — Live view fixes (fitness curve explainers, legend, axis, generation navigation)

Fix the Live view: clearer "?" explainers on the fitness curve, a centered y-axis label, a legend you can actually read, no overlapping labels, and fast generation navigation. Presentation-only — no logic/science changes. Reuse the existing InfoTip and calm theme. READ the chart + generation-stepper code first (Recharts or custom SVG) — don't assume names.

## 1. Y-axis "?" (negative association)
Add/clarify the "?" for the y-axis with this text (verbatim): "This shows how strongly the program's score moves OPPOSITE to mutation burden — low score where mutations are high (the broken-spell-checker pattern). 0 = no relationship; higher = a stronger opposite-direction link; the top = score and mutation count move almost perfectly oppositely. The underlying correlation is negative (e.g. −0.49); we plot its strength (0.49) so up = better, like every fitness curve. (For the MSI objective this axis instead shows separation / AUROC.)"

## 2. "best vs median" "?"
Set its text to (verbatim): "Each generation has a whole population of programs, each with a fitness. 'best' is the single highest-scoring program that generation (the champion); 'generation median' is the middle one (half score higher, half lower). Best shows the ceiling and whether it's still climbing; median shows whether the WHOLE population is improving. When median rises toward best (as here), good structure is spreading — the population is converging. A persistent gap means a few standouts still lead a varied crowd."

## 3. Center the y-axis title
Center the rotated y-axis title vertically along the axis (it currently sits at the top). Recharts: YAxis label position "insideLeft", angle -90, style { textAnchor: "middle" }, dy centered. Custom SVG: rotated <text> at the plot's vertical midpoint, text-anchor middle. Keep the label objective-dependent ("negative association" for TMB / "separation (AUROC)" for MSI).

## 4. Make the two lines distinguishable — on the chart AND in the legend
- best = SOLID line, accent #3A6B7E, slightly thicker.
- generation median = DASHED line, muted #6E7F8C.
- The legend swatches must show the SAME solid-vs-dashed styles (not two identical dots), each beside its label.

## 5. Fix the label collision
The x-axis title "generation" currently overlaps the "median" legend entry. Increase the chart's bottom margin and lay them out on SEPARATE rows with clear spacing — e.g. tick numbers, then the "generation" axis title, then the legend below it (or legend above the title) with a gap. Nothing should overlap.

## 6. Easier generation navigation
Replace the click-only "‹ Generation N / total ›" stepper with a fast navigator (so you can jump from 1 to 60 in one move, not 60 clicks):
- A draggable SLIDER (range input) spanning all available generations — drag to jump anywhere instantly; show the current generation number live while dragging.
- Keep the ‹ › arrows for ±1 fine steps, and add jump-to-first (|‹) and jump-to-latest (›|) buttons.
- A small numeric input to type a generation and go there directly.
- Bind the max to generations available so far (it grows during a live run; "latest" tracks the newest).
- PERFORMANCE: while dragging, do NOT fetch on every intermediate value — update the displayed number live but fetch the population only on release (or throttle to ~1 fetch / 150ms). Otherwise it hammers /runs/{id}/population.
- Accessible: slider has an aria-label and value text; when focused, ← → move ±1 and Home/End jump to first/latest.
Reuse the calm theme; keep it compact above the population grid.

## Confirm
Both "?" open with the new text; the y-axis title is vertically centered (and objective-dependent); best (solid) and median (dashed) are clearly tellable apart in chart and legend; "generation" and the legend no longer overlap; and you can jump to any generation via the slider/input without clicking through each one, with no fetch storm while dragging. These are Client Components.