AgentCard Component

Relevant source files

The following files were used as context for generating this wiki page:

• components/AgentCard.tsx
• lib/agents.ts
• app/page.tsx
• components/PRCard.tsx
• app/task/page.tsx

The AgentCard component is a specialized UI element within the GeNCorE Command Center designed to represent the real-time status and activity of specific AI agents (GitHub Copilot, Claude, and Codex). It serves as a visual indicator of whether an agent is currently available or occupied with a pull request, providing a high-level overview of agent health and workload directly on the Dashboard.

This component is part of a larger ecosystem that integrates GitHub activity with AI agent management. It utilizes a central configuration to apply consistent branding, such as unique colors and emojis, for each agent type, ensuring that users can quickly distinguish between different AI contributors.

Sources: components/AgentCard.tsx, app/page.tsx:55-75, lib/agents.ts:24-65

Component Architecture and Data Model

The AgentCard is a functional React component that consumes data structured by the AgentInfo interface. It primarily renders three pieces of information: the agent's identity, their current connection status, and details regarding their most recent activity.

Data Structures

The component relies on the following TypeScript interfaces and mappings:

Property	Type	Description
name	string	The display name of the agent (e.g., "GitHub Copilot").
emoji	string	A visual icon representing the agent.
color	string	Tailwind CSS class for text coloring.
borderColor	string	Tailwind CSS class for card border styling.
badgeColor	string	Tailwind CSS class for the status badge background.
status	'online' | 'busy' | 'offline'	The current operational state of the agent.
lastPR	object (Optional)	Contains title, url, and state of the latest Pull Request.

Sources: components/AgentCard.tsx:1-12

Visual Status Indicators

The component maps internal status states to user-friendly labels and visual dots. When an agent is online, the indicator includes an animation to signify activity.

mermaid
flowchart TD
A[Start Detection] --> B{Branch or Author contains...}
B -- "copilot" --> C[Return Copilot Config]
B -- "claude" / "anthropic" --> D[Return Claude Config]
B -- "codex" / "openai" --> E[Return Codex Config]
B -- No Match --> F[Return null]

Sources: [lib/agents.ts:85-116](https://github.com/marekdkropiewnicki-dotcom/claude-remote-control/blob/5eecfd4cafe3e8ad46a71ad9fdb3ec04e9974d8b/lib/agents.ts#L85-L116)

### Transformation Pipeline

On the dashboard, the list of all PRs is filtered for each agent defined in the central configuration. If an agent has one or more active PRs, their status is set to `busy`, and the details of the latest PR are passed to the `AgentCard`.

Implementation Details

Conditional Rendering

The component handles cases where an agent may not have active history. If agent.lastPR is present, it renders a linked title and a status badge. If absent, it displays a "Brak aktywnych PR-ów" (No active PRs) placeholder.

{/* components/AgentCard.tsx:58-73 */}
{agent.lastPR ? (
  <div className="bg-gray-700/50 rounded-xl p-3">
    <p className="text-xs text-gray-400 mb-1">Ostatni PR</p>
    <a href={agent.lastPR.url} target="_blank" className="...">
      {agent.lastPR.title}
    </a>
    <span className={`... ${agent.badgeColor}`}>
      {agent.lastPR.state}
    </span>
  </div>
) : (
  <div className="bg-gray-700/30 rounded-xl p-3">
    <p className="text-xs text-gray-500">Brak aktywnych PR-ów</p>
  </div>
)}

Sources: components/AgentCard.tsx:58-73

Styling and Themes

The component uses a dark-mode first approach, utilizing bg-gray-800 for the card body and bg-gray-700 for inner sections. Border and text colors are dynamic based on the AgentConfig provided to the component.

Agent	Brand Color	Border Styling
Copilot	text-purple-400	border-purple-700/50
Claude	text-orange-400	border-orange-700/50
Codex	text-blue-400	border-blue-700/50

Sources: lib/agents.ts:31-65, components/AgentCard.tsx:35-40

Summary

The AgentCard component provides a critical interface for monitoring AI agents within the GeNCorE platform. By combining real-time GitHub Pull Request data with a centralized agent configuration, it offers a reactive and visually distinct representation of the system's automated workforce. Its integration with the dashboard ensures that users can immediately identify which agents are active, what they are working on, and their current operational status.

Sources: app/page.tsx:90-100, components/AgentCard.tsx:35-77