Probability heatmap on match detail

What TestSprite reads

The testing agent reads this JSON, opens the deployed URL in headless Chromium, executes each action step, evaluates each assertion. Verdict: passed / failed / blocked / inconclusive.

{
  "projectId": "1ad26753-ee03-4689-8f0f-6fa5d67c5c72",
  "type": "frontend",
  "name": "Surfaces — probability heatmap visualization on the homepage",
  "description": "The homepage includes a visualization (SVG or canvas) showing each team's probability of reaching the Final. Read order roughly mirrors the bracket so favorites are scannable.",
  "priority": "p2",
  "metadata": {
    "category": "surfaces",
    "stage": "all"
  },
  "planSteps": [
    {
      "type": "action",
      "description": "Navigate to the homepage"
    },
    {
      "type": "assertion",
      "description": "Verify a heatmap-style visualization is visible — a grid, matrix, or list of all 16 teams with each team's probability of reaching the Final rendered as a colored block or filled bar (NOT just the existing match-card layout)"
    },
    {
      "type": "assertion",
      "description": "Verify the visualization labels at least 8 of the 16 teams with their probabilities (number or percentage), distinct from the bracket section"
    }
  ]
}