feat(soccer-app): add accessible team insights panel

[ayushtr-aws]

Summary

Adds a compact, accessible Team Insights panel to the team detail view (TG-12). The panel builds on the shared team metric helpers and the refactored views introduced earlier in this chain.

• New TeamInsights component surfaces three shared metrics for the selected team:
  • Goal difference — with a plain-text trend tag (Positive / Even / Negative) plus goals scored/conceded.
  • Win rate — percentage of matches played.
  • Performance label — qualitative rating (Elite / Strong / Average / Struggling) from performanceLabel.
• Reuses goalDifference, winRate, and performanceLabel from src/utils/teamMetrics.ts (no recomputation).
• Rendered at the top of TeamDetail's body, above the existing statistics section.

Accessibility

• Uses a semantic <section> labelled by an <h3> heading (aria-labelledby) and a <dl>/<dt>/<dd> description list for metric name/value pairs.
• Meaning is conveyed through text (trend tags, notes, labels), not colour alone — colour only reinforces the existing text.

Visual design & responsiveness

• Matches the existing dark theme, card styling, and typography of the surrounding sections.
• Grid uses auto-fit and collapses to a single column at the existing 768px breakpoint, remaining usable on narrow screens.

Docs

• Updated soccer-app/README.md with a short feature note describing the panel.

Issue

TG-12: Add accessible team insights panel (epic: ABCA Jira stacked corrections acceptance round 2).

Build & test results

Run in soccer-app/ (dependencies installed with npm install first, as they were not present):

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

The repo has no automated test suite; verification was via the TypeScript build and linter.

Decisions made

• Placed the panel at the top of the detail body for prominence; it complements rather than duplicates the detailed Season Statistics grid below.
• Chose colour accents that mirror the existing won/drawn/lost palette, always paired with text so the panel does not rely on colour alone.

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

Agent notes

• What went well: The shared teamMetrics.ts helpers (added earlier in the chain) made this straightforward — the panel is a thin, presentational layer over existing, deterministic metric functions. Build and lint passed first try.
• What was difficult: Minor — soccer-app/node_modules was not pre-installed for the nested app, so mise run build/npm run build initially failed with tsc: not found. Running npm install in soccer-app/ resolved it.
• Repo conventions discovered: The app lives in soccer-app/; mise tasks (build, lint, dev) proxy to npm scripts in that dir. Components live in src/components, shared logic in src/utils, styles centralised in src/App.css with sectioned comment banners. Commit messages follow conventional-commit style with a module scope (e.g. feat(soccer-app): ...).
• Suggestions for future tasks: Consider committing a lockfile-driven npm ci step or documenting the npm install requirement so nested-app builds work out of the box. Since there are no tests, a lightweight component test setup (e.g. Vitest + Testing Library) would help guard accessibility/behavior regressions.

🤖 Generated with Claude Code

[ayushtr-aws]

chore(restack): re-merged updated predecessor branch into this PR.

Absorbed: The predecessor branch (01KZPAC7Z...) added a new Shared team metrics section to soccer-app/README.md documenting the teamMetrics.ts helpers.

Conflicts: None — the merge was clean. My Team insights panel README section and the predecessor's Shared team metrics section coexist without overlap; TeamInsights.tsx/TeamDetail.tsx continue to consume the shared helpers unchanged.

Build/test:

• npm run build (tsc -b && vite build) → pass (22 modules, built in ~112ms).
• npm run lint (oxlint) → pass (exit 0).
• No automated test suite in the repo; verified via TypeScript build + linter.

No scope changes — maintenance re-stack only.

[ayushtr-aws]

Background agent — COMPLETED

Field	Value
Task	01KZPB0DJTX5207RX3PX2X475X
Repo	ayushtr-aws/abca-testing
Status	COMPLETED
Last event	task_completed @ 2026-08-10T17:21:34.266Z
Pull request	link
Duration	71.2s
Cost	$0.2771