[Phase 3] Review & Commit View - Diff Viewer & Git Actions

[frankbria]

Overview

Implement the Review & Commit View for inspecting changes and committing to git with confidence.

Reference: docs/PHASE_3_UI_ARCHITECTURE.md Section 1.6, 3.6

Purpose

Inspect changes and commit to git with confidence.

User Actions

• View unified diff of all changes
• Run quality checks (lint, tests)
• Export patch file
• Commit with generated message
• Create GitHub PR

Components

ReviewCommitView
├── ReviewHeader
│   ├── ChangeSummary (X files changed, Y insertions, Z deletions)
│   └── QualityGateResults
│       ├── GateBadge (ruff: passed/failed)
│       └── GateBadge (pytest: X/Y passed)
├── FileTreePanel (left sidebar, 25% width)
│   └── FileTree (changed files, click to view diff)
├── DiffViewer (main content, 75% width)
│   ├── UnifiedDiff (syntax highlighted)
│   └── DiffNavigation (prev/next file)
└── CommitPanel (bottom or right)
    ├── CommitMessageSuggestion (AI-generated, editable)
    ├── CommitButton
    └── PRCreationToggle
        └── PRForm (title, description)

API Endpoints Used

• GET /api/v2/review/diff - Get unified diff
• POST /api/v2/gates/run - Run quality gates
• GET /api/v2/review/patch - Export patch file
• POST /api/v2/git/commit - Create commit
• POST /api/v2/pr/create - Create GitHub PR

Acceptance Criteria

• File tree showing changed files
• Click file to view diff in main panel
• Syntax-highlighted unified diff viewer
• Previous/next file navigation
• Change summary (files, insertions, deletions)
• Quality gate badges (ruff, pytest)
• Run gates button to re-check
• Export patch modal with copy button
• AI-generated commit message (editable)
• Commit button creates git commit
• PR creation toggle with form (title, description)
• Success modal with PR URL after creation

Route

/review

Real-time Requirements

None - static view, refresh after actions

[traycerai]

Plan

Observations

The codebase has a well-structured Next.js frontend (legacy/web-ui) with existing git and quality gate components. Backend API v2 endpoints exist for git operations (git_v2.py), quality gates (gates_v2.py), and PR management (pr_v2.py). The PHASE_3_UI_ARCHITECTURE.md document provides detailed component specifications for the Review & Commit View (Section 3.6). However, the /api/v2/review/diff and /api/v2/review/patch endpoints mentioned in the ticket are missing - the existing /api/v2/git/diff endpoint can serve this purpose.

Approach

The implementation follows the golden path philosophy defined in PHASE_3_UI_ARCHITECTURE.md. We'll create a new /review route with a static view that fetches data on load. The approach leverages existing backend endpoints where possible (using /api/v2/git/diff instead of creating redundant review endpoints), builds reusable components following the established Shadcn/UI patterns, and implements a custom syntax-highlighted diff viewer since no diff library is currently installed. The component hierarchy matches Section 3.6 specifications exactly.

Implementation Steps

1. Backend API Enhancements

1.1 Add Review Endpoints to file:codeframe/ui/routers/review_v2.py

Add two new endpoints to support the Review & Commit View:

GET /api/v2/review/diff

• Response model: DiffResponse with fields: diff (string), files_changed (int), insertions (int), deletions (int), changed_files (list of file paths)
• Delegate to codeframe.core.git.get_diff() for unified diff
• Parse diff output to extract statistics (files changed, insertions, deletions)
• Use workspace: Workspace = Depends(get_v2_workspace) dependency

GET /api/v2/review/patch

• Response model: PatchResponse with fields: patch (string), filename (string)
• Generate patch file using git format-patch or git diff with proper headers
• Return downloadable patch content

1.2 Add Commit Message Generation Endpoint

POST /api/v2/review/commit-message

• Request model: GenerateCommitMessageRequest with optional files list
• Use AI (existing LLM integration) to analyze diff and generate conventional commit message
• Response model: CommitMessageResponse with message (string) and confidence (float)

2. Frontend API Client

2.1 Create file:legacy/web-ui/src/api/review.ts

Export functions:

• getReviewDiff() - fetches unified diff with statistics
• getReviewPatch() - fetches patch file content
• generateCommitMessage(files?: string[]) - AI-generated commit message
• Use authFetch from file:legacy/web-ui/src/lib/api-client.ts
• Follow patterns from file:legacy/web-ui/src/api/git.ts

2.2 Update file:legacy/web-ui/src/api/git.ts

Add convenience function:

• getChangedFiles() - wrapper around /api/v2/git/status to extract modified/staged/untracked files

3. Frontend Type Definitions

3.1 Create file:legacy/web-ui/src/types/review.ts

Define TypeScript interfaces:

• DiffResponse - matches backend response
• PatchResponse - patch file data
• CommitMessageResponse - AI-generated message
• ChangedFile - file path, change type (modified/added/deleted), insertions, deletions
• DiffStats - files changed, total insertions, total deletions

4. Core UI Components

4.1 Create file:legacy/web-ui/src/components/review/DiffViewer.tsx

Purpose: Display syntax-highlighted unified diff

Props:

• diff: string - unified diff content
• currentFile?: string - highlight specific file
• onFileClick?: (file: string) => void - navigation callback

Implementation:

• Parse unified diff into sections by file
• Apply syntax highlighting using regex patterns for diff syntax (+/-, @@, etc.)
• Use Tailwind classes: green for additions, red for deletions, muted for context
• Render line numbers in left gutter
• Collapsible file sections with expand/collapse icons from Hugeicons
• Monospace font (font-mono) for code content

4.2 Create file:legacy/web-ui/src/components/review/FileTreePanel.tsx

Purpose: Left sidebar showing changed files

Props:

• files: ChangedFile[] - list of changed files
• selectedFile?: string - currently selected file
• onFileSelect: (file: string) => void - selection callback

Implementation:

• Group files by directory (tree structure)
• Show change type icon (modified/added/deleted) using Hugeicons
• Display insertions/deletions count per file
• Highlight selected file with bg-accent
• Use Shadcn/UI ScrollArea for overflow
• 25% width, fixed position

4.3 Create file:legacy/web-ui/src/components/review/ReviewHeader.tsx

Purpose: Top header with change summary and quality gates

Props:

• stats: DiffStats - change statistics
• gateResults?: GateResultResponse - from file:legacy/web-ui/src/types/qualityGates.ts
• onRunGates: () => void - trigger quality gates

Implementation:

• Display "X files changed, Y insertions, Z deletions" using Hugeicons stats icons
• Render quality gate badges using existing GateStatusIndicator from file:legacy/web-ui/src/components/quality-gates/GateStatusIndicator.tsx
• "Run Quality Gates" button (primary style)
• Use Shadcn/UI Card component for container

4.4 Create file:legacy/web-ui/src/components/review/CommitPanel.tsx

Purpose: Bottom/right panel for commit and PR creation

Props:

• onCommit: (message: string) => Promise<void> - commit callback
• onCreatePR: (title: string, body: string) => Promise<void> - PR callback
• isCommitting: boolean - loading state
• isCreatingPR: boolean - loading state

Implementation:

• AI-generated commit message in Shadcn/UI Textarea (editable)
• "Generate Message" button with loading spinner
• "Commit Changes" button (primary, disabled when committing)
• Shadcn/UI Checkbox for "Create Pull Request"
• Conditional PR form (title, description) when checkbox enabled
• Use Shadcn/UI Form components with validation
• Collapsible panel (can minimize to save space)

4.5 Create file:legacy/web-ui/src/components/review/DiffNavigation.tsx

Purpose: Previous/Next file navigation controls

Props:

• currentFileIndex: number
• totalFiles: number
• onPrevious: () => void
• onNext: () => void

Implementation:

• Simple button group with arrow icons from Hugeicons
• Display "File X of Y"
• Disable buttons at boundaries
• Keyboard shortcuts (optional): arrow keys for navigation

5. Modal Components

5.1 Create file:legacy/web-ui/src/components/review/ExportPatchModal.tsx

Purpose: Display patch content with copy button

Props:

• isOpen: boolean
• onClose: () => void
• patchContent: string

Implementation:

• Shadcn/UI Dialog component
• Monospace textarea with patch content (read-only)
• "Copy to Clipboard" button using Clipboard API
• "Download .patch" button to trigger file download
• Success toast notification on copy

5.2 Create file:legacy/web-ui/src/components/review/PRCreatedModal.tsx

Purpose: Success confirmation with PR URL

Props:

• isOpen: boolean
• onClose: () => void
• prUrl: string
• prNumber: number

Implementation:

• Shadcn/UI Dialog with success icon (CheckmarkCircle01Icon)
• Display PR number and clickable URL
• "View PR" button (opens in new tab)
• "Close" button to dismiss

6. Main Review Page

6.1 Create file:legacy/web-ui/src/app/review/page.tsx

Purpose: Main Review & Commit View route

State Management:

• diff: DiffResponse | null - fetched on mount
• selectedFile: string | null - currently viewed file
• gateResults: GateResultResponse | null - quality gate status
• commitMessage: string - editable commit message
• showPatchModal: boolean - export patch modal state
• showPRModal: boolean - PR success modal state
• prUrl: string - created PR URL
• createPR: boolean - toggle for PR creation
• prTitle: string - PR title input
• prBody: string - PR description input

Data Fetching:

• Use SWR or useEffect to fetch diff on mount via getReviewDiff()
• Fetch quality gate results via existing fetchQualityGateStatus() from file:legacy/web-ui/src/api/qualityGates.ts
• Auto-generate commit message on mount via generateCommitMessage()

Layout:

<div className="flex h-screen">
  <FileTreePanel /> {/* 25% width */}
  <div className="flex-1 flex flex-col">
    <ReviewHeader />
    <div className="flex-1 overflow-auto">
      <DiffViewer />
      <DiffNavigation />
    </div>
  </div>
  <CommitPanel /> {/* right sidebar or bottom */}
</div>

Event Handlers:

• handleRunGates() - call /api/v2/gates/run, update state
• handleCommit() - call /api/v2/git/commit, show success toast
• handleExportPatch() - fetch patch, open modal
• handleCreatePR() - call /api/v2/pr, open success modal
• handleFileSelect() - update selected file, scroll diff viewer

Error Handling:

• Wrap in ErrorBoundary from file:legacy/web-ui/src/components/ErrorBoundary.tsx
• Display error states for failed API calls
• Use Shadcn/UI Alert component for inline errors

7. Navigation Integration

7.1 Update Sidebar Navigation

Add "Review" link to main navigation sidebar (if exists):

• Icon: GitBranch02Icon from Hugeicons
• Route: /review
• Label: "Review & Commit"

8. Utilities and Helpers

8.1 Create file:legacy/web-ui/src/lib/diffParser.ts

Export utility functions:

• parseDiff(diffText: string) - parse unified diff into structured data
• extractFileChanges(diffText: string) - extract file paths and stats
• highlightDiffLine(line: string) - apply syntax highlighting classes

8.2 Create file:legacy/web-ui/src/lib/commitMessageUtils.ts

Export functions:

• validateCommitMessage(message: string) - check conventional commit format
• formatCommitMessage(message: string) - ensure proper formatting

9. Testing Considerations

While not explicitly required, consider:

• Unit tests for diff parser utilities
• Component tests for DiffViewer, FileTreePanel
• Integration tests for commit and PR creation flows
• Mock API responses in tests

10. Styling and Polish

• Use Tailwind CSS classes consistently with existing components
• Follow Shadcn/UI theming (use CSS variables for colors)
• Ensure responsive design (mobile: stack panels vertically)
• Add loading skeletons for async operations
• Use Hugeicons for all icons (GitCommitIcon, FileIcon, CheckmarkIcon, etc.)
• Implement smooth transitions for panel collapse/expand

Component Hierarchy Diagram

graph TD
    A[ReviewCommitView /review/page.tsx] --> B[ReviewHeader]
    A --> C[FileTreePanel]
    A --> D[DiffViewer]
    A --> E[DiffNavigation]
    A --> F[CommitPanel]
    A --> G[ExportPatchModal]
    A --> H[PRCreatedModal]
    
    B --> B1[ChangeSummary]
    B --> B2[QualityGateResults]
    B2 --> B3[GateBadge - existing]
    
    C --> C1[FileTree]
    C1 --> C2[FileTreeItem]
    
    D --> D1[UnifiedDiff]
    D1 --> D2[DiffSection per file]
    
    F --> F1[CommitMessageSuggestion]
    F --> F2[CommitButton]
    F --> F3[PRCreationToggle]
    F3 --> F4[PRForm]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#fff4e1
    style D fill:#fff4e1
    style F fill:#fff4e1

Loading

API Flow Diagram

sequenceDiagram
    participant User
    participant ReviewPage
    participant API
    participant Backend
    
    User->>ReviewPage: Navigate to /review
    ReviewPage->>API: GET /api/v2/git/diff
    API->>Backend: get_diff(workspace)
    Backend-->>API: DiffResponse
    API-->>ReviewPage: diff data
    
    ReviewPage->>API: POST /api/v2/review/commit-message
    API->>Backend: AI generate message
    Backend-->>API: CommitMessageResponse
    API-->>ReviewPage: suggested message
    
    User->>ReviewPage: Click "Run Quality Gates"
    ReviewPage->>API: POST /api/v2/gates/run
    API->>Backend: gates.run(workspace)
    Backend-->>API: GateResultResponse
    API-->>ReviewPage: gate results
    
    User->>ReviewPage: Edit message & click "Commit"
    ReviewPage->>API: POST /api/v2/git/commit
    API->>Backend: git.create_commit()
    Backend-->>API: CommitResultResponse
    API-->>ReviewPage: success
    
    alt Create PR enabled
        ReviewPage->>API: POST /api/v2/pr
        API->>Backend: github_integration.create_pull_request()
        Backend-->>API: PRResponse
        API-->>ReviewPage: PR URL
        ReviewPage->>User: Show PRCreatedModal
    end

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase has a well-structured Next.js frontend (`legacy/web-ui`) with existing git and quality gate components. Backend API v2 endpoints exist for git operations (`git_v2.py`), quality gates (`gates_v2.py`), and PR management (`pr_v2.py`). The PHASE_3_UI_ARCHITECTURE.md document provides detailed component specifications for the Review & Commit View (Section 3.6). However, the `/api/v2/review/diff` and `/api/v2/review/patch` endpoints mentioned in the ticket are missing - the existing `/api/v2/git/diff` endpoint can serve this purpose.

## Approach

The implementation follows the golden path philosophy defined in PHASE_3_UI_ARCHITECTURE.md. We'll create a new `/review` route with a static view that fetches data on load. The approach leverages existing backend endpoints where possible (using `/api/v2/git/diff` instead of creating redundant review endpoints), builds reusable components following the established Shadcn/UI patterns, and implements a custom syntax-highlighted diff viewer since no diff library is currently installed. The component hierarchy matches Section 3.6 specifications exactly.

## Implementation Steps

### 1. Backend API Enhancements

#### 1.1 Add Review Endpoints to `file:codeframe/ui/routers/review_v2.py`

Add two new endpoints to support the Review & Commit View:

**GET `/api/v2/review/diff`**
- Response model: `DiffResponse` with fields: `diff` (string), `files_changed` (int), `insertions` (int), `deletions` (int), `changed_files` (list of file paths)
- Delegate to `codeframe.core.git.get_diff()` for unified diff
- Parse diff output to extract statistics (files changed, insertions, deletions)
- Use `workspace: Workspace = Depends(get_v2_workspace)` dependency

**GET `/api/v2/review/patch`**
- Response model: `PatchResponse` with fields: `patch` (string), `filename` (string)
- Generate patch file using `git format-patch` or `git diff` with proper headers
- Return downloadable patch content

#### 1.2 Add Commit Message Generation Endpoint

**POST `/api/v2/review/commit-message`**
- Request model: `GenerateCommitMessageRequest` with optional `files` list
- Use AI (existing LLM integration) to analyze diff and generate conventional commit message
- Response model: `CommitMessageResponse` with `message` (string) and `confidence` (float)

### 2. Frontend API Client

#### 2.1 Create `file:legacy/web-ui/src/api/review.ts`

Export functions:
- `getReviewDiff()` - fetches unified diff with statistics
- `getReviewPatch()` - fetches patch file content
- `generateCommitMessage(files?: string[])` - AI-generated commit message
- Use `authFetch` from `file:legacy/web-ui/src/lib/api-client.ts`
- Follow patterns from `file:legacy/web-ui/src/api/git.ts`

#### 2.2 Update `file:legacy/web-ui/src/api/git.ts`

Add convenience function:
- `getChangedFiles()` - wrapper around `/api/v2/git/status` to extract modified/staged/untracked files

### 3. Frontend Type Definitions

#### 3.1 Create `file:legacy/web-ui/src/types/review.ts`

Define TypeScript interfaces:
- `DiffResponse` - matches backend response
- `PatchResponse` - patch file data
- `CommitMessageResponse` - AI-generated message
- `ChangedFile` - file path, change type (modified/added/deleted), insertions, deletions
- `DiffStats` - files changed, total insertions, total deletions

### 4. Core UI Components

#### 4.1 Create `file:legacy/web-ui/src/components/review/DiffViewer.tsx`

**Purpose:** Display syntax-highlighted unified diff

**Props:**
- `diff: string` - unified diff content
- `currentFile?: string` - highlight specific file
- `onFileClick?: (file: string) => void` - navigation callback

**Implementation:**
- Parse unified diff into sections by file
- Apply syntax highlighting using regex patterns for diff syntax (+/-, @@, etc.)
- Use Tailwind classes: green for additions, red for deletions, muted for context
- Render line numbers in left gutter
- Collapsible file sections with expand/collapse icons from Hugeicons
- Monospace font (`font-mono`) for code content

#### 4.2 Create `file:legacy/web-ui/src/components/review/FileTreePanel.tsx`

**Purpose:** Left sidebar showing changed files

**Props:**
- `files: ChangedFile[]` - list of changed files
- `selectedFile?: string` - currently selected file
- `onFileSelect: (file: string) => void` - selection callback

**Implementation:**
- Group files by directory (tree structure)
- Show change type icon (modified/added/deleted) using Hugeicons
- Display insertions/deletions count per file
- Highlight selected file with `bg-accent`
- Use Shadcn/UI ScrollArea for overflow
- 25% width, fixed position

#### 4.3 Create `file:legacy/web-ui/src/components/review/ReviewHeader.tsx`

**Purpose:** Top header with change summary and quality gates

**Props:**
- `stats: DiffStats` - change statistics
- `gateResults?: GateResultResponse` - from `file:legacy/web-ui/src/types/qualityGates.ts`
- `onRunGates: () => void` - trigger quality gates

**Implementation:**
- Display "X files changed, Y insertions, Z deletions" using Hugeicons stats icons
- Render quality gate badges using existing `GateStatusIndicator` from `file:legacy/web-ui/src/components/quality-gates/GateStatusIndicator.tsx`
- "Run Quality Gates" button (primary style)
- Use Shadcn/UI Card component for container

#### 4.4 Create `file:legacy/web-ui/src/components/review/CommitPanel.tsx`

**Purpose:** Bottom/right panel for commit and PR creation

**Props:**
- `onCommit: (message: string) => Promise<void>` - commit callback
- `onCreatePR: (title: string, body: string) => Promise<void>` - PR callback
- `isCommitting: boolean` - loading state
- `isCreatingPR: boolean` - loading state

**Implementation:**
- AI-generated commit message in Shadcn/UI Textarea (editable)
- "Generate Message" button with loading spinner
- "Commit Changes" button (primary, disabled when committing)
- Shadcn/UI Checkbox for "Create Pull Request"
- Conditional PR form (title, description) when checkbox enabled
- Use Shadcn/UI Form components with validation
- Collapsible panel (can minimize to save space)

#### 4.5 Create `file:legacy/web-ui/src/components/review/DiffNavigation.tsx`

**Purpose:** Previous/Next file navigation controls

**Props:**
- `currentFileIndex: number`
- `totalFiles: number`
- `onPrevious: () => void`
- `onNext: () => void`

**Implementation:**
- Simple button group with arrow icons from Hugeicons
- Display "File X of Y"
- Disable buttons at boundaries
- Keyboard shortcuts (optional): arrow keys for navigation

### 5. Modal Components

#### 5.1 Create `file:legacy/web-ui/src/components/review/ExportPatchModal.tsx`

**Purpose:** Display patch content with copy button

**Props:**
- `isOpen: boolean`
- `onClose: () => void`
- `patchContent: string`

**Implementation:**
- Shadcn/UI Dialog component
- Monospace textarea with patch content (read-only)
- "Copy to Clipboard" button using Clipboard API
- "Download .patch" button to trigger file download
- Success toast notification on copy

#### 5.2 Create `file:legacy/web-ui/src/components/review/PRCreatedModal.tsx`

**Purpose:** Success confirmation with PR URL

**Props:**
- `isOpen: boolean`
- `onClose: () => void`
- `prUrl: string`
- `prNumber: number`

**Implementation:**
- Shadcn/UI Dialog with success icon (CheckmarkCircle01Icon)
- Display PR number and clickable URL
- "View PR" button (opens in new tab)
- "Close" button to dismiss

### 6. Main Review Page

#### 6.1 Create `file:legacy/web-ui/src/app/review/page.tsx`

**Purpose:** Main Review & Commit View route

**State Management:**
- `diff: DiffResponse | null` - fetched on mount
- `selectedFile: string | null` - currently viewed file
- `gateResults: GateResultResponse | null` - quality gate status
- `commitMessage: string` - editable commit message
- `showPatchModal: boolean` - export patch modal state
- `showPRModal: boolean` - PR success modal state
- `prUrl: string` - created PR URL
- `createPR: boolean` - toggle for PR creation
- `prTitle: string` - PR title input
- `prBody: string` - PR description input

**Data Fetching:**
- Use SWR or `useEffect` to fetch diff on mount via `getReviewDiff()`
- Fetch quality gate results via existing `fetchQualityGateStatus()` from `file:legacy/web-ui/src/api/qualityGates.ts`
- Auto-generate commit message on mount via `generateCommitMessage()`

**Layout:**
```
<div className="flex h-screen">
  <FileTreePanel /> {/* 25% width */}
  <div className="flex-1 flex flex-col">
    <ReviewHeader />
    <div className="flex-1 overflow-auto">
      <DiffViewer />
      <DiffNavigation />
    </div>
  </div>
  <CommitPanel /> {/* right sidebar or bottom */}
</div>
```

**Event Handlers:**
- `handleRunGates()` - call `/api/v2/gates/run`, update state
- `handleCommit()` - call `/api/v2/git/commit`, show success toast
- `handleExportPatch()` - fetch patch, open modal
- `handleCreatePR()` - call `/api/v2/pr`, open success modal
- `handleFileSelect()` - update selected file, scroll diff viewer

**Error Handling:**
- Wrap in ErrorBoundary from `file:legacy/web-ui/src/components/ErrorBoundary.tsx`
- Display error states for failed API calls
- Use Shadcn/UI Alert component for inline errors

### 7. Navigation Integration

#### 7.1 Update Sidebar Navigation

Add "Review" link to main navigation sidebar (if exists):
- Icon: GitBranch02Icon from Hugeicons
- Route: `/review`
- Label: "Review & Commit"

### 8. Utilities and Helpers

#### 8.1 Create `file:legacy/web-ui/src/lib/diffParser.ts`

Export utility functions:
- `parseDiff(diffText: string)` - parse unified diff into structured data
- `extractFileChanges(diffText: string)` - extract file paths and stats
- `highlightDiffLine(line: string)` - apply syntax highlighting classes

#### 8.2 Create `file:legacy/web-ui/src/lib/commitMessageUtils.ts`

Export functions:
- `validateCommitMessage(message: string)` - check conventional commit format
- `formatCommitMessage(message: string)` - ensure proper formatting

### 9. Testing Considerations

While not explicitly required, consider:
- Unit tests for diff parser utilities
- Component tests for DiffViewer, FileTreePanel
- Integration tests for commit and PR creation flows
- Mock API responses in tests

### 10. Styling and Polish

- Use Tailwind CSS classes consistently with existing components
- Follow Shadcn/UI theming (use CSS variables for colors)
- Ensure responsive design (mobile: stack panels vertically)
- Add loading skeletons for async operations
- Use Hugeicons for all icons (GitCommitIcon, FileIcon, CheckmarkIcon, etc.)
- Implement smooth transitions for panel collapse/expand

## Component Hierarchy Diagram

```mermaid
graph TD
    A[ReviewCommitView /review/page.tsx] --> B[ReviewHeader]
    A --> C[FileTreePanel]
    A --> D[DiffViewer]
    A --> E[DiffNavigation]
    A --> F[CommitPanel]
    A --> G[ExportPatchModal]
    A --> H[PRCreatedModal]
    
    B --> B1[ChangeSummary]
    B --> B2[QualityGateResults]
    B2 --> B3[GateBadge - existing]
    
    C --> C1[FileTree]
    C1 --> C2[FileTreeItem]
    
    D --> D1[UnifiedDiff]
    D1 --> D2[DiffSection per file]
    
    F --> F1[CommitMessageSuggestion]
    F --> F2[CommitButton]
    F --> F3[PRCreationToggle]
    F3 --> F4[PRForm]
    
    style A fill:#e1f5ff
    style B fill:#fff4e1
    style C fill:#fff4e1
    style D fill:#fff4e1
    style F fill:#fff4e1
```

## API Flow Diagram

```mermaid
sequenceDiagram
    participant User
    participant ReviewPage
    participant API
    participant Backend
    
    User->>ReviewPage: Navigate to /review
    ReviewPage->>API: GET /api/v2/git/diff
    API->>Backend: get_diff(workspace)
    Backend-->>API: DiffResponse
    API-->>ReviewPage: diff data
    
    ReviewPage->>API: POST /api/v2/review/commit-message
    API->>Backend: AI generate message
    Backend-->>API: CommitMessageResponse
    API-->>ReviewPage: suggested message
    
    User->>ReviewPage: Click "Run Quality Gates"
    ReviewPage->>API: POST /api/v2/gates/run
    API->>Backend: gates.run(workspace)
    Backend-->>API: GateResultResponse
    API-->>ReviewPage: gate results
    
    User->>ReviewPage: Edit message & click "Commit"
    ReviewPage->>API: POST /api/v2/git/commit
    API->>Backend: git.create_commit()
    Backend-->>API: CommitResultResponse
    API-->>ReviewPage: success
    
    alt Create PR enabled
        ReviewPage->>API: POST /api/v2/pr
        API->>Backend: github_integration.create_pull_request()
        Backend-->>API: PRResponse
        API-->>ReviewPage: PR URL
        ReviewPage->>User: Show PRCreatedModal
    end
```

---

Execution Information

Branch: main
Commit: b252361

---

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

Warning

Something went wrong while processing your request.

Reference ID: bc422c2c-3c2e-4bce-ab37-669faa911010

Please try again or contact support if the issue persists, referencing this ID.

[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]
#211 - feat(dashboard): Add PhaseProgress component for phase visualization [merged]
#214 - feat(planning): Add TaskReview component for task approval workflow [merged]
#215 - feat(dashboard): Add phase-aware task view integration (#016-6) [merged]
#241 - feat(ui): add phase-awareness to AgentList, QualityGatesPanel, and CostDashboard [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!

[frankbria]

Revise the implementation plan to not use /legacy/web-ui. All files should be under the /web-ui directory.