feat: add standalone health score bands widget

[gaspergrom]

Summary

Standalone widget code only — NOT yet wired into the shared report view/service/types/data files. Wiring happens in a follow-up once IN-1285 (#2164) merges into this release branch and it's IN-1286's turn in the sequential merge order.

crowd.dev pipe health_score_report_bands is already deployed to production (crowd.dev PR #4579).

Implements the non-shared parts of IN-1286 ("Health Score Coverage widget 01: health score bands by full and partial score"), authorized to build ahead of the sequential merge order since none of these files are touched by any other in-flight widget PR:

• band-distribution.vue — horizontal grouped bar chart (full vs. partial score, 5 fixed bands), scope toggle (all/lf/other), skeleton loading state, empty state
• band-distribution.query.ts — TanStack Query wrapper calling the new API route; written as a plain function, to become a method on the shared API service class once it's IN-1286's turn
• bands.get.ts — API route proxying the health_score_report_bands Tinybird pipe, with scope param validation
• health-score-coverage-bands.ts — mapper + fetcher for the pipe response, with a Vitest unit test for the mapper
• health-score-coverage-bands.types.ts — this widget's own types, kept separate from the shared report types file

Test plan

• pnpm tsc-check — passes
• pnpm lint — passes (0 errors)
• pnpm test --run — 256/256 tests pass, including the new mapper unit tests
• Follow-up PR wires this component into health-score-coverage-report.vue and the shared service/types once IN-1285 merges

• release/IN-1276-health-score-coverage - ⚠️ No PR associated with branch
  • feat: add standalone health score bands widget 👈

[Copilot]

Pull request overview

Adds a standalone health-score band distribution widget ahead of its later report integration.

Changes:

• Adds grouped full/partial score visualization with scope filtering.
• Adds TanStack Query, API proxy, Tinybird mapping, types, and tests.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Review
frontend/types/report/health-score-coverage-bands.types.ts	Defines standalone widget types. No issues identified.
frontend/server/data/tinybird/report/health-score-coverage-bands.ts	Fetches and maps Tinybird band data. No issues identified.
frontend/server/data/tinybird/report/health-score-coverage-bands.test.ts	Tests mapping and fetching behavior. No issues identified.
frontend/server/api/report/health-score-coverage/bands.get.ts	Validates scope and proxies Tinybird data. No issues identified.
frontend/app/components/modules/report/health-score-coverage/services/band-distribution.query.ts	Adds the scoped TanStack query. No issues identified.
frontend/app/components/modules/report/health-score-coverage/components/band-distribution.vue	Moderate (2 votes): Reserve space for the bottom legend. Nit (1 vote): Render the project-count description only when query data exists. Moderate (1 vote): Make chart data accessible to screen-reader and keyboard-only users. Moderate (1 vote): Use a partial-score color meeting the 3:1 graphical-object contrast requirement.

Suppressed comments (1)

frontend/app/components/modules/report/health-score-coverage/components/band-distribution.vue:28

• The description is rendered before the query settles, so the loading skeleton (and a failed request) is accompanied by the inaccurate claim that “0 projects have a health score.” Render it only once query data exists; the mapper still returns a truthy data object for a legitimate all-zero response.

      <p class="text-body-2 text-neutral-500">{{ descriptionText }}</p>

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.