Skip to content

feat(repo-health): add interactive Repository Health Explorer#2201

Open
singhanurag0317-bit wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
singhanurag0317-bit:feat/repo-health-explorer-398
Open

feat(repo-health): add interactive Repository Health Explorer#2201
singhanurag0317-bit wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
singhanurag0317-bit:feat/repo-health-explorer-398

Conversation

@singhanurag0317-bit
Copy link
Copy Markdown

Summary

Closes #398

Problem

DevTrack already calculates a Repository Health Score (commit frequency,
PR merge rate, PR turnaround, open issues, recency) but the results were
buried inside a tooltip on the health grade badge in TopRepos.tsx.
Users had no way to understand why a repo scored low or what specific
signals to improve.

Solution

New component: src/components/RepoHealthExplorer.tsx

An interactive modal that surfaces every scoring dimension individually:

Feature Details
Grade Ring SVG radial gauge — animated fill, score + letter grade (A/B/C)
Metric Cards Commit freq, PR merge rate, PR turnaround, open issues, recency — each with raw value, weighted score, animated colour-coded progress bar, and actionable tip
Score Distribution Bar Stacked bar showing each signal's contribution to the 100-pt total
Recommendations Engine Colour-coded badges (✅ ok / 🟡 warn / 🔴 critical) with specific copy (exact counts, exact hours, days since last commit)
Trend Indicator ▲ Improving / → Stable / ▼ Declining based on overall grade
Accessibility Escape-to-close, aria-modal, aria-label, role="dialog"

Zero new dependencies or API calls — uses the same pure scoring functions from
src/lib/repo-health.ts that were already in the codebase.

Changes

  • src/components/RepoHealthExplorer.tsx (new, 248 lines): Full interactive health explorer modal
  • src/components/TopRepos.tsx (+8 lines): Added selectedExplorer state; health-badge click opens the explorer modal alongside the existing RepoHealthPanel

Testing

  1. Visit the dashboard and scroll to Top Repositories
  2. Click any health grade badge (A / B / C) on a repo card
  3. The Repository Health Explorer modal opens showing all 5 signals
  4. Verify metric cards display correct raw values and progress bars
  5. Verify recommendations match the actual signal values
  6. Press Escape or click the backdrop to dismiss

Closes Priyanshu-byte-coder#398

Problem: repo health scores were hidden in a tooltip. Users couldn't
understand why a repo scored low or what signals to improve.

Solution: RepoHealthExplorer.tsx — interactive modal with:
  - SVG radial gauge ring (score + letter grade A/B/C, animated)
  - Per-metric breakdown cards: commit freq, PR merge rate, PR turnaround,
    open issues, recency — with animated progress bars + actionable tips
  - Stacked score distribution bar
  - Colour-coded recommendations engine (ok / warn / critical)
  - Trend indicator (Improving / Stable / Declining)
  - Keyboard-accessible (Escape-to-close, aria-modal, aria-label)
  - Zero new API calls — uses existing scoring fns from repo-health.ts

TopRepos.tsx: health badge click now opens RepoHealthExplorer modal.
@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 8, 2026

Someone is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature labels Jun 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 8, 2026

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:feature GSSoC type bonus: new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature : Interactive Repository Health Explorer

1 participant