[P0] Frontend: PR creation, review, and merge UI

[frankbria]

Problem

Steps 9-10 of the user journey have no UI. Users cannot create, review, or merge PRs.

Current State

• No PR-related components exist
• No way to trigger PR creation from Dashboard
• No PR status visibility
• No merge controls

Required Implementation

New Components

1. PRList - List of PRs with status badges

   • Open/Merged/Closed states
   • Link to GitHub PR
   • Quick actions (view, merge)

2. PRCreationDialog - Create PR from completed tasks

   • Branch selector
   • Title (auto-generated from issue)
   • Description editor (auto-populated from PRD/tasks)
   • Base branch selector (default: main)

3. PRDetailView - PR details panel

   • Diff preview (files changed)
   • Review status
   • Merge button with confirmation
   • CI status indicators

4. PRMergeDialog - Merge confirmation

   • Merge method selector (squash/merge/rebase)
   • Delete branch option
   • Final confirmation

Dashboard Integration

• Add "Pull Requests" section to Overview or new tab
• "Create PR" button on completed issues
• PR count badge on Dashboard header

Acceptance Criteria

• Users can create PR from completed issue/branch
• Users can view PR status and diff
• Users can merge PR from Dashboard
• PR status updates in real-time via WebSocket
• Links to GitHub PR page work

Dependencies

• Requires: GitHub PR API ([P0] Backend: GitHub PR creation and management API #272)
• Requires: Git UI components ([P0] Frontend: Git commit and branch visualization UI #271)

Committee Report Reference

Steps 9-10 rated F grade by all 11 expert agents. This completes the 10-step user journey.

[traycerai]

Plan

Observations

The codebase uses a well-structured full-stack architecture with FastAPI backend and Next.js frontend. The Dashboard component uses a tabbed interface with real-time WebSocket updates. Existing patterns show list components (TaskList, ProjectList) with status badges, filter buttons, and card layouts. The API follows RESTful conventions with project-scoped endpoints. No PR-related functionality currently exists, requiring complete implementation from scratch. The system already has GitHub integration for Git operations (file:codeframe/git/workflow_manager.py) and WebSocket infrastructure for real-time updates.

Approach

The implementation will follow existing architectural patterns by creating a new PR router in the backend, adding PR-related types and API methods in the frontend, and building four new React components (PRList, PRCreationDialog, PRDetailView, PRMergeDialog). The PR section will be integrated as a new tab in the Dashboard component. Real-time PR status updates will leverage the existing WebSocket infrastructure with new message types. The implementation will depend on GitHub PR API endpoints (issue #272) and reuse existing Git UI component patterns (issue #271).

Implementation Steps

1. Backend API Layer

1.1 Create PR Router

Create file:codeframe/ui/routers/pull_requests.py with the following endpoints:

• GET /api/projects/{project_id}/pull-requests - List all PRs for a project

  • Query params: status (open/merged/closed), limit, offset
  • Returns: { pull_requests: PR[], total: number }
  • Authorization: Check db.user_has_project_access(current_user.id, project_id)

• POST /api/projects/{project_id}/pull-requests - Create new PR

  • Request body: { branch: string, title: string, description: string, base_branch: string }
  • Calls GitHub API to create PR (depends on issue [P0] Backend: GitHub PR creation and management API #272)
  • Returns: { pr_id: number, pr_number: number, url: string, status: string }
  • Broadcasts pr_created WebSocket event

• GET /api/pull-requests/{pr_id} - Get PR details

  • Returns: PR with diff preview, review status, CI status
  • Fetches from GitHub API

• POST /api/pull-requests/{pr_id}/merge - Merge PR

  • Request body: { merge_method: 'squash' | 'merge' | 'rebase', delete_branch: boolean }
  • Calls GitHub API to merge
  • Broadcasts pr_merged WebSocket event
  • Returns: { success: boolean, commit_sha: string }

Follow the pattern from file:codeframe/ui/routers/tasks.py for structure and error handling.

1.2 Add PR Models

Create file:codeframe/ui/models.py additions:

class PRStatus(str, Enum):
    OPEN = "open"
    MERGED = "merged"
    CLOSED = "closed"

class PRCreateRequest(BaseModel):
    branch: str
    title: str
    description: str
    base_branch: str = "main"

class PRMergeRequest(BaseModel):
    merge_method: Literal["squash", "merge", "rebase"]
    delete_branch: bool = True

1.3 WebSocket Events

Add to file:codeframe/ui/websocket_broadcasts.py:

• broadcast_pr_created(manager, project_id, pr_data)
• broadcast_pr_status_changed(manager, project_id, pr_id, status)
• broadcast_pr_merged(manager, project_id, pr_id, commit_sha)

1.4 Register Router

Update file:codeframe/ui/server.py to include the PR router:

from codeframe.ui.routers import pull_requests
app.include_router(pull_requests.router)

2. Frontend Type Definitions

2.1 Add PR Types

Update file:web-ui/src/types/api.ts:

export type PRStatus = 'open' | 'merged' | 'closed';
export type MergeMethod = 'squash' | 'merge' | 'rebase';

export interface PullRequest {
  id: string;
  pr_number: number;
  title: string;
  description: string;
  status: PRStatus;
  branch: string;
  base_branch: string;
  url: string;
  created_at: ISODate;
  updated_at: ISODate;
  merged_at: ISODate | null;
  author: string;
  files_changed: number;
  additions: number;
  deletions: number;
  review_status?: 'approved' | 'changes_requested' | 'pending';
  ci_status?: 'success' | 'failure' | 'pending';
}

export interface PRListResponse {
  pull_requests: PullRequest[];
  total: number;
}

export interface PRCreateRequest {
  branch: string;
  title: string;
  description: string;
  base_branch: string;
}

export interface PRMergeRequest {
  merge_method: MergeMethod;
  delete_branch: boolean;
}

2.2 Update WebSocket Types

Add to file:web-ui/src/types/index.ts:

export type WebSocketMessageType =
  | ... // existing types
  | 'pr_created'
  | 'pr_status_changed'
  | 'pr_merged';

3. Frontend API Client

3.1 Add PR API Methods

Update file:web-ui/src/lib/api.ts:

export const pullRequestsApi = {
  list: (projectId: number, status?: PRStatus) =>
    api.get<PRListResponse>(`/api/projects/${projectId}/pull-requests`, {
      params: status ? { status } : {},
    }),
  
  create: (projectId: number, request: PRCreateRequest) =>
    api.post<PullRequest>(`/api/projects/${projectId}/pull-requests`, request),
  
  get: (prId: number) =>
    api.get<PullRequest>(`/api/pull-requests/${prId}`),
  
  merge: (prId: number, request: PRMergeRequest) =>
    api.post<{ success: boolean; commit_sha: string }>(
      `/api/pull-requests/${prId}/merge`,
      request
    ),
};

4. Frontend Components

4.1 PRList Component

Create file:web-ui/src/components/PRList.tsx:

Structure:

• Use SWR to fetch PRs: useSWR(/api/projects/${projectId}/pull-requests, ...)
• Filter buttons for Open/Merged/Closed (similar to file:web-ui/src/components/TaskList.tsx lines 354-369)
• Grid layout with PR cards showing:
  • PR number and title
  • Status badge (use file:web-ui/src/components/ui/badge.tsx pattern)
  • Branch name
  • Files changed count
  • Review status indicator
  • CI status indicator
  • Link to GitHub PR (external link icon)
  • Quick action buttons (View Details, Merge if open)
• Empty state when no PRs
• WebSocket subscription for real-time updates

Status Badge Colors:

• Open: bg-primary/10 text-primary
• Merged: bg-secondary/10 text-secondary-foreground
• Closed: bg-muted text-muted-foreground

4.2 PRCreationDialog Component

Create file:web-ui/src/components/PRCreationDialog.tsx:

Structure:

• Use file:web-ui/src/components/ui/dialog.tsx components (Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter)
• Form fields:
  • Branch selector (dropdown of available branches from Git API)
  • Title input (auto-populated from issue title if triggered from issue)
  • Description textarea (auto-populated from PRD/task descriptions)
  • Base branch selector (default: "main")
• Submit button calls pullRequestsApi.create()
• Loading state during creation
• Success/error feedback
• Close on success

Props:

interface PRCreationDialogProps {
  projectId: number;
  isOpen: boolean;
  onClose: () => void;
  defaultBranch?: string;
  defaultTitle?: string;
  defaultDescription?: string;
}

4.3 PRDetailView Component

Create file:web-ui/src/components/PRDetailView.tsx:

Structure:

• Panel component (similar to file:web-ui/src/components/BlockerPanel.tsx)
• Sections:
  • Header: PR number, title, status badge
  • Metadata: Author, created date, branch info
  • Review status with icon indicator
  • CI status with icon indicator
  • Files changed list (expandable):
    • File path
    • Additions/deletions count
    • Diff preview (first 50 lines, expandable)
  • Actions footer:
    • "View on GitHub" button (external link)
    • "Merge PR" button (opens PRMergeDialog, only if status is open)
• Use SWR for data fetching with revalidation
• WebSocket updates for status changes

Props:

interface PRDetailViewProps {
  prId: number;
  projectId: number;
}

4.4 PRMergeDialog Component

Create file:web-ui/src/components/PRMergeDialog.tsx:

Structure:

• Confirmation dialog using file:web-ui/src/components/ui/dialog.tsx
• Form fields:
  • Merge method selector (radio buttons):
    • Squash and merge (default, recommended)
    • Create merge commit
    • Rebase and merge
  • Delete branch checkbox (checked by default)
• Warning message about irreversibility
• Confirm/Cancel buttons
• Loading state during merge
• Success feedback with commit SHA
• Error handling

Props:

interface PRMergeDialogProps {
  pr: PullRequest;
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
}

5. Dashboard Integration

5.1 Add Pull Requests Tab

Update file:web-ui/src/components/Dashboard.tsx:

Line ~303-538 (Tab Navigation):

• Add "Pull Requests" tab after "Context" tab
• Tab button with PR count badge (fetch from API)

Line ~539-916 (Tab Content):

• Add conditional rendering for Pull Requests tab:

{activeTab === 'pull-requests' && (
  <div className="space-y-6">
    <div className="flex justify-between items-center">
      <h2 className="text-xl font-semibold">Pull Requests</h2>
      <button
        onClick={() => setShowPRCreationDialog(true)}
        className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
      >
        Create PR
      </button>
    </div>
    <PRList projectId={projectId} />
  </div>
)}

5.2 Add "Create PR" Button on Completed Issues

Update issue display components to show "Create PR" button when:

• Issue status is "completed"
• No PR exists for the issue's branch
• Button opens PRCreationDialog with pre-filled data

5.3 PR Count Badge

Add to Dashboard header (line ~303):

• Fetch PR count: const { data: prData } = useSWR(/api/projects/${projectId}/pull-requests?status=open)
• Display badge: {prData?.total > 0 && <Badge>{prData.total}</Badge>}

6. WebSocket Integration

6.1 Update Message Mapper

Update file:web-ui/src/lib/websocketMessageMapper.ts:

Add cases for PR events:

case 'pr_created':
case 'pr_status_changed':
case 'pr_merged':
  return {
    type: 'PR_EVENT',
    payload: {
      prId: msg.pr_id,
      status: msg.status,
      timestamp,
    },
  };

6.2 Component Subscriptions

In PRList and PRDetailView components:

• Subscribe to WebSocket messages
• Filter for PR-related events
• Trigger SWR revalidation on updates:

useEffect(() => {
  const unsubscribe = wsClient.onMessage((message) => {
    if (message.type.startsWith('pr_') && message.project_id === projectId) {
      mutate(); // Revalidate SWR cache
    }
  });
  return unsubscribe;
}, [projectId, mutate]);

7. Styling and UX

7.1 Status Indicators

Create reusable status indicator components:

CI Status Indicator:

• Success: Green checkmark icon
• Failure: Red X icon
• Pending: Yellow clock icon

Review Status Indicator:

• Approved: Green checkmark with "Approved" label
• Changes Requested: Orange warning with "Changes Requested" label
• Pending: Gray clock with "Pending Review" label

7.2 Responsive Design

• PRList: Grid layout (1 column mobile, 2 columns tablet, 3 columns desktop)
• PRDetailView: Collapsible sections on mobile
• Dialogs: Full-screen on mobile, centered modal on desktop

7.3 Loading States

• Skeleton loaders for PR cards while fetching
• Spinner in buttons during API calls
• Optimistic updates for merge action

8. Error Handling

8.1 API Errors

• Network errors: Show retry button
• 403 Forbidden: Show "Access denied" message
• 404 Not Found: Show "PR not found" message
• 409 Conflict: Show merge conflict resolution instructions

8.2 Validation

• PR creation: Validate branch exists, title not empty
• PR merge: Check PR status is "open", no merge conflicts
• Show inline error messages in forms

9. Testing Considerations

Follow existing test patterns from file:web-ui/__tests__/components/TaskList.test.tsx:

• Unit tests for each component
• Mock API responses with MSW
• Test WebSocket message handling
• Test user interactions (button clicks, form submissions)
• Test error states and edge cases

10. Dependencies

Blocked by:

• Issue [P0] Backend: GitHub PR creation and management API #272: GitHub PR API integration (backend GitHub client)
• Issue [P0] Frontend: Git commit and branch visualization UI #271: Git UI components (branch selector, diff viewer)

Once available:

• Import GitHub client in PR router
• Import branch selector from Git UI components
• Import diff viewer for file changes display

Visual Flow

sequenceDiagram
    participant User
    participant Dashboard
    participant PRList
    participant PRCreationDialog
    participant API
    participant GitHub
    participant WebSocket

    User->>Dashboard: Click "Pull Requests" tab
    Dashboard->>PRList: Render component
    PRList->>API: GET /api/projects/{id}/pull-requests
    API->>GitHub: Fetch PRs
    GitHub-->>API: PR data
    API-->>PRList: PR list
    PRList-->>User: Display PR cards

    User->>PRList: Click "Create PR"
    PRList->>PRCreationDialog: Open dialog
    User->>PRCreationDialog: Fill form & submit
    PRCreationDialog->>API: POST /api/projects/{id}/pull-requests
    API->>GitHub: Create PR
    GitHub-->>API: PR created
    API->>WebSocket: Broadcast pr_created
    API-->>PRCreationDialog: Success
    PRCreationDialog-->>User: Show success message
    WebSocket-->>PRList: pr_created event
    PRList->>PRList: Refresh list

    User->>PRList: Click "Merge" on PR
    PRList->>PRMergeDialog: Open dialog
    User->>PRMergeDialog: Select method & confirm
    PRMergeDialog->>API: POST /api/pull-requests/{id}/merge
    API->>GitHub: Merge PR
    GitHub-->>API: Merge success
    API->>WebSocket: Broadcast pr_merged
    API-->>PRMergeDialog: Success
    PRMergeDialog-->>User: Show success
    WebSocket-->>PRList: pr_merged event
    PRList->>PRList: Update PR status

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase uses a well-structured full-stack architecture with FastAPI backend and Next.js frontend. The Dashboard component uses a tabbed interface with real-time WebSocket updates. Existing patterns show list components (TaskList, ProjectList) with status badges, filter buttons, and card layouts. The API follows RESTful conventions with project-scoped endpoints. No PR-related functionality currently exists, requiring complete implementation from scratch. The system already has GitHub integration for Git operations (`file:codeframe/git/workflow_manager.py`) and WebSocket infrastructure for real-time updates.

## Approach

The implementation will follow existing architectural patterns by creating a new PR router in the backend, adding PR-related types and API methods in the frontend, and building four new React components (PRList, PRCreationDialog, PRDetailView, PRMergeDialog). The PR section will be integrated as a new tab in the Dashboard component. Real-time PR status updates will leverage the existing WebSocket infrastructure with new message types. The implementation will depend on GitHub PR API endpoints (issue #272) and reuse existing Git UI component patterns (issue #271).

## Implementation Steps

### 1. Backend API Layer

#### 1.1 Create PR Router
Create `file:codeframe/ui/routers/pull_requests.py` with the following endpoints:

- **GET `/api/projects/{project_id}/pull-requests`** - List all PRs for a project
  - Query params: `status` (open/merged/closed), `limit`, `offset`
  - Returns: `{ pull_requests: PR[], total: number }`
  - Authorization: Check `db.user_has_project_access(current_user.id, project_id)`

- **POST `/api/projects/{project_id}/pull-requests`** - Create new PR
  - Request body: `{ branch: string, title: string, description: string, base_branch: string }`
  - Calls GitHub API to create PR (depends on issue #272)
  - Returns: `{ pr_id: number, pr_number: number, url: string, status: string }`
  - Broadcasts `pr_created` WebSocket event

- **GET `/api/pull-requests/{pr_id}`** - Get PR details
  - Returns: PR with diff preview, review status, CI status
  - Fetches from GitHub API

- **POST `/api/pull-requests/{pr_id}/merge`** - Merge PR
  - Request body: `{ merge_method: 'squash' | 'merge' | 'rebase', delete_branch: boolean }`
  - Calls GitHub API to merge
  - Broadcasts `pr_merged` WebSocket event
  - Returns: `{ success: boolean, commit_sha: string }`

Follow the pattern from `file:codeframe/ui/routers/tasks.py` for structure and error handling.

#### 1.2 Add PR Models
Create `file:codeframe/ui/models.py` additions:

```python
class PRStatus(str, Enum):
    OPEN = "open"
    MERGED = "merged"
    CLOSED = "closed"

class PRCreateRequest(BaseModel):
    branch: str
    title: str
    description: str
    base_branch: str = "main"

class PRMergeRequest(BaseModel):
    merge_method: Literal["squash", "merge", "rebase"]
    delete_branch: bool = True
```

#### 1.3 WebSocket Events
Add to `file:codeframe/ui/websocket_broadcasts.py`:

- `broadcast_pr_created(manager, project_id, pr_data)`
- `broadcast_pr_status_changed(manager, project_id, pr_id, status)`
- `broadcast_pr_merged(manager, project_id, pr_id, commit_sha)`

#### 1.4 Register Router
Update `file:codeframe/ui/server.py` to include the PR router:
```python
from codeframe.ui.routers import pull_requests
app.include_router(pull_requests.router)
```

### 2. Frontend Type Definitions

#### 2.1 Add PR Types
Update `file:web-ui/src/types/api.ts`:

```typescript
export type PRStatus = 'open' | 'merged' | 'closed';
export type MergeMethod = 'squash' | 'merge' | 'rebase';

export interface PullRequest {
  id: string;
  pr_number: number;
  title: string;
  description: string;
  status: PRStatus;
  branch: string;
  base_branch: string;
  url: string;
  created_at: ISODate;
  updated_at: ISODate;
  merged_at: ISODate | null;
  author: string;
  files_changed: number;
  additions: number;
  deletions: number;
  review_status?: 'approved' | 'changes_requested' | 'pending';
  ci_status?: 'success' | 'failure' | 'pending';
}

export interface PRListResponse {
  pull_requests: PullRequest[];
  total: number;
}

export interface PRCreateRequest {
  branch: string;
  title: string;
  description: string;
  base_branch: string;
}

export interface PRMergeRequest {
  merge_method: MergeMethod;
  delete_branch: boolean;
}
```

#### 2.2 Update WebSocket Types
Add to `file:web-ui/src/types/index.ts`:

```typescript
export type WebSocketMessageType =
  | ... // existing types
  | 'pr_created'
  | 'pr_status_changed'
  | 'pr_merged';
```

### 3. Frontend API Client

#### 3.1 Add PR API Methods
Update `file:web-ui/src/lib/api.ts`:

```typescript
export const pullRequestsApi = {
  list: (projectId: number, status?: PRStatus) =>
    api.get<PRListResponse>(`/api/projects/${projectId}/pull-requests`, {
      params: status ? { status } : {},
    }),
  
  create: (projectId: number, request: PRCreateRequest) =>
    api.post<PullRequest>(`/api/projects/${projectId}/pull-requests`, request),
  
  get: (prId: number) =>
    api.get<PullRequest>(`/api/pull-requests/${prId}`),
  
  merge: (prId: number, request: PRMergeRequest) =>
    api.post<{ success: boolean; commit_sha: string }>(
      `/api/pull-requests/${prId}/merge`,
      request
    ),
};
```

### 4. Frontend Components

#### 4.1 PRList Component
Create `file:web-ui/src/components/PRList.tsx`:

**Structure:**
- Use SWR to fetch PRs: `useSWR(`/api/projects/${projectId}/pull-requests`, ...)`
- Filter buttons for Open/Merged/Closed (similar to `file:web-ui/src/components/TaskList.tsx` lines 354-369)
- Grid layout with PR cards showing:
  - PR number and title
  - Status badge (use `file:web-ui/src/components/ui/badge.tsx` pattern)
  - Branch name
  - Files changed count
  - Review status indicator
  - CI status indicator
  - Link to GitHub PR (external link icon)
  - Quick action buttons (View Details, Merge if open)
- Empty state when no PRs
- WebSocket subscription for real-time updates

**Status Badge Colors:**
- Open: `bg-primary/10 text-primary`
- Merged: `bg-secondary/10 text-secondary-foreground`
- Closed: `bg-muted text-muted-foreground`

#### 4.2 PRCreationDialog Component
Create `file:web-ui/src/components/PRCreationDialog.tsx`:

**Structure:**
- Use `file:web-ui/src/components/ui/dialog.tsx` components (Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter)
- Form fields:
  - Branch selector (dropdown of available branches from Git API)
  - Title input (auto-populated from issue title if triggered from issue)
  - Description textarea (auto-populated from PRD/task descriptions)
  - Base branch selector (default: "main")
- Submit button calls `pullRequestsApi.create()`
- Loading state during creation
- Success/error feedback
- Close on success

**Props:**
```typescript
interface PRCreationDialogProps {
  projectId: number;
  isOpen: boolean;
  onClose: () => void;
  defaultBranch?: string;
  defaultTitle?: string;
  defaultDescription?: string;
}
```

#### 4.3 PRDetailView Component
Create `file:web-ui/src/components/PRDetailView.tsx`:

**Structure:**
- Panel component (similar to `file:web-ui/src/components/BlockerPanel.tsx`)
- Sections:
  - Header: PR number, title, status badge
  - Metadata: Author, created date, branch info
  - Review status with icon indicator
  - CI status with icon indicator
  - Files changed list (expandable):
    - File path
    - Additions/deletions count
    - Diff preview (first 50 lines, expandable)
  - Actions footer:
    - "View on GitHub" button (external link)
    - "Merge PR" button (opens PRMergeDialog, only if status is open)
- Use SWR for data fetching with revalidation
- WebSocket updates for status changes

**Props:**
```typescript
interface PRDetailViewProps {
  prId: number;
  projectId: number;
}
```

#### 4.4 PRMergeDialog Component
Create `file:web-ui/src/components/PRMergeDialog.tsx`:

**Structure:**
- Confirmation dialog using `file:web-ui/src/components/ui/dialog.tsx`
- Form fields:
  - Merge method selector (radio buttons):
    - Squash and merge (default, recommended)
    - Create merge commit
    - Rebase and merge
  - Delete branch checkbox (checked by default)
- Warning message about irreversibility
- Confirm/Cancel buttons
- Loading state during merge
- Success feedback with commit SHA
- Error handling

**Props:**
```typescript
interface PRMergeDialogProps {
  pr: PullRequest;
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
}
```

### 5. Dashboard Integration

#### 5.1 Add Pull Requests Tab
Update `file:web-ui/src/components/Dashboard.tsx`:

**Line ~303-538 (Tab Navigation):**
- Add "Pull Requests" tab after "Context" tab
- Tab button with PR count badge (fetch from API)

**Line ~539-916 (Tab Content):**
- Add conditional rendering for Pull Requests tab:
```typescript
{activeTab === 'pull-requests' && (
  <div className="space-y-6">
    <div className="flex justify-between items-center">
      <h2 className="text-xl font-semibold">Pull Requests</h2>
      <button
        onClick={() => setShowPRCreationDialog(true)}
        className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
      >
        Create PR
      </button>
    </div>
    <PRList projectId={projectId} />
  </div>
)}
```

#### 5.2 Add "Create PR" Button on Completed Issues
Update issue display components to show "Create PR" button when:
- Issue status is "completed"
- No PR exists for the issue's branch
- Button opens PRCreationDialog with pre-filled data

#### 5.3 PR Count Badge
Add to Dashboard header (line ~303):
- Fetch PR count: `const { data: prData } = useSWR(`/api/projects/${projectId}/pull-requests?status=open`)`
- Display badge: `{prData?.total > 0 && <Badge>{prData.total}</Badge>}`

### 6. WebSocket Integration

#### 6.1 Update Message Mapper
Update `file:web-ui/src/lib/websocketMessageMapper.ts`:

Add cases for PR events:
```typescript
case 'pr_created':
case 'pr_status_changed':
case 'pr_merged':
  return {
    type: 'PR_EVENT',
    payload: {
      prId: msg.pr_id,
      status: msg.status,
      timestamp,
    },
  };
```

#### 6.2 Component Subscriptions
In PRList and PRDetailView components:
- Subscribe to WebSocket messages
- Filter for PR-related events
- Trigger SWR revalidation on updates:
```typescript
useEffect(() => {
  const unsubscribe = wsClient.onMessage((message) => {
    if (message.type.startsWith('pr_') && message.project_id === projectId) {
      mutate(); // Revalidate SWR cache
    }
  });
  return unsubscribe;
}, [projectId, mutate]);
```

### 7. Styling and UX

#### 7.1 Status Indicators
Create reusable status indicator components:

**CI Status Indicator:**
- Success: Green checkmark icon
- Failure: Red X icon
- Pending: Yellow clock icon

**Review Status Indicator:**
- Approved: Green checkmark with "Approved" label
- Changes Requested: Orange warning with "Changes Requested" label
- Pending: Gray clock with "Pending Review" label

#### 7.2 Responsive Design
- PRList: Grid layout (1 column mobile, 2 columns tablet, 3 columns desktop)
- PRDetailView: Collapsible sections on mobile
- Dialogs: Full-screen on mobile, centered modal on desktop

#### 7.3 Loading States
- Skeleton loaders for PR cards while fetching
- Spinner in buttons during API calls
- Optimistic updates for merge action

### 8. Error Handling

#### 8.1 API Errors
- Network errors: Show retry button
- 403 Forbidden: Show "Access denied" message
- 404 Not Found: Show "PR not found" message
- 409 Conflict: Show merge conflict resolution instructions

#### 8.2 Validation
- PR creation: Validate branch exists, title not empty
- PR merge: Check PR status is "open", no merge conflicts
- Show inline error messages in forms

### 9. Testing Considerations

Follow existing test patterns from `file:web-ui/__tests__/components/TaskList.test.tsx`:
- Unit tests for each component
- Mock API responses with MSW
- Test WebSocket message handling
- Test user interactions (button clicks, form submissions)
- Test error states and edge cases

### 10. Dependencies

**Blocked by:**
- Issue #272: GitHub PR API integration (backend GitHub client)
- Issue #271: Git UI components (branch selector, diff viewer)

**Once available:**
- Import GitHub client in PR router
- Import branch selector from Git UI components
- Import diff viewer for file changes display

## Visual Flow

```mermaid
sequenceDiagram
    participant User
    participant Dashboard
    participant PRList
    participant PRCreationDialog
    participant API
    participant GitHub
    participant WebSocket

    User->>Dashboard: Click "Pull Requests" tab
    Dashboard->>PRList: Render component
    PRList->>API: GET /api/projects/{id}/pull-requests
    API->>GitHub: Fetch PRs
    GitHub-->>API: PR data
    API-->>PRList: PR list
    PRList-->>User: Display PR cards

    User->>PRList: Click "Create PR"
    PRList->>PRCreationDialog: Open dialog
    User->>PRCreationDialog: Fill form & submit
    PRCreationDialog->>API: POST /api/projects/{id}/pull-requests
    API->>GitHub: Create PR
    GitHub-->>API: PR created
    API->>WebSocket: Broadcast pr_created
    API-->>PRCreationDialog: Success
    PRCreationDialog-->>User: Show success message
    WebSocket-->>PRList: pr_created event
    PRList->>PRList: Refresh list

    User->>PRList: Click "Merge" on PR
    PRList->>PRMergeDialog: Open dialog
    User->>PRMergeDialog: Select method & confirm
    PRMergeDialog->>API: POST /api/pull-requests/{id}/merge
    API->>GitHub: Merge PR
    GitHub-->>API: Merge success
    API->>WebSocket: Broadcast pr_merged
    API-->>PRMergeDialog: Success
    PRMergeDialog-->>User: Show success
    WebSocket-->>PRList: pr_merged event
    PRList->>PRList: Update PR status
```

---

Execution Information

Branch: main
Commit: a107395

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#194 - Fix PRD generation progress tracking UI [merged]
#196 - fix(discovery): Synchronize PRD buttons and fix state persistence on tab revisit [merged]
#211 - feat(dashboard): Add PhaseProgress component for phase visualization [merged]
#213 - feat(planning): Add Generate Task Breakdown button to DiscoveryProgress [merged]
#214 - feat(planning): Add TaskReview component for task approval workflow [merged]
#215 - feat(dashboard): Add phase-aware task view integration (#16-6) [merged]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!