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

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.