CodeSentinel - React Frontend

CodeSentinel now features a modern React + TypeScript frontend with a FastAPI backend, replacing the original Streamlit interface while maintaining all core functionality.

🎨 New Features

Modern UI/UX

Professional Design System - Clean, consistent interface using Tailwind CSS
Responsive Layout - Works seamlessly on desktop, tablet, and mobile
Real-time Updates - React Query for efficient data fetching and caching
Type Safety - Full TypeScript coverage for reliability

Core Pages

Dashboard - Overview with statistics and feature highlights
Issue to PR - Transform GitHub issues into pull requests
PR Ranking - Analyze and rank pull requests by quality metrics
History - View past agent executions
Settings - Configuration and API key status

🏗️ Architecture

Frontend Stack

React 18 - Modern UI library
TypeScript - Type-safe development
Vite - Lightning-fast build tool
TanStack Query - Server state management
React Router - Client-side routing
Tailwind CSS - Utility-first styling
Axios - HTTP client with interceptors

Backend Stack

FastAPI - High-performance Python API framework
Python 3.11 - Existing CodeSentinel logic
Uvicorn - ASGI server
Static File Serving - React build served from /client/dist

🚀 Quick Start

Development Mode

Backend API (port 5000):
```
python server.py
```
Frontend Dev Server (port 5173 with API proxy, for development with hot reload):
```
cd client
npm install
npm run dev
```
Note: Dev server runs on port 5173 and proxies /api requests to the backend on port 5000.

Production Build

The production build is automatically created and served by the FastAPI server:

# Build frontend
cd client
npm run build

# Start server (serves both API and React app)
cd ..
python server.py

📁 Project Structure

.
├── api_server.py           # FastAPI backend with REST endpoints
├── server.py               # Main entry point
├── agent_core.py           # Issue-to-PR workflow logic
├── github_client.py        # GitHub API integration (fork-based)
├── pr_scorer.py            # PR ranking algorithm
├── gemini_ai.py            # AI integration (Gemini 1.5 Flash)
├── validators.py           # Code quality validation
├── storage.py              # Run history persistence
├── config.py               # Configuration and safety limits
│
└── client/                 # React frontend
    ├── src/
    │   ├── app/            # Router and providers
    │   ├── components/     # Reusable UI components
    │   │   ├── ui/         # Base components (Button, Card, etc.)
    │   │   └── shared/     # AppShell, Navigation
    │   ├── features/       # Page components
    │   │   ├── dashboard/
    │   │   ├── issue-to-pr/
    │   │   ├── pr-ranking/
    │   │   ├── history/
    │   │   └── settings/
    │   ├── lib/
    │   │   ├── api/        # API client and modules
    │   │   └── utils/      # Helper functions
    │   └── styles/         # Global styles
    ├── dist/               # Production build (auto-generated)
    ├── package.json
    ├── tsconfig.json
    ├── vite.config.ts
    └── tailwind.config.js

🔌 API Endpoints

Configuration

GET /api/health - Health check
GET /api/config - Get configuration status
GET /api/stats - Get usage statistics

Issue to PR

POST /api/issue-to-pr - Create PR from issue

{
  "repo_url": "https://github.com/owner/repo",
  "issue_text": "Description of the issue",
  "base_branch": "main",
  "max_files": 10,
  "max_lines": 500
}

PR Ranking

POST /api/pr-ranking - Rank pull requests

{
  "repo_url": "https://github.com/owner/repo"
}

Run History

GET /api/runs?limit=20 - Get recent runs
GET /api/runs/{run_id} - Get run details

🔧 Configuration

Environment Variables

Required secrets (set via Replit Secrets or .env):

GEMINI_API_KEY - Google Gemini API key
GITHUB_TOKEN - GitHub personal access token

Safety Limits

Configured in config.py:

Maximum files changed per PR: 10
Maximum lines changed per PR: 500
Minimum lint score: 7.0
Minimum maintainability index: 60

🌟 Key Features

Fork-Based Workflow

Safe & Non-Intrusive - All changes happen in your fork
Automatic Forking - Creates or reuses existing forks
Clean PR Creation - PRs from fork to original repository
Environment-Based Auth - Secure Git credential management

AI-Powered Analysis

Issue Diagnosis - Understands problems and affected files
Fix Planning - Generates implementation strategies
Code Generation - Creates patches with explanations
Quality Scoring - Evaluates PR quality automatically

Validation Pipeline

Pylint - Code linting and static analysis
Black - Code formatting checks
Radon - Complexity and maintainability metrics
Safety Checks - File/line change limits

🎯 Usage Examples

Create PR from Issue

Navigate to Issue to PR page
Enter repository URL: https://github.com/owner/repo
Paste issue description
Click "Run Agent & Create PR"
Watch real-time progress
Get PR link when complete

Rank Pull Requests

Navigate to PR Ranking page
Enter repository URL
Click "Analyze PRs"
View ranked list with scores
See AI-generated recommendations

🐛 Troubleshooting

API Keys Not Configured

Go to Settings page
Check API key status
Add missing keys via Replit Secrets

Build Errors

cd client
rm -rf node_modules package-lock.json
npm install
npm run build

Server Won't Start

# Check if port 5000 is in use
lsof -i :5000

# Install dependencies
pip install fastapi uvicorn

📊 Performance

Frontend Bundle: ~128 KB (gzipped)
Initial Load: < 2s on fast connections
API Response: < 100ms for most endpoints
Build Time: ~9s for production build

🔮 Future Enhancements

Planned features:

High Priority

PR Details Page - View individual run details with diff viewer and patch inspection
- Click through from History page to see full run artifacts
- Side-by-side diff view for code changes
- Validation results and AI reasoning

Medium Priority

Repositories Management - Manage watched repos and whitelist
Advanced Filtering - Filter runs by status, date, repository
Real-time Notifications - Toast notifications for run completion

Future Considerations

Webhook Integration - Auto-trigger on new issues
Multi-Repository Dashboard - Monitor multiple repos
Custom Scoring Weights - Adjust PR ranking algorithm
Role-Based Access Control - Team collaboration features

Note: The current React implementation provides all core functionality of the original Streamlit UI (Issue to PR workflow, PR Ranking, Run History, Configuration). PR Details is the main feature enhancement planned for the next iteration.

📝 Development Notes

Adding New Features

Create API endpoint in api_server.py
Add API module in client/src/lib/api/modules/
Create React component in client/src/features/
Add route to client/src/app/router.tsx
Build and test

Code Style

Backend: Black formatting, type hints
Frontend: ESLint, Prettier, TypeScript strict mode
Components: Functional components with hooks
Styling: Tailwind CSS utility classes

🤝 Contributing

This is a hackathon project demonstrating AI-assisted development. The codebase serves as a reference for:

FastAPI + React integration
AI-powered code generation
GitHub automation
Type-safe API design

📄 License

See parent repository for license information.

🙏 Acknowledgments

Gemini 1.5 Flash - AI reasoning and code generation
GitHub API - Repository and PR management
React Ecosystem - Modern frontend development
FastAPI - High-performance Python APIs

Built with ❤️ for the Agentverse Hackathon

FilesExpand file tree

README_REACT.md

Latest commit

History