feat(githubPRs): enhance pr list UI to match GitHub design

apps/frontend/src/main/ipc-handlers/github/pr-handlers.ts

@@ -331,11 +331,11 @@ export function registerPRHandlers(
 ): void {
   debugLog('Registering PR handlers');
 
-  // List open PRs
+  // List PRs (supports open, closed, or all states)
   ipcMain.handle(
     IPC_CHANNELS.GITHUB_PR_LIST,
-    async (_, projectId: string): Promise<PRData[]> => {
-      debugLog('listPRs handler called', { projectId });
+    async (_, projectId: string, state: 'open' | 'closed' | 'all' = 'open'): Promise<PRData[]> => {
+      debugLog('listPRs handler called', { projectId, state });
       const result = await withProjectOrNull(projectId, async (project) => {
         const config = getGitHubConfig(project);
         if (!config) {
@@ -346,7 +346,7 @@ export function registerPRHandlers(
         try {
           const prs = await githubFetch(
             config.token,
-            `/repos/${config.repo}/pulls?state=open&per_page=50`
+            `/repos/${config.repo}/pulls?state=${state}&per_page=50`
           ) as Array<{
             number: number;
             title: string;

apps/frontend/src/preload/api/modules/github-api.ts

@@ -234,7 +234,7 @@ export interface GitHubAPI {
   ) => IpcListenerCleanup;
 
   // PR operations
-  listPRs: (projectId: string) => Promise<PRData[]>;
+  listPRs: (projectId: string, state?: 'open' | 'closed' | 'all') => Promise<PRData[]>;
   runPRReview: (projectId: string, prNumber: number) => void;
   cancelPRReview: (projectId: string, prNumber: number) => Promise<boolean>;
   postPRReview: (projectId: string, prNumber: number, selectedFindingIds?: string[]) => Promise<boolean>;
@@ -529,8 +529,8 @@ export const createGitHubAPI = (): GitHubAPI => ({
     createIpcListener(IPC_CHANNELS.GITHUB_AUTOFIX_ANALYZE_PREVIEW_ERROR, callback),
 
   // PR operations
-  listPRs: (projectId: string): Promise<PRData[]> =>
-    invokeIpc(IPC_CHANNELS.GITHUB_PR_LIST, projectId),
+  listPRs: (projectId: string, state?: 'open' | 'closed' | 'all'): Promise<PRData[]> =>
+    invokeIpc(IPC_CHANNELS.GITHUB_PR_LIST, projectId, state),
 
   runPRReview: (projectId: string, prNumber: number): void =>
     sendIpc(IPC_CHANNELS.GITHUB_PR_REVIEW, projectId, prNumber),

apps/frontend/src/renderer/components/github-prs/GitHubPRs.tsx

@@ -1,9 +1,11 @@
-import { useCallback } from 'react';
-import { GitPullRequest, RefreshCw, ExternalLink, Settings } from 'lucide-react';
+import { useState, useCallback, useMemo } from 'react';
+import { GitPullRequest, Settings } from 'lucide-react';
 import { useProjectStore } from '../../stores/project-store';
 import { useGitHubPRs } from './hooks';
-import { PRList, PRDetail } from './components';
+import { PRList, PRDetail, PRListHeader, PRListControls } from './components';
 import { Button } from '../ui/button';
+import type { PRStatusFilter } from './components/StatusTabs';
+import type { SortOption } from './components/FilterDropdowns';
 
 interface GitHubPRsProps {
   onOpenSettings?: () => void;
@@ -73,9 +75,128 @@ export function GitHubPRs({ onOpenSettings }: GitHubPRsProps) {
     isConnected,
     repoFullName,
     getReviewStateForPR,
+    openCount,
+    closedCount,
+    getPRsByStatus,
   } = useGitHubPRs(selectedProject?.id);
 
-  const selectedPR = prs.find(pr => pr.number === selectedPRNumber);
+  // State for status tab (open/closed)
+  const [activeTab, setActiveTab] = useState<PRStatusFilter>('open');
+  // State for search query
+  const [searchQuery, setSearchQuery] = useState('');
+  // State for filter dropdowns
+  const [selectedAuthor, setSelectedAuthor] = useState<string | undefined>(undefined);
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>(undefined);
+  const [selectedSort, setSelectedSort] = useState<SortOption>('newest');
+
+  // Parse GitHub-style search query (e.g., "is:pr is:open author:username search terms")
+  const parseSearchQuery = useCallback((query: string) => {
+    const qualifiers: {
+      isOpen?: boolean;
+      isClosed?: boolean;
+      author?: string;
+      text: string;
+    } = { text: '' };
+
+    // Split on spaces but preserve quoted strings
+    const parts = query.match(/(?:[^\s"]+|"[^"]*")+/g) || [];
+    const textParts: string[] = [];
+
+    for (const part of parts) {
+      const lowerPart = part.toLowerCase();
+
+      if (lowerPart === 'is:pr') {
+        // Ignore - we're already filtering PRs
+        continue;
+      } else if (lowerPart === 'is:open') {
+        qualifiers.isOpen = true;
+        qualifiers.isClosed = false;
+      } else if (lowerPart === 'is:closed') {
+        qualifiers.isClosed = true;
+        qualifiers.isOpen = false;
+      } else if (lowerPart.startsWith('author:')) {
+        qualifiers.author = part.substring(7).replace(/^"|"$/g, '');
+      } else {
+        textParts.push(part);
+      }
+    }
+
+    qualifiers.text = textParts.join(' ').toLowerCase().trim();
+    return qualifiers;
+  }, []);
+
+  // Parse the search query to extract qualifiers
+  const parsedQuery = useMemo(() => parseSearchQuery(searchQuery), [parseSearchQuery, searchQuery]);
+
+  // Determine effective tab based on search qualifiers (query overrides tab if explicit)
+  const effectiveTab = useMemo(() => {
+    if (parsedQuery.isOpen) return 'open';
+    if (parsedQuery.isClosed) return 'closed';
+    return activeTab;
+  }, [parsedQuery.isOpen, parsedQuery.isClosed, activeTab]);
+
+  // Get PRs for current status tab (considering search qualifiers)
+  const currentPRs = useMemo(() => getPRsByStatus(effectiveTab), [getPRsByStatus, effectiveTab]);
+
+  // Apply filters and search to current PRs
+  const filteredPRs = useMemo(() => {
+    let result = currentPRs;
+
+    // Filter by author (from dropdown or search qualifier)
+    const authorFilter = parsedQuery.author || selectedAuthor;
+    if (authorFilter) {
+      result = result.filter(pr =>
+        pr.author.login.toLowerCase() === authorFilter.toLowerCase()
+      );
+    }
+
+    // Note: Label filtering is a placeholder - PRData doesn't include labels currently
+    // The UI shows the Label dropdown but it won't filter until the API includes labels
+
+    // Filter by text portion of search query (title/author/branch/number)
+    if (parsedQuery.text) {
+      result = result.filter(pr =>
+        pr.title.toLowerCase().includes(parsedQuery.text) ||
+        pr.author.login.toLowerCase().includes(parsedQuery.text) ||
+        pr.headRefName.toLowerCase().includes(parsedQuery.text) ||
+        `#${pr.number}`.includes(parsedQuery.text)
+      );
+    }
+
+    // Sort PRs
+    result = [...result].sort((a, b) => {
+      switch (selectedSort) {
+        case 'oldest':
+          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+        case 'recently-updated':
+          return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        case 'least-recently-updated':
+          return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
+        // Note: Comment-based sorting is a placeholder - PRData doesn't include comment count
+        // Fallback to newest for unsupported sort options
+        case 'most-commented':
+        case 'least-commented':
+        case 'newest':
+        default:
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+      }
+    });
+
+    return result;
+  }, [currentPRs, selectedAuthor, parsedQuery, selectedSort]);
+
+  // Derive unique authors from all PRs (both open and closed) for filter dropdown
+  const uniqueAuthors = useMemo(() => {
+    const allPRs = [...getPRsByStatus('open'), ...getPRsByStatus('closed')];
+    const authors = new Set(allPRs.map(pr => pr.author.login));
+    return Array.from(authors).sort();
+  }, [getPRsByStatus]);
+
+  // Note: Labels are a placeholder - PRData doesn't include labels currently
+  // Return empty array for now; dropdown will show "No labels found"
+  const uniqueLabels: string[] = [];
+
+  const selectedPR = filteredPRs.find(pr => pr.number === selectedPRNumber) || prs.find(pr => pr.number === selectedPRNumber);
 
   const handleRunReview = useCallback(() => {
     if (selectedPRNumber) {
@@ -134,50 +255,45 @@ export function GitHubPRs({ onOpenSettings }: GitHubPRsProps) {
 
   return (
     <div className="flex-1 flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-3">
-          <h2 className="text-sm font-medium flex items-center gap-2">
-            <GitPullRequest className="h-4 w-4" />
-            Pull Requests
-          </h2>
-          {repoFullName && (
-            <a
-              href={`https://github.com/${repoFullName}/pulls`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
-            >
-              {repoFullName}
-              <ExternalLink className="h-3 w-3" />
-            </a>
-          )}
-          <span className="text-xs text-muted-foreground">
-            {prs.length} open
-          </span>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={refresh}
-          disabled={isLoading}
-        >
-          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
-        </Button>
-      </div>
-
       {/* Content */}
       <div className="flex-1 flex min-h-0">
-        {/* PR List */}
+        {/* PR List Panel */}
         <div className="w-1/2 border-r border-border flex flex-col">
+          {/* Header with search, badges, and New PR button */}
+          <PRListHeader
+            repoFullName={repoFullName || undefined}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            isLoading={isLoading}
+            onRefresh={refresh}
+          />
+
+          {/* Controls with status tabs and filter dropdowns */}
+          <PRListControls
+            activeTab={activeTab}
+            openCount={openCount}
+            closedCount={closedCount}
+            onTabChange={setActiveTab}
+            authors={uniqueAuthors}
+            labels={uniqueLabels}
+            selectedAuthor={selectedAuthor}
+            selectedLabel={selectedLabel}
+            selectedSort={selectedSort}
+            onAuthorChange={setSelectedAuthor}
+            onLabelChange={setSelectedLabel}
+            onSortChange={setSelectedSort}
+          />
+
+          {/* PR List */}
           <PRList
-            prs={prs}
+            prs={filteredPRs}
             selectedPRNumber={selectedPRNumber}
             isLoading={isLoading}
             error={error}
             activePRReviews={activePRReviews}
             getReviewStateForPR={getReviewStateForPR}
             onSelectPR={selectPR}
+            statusFilter={activeTab}
           />
         </div>