feat(ui): GitHub PRs list pilot on the shared design system (U5 B1)

[OBenner]

Summary

Second screen of the B1 "Code & review" batch, ported from desktop-github-prs.html.

libs/ui (shared design system)

• PullRequestList: summary stat tiles (toned numbers), search + filter-chip toolbar (aria-pressed chips per BoardToolbar house style), full-width PR rows — labeled state tile (open ↑ / draft ○ / merged ● / conflict ⤫), branch chips, ±diff, CI check squares announcing "label: status", reviewer avatar stack with status dots, badge + time column; loading/error/empty states; responsive at 1180/760px (checks/avatars collapse per mockup).
• New shared types: UiPullRequest / UiPullRequestState / UiPrCheck / UiPrCheckStatus / UiPrReviewer / UiPrStat.

Electron

• Pure github-prs-ui mappers (PRData → row shape, initials, compact relative age with localizable unit suffixes, stat values, client-side filtering) — 9 tests.
• GitHubPRsPilotView over the existing github:pr:list IPC paired with checkGitHubConnection (the list handler folds failures into an empty list, so the connection check is what makes the error state reachable). Mounted as "GitHub PRs (new UI)" beside the legacy review view, which stays untouched.
• listPRs only returns open PRs today — the pilot maps state=open; draft/merged/conflict/checks render from the shared types and are exercised in Storybook until the detail flow lands in part 2.

i18n

• github:prsPilot.* (en+fr) with pluralized rowMeta_one/_other and localized age units (fr: min/h/j); navigation:items.githubPRsNext.

Adversarial review (find → verify)

• Confirmed & fixed: unreachable error path (list handler never rejects → connection check added); "1 files"/"1 fichiers" (i18next count pluralization).
• Three a11y/i18n findings whose verifiers hit the session limit were assessed manually and fixed as valid: state tile had no text equivalent (now labeled role="img"), check squares read identically for pass/fail (now "label: status"), English age suffixes leaked into French (now injectable units).

Verification

• 9/9 mapper tests; libs/ui + Electron tsc clean; Storybook rebuilt, OpenPRs story visually verified against the mockup (stat tiles, chips, all four state tiles, checks, avatar stacks, badges).

Next in B1

GitHub Issues / Patterns / Context on the same playbook; PR detail flow as part 2.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a new GitHub pull requests interface accessible from navigation.
  • View pull request titles, authors, branches, reviewers, status, changed lines, files, and relative age.
  • Added search and filtering across pull request details, plus summary statistics.
  • Added loading, empty, error, and retry states.
  • Added responsive layouts and localized English and French labels.

• Tests

  • Added coverage for pull request display, filtering, date formatting, and statistics.

[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.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 50 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

Run ID: 6eaddf98-1b38-4dd4-8abd-5566f20fc042

📥 Commits

Reviewing files that changed from the base of the PR and between 7fe1cee and 51dd715.

📒 Files selected for processing (3)

• libs/ui/src/screens/PullRequestList.css
• libs/ui/src/screens/PullRequestList.stories.tsx
• libs/ui/src/screens/PullRequestList.tsx

📝 Walkthrough

Walkthrough

Adds a shared pull-request list UI with loading, error, filtering, statistics, responsive styling, and Storybook states. Frontend helpers map GitHub data into the UI model, while a new localized pilot route loads and renders the data.

Changes

GitHub PRs pilot UI

Layer / File(s)	Summary
PR UI contracts and exports libs/ui/src/client/types.ts, libs/ui/src/index.ts, libs/ui/src/screens/PullRequestList.tsx	Defines and exports shared PR data contracts, filters, state labels, and list component props.
Pull request list rendering libs/ui/src/screens/PullRequestList.tsx, libs/ui/src/screens/PullRequestList.css, libs/ui/src/screens/PullRequestList.stories.tsx	Renders statistics, search and filters, PR rows, loading/error/empty states, keyboard interaction, responsive styling, and Storybook scenarios.
PR data mapping and aggregation apps/frontend/src/renderer/lib/github-prs-ui.ts, apps/frontend/src/renderer/__tests__/github-prs-ui.test.ts	Maps GitHub PR data into UI rows, formats age and initials, aggregates statistics, filters rows, and tests these helpers.
Pilot view and navigation apps/frontend/src/renderer/components/GitHubPRsPilotView.tsx, apps/frontend/src/renderer/components/Sidebar.tsx, apps/frontend/src/renderer/App.tsx, apps/frontend/src/shared/i18n/locales/en/*, apps/frontend/src/shared/i18n/locales/fr/*	Adds GitHub connection and PR loading, localized derived list props, the github-prs-next navigation entry, application rendering, and English/French translations.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Sidebar
  participant App
  participant GitHubPRsPilotView
  participant GitHubIPC
  participant PullRequestList
  Sidebar->>App: select github-prs-next
  App->>GitHubPRsPilotView: render with projectId
  GitHubPRsPilotView->>GitHubIPC: checkGitHubConnection(projectId)
  GitHubPRsPilotView->>GitHubIPC: listPRs(projectId)
  GitHubPRsPilotView->>PullRequestList: pass mapped PRs and statistics

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: a GitHub PRs list pilot built on the shared UI/design system.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/ui-b1-github-prs

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@libs/ui/src/screens/PullRequestList.tsx`:
- Around line 292-294: Update the reviewer key in the pullRequest.reviewers.map
rendering to use the unique reviewer.name (GitHub login) instead of
reviewer.initials, avoiding collisions between reviewers with matching initials.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 95919759-7bc8-4c20-a7c4-93a012bed754

📥 Commits

Reviewing files that changed from the base of the PR and between 52710db and 7fe1cee.

📒 Files selected for processing (14)

• apps/frontend/src/renderer/App.tsx
• apps/frontend/src/renderer/__tests__/github-prs-ui.test.ts
• apps/frontend/src/renderer/components/GitHubPRsPilotView.tsx
• apps/frontend/src/renderer/components/Sidebar.tsx
• apps/frontend/src/renderer/lib/github-prs-ui.ts
• apps/frontend/src/shared/i18n/locales/en/github.json
• apps/frontend/src/shared/i18n/locales/en/navigation.json
• apps/frontend/src/shared/i18n/locales/fr/github.json
• apps/frontend/src/shared/i18n/locales/fr/navigation.json
• libs/ui/src/client/types.ts
• libs/ui/src/index.ts
• libs/ui/src/screens/PullRequestList.css
• libs/ui/src/screens/PullRequestList.stories.tsx
• libs/ui/src/screens/PullRequestList.tsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud