[Phase 4B] Post-merge: Report Glitch action and REQ→PR back-link

[frankbria]

Goal

Add a "Report Glitch" action to each merged PR in the history view that pre-populates the Glitch Capture form with the PR's scope, closing the quality compounding loop.

Background

Follows the PR history view (#572) and depends on the Glitch Capture form (#568). When a deployed PR causes a production glitch, the user should be able to go straight from "that PR" to "capture obligation" without manually re-entering scope. Also adds a back-link from each captured REQ to the PR that introduced the code it guards.

Scope

"Report Glitch" action on each merged PR row in the history view:

• A [Report Glitch] button/link on each merged PR row
• Opens the Glitch Capture modal from [Phase 3.5C] Glitch Capture: entry point and capture form #568, pre-populated with:
  • Scope: files changed in the PR (from GitHub API diff)
  • Source: defaults to "Production"
  • A reference note: "Reported from PR #{number}: {title}"
• User fills in description and selects gates, then submits normally

Back-link on REQ detail:

• If a REQ was created via "Report Glitch" from a specific PR, show a "Source PR" link in the REQ detail header (from [Phase 3.5C] Glitch Capture: REQ detail view and sidebar entry point #569) pointing to the GitHub PR URL

Acceptance criteria

• [Report Glitch] button on each PR history row opens pre-populated capture form
• Scope field contains the PR's changed files
• REQ detail shows Source PR link when applicable
• npm test pass

[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

The codebase is a Next.js 19 + React 19 app using Radix UI dialogs, SWR for data fetching, Tailwind CSS, and axios for API calls. The backend is FastAPI (Python). The Requirement model already has a source_issue: Optional[str] field that flows through capture_requirement → ledger → proof_v2.py → frontend types. The PR history view from #572 does not yet exist in the current codebase (no /pr or /history page found). The Glitch Capture form from #568 also does not yet exist — both must be created as part of this ticket.

Approach

Build the PR history page with the "Report Glitch" button first, then the GlitchCaptureModal it opens (pre-populated), and finally the Source PR back-link in the REQ detail page. The existing source_issue field on Requirement is repurposed as the PR back-link carrier — no backend schema changes needed. A new get_pr_files method is added to GitHubIntegration to fetch changed files for a PR.

---

Implementation Steps

1. Add get_pr_files to GitHubIntegration

File: file:codeframe/git/github_integration.py

Add a new async method get_pr_files(pr_number: int) -> List[str] that calls GET /repos/{owner}/{repo}/pulls/{pr_number}/files and returns the list of filename strings from the response. This is the standard GitHub REST endpoint for PR file diffs.

---

2. Add a backend endpoint to expose PR changed files

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

Add a new route:

GET /api/v2/pr/{pr_number}/files

• Uses _get_github_client() (already defined in the file)
• Calls client.get_pr_files(pr_number)
• Returns a response model like PRFilesResponse with a files: list[str] field
• Follows the same error-handling pattern as the existing get_pull_request endpoint

---

3. Add prApi.getFiles to the frontend API client

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

Extend the existing prApi object with a getFiles(workspacePath, prNumber) method that calls GET /api/v2/pr/{prNumber}/files with workspace_path as a query param and returns string[].

Also add list(workspacePath, state) to prApi that calls GET /api/v2/pr?state=closed (to fetch merged PRs), returning PRListResponse (already typed in file:web-ui/src/types/index.ts).

---

4. Create the GlitchCaptureModal component

File: file:web-ui/src/components/proof/GlitchCaptureModal.tsx

Model this after the existing WaiveDialog (file:web-ui/src/components/proof/WaiveDialog.tsx) — use @radix-ui/react-dialog via the project's Dialog UI primitive.

Props interface:

{
  workspacePath: string;
  prNumber?: number;
  prTitle?: string;
  prUrl?: string;
  initialScope?: string;   // newline-joined list of changed files
  onClose: () => void;
  onSuccess: () => void;
}

Form fields (matching CaptureRequirementRequest in file:codeframe/ui/routers/proof_v2.py):

• Title — text input, pre-filled with "Reported from PR #${prNumber}: ${prTitle}" when coming from a PR
• Description — textarea
• Where (Scope) — textarea, pre-filled with initialScope (the changed files list)
• Severity — select: critical | high | medium | low
• Source — select defaulting to "production" when opened from a PR
• Hidden: source_issue — set to the GitHub PR URL (prUrl) when prNumber is provided

On submit, call proofApi.capture(workspacePath, body) — add this method to proofApi in file:web-ui/src/lib/api.ts (POST to /api/v2/proof/requirements). Show a loading state during submission, then call onSuccess().

Export from file:web-ui/src/components/proof/index.ts.

---

5. Add proofApi.capture to the API client

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

Add capture(workspacePath, body) to proofApi that POSTs to /api/v2/proof/requirements. The request body type should match CaptureRequirementRequest:

interface CaptureRequirementBody {
  title: string;
  description: string;
  where: string;
  severity: ProofSeverity;
  source: string;
  created_by?: string;
  source_issue?: string;
}

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

---

6. Create the PR History page

File: file:web-ui/src/app/pr/page.tsx

This is a new Next.js App Router page. Structure:

• Fetch merged PRs via prApi.list(workspacePath, 'closed') using SWR, filtering client-side for those with merged_at !== null
• Render a table with columns: PR #, Title, Merged, Branch, Action
• The Action column contains a [Report Glitch] button for each row
• Clicking [Report Glitch]:
  1. Calls prApi.getFiles(workspacePath, pr.number) to fetch changed files (show a loading spinner on the button while fetching)
  2. Opens GlitchCaptureModal with prNumber, prTitle, prUrl, and initialScope (files joined by newline) pre-populated
• After successful capture, show a success toast via sonner (already in the project) and close the modal

Follow the same page structure as file:web-ui/src/app/proof/page.tsx — workspace guard, SWR loading/error states, getSelectedWorkspacePath().

---

7. Add the PR History nav item to the sidebar

File: file:web-ui/src/components/layout/AppSidebar.tsx

Add a new entry to NAV_ITEMS:

{ href: '/pr', label: 'PR History', icon: GitBranchIcon, enabled: true }

GitBranchIcon is already imported in this file.

---

8. Add the Source PR back-link to the REQ detail page

File: file:web-ui/src/app/proof/[req_id]/page.tsx

In the header section (around line 219–223 where source_issue is already rendered as plain text):

{req.source_issue && <span>Source: {req.source_issue}</span>}

Change this to render a clickable link when source_issue looks like a GitHub PR URL (starts with https://github.com):

{req.source_issue && (
  <span>
    Source PR:{' '}
    <a href={req.source_issue} target="_blank" rel="noopener noreferrer"
       className="text-primary hover:underline">
      {req.source_issue}
    </a>
  </span>
)}

No backend changes needed — source_issue already stores and returns the value.

---

Data Flow Summary

sequenceDiagram
  participant User
  participant PRHistoryPage
  participant GitHubAPI
  participant GlitchCaptureModal
  participant BackendProof

  User->>PRHistoryPage: Opens /pr page
  PRHistoryPage->>GitHubAPI: GET /api/v2/pr?state=closed
  GitHubAPI-->>PRHistoryPage: List of merged PRs

  User->>PRHistoryPage: Clicks [Report Glitch] on a PR row
  PRHistoryPage->>GitHubAPI: GET /api/v2/pr/{number}/files
  GitHubAPI-->>PRHistoryPage: Changed file list
  PRHistoryPage->>GlitchCaptureModal: Open with pre-populated fields

  User->>GlitchCaptureModal: Fills description, selects gates, submits
  GlitchCaptureModal->>BackendProof: POST /api/v2/proof/requirements (source_issue = PR URL)
  BackendProof-->>GlitchCaptureModal: Created REQ with source_issue set

  User->>REQDetailPage: Opens /proof/{req_id}
  REQDetailPage-->>User: Shows "Source PR: <link to GitHub PR>"

Loading

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase is a Next.js 19 + React 19 app using Radix UI dialogs, SWR for data fetching, Tailwind CSS, and `axios` for API calls. The backend is FastAPI (Python). The `Requirement` model already has a `source_issue: Optional[str]` field that flows through `capture_requirement` → `ledger` → `proof_v2.py` → frontend types. The PR history view from #572 does **not yet exist** in the current codebase (no `/pr` or `/history` page found). The Glitch Capture form from #568 also does **not yet exist** — both must be created as part of this ticket.

## Approach

Build the PR history page with the "Report Glitch" button first, then the `GlitchCaptureModal` it opens (pre-populated), and finally the Source PR back-link in the REQ detail page. The existing `source_issue` field on `Requirement` is repurposed as the PR back-link carrier — no backend schema changes needed. A new `get_pr_files` method is added to `GitHubIntegration` to fetch changed files for a PR.

---

## Implementation Steps

### 1. Add `get_pr_files` to `GitHubIntegration`

**File:** `file:codeframe/git/github_integration.py`

Add a new async method `get_pr_files(pr_number: int) -> List[str]` that calls `GET /repos/{owner}/{repo}/pulls/{pr_number}/files` and returns the list of `filename` strings from the response. This is the standard GitHub REST endpoint for PR file diffs.

---

### 2. Add a backend endpoint to expose PR changed files

**File:** `file:codeframe/ui/routers/pr_v2.py`

Add a new route:

```
GET /api/v2/pr/{pr_number}/files
```

- Uses `_get_github_client()` (already defined in the file)
- Calls `client.get_pr_files(pr_number)`
- Returns a response model like `PRFilesResponse` with a `files: list[str]` field
- Follows the same error-handling pattern as the existing `get_pull_request` endpoint

---

### 3. Add `prApi.getFiles` to the frontend API client

**File:** `file:web-ui/src/lib/api.ts`

Extend the existing `prApi` object with a `getFiles(workspacePath, prNumber)` method that calls `GET /api/v2/pr/{prNumber}/files` with `workspace_path` as a query param and returns `string[]`.

Also add `list(workspacePath, state)` to `prApi` that calls `GET /api/v2/pr?state=closed` (to fetch merged PRs), returning `PRListResponse` (already typed in `file:web-ui/src/types/index.ts`).

---

### 4. Create the `GlitchCaptureModal` component

**File:** `file:web-ui/src/components/proof/GlitchCaptureModal.tsx`

Model this after the existing `WaiveDialog` (`file:web-ui/src/components/proof/WaiveDialog.tsx`) — use `@radix-ui/react-dialog` via the project's `Dialog` UI primitive.

Props interface:
```
{
  workspacePath: string;
  prNumber?: number;
  prTitle?: string;
  prUrl?: string;
  initialScope?: string;   // newline-joined list of changed files
  onClose: () => void;
  onSuccess: () => void;
}
```

Form fields (matching `CaptureRequirementRequest` in `file:codeframe/ui/routers/proof_v2.py`):
- **Title** — text input, pre-filled with `"Reported from PR #${prNumber}: ${prTitle}"` when coming from a PR
- **Description** — textarea
- **Where (Scope)** — textarea, pre-filled with `initialScope` (the changed files list)
- **Severity** — select: `critical | high | medium | low`
- **Source** — select defaulting to `"production"` when opened from a PR
- Hidden: `source_issue` — set to the GitHub PR URL (`prUrl`) when `prNumber` is provided

On submit, call `proofApi.capture(workspacePath, body)` — add this method to `proofApi` in `file:web-ui/src/lib/api.ts` (POST to `/api/v2/proof/requirements`). Show a loading state during submission, then call `onSuccess()`.

Export from `file:web-ui/src/components/proof/index.ts`.

---

### 5. Add `proofApi.capture` to the API client

**File:** `file:web-ui/src/lib/api.ts`

Add `capture(workspacePath, body)` to `proofApi` that POSTs to `/api/v2/proof/requirements`. The request body type should match `CaptureRequirementRequest`:

```ts
interface CaptureRequirementBody {
  title: string;
  description: string;
  where: string;
  severity: ProofSeverity;
  source: string;
  created_by?: string;
  source_issue?: string;
}
```

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

---

### 6. Create the PR History page

**File:** `file:web-ui/src/app/pr/page.tsx`

This is a new Next.js App Router page. Structure:

- Fetch merged PRs via `prApi.list(workspacePath, 'closed')` using SWR, filtering client-side for those with `merged_at !== null`
- Render a table with columns: **PR #**, **Title**, **Merged**, **Branch**, **Action**
- The **Action** column contains a **[Report Glitch]** button for each row
- Clicking **[Report Glitch]**:
  1. Calls `prApi.getFiles(workspacePath, pr.number)` to fetch changed files (show a loading spinner on the button while fetching)
  2. Opens `GlitchCaptureModal` with `prNumber`, `prTitle`, `prUrl`, and `initialScope` (files joined by newline) pre-populated
- After successful capture, show a success toast via `sonner` (already in the project) and close the modal

Follow the same page structure as `file:web-ui/src/app/proof/page.tsx` — workspace guard, SWR loading/error states, `getSelectedWorkspacePath()`.

---

### 7. Add the PR History nav item to the sidebar

**File:** `file:web-ui/src/components/layout/AppSidebar.tsx`

Add a new entry to `NAV_ITEMS`:
```ts
{ href: '/pr', label: 'PR History', icon: GitBranchIcon, enabled: true }
```

`GitBranchIcon` is already imported in this file.

---

### 8. Add the Source PR back-link to the REQ detail page

**File:** `file:web-ui/src/app/proof/[req_id]/page.tsx`

In the header section (around line 219–223 where `source_issue` is already rendered as plain text):

```tsx
{req.source_issue && <span>Source: {req.source_issue}</span>}
```

Change this to render a clickable link when `source_issue` looks like a GitHub PR URL (starts with `https://github.com`):

```tsx
{req.source_issue && (
  <span>
    Source PR:{' '}
    <a href={req.source_issue} target="_blank" rel="noopener noreferrer"
       className="text-primary hover:underline">
      {req.source_issue}
    </a>
  </span>
)}
```

No backend changes needed — `source_issue` already stores and returns the value.

---

## Data Flow Summary

```mermaid
sequenceDiagram
  participant User
  participant PRHistoryPage
  participant GitHubAPI
  participant GlitchCaptureModal
  participant BackendProof

  User->>PRHistoryPage: Opens /pr page
  PRHistoryPage->>GitHubAPI: GET /api/v2/pr?state=closed
  GitHubAPI-->>PRHistoryPage: List of merged PRs

  User->>PRHistoryPage: Clicks [Report Glitch] on a PR row
  PRHistoryPage->>GitHubAPI: GET /api/v2/pr/{number}/files
  GitHubAPI-->>PRHistoryPage: Changed file list
  PRHistoryPage->>GlitchCaptureModal: Open with pre-populated fields

  User->>GlitchCaptureModal: Fills description, selects gates, submits
  GlitchCaptureModal->>BackendProof: POST /api/v2/proof/requirements (source_issue = PR URL)
  BackendProof-->>GlitchCaptureModal: Created REQ with source_issue set

  User->>REQDetailPage: Opens /proof/{req_id}
  REQDetailPage-->>User: Shows "Source PR: <link to GitHub PR>"
```

---

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.

[coderabbitai]

🔗 Related PRs

#196 - fix(discovery): Synchronize PRD buttons and fix state persistence on tab revisit [merged]
#493 - feat(web-ui): context-aware Quick Actions based on workspace state (#471) [merged]
#496 - feat(web-ui): link failed tasks to PROOF9 gate failure for root cause (#474) [merged]
#523 - feat(web-ui): task generation confirmation toast with count and link [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!