feat(forkchoice): add color legend to fork choice viz (#338)

# Pull Request Template

## 🗒️ Description / Motivation

Adds a four-swatch color legend to the right side of the `info-bar` on
the fork choice visualization
(`crates/net/rpc/static/fork_choice.html`).

Issue #335 lists the four colors the viz uses and asks for an in-page
legend so users do not have to guess which color means what. The mapping
lives in the `COLORS` object inside the page script (lines 178-181) and
is never surfaced in the rendered UI today, so anyone looking at the viz
either has to know the convention from project docs or open dev tools
and read the JS source. A small swatch-and-label list in the existing
top bar fixes that without changing any of the actual viz logic.

## What Changed

`crates/net/rpc/static/fork_choice.html`:

- Adds `#legend`, `.legend-item`, and `.legend-swatch` CSS rules in the
existing `<style>` block. The legend uses `margin-left: auto` so it pins
to the right edge of the `#info-bar`, and `flex-wrap: wrap` so it
relaxes onto a second line on narrow viewports without breaking the
existing Head/Justified/Finalized/Validators value cards.
- Adds a `<div id="legend" aria-label="Block color legend">` element
after the `Validators` item inside `#info-bar`. Four `.legend-item`
rows, one per role: Finalized (`#4caf50`), Justified (`#2196f3`), Safe
target (`#ffeb3b`), Head (`#ff9800`). Hex values are copied from the
`COLORS` object in the existing JS so the swatches cannot drift from the
actual rendered colors. Label text uses the same casing convention
(uppercase, 11px, `#888`) the existing info-bar labels use.

No JavaScript changes. The `COLORS` object stays the single source of
truth for what each role renders as; the legend is hand-keyed to match.

## Correctness / Behavior Guarantees

- No JS logic touched. The viz still renders nodes through
`nodeColor(node, data)` (line 209) using the same `COLORS` object that
drives the new legend swatches.
- No new network calls or polling. The legend is static markup.
- The existing `#info-bar` flex container is preserved. The legend is
appended after the `Validators` item; the existing four value cards keep
their original order and alignment.
- `aria-label="Block color legend"` is set on the legend container so
screen readers announce the section.
- `flex-wrap: wrap` on `#info-bar` was already present in the existing
styles, so the legend wrapping onto a second line on narrow viewports
does not change layout behavior elsewhere.

## Tests Added / Run

`fork_choice.html` is a static asset served directly by the RPC layer
(`GET /lean/v0/fork_choice/ui`). There is no compile or asset build step
to run, so the existing test suite does not cover it.

I did not bring up a node + browser locally to confirm the legend
renders (no devnet available in this environment). The swatch hex values
are byte-equal to the `.value-*` CSS rules and the JS `COLORS` object
that already exist in the file, so the displayed swatches cannot drift
from the actual node colors. After the change:

```
$ grep -F "background: #" crates/net/rpc/static/fork_choice.html
        <div class="legend-item"><span class="legend-swatch" style="background: #4caf50;"></span>Finalized</div>
        <div class="legend-item"><span class="legend-swatch" style="background: #2196f3;"></span>Justified</div>
        <div class="legend-item"><span class="legend-swatch" style="background: #ffeb3b;"></span>Safe target</div>
        <div class="legend-item"><span class="legend-swatch" style="background: #ff9800;"></span>Head</div>
```

matches the four entries in the existing `COLORS = { finalized,
justified, safeTarget, head }` declaration.

## Related Issues / PRs

- Closes #335

Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Pablo Deymonnaz <pdeymon@fi.uba.ar>

Author: mvanhorn

crates/net/rpc/static/fork_choice.html

@@ -78,6 +78,31 @@
     .value-finalized { color: #4caf50; }
     .value-validators { color: #e0e0e0; }
 
+    #legend {
+      display: flex;
+      gap: 12px;
+      margin-left: auto;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .legend-swatch {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
     #chart-container {
       flex: 1;
       overflow: auto;
@@ -185,6 +210,12 @@
       <span class="label">Validators</span>
       <span class="value value-validators" id="validator-count">--</span>
     </div>
+    <div id="legend" aria-label="Block color legend">
+      <div class="legend-item"><span class="legend-swatch" style="background: #4caf50;"></span>Finalized</div>
+      <div class="legend-item"><span class="legend-swatch" style="background: #2196f3;"></span>Justified</div>
+      <div class="legend-item"><span class="legend-swatch" style="background: #ffeb3b;"></span>Safe target</div>
+      <div class="legend-item"><span class="legend-swatch" style="background: #ff9800;"></span>Head</div>
+    </div>
     <button id="follow-head-toggle" type="button" aria-pressed="true">Following Head</button>
   </div>