PRCard Component

The PRCard component is a fundamental UI element within the GeNCorE Command Center, designed to represent and manage individual GitHub Pull Requests (PRs). Its primary purpose is to provide a concise overview of a PR's status, associated AI agent, and branch information, while optionally exposing administrative actions like approving, requesting changes, or merging.

This component is utilized across different views, including the main Dashboard for status monitoring and the dedicated Review Page for active PR management. It acts as the primary interface for human interaction with PRs generated by AI agents like Claude, Copilot, and Codex.

Sources: components/PRCard.tsx, app/page.tsx:128, app/review/page.tsx:187

Data Structure and Properties

The component relies on the PullRequest interface, which maps directly to specific fields from the GitHub REST API v3 response.

PullRequest Interface

Sources: components/PRCard.tsx:3-17, app/api/prs/route.ts:18-35

Component Props

The PRCardProps interface defines the interaction surface for the component. It accepts optional callback functions which, when provided, enable action buttons within the card UI.

interface PRCardProps {
  pr: PullRequest
  onApprove?: (prNumber: number) => void
  onRequestChanges?: (prNumber: number) => void
  onMerge?: (prNumber: number) => void
  loading?: boolean
}

Sources: components/PRCard.tsx:19-25

Visual Representation and State

The component dynamically adjusts its styling based on the PR's state and the identity of the AI agent detected from the branch reference.

Agent Detection

The component utilizes detectAgentFromPR to identify which AI agent (Claude, Copilot, or Codex) is responsible for the PR. This dictates the label and color scheme applied to the card's metadata section.

Sources: components/PRCard.tsx:34-36, lib/agents.ts

Status Styling

State styles are determined by the PR's lifecycle stage:

Sources: components/PRCard.tsx:38-51

User Actions and Interaction Flow

When utilized in a management context (such as the /review page), PRCard enables direct interaction with GitHub via the project's internal API routes.

Action Logic Flow

The action buttons are only rendered if the PR is Open and Not a Draft, and if the corresponding handler props are passed to the component.

The following diagram illustrates the interaction between PRCard and the backend services when a user performs a review action.

Review Integration

In app/review/page.tsx, the PRCard is wrapped in a container that includes a supplemental "Diff Preview" button. This button opens the specific GitHub "Files changed" view for the PR in a new browser tab.

Action Handlers Implementation

• Merge: Triggers handleMerge, which uses window.confirm for safety before calling /api/merge with the squash method.
• Approve: Triggers handleApprove, sending an APPROVE event to /api/review.
• Request Changes: Triggers handleRequestChanges, prompting the user for a mandatory comment via window.prompt before sending a REQUEST_CHANGES event.

Sources: app/review/page.tsx:48-73, app/review/page.tsx:112-145, app/review/page.tsx:198-201

Dashboard Logic

On the main dashboard (app/page.tsx), the PRCard is used in a "read-only" capacity. Handler props are omitted, resulting in a simplified UI that focuses on displaying active PRs and their association with AI agents.

Summary

The PRCard component serves as the interactive bridge between the GeNCorE Command Center and GitHub's Pull Request system. By encapsulating state logic, agent detection, and optional action handlers, it provides a consistent and responsive interface for developers to monitor and manage AI-driven code contributions. Its integration with server-side API routes ensures that sensitive operations like merging and approving are handled securely via the GITHUB_TOKEN.