fix(fairway): stats cockpit readability — stretch, tone, consolidate, slim

[njrini99-code]

Problem

Four readability findings on FairwayStatsCockpit.tsx and its card primitives (#921):

1. Uneven card bottoms — DetailGrid (used 25+ times) didn't stretch inside its grid row, so bordered cards in the same row trailed off at different heights. The Approach tab's "By lie" pairing was especially bad: a 2-row grid next to an 8-row Efficiency grid.
2. Colorless values — every DetailGrid/TeeMissByClub/GirByDistanceBoard value rendered in the same flat ink regardless of how good or bad it was.
3. Triplicated primitives — RoundsReadout/FairwaysReadout/GirReadout/PuttsReadout were four near-identical hand-rolled InstrumentPanel+Readout wrappers; TeeMissByClub and GirByDistanceBoard each hand-rolled DetailGrid's own title+Surface chrome instead of reusing it.
4. Analysis tab bloat — the "Full shot detail" disclosure re-rendered ~17 DetailGrids, several of which the Scoring/Approach/Putting tabs already substantially owned.

docs/fairway-stats-redesign-plan.md (the approved design spec for this surface) is silent on all four — it's scoped to engine fields and premium visuals — so each fix below documents the fallback taken.

Fix

1. Stretch/equalize. Extracted a shared DetailGridShell (title/hint header + bordered Surface) that applies h-full on the wrapper and flex-1 on the Surface, so every DetailGrid-family card now stretches to fill its grid row and bottoms align. For the Approach tab's "By lie" 2-row vs 8-row Efficiency pair specifically (doc silent → internal max-height+scroll per the task's fallback), DetailGrid gained an opt-in scrollable prop that caps the taller grid at a fixed height with its own scroll instead of blowing the row out.

2. Tone system. DetailRow gained an optional tone?: 'good' | 'warn' | 'neutral', rendered via text-fw-success / text-fw-warning (never red — mirrors StandingStrip's existing "ONE behind-benchmark hue" rule) tinting only the value text. Tone is derived two ways, always from real data, never fabricated:

• toneVsBenchmark(value, benchmark, direction) — compares a value against a genuine PGA-Tour standard pulled from the already-fetched player standing rows (v3 metric registry), wired wherever a DetailGrid row's quantity has an exact registry counterpart: scrambling-by-lie, putt make-% bands (3-5/5-10/10-15/15-25/25+ft — the engine's finer 9-way split reuses the matching coarser registry band), and putt miss-bias (left/right/high/low).
• relativeTones(values) — a self-referential "biggest gain / biggest leak" read across a board's own values (same idea the SG tab already uses across categories), applied to GirByDistanceBoard since no per-band GIR baseline exists anywhere in the fetched data.
• skewTone(sharePct) — a fixed 50%-symmetry threshold for TeeMissByClub's L/R split, since no external benchmark exists for which way a miss "should" lean. Never reads 'good' — a missed fairway is never a positive outcome.

3. Consolidation (behavior-preserving). RoundsReadout/FairwaysReadout/GirReadout/PuttsReadout folded into the existing HeadlineReadout (extended with an optional delta prop); the Vitals JSX now calls HeadlineReadout directly with locals computed once. TeeMissByClub and GirByDistanceBoard now mount into the shared DetailGridShell instead of hand-rolling their own title+Surface wrapper.

4. Slim Analysis tab. Of the ~17 DetailGrids in the old disclosure: exact duplicates (GIR by hole type/distance, putting headline/make-bands) were dropped; grids with no other home moved onto their owning tab — GIR-by-lie + full approach proximity breakdown onto Approach, overall miss-direction + by-break overview onto Putting, round/career/streak detail onto Scoring (a tab literally named Scoring that previously had none). What's left in Analysis is a genuine summary — personal bests, 30-day trend — plus quick-nav buttons (handleTabChange) to the tabs that now own the rest.

Gates

• npx tsc --noEmit -p tsconfig.json — clean
• npx eslint src/components/fairway/pages/coachhelm/FairwayStatsCockpit.tsx src/components/fairway/pages/coachhelm/FairwayStatsCockpit.test.ts — clean
• npx vitest run src/components/fairway/pages/coachhelm/ — 24 files / 352 tests, all green (new FairwayStatsCockpit.test.ts covers toneVsBenchmark/relativeTones/skewTone)
• No npm run build / browser automation per repo policy (verified via tsc/eslint/vitest only)

Files changed

• src/components/fairway/pages/coachhelm/FairwayStatsCockpit.tsx
• src/components/fairway/pages/coachhelm/FairwayStatsCockpit.test.ts (new)

Fixes #921

🤖 Generated with Claude Code

https://claude.ai/code/session_01MMdviLDsAg2YYJ8adsM6fg

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
helmv3	Ignored		Jul 17, 2026 10:31pm

[supabase]

This pull request has been ignored for the connected project qmnssrrolpinvwjjnufo because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Warning

Review limit reached

@njrini99-code, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 33 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 148930f4-f64c-49cf-809c-7ccbf2815d21

📥 Commits

Reviewing files that changed from the base of the PR and between 6d25e44 and 90be451.

📒 Files selected for processing (2)

• src/components/fairway/pages/coachhelm/FairwayStatsCockpit.test.ts
• src/components/fairway/pages/coachhelm/FairwayStatsCockpit.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/stats-cockpit-readability

• 🛠️ helm safety pass
• 🛠️ dashboard ux pass
• 🛠️ rls test pass

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[njrini99-code]

🤖 Mission Control — PR summary

What it changes: Readability pass on FairwayStatsCockpit.tsx (#921) — a large single-file refactor (+577 / −421). DetailGrid now stretches (h-full / flex-1) so cards in a row equalize their bottoms; adds a tone system (good / warn / neutral — text-fw-success / text-fw-warning, never red) derived from a real PGA Tour baseline via the v3 metric registry where a matching metric exists, with honest relative fallbacks elsewhere; consolidates and slims the card primitives. Adds FairwayStatsCockpit.test.ts.

Area: GolfHelm / Fairway stats.

Risk / reviewers watch:

• Large single-component diff — verify no regressions in existing tabs (Approach "By lie" scroll cap, tee-miss L/R symmetry).
• Tone thresholds vs. the already-fetched player-standing baseline rows (correct metric mapping).
• Design-system compliance: no red valences.

CI: 4 required gates green. CodeRabbit advisory + REVIEW_REQUIRED → Blocked. No action taken.

[njrini99-code]

Superseded — landed on main inside merge train #938 (commit 6ecede6). Branch kept.