JSPM

ai-visual-code-review

2.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 145
  • Score
    100M100P100Q76287F
  • License MIT

A comprehensive visual code review system with AI integration for any Git repository

Package Exports

  • ai-visual-code-review
  • ai-visual-code-review/server.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ai-visual-code-review) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🔍 AI Visual Code Review v2.0

A production-ready, comprehensive visual code review system with AI integration for any Git repository. Features beautiful GitHub-like interface, line-by-line commenting, structured AI review exports, and enterprise-grade security.

License: MIT Node.js Git Security Tests

🚀 What's New in v2.0

🔒 Security Hardened

  • Command Injection Protection - Secure Git command execution with allowlists
  • Rate Limiting - DoS protection with configurable limits
  • Input Validation - Comprehensive sanitization of all user inputs
  • Security Headers - CSP, XSS protection, and more
  • Path Traversal Prevention - Multiple layers of file path validation

⚡ Performance Enhanced

  • Async Operations - Non-blocking Git operations with timeouts
  • Memory Management - Automatic cleanup prevents memory leaks
  • Request Caching - Smart caching for repeated requests
  • Progressive Loading - Better UX with lazy loading

🎨 UX Improvements

  • Smart Notifications - Real-time feedback system
  • Enhanced File Icons - Better file type recognition
  • Accessibility - ARIA labels, keyboard navigation
  • Error Recovery - Graceful handling with retry options
  • Loading States - Clear progress indicators

✨ Core Features

Visual Review Interface

  • GitHub-like Dark Theme with professional styling
  • Interactive Diff Viewer with syntax highlighting and line numbers
  • Line-by-line Commenting with templates and persistence
  • File Selection with smart defaults and exclusion options
  • Real-time Git Status with actionable suggestions
  • Responsive Design optimized for desktop, tablet, and mobile
  • Keyboard Navigation full accessibility support

AI Integration

  • Structured Export generates comprehensive review documents
  • Multiple Export Formats (unified or individual file reviews)
  • Enhanced Checklists covering security, performance, accessibility
  • Framework-aware Analysis (React, TypeScript, Python, etc.)
  • ChatGPT/Claude Optimized markdown output with metadata
  • Error Tracking detailed reporting of processing issues

Developer Experience

  • Zero Configuration works with any Git repository out of the box
  • Multiple Access Methods (CLI, web interface, quick scripts)
  • Flexible File Filtering advanced include/exclude patterns
  • Intelligent Size Management automatic handling of large files
  • Cross-platform support (Windows, macOS, Linux)
  • Development Mode with hot reloading and debugging

🚀 Quick Start

Option 1: One-line Installation

# Clone and install
git clone https://github.com/PrakharMNNIT/ai-visual-code-review.git
cd ai-visual-code-review
chmod +x install.sh
./install.sh --global

Option 2: NPM Installation (when published)

npm install -g ai-visual-code-review

Option 3: Manual Setup

# Clone repository
git clone https://github.com/PrakharMNNIT/ai-visual-code-review.git
cd ai-visual-code-review

# Install dependencies
npm install

# Make scripts executable
chmod +x bin/ai-review.js
chmod +x scripts/quick-ai-review.sh

📋 Usage

Basic Workflow

  1. Navigate to your project

    cd your-project
git add .  # Stage changes

  2. Start visual review

    ai-review  # Opens http://localhost:3002

  3. Review changes

    • Expand files to see diffs
    • Add comments and notes
    • Select files for export

  4. Export for AI

    • Click "Export for AI Review"
    • Gets AI_REVIEW.md with structured format

  5. Get AI feedback

    Ask ChatGPT/Claude: "Please review the AI_REVIEW.md file and provide detailed feedback on code quality, potential issues, and improvements."

CLI Commands

# Start visual review server
ai-review
ai-review start
ai-review start --port 3003 --open

# Quick markdown generation
ai-review quick
ai-review quick --exclude dist/ node_modules/
ai-review quick --include src/ --no-size-limit

# Help and information
ai-review --help

Quick Script Usage

Recommended: Use CLI command (cross-platform Node.js)

# Basic export
ai-review quick

# Exclude specific files
ai-review quick --exclude package-lock.json dist/

# Include only specific files
ai-review quick --include src/main.ts src/components/

# Custom size limits
ai-review quick --max-size 5000
ai-review quick --no-size-limit

Alternative: Direct script (legacy bash script)

./scripts/quick-ai-review.sh

🎯 Advanced Usage

File Filtering

Include/Exclude Patterns

Enhanced glob pattern support:

  • ** matches zero or more directories
  • * matches any characters in filename
  • Patterns are matched against full file paths
# Exclude large config files
ai-review quick --exclude package-lock.json webpack.config.js

# Focus on source code only (** matches nested directories)
ai-review quick --include "src/**/*.ts" "src/**/*.tsx"

# Match files in scripts/ including root level
ai-review quick --include "scripts/**/*.js"

# Exclude entire directories
ai-review quick --exclude "dist/*" "node_modules/*" "*.log"

Size Management

# Skip files over 1000 lines
ai-review quick --max-size 1000

# Include all files regardless of size
ai-review quick --no-size-limit

Custom Port and Options

# Use different port
ai-review start --port 8080

# Auto-open browser
ai-review start --open

# Environment configuration
PORT=3003 ai-review start

Integration with Editors

VS Code Tasks

Add to .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "🔍 Visual Code Review",
      "type": "shell",
      "command": "ai-review",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "new"
      },
      "problemMatcher": []
    }
  ]
}

Git Hooks

Pre-commit hook example:

#!/bin/bash
# .git/hooks/pre-commit
if ! git diff --cached --quiet; then
    echo "🔍 Generating code review..."
    ai-review quick
    echo "📋 Review AI_REVIEW.md before committing"
fi

🔧 Configuration

Environment Variables

# Server configuration
export PORT=3002                    # Server port
export NODE_ENV=development         # Environment mode

# Git configuration
export GIT_DIFF_CONTEXT=3          # Diff context lines
export GIT_DIFF_ALGORITHM=patience  # Diff algorithm

Project Configuration

Create .ai-review.json in your project root:

{
  "excludePatterns": [
    "*.log",
    "node_modules/*",
    "dist/*",
    ".env*"
  ],
  "maxFileSize": 10000,
  "defaultPort": 3002,
  "autoOpen": false,
  "exportTemplate": "standard"
}

📊 Export Formats

Unified Review (AI_REVIEW.md)

# 🔍 Code Review - [timestamp]

## 📊 Change Summary
[git diff stats]

## 📝 Files Changed
### 📄 `src/component.tsx`
**Type:** TypeScript/React Component
```diff
[unified diff for all changes]

🤖 Review Checklist

  • Code Quality
  • Security & Data
  • Performance
  • Accessibility

### Individual File Reviews
Creates `code-reviews-[timestamp]/` directory with separate markdown file for each changed file.

## 🤖 AI Integration Guide

### Optimal Prompts

**For ChatGPT/Claude:**

Please review the AI_REVIEW.md file and provide detailed feedback on:

  1. Code Quality & Best Practices
  2. Potential Bugs & Edge Cases
  3. Security Vulnerabilities
  4. Performance Optimizations
  5. Accessibility Improvements
  6. Testing Recommendations

Focus on actionable suggestions with examples.


**For Code-specific Analysis:**

Analyze this [TypeScript/Python/etc] code for:

  • Type safety issues
  • Framework-specific anti-patterns
  • Memory leaks or performance issues
  • Missing error handling
  • Opportunities for refactoring

### Supported Frameworks

The system provides specialized analysis for:
- **React/TypeScript** - Hook patterns, component structure, type safety
- **Node.js** - Async/await patterns, error handling, security
- **Python** - Type hints, PEP compliance, performance
- **Vue.js** - Composition API, reactivity patterns
- **General** - Git best practices, documentation, testing

## 🛠️ Development & Testing

### Local Development

```bash
# Clone and setup
git clone https://github.com/PrakharMNNIT/ai-visual-code-review.git
cd ai-visual-code-review
npm install

# Development with hot reload
npm run dev

# Run tests
npm test                    # Run all tests
npm run test:watch         # Watch mode
npm run test:coverage      # Coverage report
npm run test:security      # Security audit

# Production server
npm start

Testing Suite

Comprehensive test coverage includes:

  • ✅ API endpoint testing with security validation
  • ✅ Git command injection prevention
  • ✅ Rate limiting functionality
  • ✅ Input sanitization and validation
  • ✅ Error handling and recovery
  • ✅ DiffService functionality
  • ✅ Security headers verification
# Run specific test suites
npm test -- --testPathPattern=server.test.js
npm test -- --testPathPattern=diffService.test.js

# Generate coverage report
npm run test:coverage

Project Structure

ai-visual-code-review/
├── bin/
│   └── ai-review.js              # CLI entry point
├── public/
│   └── review.html              # Enhanced web interface
├── services/
│   └── diffService.js           # Git diff processing
├── scripts/
│   └── quick-ai-review.sh       # Quick export script
├── test/
│   ├── server.test.js           # API endpoint tests
│   ├── diffService.test.js      # Service tests
│   ├── api-client.py            # Python test client
│   ├── utils.js                 # Test utilities
│   └── sample-component.tsx     # Test data
├── server.js                    # Express server with security
├── package.json                 # Dependencies & scripts
├── install.sh                   # Installation script
└── README.md                    # Documentation

Enhanced API Endpoints

Core Endpoints:

  • GET / - Enhanced web interface with memory management
  • GET /api/health - Repository status with version info
  • GET /api/summary - Change statistics with caching
  • GET /api/staged-files - List staged files with metadata
  • GET /api/file-diff?file=path - Secure file diff data
  • POST /api/log-comment - Comment logging with validation
  • POST /api/export-for-ai - Generate AI review (rate limited)
  • POST /api/export-individual-reviews - Individual file reviews

Security Features:

  • 🔒 Rate limiting on all endpoints
  • 🛡️ Input sanitization and validation
  • 🔐 Command injection prevention
  • 📊 Request/response logging
  • ⏱️ Configurable timeouts

🔒 Security Features

Multi-Layer Security Protection

Command Injection Prevention:

  • ✅ Allowlisted Git commands only
  • ✅ Argument sanitization with regex filtering
  • ✅ Path traversal attack prevention
  • ✅ No shell metacharacters allowed

Input Validation:

  • ✅ File path validation with security patterns
  • ✅ Request size limits (10MB default)
  • ✅ Comment length restrictions
  • ✅ Type checking on all inputs

Rate Limiting:

  • ✅ 50 requests per 15 minutes (general)
  • ✅ 10 exports per 15 minutes (specific)
  • ✅ IP-based tracking
  • ✅ Configurable limits

Security Headers:

  • ✅ Content Security Policy (CSP)
  • ✅ X-Frame-Options: DENY
  • ✅ X-Content-Type-Options: nosniff
  • ✅ X-XSS-Protection enabled
  • ✅ Referrer Policy configured

Production Hardening:

  • ✅ Error details hidden in production
  • ✅ Sensitive data filtering in logs
  • ✅ CORS restrictions
  • ✅ Request timeout enforcement

🐛 Troubleshooting

Common Issues

"No staged changes found"

git add .
git status  # Verify files are staged

"Port 3002 already in use"

# Kill existing process
lsof -ti:3002 | xargs kill
# Or use different port
ai-review start --port 3003

"Git command failed"

# Check Git installation
git --version
# Verify you're in a Git repository
git status

"Module not found: express"

npm install
# Or global installation
npm install -g ai-visual-code-review

Performance Issues

Large repositories:

  • Use file filtering: --exclude or --include
  • Set size limits: --max-size 5000
  • Focus on specific directories

Slow diff generation:

  • Stage fewer files at once
  • Use git add [specific-files] instead of git add .
  • Configure Git diff algorithm: git config diff.algorithm patience

📈 Examples

React/TypeScript Project

# Focus on source code, exclude generated files
ai-review quick --include "src/**/*.ts" "src/**/*.tsx" --exclude "dist/*" "*.d.ts"

Node.js API Project

# Include API routes and exclude logs
ai-review quick --include "routes/**" "middleware/**" "models/**" --exclude "*.log" "node_modules/*"

Python Project

# Include Python files, exclude virtual environment
ai-review quick --include "*.py" --exclude "venv/*" "__pycache__/*" "*.pyc"

Full-stack Project

# Separate frontend and backend reviews
ai-review quick --include "frontend/**" > frontend_review.md
ai-review quick --include "backend/**" > backend_review.md

🤝 Contributing

Contributions are welcome! Please feel free to submit pull requests.

Development Setup

  1. Fork the repository
  2. Create feature branch: git checkout -b feature-name
  3. Make changes and test thoroughly
  4. Submit pull request with clear description

Reporting Issues

  • Use GitHub Issues with detailed reproduction steps
  • Include system information (OS, Node.js version, Git version)
  • Provide sample repository if possible

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

  • Inspired by GitHub's code review interface
  • Built for AI-assisted development workflows
  • Designed for modern development teams

Happy Reviewing! 🔍✨

For more information, visit: https://github.com/PrakharMNNIT/ai-visual-code-review