feat(soccer-app): add insights legend and resilient empty state

[ayushtr-aws]

Summary

Extends the existing team insights panel (TG-13) with two improvements:

• Performance legend — a concise legend explaining the four performance labels (Elite, Strong, Average, Struggling) and the win-rate band behind each. The legend copy and thresholds live together in teamMetrics.ts (performanceLegend) so they stay in sync with performanceLabel() — a single source of truth. The legend reuses the existing insight-rating-* accent colours and conveys meaning through text as well as colour.
• Resilient empty state — when a team has played zero matches, the panel no longer risks showing misleading 0% win-rate copy or NaN. Instead it renders honest placeholder copy (—, "No matches played yet", "Not rated") and an adjusted summary line. winRate() already guards against divide-by-zero; the component now detects stats.played <= 0 and adapts each card's copy accordingly.

Accessibility & responsiveness:

• Legend uses a <dl> with an aria-labelledby heading, semantic term/description pairing.
• Legend grid collapses to a single column on narrow viewports (existing @media (max-width: 768px) block).

Task

TG-13: Add insights legend and resilient empty-state behavior (epic: ABCA Jira stacked corrections acceptance round 2).

Build & test results

Run inside soccer-app (dependencies installed via npm install):

• npm run build → pass (tsc -b && vite build, 22 modules transformed, built cleanly).
• npm run lint → pass (oxlint, exit 0, no warnings).

No automated test suite exists in this project; changes were validated via the type-checked build and lint. Empty-state logic was reasoned through manually (existing dataset has all teams with played > 0, so the placeholder path is defensive for future/zero-match data).

Decisions

• Placed the legend copy in teamMetrics.ts rather than hardcoding it in the component so the descriptions can't drift from the thresholds in performanceLabel().
• Chose an em dash (—) plus explanatory note as the empty-state placeholder rather than hiding cards, keeping the panel layout stable.

Agent notes

• What went well: The codebase already had clean, well-documented metric helpers and clear CSS conventions (colour + text redundancy, insight-rating-* accent classes), which made extending it low-risk and consistent.
• What was difficult: soccer-app dependencies were not installed in the workspace (no node_modules), so npm run build/lint initially failed with tsc: not found / oxlint: not found. Running npm install inside soccer-app resolved it. Note the repo build/lint runs from within the soccer-app subdirectory, not the repo root.
• Conventions discovered: Conventional-commit messages scoped to soccer-app; dark theme with slate palette; meaning conveyed through both colour and text for accessibility.
• Suggestions for future tasks: Consider committing/CI-installing soccer-app deps or documenting the install step; there is no test harness, so adding one (e.g. Vitest + Testing Library) would make future changes safer to verify.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the project license.

🤖 Generated with Claude Code

[ayushtr-aws]

Re-stack update

Absorbed the updated predecessor branch (01KZPAGGGCGHXD9PG5YXC39FQQ), which added soccer-app/README.md. The merge was clean — no conflicts. My TG-13 changes (performance legend + resilient empty-state) remain intact on top of the updated predecessor code.

Verification (run from soccer-app):

• mise run build → pass (tsc -b && vite build, 22 modules transformed, built in ~154ms)
• mise run lint → pass (oxlint, exit 0)

No feature/scope changes — maintenance re-stack only.

[ayushtr-aws]

Background agent — COMPLETED

Field	Value
Task	01KZPB2WSS3AD5VW0MNJMQ64WK
Repo	ayushtr-aws/abca-testing
Status	COMPLETED
Last event	task_completed @ 2026-08-10T17:22:56.572Z
Pull request	link
Duration	64.6s
Cost	$0.2311