Dashboard (/)
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard serves as the primary command center for the GeNCorE project. Its main purpose is to provide real-time visibility into the status of AI agents (Copilot, Claude, and Codex) and the current state of Pull Requests (PRs) within the configured GitHub repository. It acts as a central hub for monitoring agent availability and active development work.
The dashboard integrates live data from the GitHub REST API to display a list of open pull requests and maps these PRs to specific AI agents based on branch naming conventions and user logins. It features an auto-refresh mechanism to ensure that the information displayed—such as agent "busy" status—remains current without requiring manual user intervention.
Sources: app/page.tsx:1-5 , README.md:9-12
Architecture and Data Flow
The dashboard is built as a React functional component using Next.js "client-side" rendering ('use client'). It fetches data from a local API route, which in turn communicates with the GitHub API using a server-side GITHUB_TOKEN.
Component Hierarchy
- DashboardPage: The main container responsible for state management (PRs, loading, errors).
- Navbar: Provides navigation to other modules like Zlecenia (/task) and Review (/review).
- AgentCard: Displays individual agent status (Online/Busy) and their most recent PR.
- PRCard: Displays details for individual Pull Requests.
Sources: app/page.tsx:7-12, components/Navbar.tsx, components/AgentCard.tsx, components/PRCard.tsx
Data Fetching Flow
The following diagram illustrates how the dashboard retrieves and processes PR data to update agent statuses:
The dashboard performs an initial fetch on mount and sets up a silent background interval to refresh data every 60 seconds.
Sources: app/page.tsx:23-45, app/api/prs/route.ts:11-45
Agent Status Logic
The status of an agent is derived dynamically by filtering the list of active PRs. If a PR is found where the branch reference or the user login matches a specific agent's configuration, that agent is marked as busy. Otherwise, they are listed as online.
Agent Configuration Mapping
The dashboard maps specific visual styles and metadata to agents defined in the system.
| Agent | Brand Color | Emoji | Description |
|---|---|---|---|
| Copilot | purple-400 | 🟣 | AI pair programmer |
| Claude | orange-400 | 🟠 | Anthropic-based agent |
| Codex | blue-400 | 🔵 | Legacy/Engine-focused agent |
Sources: app/page.tsx:48-71, README.md:83-88, lib/agents.ts
Status Indicators
The AgentCard component utilizes a specific visual language to communicate agent availability.
Pull Request Monitoring
The "Aktywne PR-y" (Active PRs) section provides a filtered view of the repository's current workload.
Data Structures
The dashboard utilizes the PullRequest interface to handle GitHub data:
| Field | Type | Description |
|---|---|---|
number | number | The PR ID on GitHub |
title | string | The descriptive title of the PR |
state | string | Current state (e.g., 'open') |
draft | boolean | Whether the PR is in draft mode |
head.ref | string | The source branch name (used for agent detection) |
Sources: components/PRCard.tsx:3-16, app/page.tsx:53-55
PR State Visualization
The PRCard component applies conditional formatting based on the PR's state:
- Draft: Gray background (
bg-gray-600) - Open: Green background (
bg-green-700/60) - Merged: Purple background (
bg-purple-700/60) - Closed: Red background (
bg-red-700/60)
Sources: components/PRCard.tsx:36-42
Technical Implementation Details
Configuration and Environment
The dashboard relies on environment variables for repository targeting:
NEXT_PUBLIC_REPO_OWNER: Defaults tomarekdkropiewnicki-dotcom.NEXT_PUBLIC_REPO_NAME: Defaults toGentelmeN-CorE.
Sources: app/page.tsx:17-18, README.md:46-49
Refresh Mechanism
The manual refresh button triggers a loading state, while the interval refresh is "silent" (does not show a loading spinner) to prevent UI flickering.
// app/page.tsx:40-44
useEffect(() => {
fetchPRs()
// Refresh every 60 seconds (silently)
const interval = setInterval(() => fetchPRs(false), 60_000)
return () => clearInterval(interval)
}, [])
Sources: app/page.tsx:40-44
Summary
The Dashboard is the operational heart of the GeNCorE Command Center, providing a real-time, mobile-optimized view of AI agent activity and code integration progress. By combining automated GitHub API polling with agent-specific heuristic detection, it allows users to monitor the state of their automated development pipeline at a glance.