Skip to content

Commit c1757e7

Browse files
rajbosrajbos
authored
Merge pull request #100 from rajbos/main
Add GitHub Copilot custom instructions for the Copilot Premium Reques…
2 parents e9e5561 + 43c7b52 commit c1757e7

1 file changed

Lines changed: 172 additions & 0 deletions

File tree

‎.github/copilot-instructions.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# GitHub Copilot Custom Instructions
2+
3+
## Project Overview
4+
This is a **GitHub Copilot Premium Requests Usage Analyzer** - a React-based single-page application that visualizes GitHub Copilot premium request usage data from CSV exports. The primary goal is to help teams understand their Copilot usage patterns, model distribution, and quota status.
5+
6+
## Architecture & Technology Stack
7+
8+
### Core Technologies
9+
- **Frontend**: React 19+ with TypeScript
10+
- **Build Tool**: Vite 7+ with SWC for fast compilation
11+
- **Styling**: Tailwind CSS 4+ with custom design tokens
12+
- **UI Components**: shadcn/ui with Radix UI primitives
13+
- **Charts**: Recharts 3+ for data visualization
14+
- **State Management**: React hooks and local state (no external state management)
15+
- **Testing**: Vitest with React Testing Library
16+
17+
### Key Dependencies
18+
- `@github/spark` - GitHub Spark integration
19+
- `lucide-react` - Icon library
20+
- `date-fns` - Date manipulation
21+
- `clsx` + `tailwind-merge` - Conditional styling
22+
- `sonner` - Toast notifications
23+
- `zod` - Runtime type validation
24+
25+
## Project Structure
26+
27+
```
28+
src/
29+
├── components/ # Reusable UI components
30+
├── hooks/ # Custom React hooks
31+
├── lib/ # Utilities and data processing
32+
│ └── utils.ts # Core CSV parsing and data aggregation
33+
├── styles/ # Global styles and themes
34+
├── test/ # Test utilities and setup
35+
├── App.tsx # Main application component
36+
├── main.tsx # Application entry point
37+
└── prd.md # Product Requirements Document
38+
```
39+
40+
## Data Model & CSV Processing
41+
42+
### Expected CSV Format
43+
```csv
44+
"Timestamp","User","Model","Requests Used","Exceeds Monthly Quota","Total Monthly Quota"
45+
"2025-06-11T05:13:27.8766440Z","UserName","gpt-4.1-2025-04-14","1","False","Unlimited"
46+
```
47+
48+
### Core Data Interfaces
49+
```typescript
50+
interface CopilotUsageData {
51+
timestamp: Date;
52+
user: string;
53+
model: string;
54+
requestsUsed: number;
55+
exceedsQuota: boolean;
56+
totalMonthlyQuota: string;
57+
}
58+
59+
interface AggregatedData {
60+
date: string;
61+
compliantRequests: number;
62+
exceedingRequests: number;
63+
totalRequests: number;
64+
}
65+
```
66+
67+
### Data Processing Patterns
68+
- **CSV Parsing**: Robust parsing with validation in `lib/utils.ts`
69+
- **Data Aggregation**: Group by day, model, and quota status
70+
- **Decimal Handling**: Support for fractional request values
71+
- **Error Handling**: Graceful handling of malformed CSV data
72+
73+
## UI Patterns & Components
74+
75+
### Design System
76+
- **Color Scheme**: Professional GitHub-inspired palette
77+
- **Typography**: Clean, technical aesthetic
78+
- **Spacing**: Consistent Tailwind spacing scale
79+
- **Components**: Card-based layout with subtle shadows
80+
81+
### Key UI Patterns
82+
1. **File Upload**: Drag-and-drop with visual feedback
83+
2. **Data Tables**: Clean tabular display of usage statistics
84+
3. **Charts**: Line graphs and bar charts for usage visualization
85+
4. **Error States**: Clear validation messaging and error feedback
86+
5. **Loading States**: Appropriate loading indicators
87+
6. **Number Formatting**: Always display thousand separators in all places where numbers are shown to improve readability
88+
89+
### Component Conventions
90+
- Use `cn()` utility for conditional class names
91+
- Prefer composition over inheritance
92+
- Use React.forwardRef for components that need refs
93+
- Follow shadcn/ui component patterns
94+
95+
## Business Logic
96+
97+
### Core Features
98+
1. **CSV Upload & Validation**: Parse and validate GitHub Copilot usage exports
99+
2. **Usage Visualization**: Daily usage trends with compliant vs exceeding requests
100+
3. **Model Analysis**: Breakdown by AI model with usage statistics
101+
4. **Quota Monitoring**: Track quota status and excess costs
102+
103+
### Model Categories
104+
- **Default Models**: Free tier models (grouped as "Default")
105+
- **Premium Models**: Models with usage multipliers and costs
106+
- **Model Multipliers**: Different cost factors for different AI models
107+
108+
## Deployment & Build
109+
110+
### Build Configurations
111+
- **Development**: Standard Vite dev server on port 5000
112+
- **Production**: Optimized build with tree-shaking
113+
- **GitHub Pages**: Special build configuration excluding Spark dependencies
114+
115+
### Deployment Targets
116+
- **GitHub Pages**: Automated deployment via GitHub Actions
117+
- **Local Preview**: `npm run preview` for local testing
118+
119+
## Code Style & Conventions
120+
121+
### TypeScript
122+
- Strict mode enabled
123+
- Use proper type annotations
124+
- Prefer interfaces over types for object shapes
125+
- Use type guards for runtime type checking
126+
127+
### React Patterns
128+
- Functional components with hooks
129+
- Use `useCallback` and `useMemo` for performance optimization
130+
- Proper error boundaries where needed
131+
- Accessible components following WCAG guidelines
132+
133+
### File Naming
134+
- PascalCase for components (`UserStats.tsx`)
135+
- camelCase for utilities (`parseCSV`)
136+
- kebab-case for CSS classes
137+
- UPPER_CASE for constants
138+
139+
## Testing Strategy
140+
- Unit tests for utility functions (especially CSV parsing)
141+
- Component tests for UI interactions
142+
- Integration tests for data flow
143+
- Error boundary testing for edge cases
144+
145+
## Performance Considerations
146+
- Lazy loading for large datasets
147+
- Memoization of expensive calculations
148+
- Efficient chart rendering with Recharts
149+
- Browser-based CSV parsing limitations
150+
151+
## Common Tasks & Patterns
152+
153+
When working on this project, you'll likely need to:
154+
155+
1. **Add new chart types**: Extend the visualization with additional Recharts components
156+
2. **Modify CSV parsing**: Update `lib/utils.ts` for new data formats
157+
3. **Add UI components**: Follow shadcn/ui patterns and use existing design tokens
158+
4. **Update data aggregation**: Modify aggregation functions for new metrics
159+
5. **Handle edge cases**: Add validation and error handling for data processing
160+
161+
## Development Workflow
162+
1. Run `npm run dev` for development server
163+
2. Use `npm run test` for running tests
164+
3. Build with `npm run build` for production
165+
4. Deploy to GitHub Pages with `npm run deploy`
166+
167+
## Important Notes
168+
- This is a client-side only application (no backend)
169+
- All data processing happens in the browser
170+
- CSV files are processed locally (not uploaded to servers)
171+
- The app is designed for periodic usage reporting, not real-time monitoring
172+
- **Minimal Changes**: Only modify files that are absolutely necessary to implement the requested features - avoid unnecessary changes to unrelated files

0 commit comments

Comments
 (0)