feat(githubPRs): enhance pr list UI to match GitHub design #375
Conversation
Implement cognitively-optimized expandable view for subtasks that intelligently surfaces the 5 most relevant agent actions from logs containing 1000+ actions. Add comprehensive action scoring algorithm with tests to create a middle layer between raw logs and user interface for better information clarity.
…n and closed PRs - Add state parameter to listPRs API (supports 'open', 'closed', 'all') - Update IPC handler to pass state to GitHub API - Extend useGitHubPRs hook with: - closedPRs state for closed PRs - openCount and closedCount computed values - getPRsByStatus helper function - Parallel fetching of open and closed PRs - Update browser mock to accept state parameter 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…ed toggle - Add StatusTabs component with Open/Closed toggle buttons and counts - Include GitPullRequest icon for Open, Check icon for Closed - Support activeTab prop and onTabChange callback - Apply GitHub dark theme styling with proper color classes - Export PRStatusFilter type for use by parent components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…or, Label, Sort filters - Added FilterDropdowns component with three dropdown filters: - Author filter with dynamic author list - Label filter with dynamic label list - Sort dropdown with newest/oldest/most-commented/etc options - Uses Radix UI DropdownMenu primitives following existing patterns - Includes check marks for selected items - Compact horizontal layout with chevron icons - Proper TypeScript interfaces (SortOption, FilterDropdownsProps exported) - Follows GitHub dark theme styling conventions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…bar, metadata badges, and New PR button
- Add PRListHeader component with search input ('is:pr is:open' placeholder)
- Add Labels and Milestones metadata badge buttons with counts
- Add green 'New pull request' button that opens GitHub compare page
- Add refresh button with loading state
- Follow IssueListHeader patterns for consistent styling
- Export PRListHeaderProps interface for type-safe usage
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <[email protected]>
…StatusTabs and FilterDropdowns - Creates PRListControls container component that combines StatusTabs and FilterDropdowns - Renders StatusTabs (Open/Closed toggle with counts) above FilterDropdowns (Author, Label, Sort) - Passes through all props for child components with proper TypeScript interfaces - Uses compact horizontal layout with justify-between for tabs and filters - Follows established patterns from IssueListHeader and existing PR components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…for open/closed filtering
- Added optional statusFilter prop to PRListProps interface with type 'open' | 'closed'
- Updated PRList function signature to accept and default statusFilter to 'open'
- Updated empty state message to dynamically show filter state ("No {open|closed} pull requests")
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <[email protected]>
…o GitHubPRs - Replace current header with new PRListHeader component - Search bar with 'is:pr is:open' placeholder - Labels and Milestones metadata badges (placeholder) - Green 'New pull request' button - Refresh button with loading state - Add PRListControls below header - StatusTabs for Open/Closed PR filtering with counts - FilterDropdowns for Author, Label, and Sort - Add state management for: - activeTab (open/closed) with PRStatusFilter type - searchQuery for filtering PRs - selectedAuthor, selectedLabel, selectedSort filters - Implement filtering and sorting logic: - Filter by author (functional) - Filter by search query (title/author/branch/number) - Sort by newest/oldest/recently-updated/least-recently-updated - Label and comment filtering are placeholders (PRData doesn't include these) - Wire up PRList to use filtered PRs and statusFilter prop 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Apply GitHub dark theme border color #30363d to all PR components - Use GitHub green #238636 for New PR button with hover state #2ea043 - Implement consistent 6px border-radius (rounded-[6px]) - Apply compact 8-12px padding (px-2 to px-2.5, py-1 to py-2) - Add GitHub-style hover border color #8b949e for interactive elements - Make count display font-semibold in StatusTabs - Reduce gaps for more compact layout matching GitHub's design 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
…quested) Fixes: - Search bar now parses GitHub-style query syntax (is:pr, is:open, is:closed, author:xxx) - Authors filter dropdown now has scrolling with max-height of 300px Changes: - GitHubPRs.tsx: Added parseSearchQuery() function to parse GitHub-style qualifiers - Supports: is:pr, is:open, is:closed, author:username - Search qualifiers override the tab selection (e.g., "is:closed" shows closed PRs) - Text search still works for title, author, branch, and PR number - FilterDropdowns.tsx: Added max-h-[300px] and overflow-y-auto to dropdown content - Label header is now sticky at top during scroll Verified: - TypeScript compiles without errors - All 792 tests pass QA Fix Session: 0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| @@ -1,12 +1,23 @@ | |||
| import { CheckCircle2, Clock, XCircle, AlertCircle, ListChecks, FileCode } from 'lucide-react'; | |||
| import { useState, useMemo, useCallback } from 'react'; | |||
| import { CheckCircle2, Clock, XCircle, AlertCircle, ListChecks, FileCode, ChevronDown, ChevronRight, Sparkles, ArrowUpDown, ArrowDownWideNarrow, ListOrdered } from 'lucide-react'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| /** | ||
| * Entry types that indicate success (lower priority than errors) | ||
| */ | ||
| const SUCCESS_TYPES: TaskLogEntryType[] = ['success']; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
| export function isTimeAnomaly(action: TaskLogEntry, averageDuration?: number): boolean { | ||
| if (averageDuration === undefined) { | ||
| return false; | ||
| } |
Check notice
Code scanning / CodeQL
Unneeded defensive code Note
MikeeBuilds
added
feature
AlexMadera
left a comment
AlexMadera
left a comment
There was a problem hiding this comment.
🤖 Auto Claude PR Review
Merge Verdict: 🔴 BLOCKED
Blocked: 1 redundant implementation(s) detected. Remove duplicates before merge.
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | High | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
🚨 Blocking Issues (Must Fix)
- Redundancy: Unrelated features bundled in single PR (PR Scope:0)
Findings Summary
- High: 1 issue(s)
- Medium: 4 issue(s)
- Low: 2 issue(s)
Generated by Auto Claude PR Review
Findings (1 selected of 7 total)
🟠 [HIGH] Unrelated features bundled in single PR
📁 PR Scope:0
PR description states 'Enhance PR List UI to Match GitHub's Design Language' but includes ~2,500 lines of unrelated code: actionScoring.ts (829 lines), actionScoring.test.ts (1,188 lines), SubtaskActionList.tsx (489 lines), and TaskSubtasks.tsx changes. These implement an action scoring system for subtask summarization that has nothing to do with GitHub PR UI enhancement.
Suggested fix:
Split into two separate PRs: (1) PR List UI enhancement, (2) Action Scoring system for subtask summarization. Each feature should be reviewed independently.
This review was generated by Auto Claude.
AlexMadera
left a comment
AlexMadera
left a comment
There was a problem hiding this comment.
🤖 Auto Claude PR Review
Merge Verdict: 🔴 BLOCKED
Blocked: 1 redundant implementation(s) detected. Remove duplicates before merge.
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | High | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
🚨 Blocking Issues (Must Fix)
- Redundancy: Unrelated features bundled in single PR (PR Scope:0)
Findings Summary
- High: 1 issue(s)
- Medium: 4 issue(s)
- Low: 2 issue(s)
Generated by Auto Claude PR Review
Findings (7 selected of 7 total)
🟠 [HIGH] Unrelated features bundled in single PR
📁 PR Scope:0
PR description states 'Enhance PR List UI to Match GitHub's Design Language' but includes ~2,500 lines of unrelated code: actionScoring.ts (829 lines), actionScoring.test.ts (1,188 lines), SubtaskActionList.tsx (489 lines), and TaskSubtasks.tsx changes. These implement an action scoring system for subtask summarization that has nothing to do with GitHub PR UI enhancement.
Suggested fix:
Split into two separate PRs: (1) PR List UI enhancement, (2) Action Scoring system for subtask summarization. Each feature should be reviewed independently.
🟡 [MEDIUM] Promise.all without graceful error handling
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:105
The PR changes the fetchPRs function to fetch open and closed PRs in parallel using Promise.all. If one request fails, both fail and the user sees no PRs at all. This is a regression from the original behavior where at least open PRs would be shown.
Suggested fix:
Use Promise.allSettled instead of Promise.all to gracefully handle partial failures. If closed PRs fail to load, still display open PRs.
🟡 [MEDIUM] Version regression from release to beta
📁 apps/frontend/package-lock.json:4
package-lock.json version changed from '2.7.2' to '2.7.2-beta.10'. This is a backwards version change - beta versions are typically less stable than release versions.
Suggested fix:
Verify this version change is intentional. If this PR is meant to go into a release branch, the version should be incremented (e.g., 2.7.3 or 2.8.0), not regressed to a beta.
🟡 [MEDIUM] Placeholder functionality for label filtering and comment sorting
📁 apps/frontend/src/renderer/components/github-prs/GitHubPRs.tsx:160
The FilterDropdowns component exposes Label filter and comment-based sorting (most-commented/least-commented), but these are documented placeholders that don't actually work because PRData doesn't include labels or comment counts. Users may expect these to function.
Suggested fix:
Either: (1) Remove the non-functional UI elements until the API provides the data, or (2) Add the missing fields to PRData by fetching additional data from GitHub API, or (3) Add visible 'Coming soon' indicators on the disabled options.
🟡 [MEDIUM] Labels and Milestones badges show hardcoded zero counts
📁 apps/frontend/src/renderer/components/github-prs/components/PRListHeader.tsx:78
The Labels and Milestones MetadataBadge components always display 0 because labelsCount and milestonesCount default to 0 and are never populated with actual data. This creates UI elements that provide no value.
Suggested fix:
Either implement fetching the actual counts from GitHub API, or hide these badges until the functionality is implemented.
🔵 [LOW] Selected PR lookup may show stale data
📁 apps/frontend/src/renderer/components/github-prs/GitHubPRs.tsx:196
The selectedPR lookup first checks filteredPRs then falls back to all prs: filteredPRs.find(...) || prs.find(...). This means if a PR is selected but then filtered out (e.g., by switching to 'closed' tab while viewing an open PR), the user still sees it in the detail panel but it's not visible in the list.
Suggested fix:
Consider clearing selectedPRNumber when changing the status tab, or show a message indicating the selected PR is not in the current filter.
🔵 [LOW] Interface UseGitHubPRsResult missing new properties
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:40
The diff adds closedPRs, openCount, closedCount, and getPRsByStatus to the return object but these need to be added to the UseGitHubPRsResult interface for proper TypeScript type checking.
Suggested fix:
Ensure the interface at line 14 is updated to include all new properties: closedPRs: PRData[], openCount: number, closedCount: number, getPRsByStatus: (status: PRStatusFilter) => PRData[]
This review was generated by Auto Claude.
AndyMik90
left a comment
AndyMik90
left a comment
There was a problem hiding this comment.
🤖 Auto Claude PR Review
Merge Verdict: 🔴 BLOCKED
Blocked: 4 redundant implementation(s) detected. Remove duplicates before merge.
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | High | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
🚨 Blocking Issues (Must Fix)
- Redundancy: Unrelated feature bundled in PR - Action Scoring System (apps/frontend/src/renderer/components/task-detail/SubtaskActionList.tsx:1)
- Redundancy: Unrelated feature bundled in PR - 829 lines of scoring algorithm (apps/frontend/src/renderer/lib/actionScoring.ts:1)
- Redundancy: Unrelated test file - 1188 lines of tests for action scoring (apps/frontend/src/renderer/lib/tests/actionScoring.test.ts:1)
- Redundancy: Major unrelated refactor - +292/-70 lines (apps/frontend/src/renderer/components/task-detail/TaskSubtasks.tsx:1)
Findings Summary
- High: 4 issue(s)
- Medium: 3 issue(s)
- Low: 3 issue(s)
Generated by Auto Claude PR Review
Findings (7 selected of 10 total)
🟡 [MEDIUM] Unexpected version bump to beta
📁 apps/frontend/package-lock.json:3
Version changed from 2.7.2 to 2.7.2-beta.10. This PR is described as a feature enhancement, not a beta release. Version bumps should be intentional and documented.
Suggested fix:
If this is not intentional, revert to 2.7.2. If intentional, document the beta version reason in the PR description.
🟠 [HIGH] Unrelated feature bundled in PR - Action Scoring System
📁 apps/frontend/src/renderer/components/task-detail/SubtaskActionList.tsx:1
This PR includes 489 lines of a new SubtaskActionList component that implements an action scoring system for subtask display. This feature is not mentioned in the PR description which only covers 'PR List UI enhancement'. This violates single-responsibility principle for PRs.
Suggested fix:
Split this into a separate PR: 'feat(task-detail): add intelligent action scoring for subtask display'
🟠 [HIGH] Unrelated feature bundled in PR - 829 lines of scoring algorithm
📁 apps/frontend/src/renderer/lib/actionScoring.ts:1
This file implements a complete weighted scoring algorithm for intelligent subtask action summarization with SCORING_WEIGHTS, filterTopActions, calculateSubtaskRelevance, and file extraction utilities. This is a substantial new feature not mentioned in the PR description.
Suggested fix:
Split this into a separate PR with proper documentation of the cognitive science principles referenced in comments.
🟠 [HIGH] Unrelated test file - 1188 lines of tests for action scoring
📁 apps/frontend/src/renderer/lib/__tests__/actionScoring.test.ts:1
Extensive test suite for the action scoring algorithm, including performance tests claiming <100ms for 1000 actions. This belongs with the actionScoring.ts feature in a separate PR.
Suggested fix:
Move to separate PR with actionScoring.ts
🟠 [HIGH] Major unrelated refactor - +292/-70 lines
📁 apps/frontend/src/renderer/components/task-detail/TaskSubtasks.tsx:1
TaskSubtasks.tsx has been significantly refactored to integrate the action scoring system with expandable subtasks, relevance sorting, and file tracking. This refactor is not mentioned in the PR description about PR list UI.
Suggested fix:
Move to separate PR with the action scoring feature
🟡 [MEDIUM] Parallel API calls lack individual error handling
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:105
The Promise.all([listPRs('open'), listPRs('closed')]) call will fail completely if either request fails. If fetching closed PRs fails, the entire refresh fails and open PRs won't update.
Suggested fix:
Use Promise.allSettled() instead, or wrap each call in try-catch to allow partial success: const [openResult, closedResult] = await Promise.allSettled([...])
🟡 [MEDIUM] Type interface missing newCommitsCheck property
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:36
UseGitHubPRsResult interface at line 36 defines getReviewStateForPR returning {isReviewing, progress, result, error} but the implementation at line 79 also returns newCommitsCheck. TypeScript may not catch this due to structural typing.
Suggested fix:
Update the interface to include newCommitsCheck?: NewCommitsCheck | null
This review was generated by Auto Claude.
AlexMadera
left a comment
AlexMadera
left a comment
There was a problem hiding this comment.
🤖 Auto Claude PR Review
Merge Verdict: 🔴 BLOCKED
Blocked: 1 redundant implementation(s) detected. Remove duplicates before merge.
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | High | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
🚨 Blocking Issues (Must Fix)
- Redundancy: Unrelated features bundled in single PR (PR Scope:0)
Findings Summary
- High: 1 issue(s)
- Medium: 4 issue(s)
- Low: 2 issue(s)
Generated by Auto Claude PR Review
Findings (7 selected of 7 total)
🟠 [HIGH] Unrelated features bundled in single PR
📁 PR Scope:0
PR description states 'Enhance PR List UI to Match GitHub's Design Language' but includes ~2,500 lines of unrelated code: actionScoring.ts (829 lines), actionScoring.test.ts (1,188 lines), SubtaskActionList.tsx (489 lines), and TaskSubtasks.tsx changes. These implement an action scoring system for subtask summarization that has nothing to do with GitHub PR UI enhancement.
Suggested fix:
Split into two separate PRs: (1) PR List UI enhancement, (2) Action Scoring system for subtask summarization. Each feature should be reviewed independently.
🟡 [MEDIUM] Promise.all without graceful error handling
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:105
The PR changes the fetchPRs function to fetch open and closed PRs in parallel using Promise.all. If one request fails, both fail and the user sees no PRs at all. This is a regression from the original behavior where at least open PRs would be shown.
Suggested fix:
Use Promise.allSettled instead of Promise.all to gracefully handle partial failures. If closed PRs fail to load, still display open PRs.
🟡 [MEDIUM] Version regression from release to beta
📁 apps/frontend/package-lock.json:4
package-lock.json version changed from '2.7.2' to '2.7.2-beta.10'. This is a backwards version change - beta versions are typically less stable than release versions.
Suggested fix:
Verify this version change is intentional. If this PR is meant to go into a release branch, the version should be incremented (e.g., 2.7.3 or 2.8.0), not regressed to a beta.
🟡 [MEDIUM] Placeholder functionality for label filtering and comment sorting
📁 apps/frontend/src/renderer/components/github-prs/GitHubPRs.tsx:160
The FilterDropdowns component exposes Label filter and comment-based sorting (most-commented/least-commented), but these are documented placeholders that don't actually work because PRData doesn't include labels or comment counts. Users may expect these to function.
Suggested fix:
Either: (1) Remove the non-functional UI elements until the API provides the data, or (2) Add the missing fields to PRData by fetching additional data from GitHub API, or (3) Add visible 'Coming soon' indicators on the disabled options.
🟡 [MEDIUM] Labels and Milestones badges show hardcoded zero counts
📁 apps/frontend/src/renderer/components/github-prs/components/PRListHeader.tsx:78
The Labels and Milestones MetadataBadge components always display 0 because labelsCount and milestonesCount default to 0 and are never populated with actual data. This creates UI elements that provide no value.
Suggested fix:
Either implement fetching the actual counts from GitHub API, or hide these badges until the functionality is implemented.
🔵 [LOW] Selected PR lookup may show stale data
📁 apps/frontend/src/renderer/components/github-prs/GitHubPRs.tsx:196
The selectedPR lookup first checks filteredPRs then falls back to all prs: filteredPRs.find(...) || prs.find(...). This means if a PR is selected but then filtered out (e.g., by switching to 'closed' tab while viewing an open PR), the user still sees it in the detail panel but it's not visible in the list.
Suggested fix:
Consider clearing selectedPRNumber when changing the status tab, or show a message indicating the selected PR is not in the current filter.
🔵 [LOW] Interface UseGitHubPRsResult missing new properties
📁 apps/frontend/src/renderer/components/github-prs/hooks/useGitHubPRs.ts:40
The diff adds closedPRs, openCount, closedCount, and getPRsByStatus to the return object but these need to be added to the UseGitHubPRsResult interface for proper TypeScript type checking.
Suggested fix:
Ensure the interface at line 14 is updated to include all new properties: closedPRs: PRData[], openCount: number, closedCount: number, getPRsByStatus: (status: PRStatusFilter) => PRData[]
This review was generated by Auto Claude.
4 participants
Base Branch
developbranch (required for all feature/fix PRs)main(hotfix only - maintainers)Description
Enhance PR List UI to Match GitHub's Design Language Objective Refactor the Pull Requests display component to closely mirror GitHub's PR page UI patterns for improved usability and information density. Requirements Header Bar Component Add a search/filter input with placeholder text showing query syntax (e.g., is:pr is:open) Include "Labels" and "Milestones" badge buttons showing counts Add a prominent green "New pull request" button (right-aligned) Status Tabs Row Replace plain "41 open" text with clickable tab-style buttons Format: 🔓 {n} Open | ✓ {n} Closed Active tab should have visual indicator (underline or background) Clicking should filter the list Filter Dropdown Row Add horizontal row of filter dropdowns below status tabs Include: Author, Label, Projects, Milestones, Review
Related Issue
Closes #
Type of Change
Area
Commit Message Format
Follow conventional commits:
feat: enhance PRTypes: feat, fix, docs, style, refactor, test, chore
Example:
feat: add user authentication systemChecklist
developbranchCI/Testing Requirements
Screenshots
Feature Toggle