[Phase 4A] PR Status: live CI checks, review status, and merge state

[frankbria]

Goal

Add a PR Status panel to the Review page that polls GitHub for live CI check status, review status, and merge state after a PR is created.

Background

The Review page currently creates a PR via POST /api/v2/pr/create and then shows the PR URL. After that, the user must go to GitHub to track CI and reviews. The SHIP phase ends at PR creation — this extends it to PR merge.

Scope

PR Status panel (shown on the Review page when prUrl state is set):

• Appears below the existing PR creation success state
• Polls GET /api/v2/pr/status?workspace=... every 30 seconds while the Review page is active
• Backend: add GET /api/v2/pr/status endpoint that calls the GitHub API (using stored GitHub token) for the most recently created PR in the workspace — returns { ci_checks: [...], review_status, merge_state, pr_url, pr_number }
• CI checks section: list each check with name + status badge (pending / running / passed / failed)
• Review status: single badge — Approved / Changes Requested / Pending Review
• Merge state: Open / Merged / Closed badge
• Stop polling when merge_state is Merged or Closed

Acceptance criteria

• PR Status panel appears after PR creation
• CI checks list renders with correct statuses
• Review and merge state badges render
• Polling stops after PR is merged/closed
• npm test and uv run pytest pass for the new backend endpoint

[coderabbitai]

🔗 Related PRs

#51 - feat: Add TaskStats component to Dashboard Overview tab [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]
#234 - fix(ui): make TaskStats phase-aware to fix late-joining user bug [merged]
#488 - feat(web-ui): pipeline progress indicator (Think→Build→Prove→Ship) [merged]
#525 - feat(web-ui): PRD version history panel with diff and restore [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 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!

[traycerai]

Warning

Ticket Assist will be discontinued on May 1, 2026. After that date, the feature will no longer be available. We suggest installing the Traycer IDE Extension for continued AI-powered, spec-driven development. Thank you for choosing Traycer!

Plan

Observations

• GitHubIntegration in file:codeframe/git/github_integration.py already handles authenticated GitHub API calls via _make_request. It needs two new methods: one for CI check runs and one for review status.
• file:codeframe/ui/routers/pr_v2.py follows a clean pattern: Pydantic response models → _get_github_client() → endpoint handler. The new GET /api/v2/pr/status endpoint fits naturally here.
• The frontend uses swr for data fetching, axios via file:web-ui/src/lib/api.ts, and the existing Badge component (file:web-ui/src/components/ui/badge.tsx) already has done, failed, in-progress, merged, blocked variants — directly usable for CI/review/merge state badges.
• PRCreatedModal (file:web-ui/src/components/review/PRCreatedModal.tsx) is a modal that closes after PR creation. The status panel should live below the modal (inline on the Review page) and be driven by prNumber state already stored in page.tsx.

Approach

Add the GET /api/v2/pr/status endpoint to the existing pr_v2 router by extending GitHubIntegration with two new async methods (CI checks via /repos/{owner}/{repo}/commits/{sha}/check-runs and reviews via /repos/{owner}/{repo}/pulls/{number}/reviews). On the frontend, add a PRStatusPanel component that uses swr with a 30-second refresh interval, renders inside page.tsx when prNumber > 0, and stops polling when merge_state is merged or closed.

---

Implementation Steps

1. Extend GitHubIntegration with CI and review methods

In file:codeframe/git/github_integration.py:

• Add a CICheck dataclass with fields: name: str, status: str (pending / in_progress / success / failure), conclusion: Optional[str].
• Add async def get_pr_ci_checks(self, pr_number: int) -> List[CICheck]:
  • First call GET /repos/{owner}/{repo}/pulls/{pr_number} to get the head SHA.
  • Then call GET /repos/{owner}/{repo}/commits/{sha}/check-runs and map each item's name, status, and conclusion into CICheck.
• Add async def get_pr_review_status(self, pr_number: int) -> str:
  • Call GET /repos/{owner}/{repo}/pulls/{pr_number}/reviews.
  • Return "approved" if any review has state APPROVED, "changes_requested" if any has CHANGES_REQUESTED, otherwise "pending".
• Add async def get_pr_state(self, pr_number: int) -> str:
  • Call GET /repos/{owner}/{repo}/pulls/{pr_number}.
  • Return "merged" if merged_at is set, else the raw state field (open / closed).

---

2. Add PRStatusResponse model and GET /api/v2/pr/status endpoint

In file:codeframe/ui/routers/pr_v2.py:

• Add a CICheckResponse Pydantic model: name: str, status: str, conclusion: Optional[str].
• Add a PRStatusResponse Pydantic model:

  ci_checks: list[CICheckResponse]
  review_status: str          # "approved" | "changes_requested" | "pending"
  merge_state: str            # "open" | "merged" | "closed"
  pr_url: str
  pr_number: int
  

• Add the endpoint:

  GET /api/v2/pr/status?workspace=...&pr_number=...
  

  • Accept pr_number: int as a required query parameter.
  • Call _get_github_client(), then call the three new GitHubIntegration methods in parallel using asyncio.gather.
  • Return a PRStatusResponse.
  • Handle GitHubAPIError the same way as existing endpoints.

---

3. Add PRStatusResponse TypeScript type

In file:web-ui/src/types/index.ts, add:

CICheck { name, status, conclusion }
PRStatusResponse { ci_checks, review_status, merge_state, pr_url, pr_number }

---

4. Add prApi.getStatus to the API client

In file:web-ui/src/lib/api.ts, extend the prApi object with:

getStatus: async (workspacePath, prNumber) => PRStatusResponse
  → GET /api/v2/pr/status?workspace_path=...&pr_number=...

---

5. Create PRStatusPanel component

Create file:web-ui/src/components/review/PRStatusPanel.tsx:

• Props: prNumber: number, workspacePath: string.
• Use useSWR with key /api/v2/pr/status?workspace_path=...&pr_number=..., fetcher calls prApi.getStatus(...), and refreshInterval: 30_000.
• Stop polling by setting refreshInterval to 0 when data?.merge_state === 'merged' || data?.merge_state === 'closed' — pass this as a function to refreshInterval or derive it via useMemo.
• CI checks section: map ci_checks to a list of rows showing name + a Badge whose variant maps:
  • success → done
  • failure → failed
  • in_progress → in-progress
  • pending → backlog
• Review status badge: map review_status:
  • approved → done variant, label "Approved"
  • changes_requested → failed variant, label "Changes Requested"
  • pending → backlog variant, label "Pending Review"
• Merge state badge: map merge_state:
  • merged → merged variant, label "Merged"
  • closed → blocked variant, label "Closed"
  • open → in-progress variant, label "Open"
• Show a loading skeleton while !data && !error.
• Wrap the whole panel in a Card consistent with CommitPanel.

---

6. Wire PRStatusPanel into the Review page

In file:web-ui/src/app/review/page.tsx:

• Import PRStatusPanel.
• After the <CommitPanel> in the right sidebar, conditionally render <PRStatusPanel prNumber={prNumber} workspacePath={workspacePath} /> when prNumber > 0.
• The prNumber state is already set by handleCreatePR when a PR is created.

---

Data flow diagram

sequenceDiagram
    participant UI as Review Page
    participant SWR as useSWR (30s poll)
    participant API as GET /api/v2/pr/status
    participant GH as GitHub API

    UI->>UI: PR created → prNumber set
    UI->>SWR: mount PRStatusPanel
    loop every 30s (while open)
        SWR->>API: GET /api/v2/pr/status?pr_number=N
        API->>GH: GET pulls/{N} (head SHA + state)
        API->>GH: GET commits/{sha}/check-runs
        API->>GH: GET pulls/{N}/reviews
        GH-->>API: responses
        API-->>SWR: PRStatusResponse
        SWR-->>UI: render CI checks + badges
        alt merge_state == merged or closed
            SWR->>SWR: refreshInterval = 0 (stop)
        end
    end

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

- `GitHubIntegration` in `file:codeframe/git/github_integration.py` already handles authenticated GitHub API calls via `_make_request`. It needs two new methods: one for CI check runs and one for review status.
- `file:codeframe/ui/routers/pr_v2.py` follows a clean pattern: Pydantic response models → `_get_github_client()` → endpoint handler. The new `GET /api/v2/pr/status` endpoint fits naturally here.
- The frontend uses `swr` for data fetching, `axios` via `file:web-ui/src/lib/api.ts`, and the existing `Badge` component (`file:web-ui/src/components/ui/badge.tsx`) already has `done`, `failed`, `in-progress`, `merged`, `blocked` variants — directly usable for CI/review/merge state badges.
- `PRCreatedModal` (`file:web-ui/src/components/review/PRCreatedModal.tsx`) is a modal that closes after PR creation. The status panel should live **below** the modal (inline on the Review page) and be driven by `prNumber` state already stored in `page.tsx`.

## Approach

Add the `GET /api/v2/pr/status` endpoint to the existing `pr_v2` router by extending `GitHubIntegration` with two new async methods (CI checks via `/repos/{owner}/{repo}/commits/{sha}/check-runs` and reviews via `/repos/{owner}/{repo}/pulls/{number}/reviews`). On the frontend, add a `PRStatusPanel` component that uses `swr` with a 30-second refresh interval, renders inside `page.tsx` when `prNumber > 0`, and stops polling when `merge_state` is `merged` or `closed`.

---

## Implementation Steps

### 1. Extend `GitHubIntegration` with CI and review methods

In `file:codeframe/git/github_integration.py`:

- Add a `CICheck` dataclass with fields: `name: str`, `status: str` (pending / in_progress / success / failure), `conclusion: Optional[str]`.
- Add `async def get_pr_ci_checks(self, pr_number: int) -> List[CICheck]`:
  - First call `GET /repos/{owner}/{repo}/pulls/{pr_number}` to get the head SHA.
  - Then call `GET /repos/{owner}/{repo}/commits/{sha}/check-runs` and map each item's `name`, `status`, and `conclusion` into `CICheck`.
- Add `async def get_pr_review_status(self, pr_number: int) -> str`:
  - Call `GET /repos/{owner}/{repo}/pulls/{pr_number}/reviews`.
  - Return `"approved"` if any review has state `APPROVED`, `"changes_requested"` if any has `CHANGES_REQUESTED`, otherwise `"pending"`.
- Add `async def get_pr_state(self, pr_number: int) -> str`:
  - Call `GET /repos/{owner}/{repo}/pulls/{pr_number}`.
  - Return `"merged"` if `merged_at` is set, else the raw `state` field (`open` / `closed`).

---

### 2. Add `PRStatusResponse` model and `GET /api/v2/pr/status` endpoint

In `file:codeframe/ui/routers/pr_v2.py`:

- Add a `CICheckResponse` Pydantic model: `name: str`, `status: str`, `conclusion: Optional[str]`.
- Add a `PRStatusResponse` Pydantic model:
  ```
  ci_checks: list[CICheckResponse]
  review_status: str          # "approved" | "changes_requested" | "pending"
  merge_state: str            # "open" | "merged" | "closed"
  pr_url: str
  pr_number: int
  ```
- Add the endpoint:
  ```
  GET /api/v2/pr/status?workspace=...&pr_number=...
  ```
  - Accept `pr_number: int` as a required query parameter.
  - Call `_get_github_client()`, then call the three new `GitHubIntegration` methods in parallel using `asyncio.gather`.
  - Return a `PRStatusResponse`.
  - Handle `GitHubAPIError` the same way as existing endpoints.

---

### 3. Add `PRStatusResponse` TypeScript type

In `file:web-ui/src/types/index.ts`, add:

```
CICheck { name, status, conclusion }
PRStatusResponse { ci_checks, review_status, merge_state, pr_url, pr_number }
```

---

### 4. Add `prApi.getStatus` to the API client

In `file:web-ui/src/lib/api.ts`, extend the `prApi` object with:

```
getStatus: async (workspacePath, prNumber) => PRStatusResponse
  → GET /api/v2/pr/status?workspace_path=...&pr_number=...
```

---

### 5. Create `PRStatusPanel` component

Create `file:web-ui/src/components/review/PRStatusPanel.tsx`:

- Props: `prNumber: number`, `workspacePath: string`.
- Use `useSWR` with key `/api/v2/pr/status?workspace_path=...&pr_number=...`, fetcher calls `prApi.getStatus(...)`, and `refreshInterval: 30_000`.
- Stop polling by setting `refreshInterval` to `0` when `data?.merge_state === 'merged' || data?.merge_state === 'closed'` — pass this as a function to `refreshInterval` or derive it via `useMemo`.
- **CI checks section**: map `ci_checks` to a list of rows showing `name` + a `Badge` whose variant maps:
  - `success` → `done`
  - `failure` → `failed`
  - `in_progress` → `in-progress`
  - `pending` → `backlog`
- **Review status badge**: map `review_status`:
  - `approved` → `done` variant, label "Approved"
  - `changes_requested` → `failed` variant, label "Changes Requested"
  - `pending` → `backlog` variant, label "Pending Review"
- **Merge state badge**: map `merge_state`:
  - `merged` → `merged` variant, label "Merged"
  - `closed` → `blocked` variant, label "Closed"
  - `open` → `in-progress` variant, label "Open"
- Show a loading skeleton while `!data && !error`.
- Wrap the whole panel in a `Card` consistent with `CommitPanel`.

---

### 6. Wire `PRStatusPanel` into the Review page

In `file:web-ui/src/app/review/page.tsx`:

- Import `PRStatusPanel`.
- After the `<CommitPanel>` in the right sidebar, conditionally render `<PRStatusPanel prNumber={prNumber} workspacePath={workspacePath} />` when `prNumber > 0`.
- The `prNumber` state is already set by `handleCreatePR` when a PR is created.

---

### Data flow diagram

```mermaid
sequenceDiagram
    participant UI as Review Page
    participant SWR as useSWR (30s poll)
    participant API as GET /api/v2/pr/status
    participant GH as GitHub API

    UI->>UI: PR created → prNumber set
    UI->>SWR: mount PRStatusPanel
    loop every 30s (while open)
        SWR->>API: GET /api/v2/pr/status?pr_number=N
        API->>GH: GET pulls/{N} (head SHA + state)
        API->>GH: GET commits/{sha}/check-runs
        API->>GH: GET pulls/{N}/reviews
        GH-->>API: responses
        API-->>SWR: PRStatusResponse
        SWR-->>UI: render CI checks + badges
        alt merge_state == merged or closed
            SWR->>SWR: refreshInterval = 0 (stop)
        end
    end
```

---

Execution Information

Branch: main
Commit: ea0de0a

---

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