🤖 Copilot Coding Agent PR Dashboard

A modern, self-contained web application for analyzing and visualizing Pull Requests created by GitHub Copilot Coding Agent.

🚀 Live Demo

✨ Features

• 📊 Statistics Summary: Display counts of merged, closed, and open PRs
• 📈 Merge Success Rate: Visual progress bar showing merge success rate
• 📅 Daily Trend Chart: Interactive Chart.js visualization of daily PR activity
• 📋 PR List: Detailed list of all PRs with status badges
• 🌓 Dark Mode: Seamless light/dark theme switching with localStorage persistence
• 📱 Responsive Design: Fully responsive for mobile, tablet, and desktop
• ✨ Modern UI: Glassmorphism design with gradient backgrounds and smooth animations
• 💾 Smart Caching: 5-minute cache for API responses to reduce redundant requests
• 📊 Rate Limit Display: Real-time visualization of GitHub Search API rate limit status

🛠️ Technology Stack

Technology	Purpose	Version
Vite	Modern build tool and dev server	5.0.8
Tailwind CSS	Utility-first CSS framework (npm)	3.4.0
Chart.js	Data visualization library (npm)	4.4.1
JavaScript (ES6+)	GitHub API integration	-
GitHub Search API	PR data fetching with efficient filtering	v3
Playwright	E2E testing	1.40.0

🚀 Quick Start

Prerequisites

• Node.js 24+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/sikebe-demo/copilot-coding-agent-activity-dashboard.git
cd copilot-coding-agent-activity-dashboard

# Install dependencies
npm install

Development

# Start development server with hot reload
npm run dev

# Open http://localhost:8080

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

📖 Usage

Using the Hosted Version

Visit https://sikebe-demo.github.io/copilot-coding-agent-activity-dashboard/

Basic Usage

1. Enter repository information (e.g., microsoft/vscode)
2. Select analysis period (start date and end date)
3. Optional: Enter GitHub Personal Access Token (recommended to avoid rate limits)
4. Click "Start Analysis"

GitHub Personal Access Token (Recommended)

To avoid API rate limits and access private repositories:

1. Go to GitHub Settings > Developer settings > Personal access tokens
2. Click "Generate new token"
3. Select repo scope
4. Generate and copy the token
5. Paste it in the "GitHub Token" field

🔍 Copilot PR Detection

The dashboard identifies PRs created by Copilot Coding Agent by checking if the PR author (pr.user.login) matches copilot (case-insensitive).

This method is reliable because PRs created by Copilot Coding Agent are authored by the Copilot user account (canonical login: copilot, though GitHub may display it with different casing).

Note: Branch name prefix (copilot/) and assignee checks are not used for detection because:

• Any user can create branches with the copilot/ prefix
• Human-authored PRs can be assigned to Copilot for assistance

📁 Project Structure

.
├── index.html              # Main HTML file with modern UI
├── app.js                  # Application logic with Chart.js
├── style.css               # Tailwind CSS + custom styles
├── vite.config.js          # Vite configuration
├── tailwind.config.js      # Tailwind theme customization
├── postcss.config.js       # PostCSS with Tailwind
├── package.json            # npm dependencies
├── .gitignore             # Git ignore rules
├── tests/
│   └── dashboard.spec.js   # E2E tests (18 test cases)
└── README.md              # This file

🧪 Testing

Test Execution Results

✅ All tests passing!

$ npm test

> copilot-coding-agent-activity-dashboard@1.0.0 test
> playwright test

Running 16 tests using 1 worker
················
  16 passed (18.3s)

Test Coverage: 16 E2E tests covering:

• Form validation and user input
• GitHub API integration with mocked responses
• Data visualization and chart rendering
• Dark mode functionality
• Responsive design
• Error handling and edge cases
• Accessibility features

Running Tests Locally

# Install dependencies
npm install

# Install Playwright browser
npx playwright install chromium

# Run E2E tests
npm test

# Run tests in debug mode
npm run test:debug

# Run tests in UI mode
npm run test:ui

For detailed testing instructions, see TESTING.md.

🌐 Browser Support

Colors

• Primary: Indigo (600, 700)
• Success: Green (500, 600)
• Error: Red (500, 600)
• Info: Blue (500, 600)

Effects

• Glassmorphism cards with backdrop blur
• Gradient backgrounds (indigo → purple → pink)
• Smooth transitions and animations
• Hover scale effects
• Shimmer progress bar

📦 NPM Scripts

npm run dev          # Start Vite dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm test             # Run Playwright E2E tests
npm run test:debug   # Run tests in debug mode
npm run test:ui      # Run tests in UI mode

🚀 Deployment

GitHub Pages

This repository is configured for automatic deployment to GitHub Pages:

1. Go to repository Settings > Pages
2. Set Source to "GitHub Actions"
3. Push to main branch to trigger deployment
4. Site will be available at: https://<username>.github.io/copilot-coding-agent-activity-dashboard/

Manual Deployment

# Build the project
npm run build

# Deploy the dist/ folder to your hosting service

🌐 Browser Support

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🔒 Security

• ✅ CodeQL static analysis: No vulnerabilities
• ✅ GitHub Actions permissions: Minimal required permissions
• ✅ Token management: Password input field, not persisted
• ✅ API authentication: Bearer token authentication
• ✅ XSS prevention: HTML escaping for user content

🤝 Contributing

Pull requests are welcome! Bug reports and feature requests are accepted through Issues.

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

MIT License

👤 Author

Created with ❤️ by GitHub Copilot Coding Agent

---

Note: This is a client-side application that uses the GitHub Search API directly from the browser. No backend server is required. Includes smart caching (5-minute TTL) and rate limit monitoring for optimal performance.