fix(forkchoice-viz): expose all role overlaps per block (lambdaclass#341)

## 🗒️ Description / Motivation

Each block in the fork choice tree can hold multiple roles at the same
time - the latest block is usually both the head and the safe target,
for instance. Until now the visualization only painted one color per
block, picked by a fixed priority (head > safe target > justified >
finalized), so whichever roles weren't on top got silently dropped. That
made it impossible to tell from the visualisation that a block was both
head and safe target, or to find the safe target at all when it
coincided with the head.

This PR makes every role visible. The primary color (the inner filled
circle) now follows a different priority - **finalized > justified >
safe target > head** (strongest commitment first) and any additional
roles the block holds are drawn as concentric rings around the primary
one, each in that role's color. The tooltip's `status:` line lists all
the roles, with each name colored to match its ring.

**Preview:**
<img width="427" height="473" alt="Screenshot 2026-05-01 at 16 43 16"
src="https://github.com/user-attachments/assets/f674d31f-853c-4dc7-b290-3130d60da024"
/>

<img width="474" height="780" alt="Screenshot 2026-05-01 at 17 10 44"
src="https://github.com/user-attachments/assets/8b88af48-01a8-473a-8327-094e604c1bcd"
/>

<img width="301" height="170" alt="Screenshot 2026-05-01 at 17 10 51"
src="https://github.com/user-attachments/assets/46bf1695-8514-4664-9013-5941dd88745d"
/>

## What Changed
- **New `nodeRoles(node, data)` helper** returning all roles a block
holds, ordered by *natural priority* (`finalized > justified >
safeTarget > head` — strongest commitment first). The first entry drives
the primary color; the rest become halo rings.
- **Concentric halo rings** outside the primary ring, one per secondary
role, in that role's color. Always present in the DOM (transparent when
unused) so role changes between polls just update stroke. Offsets `[6,
12, 18]` give comfortable spacing.
- **Tooltip `status:` line** lists all roles for the hovered block, each
colored with its role color (e.g., `safe target, head` rendered in
yellow + orange).


## Correctness / Behavior Guarantees
- **Viz-only change.** No consensus or weight-computation changes.
- **Primary color priority flipped** vs. main: previously `head >
safe_target > justified > finalized`; now `finalized > justified >
safeTarget > head`. A block that is both head + safe_target (the common
case) now renders **yellow primary with an orange halo** rather than the
previous pure-orange (which shadowed safe_target).

## Tests Added / Run
- No tests (client-side rendering only).
- Manual: ran a local single-node devnet (4 validators), confirmed halos
render correctly when head + safe_target overlap, tooltip lists multiple
colored roles, justified-only and finalized-only blocks render as
expected, no layout shift between polls.

## Related Issues / PRs
-  Closes lambdaclass#334

---------

Co-authored-by: Pablo Deymonnaz <pdeymon@fi.uba.ar>

Author: conache

crates/net/rpc/static/fork_choice.html

@@ -100,6 +100,12 @@
       cursor: pointer;
     }
 
+    .halo {
+      fill: none;
+      stroke-width: 2;
+      pointer-events: none;
+    }
+
     .node-inner {
       stroke: none;
       pointer-events: none;
@@ -205,6 +211,21 @@
       default: "#666"
     };
 
+    const ROLE_LABELS = {
+      finalized: "finalized",
+      justified: "justified",
+      safeTarget: "safe target",
+      head: "head"
+    };
+
+    // Concentric halos drawn outside the primary ring, one per secondary role.
+    const HALO_OFFSETS = [6, 12, 18];
+    const MAX_HALO_OFFSET = HALO_OFFSETS[HALO_OFFSETS.length - 1];
+    // Reserve label space below the outermost halo so the gap between the
+    // outermost circle and the label stays constant across all nodes,
+    // regardless of how many halos are drawn.
+    const LABEL_DY = NODE_RADIUS + MAX_HALO_OFFSET + 14;
+
     const container = document.getElementById("chart-container");
     const tooltip = document.getElementById("tooltip");
     const emptyMsg = document.getElementById("empty-message");
@@ -233,12 +254,16 @@
       return root.length > 10 ? root.slice(0, 10) : root;
     }
 
-    function nodeColor(node, data) {
-      if (node.root === data.head) return COLORS.head;
-      if (node.root === data.safe_target) return COLORS.safeTarget;
-      if (node.root === data.justified.root) return COLORS.justified;
-      if (node.slot <= data.finalized.slot) return COLORS.finalized;
-      return COLORS.default;
+    // Returns the roles that apply to a block, in natural priority order
+    // (strongest commitment first). The first entry drives the primary color;
+    // the rest become halos around it.
+    function nodeRoles(node, data) {
+      const roles = [];
+      if (node.slot <= data.finalized.slot)  roles.push("finalized");
+      if (node.root === data.justified.root) roles.push("justified");
+      if (node.root === data.safe_target)    roles.push("safeTarget");
+      if (node.root === data.head)           roles.push("head");
+      return roles;
     }
 
     function weightRatio(node, validatorCount) {
@@ -333,13 +358,18 @@
         d.x += centerOffset;
       });
 
-      const flatNodes = allDescendants.map(d => ({
-        ...d.data,
-        x: d.x,
-        y: d.y,
-        _color: nodeColor(d.data, data),
-        _ratio: weightRatio(d.data, data.validator_count)
-      }));
+      const flatNodes = allDescendants.map(d => {
+        const roles = nodeRoles(d.data, data);
+        return {
+          ...d.data,
+          x: d.x,
+          y: d.y,
+          _color: roles.length > 0 ? COLORS[roles[0]] : COLORS.default,
+          _ratio: weightRatio(d.data, data.validator_count),
+          // Colors of secondary roles, in priority order (after the primary).
+          _haloColors: roles.slice(1).map(r => COLORS[r])
+        };
+      });
 
       const links = [];
       hierarchy.links().forEach(link => {
@@ -367,17 +397,38 @@
     // requiring the user to move the mouse.
     let hoveredRoot = null;
 
-    function tooltipHtml(d, total) {
-      const pct = total ? parseFloat(((d.weight / total) * 100).toFixed(2)) : 0;
-      return `<span class="tt-label">root:</span> ${truncateRoot(d.root)}<br>` +
-        `<span class="tt-label">slot:</span> ${d.slot}<br>` +
-        `<span class="tt-label">proposer:</span> ${d.proposer_index}<br>` +
-        `<span class="tt-label">weight:</span> ${d.weight}${total != null ? `/${total} (${pct}%)` : ''}`;
+    function tooltipHtml(d, data) {
+      const roles = nodeRoles(d, data);
+      const lines = [
+        `<span class="tt-label">root:</span> ${truncateRoot(d.root)}`,
+        `<span class="tt-label">slot:</span> ${d.slot}`,
+        `<span class="tt-label">proposer:</span> ${d.proposer_index}`,
+      ];
+
+      if (roles.length > 0) {
+        const roleSpans = roles
+          .map(r => `<span style="color: ${COLORS[r]}">${ROLE_LABELS[r]}</span>`)
+          .join(", ");
+        lines.push(`<span class="tt-label">status:</span> ${roleSpans}`);
+      }
+
+      // Skip the weight line for purely-finalized blocks: their fork-choice
+      // weight is 0 by design and reading "weight: 0" alongside "finalized" is
+      // misleading. Any non-finalized role still gets a meaningful number.
+      const isPureFinalized = roles.length === 1 && roles[0] === "finalized";
+      if (!isPureFinalized) {
+        const total = data.validator_count;
+        const pct = total ? parseFloat(((d.weight / total) * 100).toFixed(2)) : 0;
+        const suffix = total != null ? `/${total} (${pct}%)` : "";
+        lines.push(`<span class="tt-label">weight:</span> ${d.weight}${suffix}`);
+      }
+
+      return lines.join("<br>");
     }
 
-    function showTooltip(event, d) {
+    function showTooltip(event, d, data) {
       hoveredRoot = d.root;
-      tooltip.innerHTML = tooltipHtml(d, currentData?.validator_count);
+      tooltip.innerHTML = tooltipHtml(d, data);
       tooltip.style.opacity = 1;
       tooltip.style.left = (event.clientX + 14) + "px";
       tooltip.style.top = (event.clientY - 14) + "px";
@@ -539,21 +590,33 @@
         .attr("r", NODE_RADIUS)
         .attr("stroke", d => d._color);
 
-      // Invisible hit target so hover works regardless of fill level.
+      // Halo rings, one per secondary role. Always rendered with a transparent
+      // stroke when no role applies so transitions can animate stroke color
+      // smoothly when overlap appears or disappears.
+      HALO_OFFSETS.forEach((offset, i) => {
+        nodeEnter.append("circle")
+          .attr("class", `halo halo-${i}`)
+          .attr("r", NODE_RADIUS + offset)
+          .attr("stroke", d => d._haloColors[i] || "transparent");
+      });
+
+      // Invisible hit target so hover works regardless of fill level. Sized to
+      // cover the outermost halo so the cursor still triggers the tooltip when
+      // it sits between rings.
       nodeEnter.append("circle")
         .attr("class", "node-hit")
-        .attr("r", NODE_RADIUS);
+        .attr("r", NODE_RADIUS + MAX_HALO_OFFSET);
 
       nodeEnter.append("text")
         .attr("class", "node-label")
-        .attr("dy", NODE_RADIUS + 14)
+        .attr("dy", LABEL_DY)
         .text(d => truncateRoot(d.root));
 
       const nodeMerged = nodeEnter.merge(nodeGroups);
 
       nodeMerged
-        .on("mouseover", function (event, d) { showTooltip(event, d); })
-        .on("mousemove", function (event, d) { showTooltip(event, d); })
+        .on("mouseover", function (event, d) { showTooltip(event, d, data); })
+        .on("mousemove", function (event, d) { showTooltip(event, d, data); })
         .on("mouseout", hideTooltip);
 
       nodeMerged
@@ -580,13 +643,21 @@
         .duration(100)
         .attr("stroke", d => d._color);
 
+      HALO_OFFSETS.forEach((_, i) => {
+        nodeMerged.select(`.halo-${i}`)
+          .transition()
+          .delay(TRANSITION_DURATION)
+          .duration(100)
+          .attr("stroke", d => d._haloColors[i] || "transparent");
+      });
+
       nodeMerged.select("text")
         .text(d => truncateRoot(d.root));
 
       // Keep the tooltip live while the user holds the mouse still over a node.
       if (hoveredRoot) {
         const hovered = layout.nodes.find(n => n.root === hoveredRoot);
-        if (hovered) tooltip.innerHTML = tooltipHtml(hovered, data.validator_count);
+        if (hovered) tooltip.innerHTML = tooltipHtml(hovered, data);
       }
 
       // Auto-scroll to head node if head tracking is enabled.