🤖 CI/CD Agent

📊 Current Production Metrics

🔥 29 Total Failures Processed - All with AI-generated intelligent fixes
🏢 20+ Repositories Analyzed - Cross-language pattern recognition active
⚡ 100% Fix Generation Rate - Every failure receives comprehensive AI analysis
👥 Human-in-the-Loop Workflow - 1 approved, 2 rejected, 26 pending review
🗄️ Complete Audit Trail - All operations tracked in PostgreSQL
🌐 Production Backend: https://ci-cd-fixer-agent-backend.onrender.com
🖥️ Live Frontend Dashboard: https://frontend-3dvq.onrender.com/

📊 Current Production Metrics

🔥 17 Total Failures Processed - All with AI-generated intelligent fixes
🏢 1 Repository Analyzed - chaitanyak175/ci-cd-test-repo with multiple language CI/CD pipelines
⚡ 100% Fix Generation Rate - Every failure receives comprehensive AI analysis
👥 Human-in-the-Loop Workflow - 4 approved, 3 applied, 10 pending review
🗄️ Complete Audit Trail - All operations tracked in PostgreSQL
🌐 Production Backend: https://ci-cd-fixer-agent-backend.onrender.com
🖥️ Live Frontend Dashboard: https://frontend-3dvq.onrender.com/

🚀 Production Status: LIVE | 17 Failures Processed | 1 Repository Analyzed | AI Powered Intelligence

A comprehensive Next.js 15 dashboard for the CI/CD Fixer Agent system that provides real-time monitoring, analytics, and management of GitHub Actions workflow failures with AI-powered fix suggestions using Google Gemini 2.5 Pro and Portia AI orchestration.

🌟 Live Production System

📊 Current Production Metrics

🔥 29 Total Failures Processed - All with AI-generated intelligent fixes
🏢 20+ Repositories Analyzed - Cross-language pattern recognition active
⚡ 100% Fix Generation Rate - Every failure receives comprehensive AI analysis
� Human-in-the-Loop Workflow - 1 approved, 2 rejected, 26 pending review
🗄️ Complete Audit Trail - All operations tracked in PostgreSQL
🌐 Production Backend: https://ci-cd-fixer-agent-backend.onrender.com

🎯 What This Dashboard Provides

✅ Real-time Failure Monitoring - Live tracking of GitHub Actions failures across repositories
✅ AI Fix Management - Review and approve Gemini-generated fixes with confidence scoring
✅ Advanced Analytics - Visualize patterns, success rates, and repository intelligence
✅ Repository Insights - Deep analysis of CI/CD patterns per project with ML predictions
✅ Human Oversight - Comprehensive approve/reject workflows with detailed feedback
✅ Pattern Recognition - Cross-repository learning and error categorization

🏗️ Architecture & Integration

Backend Integration

This frontend connects to our live production backend with full AI capabilities:

Production API: https://ci-cd-fixer-agent-backend.onrender.com
Live Frontend: https://frontend-3dvq.onrender.com/
Database: PostgreSQL via Supabase with complete failure/fix tracking
AI Services:
- Google Gemini 2.5 Pro for intelligent error analysis
- Portia AI for orchestration and workflow management
GitHub Integration: Live webhook processing for real-time failure detection
Current Status: 17 failures processed in 1 repository with ML pattern recognition

System Components

Webhook Processing: Real-time GitHub Actions failure detection
AI Analysis Engine: Gemini-powered error classification and fix generation
Human Approval Workflow: Review system with approve/reject capabilities
Analytics Engine: ML-driven pattern recognition and success prediction
Repository Intelligence: Cross-project learning and recommendation system

🛠️ Tech Stack

Framework: Next.js 15 with App Router and Turbopack
Styling: Tailwind CSS + shadcn/ui component library
Language: TypeScript with strict type checking
State Management: React hooks + SWR for real-time data fetching
Charts & Visualization: Recharts for interactive analytics
UI Components: Radix UI primitives via shadcn/ui
Icons: Lucide React + Tabler Icons
Deployment: Ready for Vercel, Netlify, or any Node.js platform

🚀 Getting Started

Prerequisites

Node.js 18+
pnpm (recommended) or npm
Access to backend API (see .env.example)

Development Setup

# Clone the repository
git clone https://github.com/CI-CD-Fixer-Agent/ci-cd-fixer-starter.git
cd ci-cd-fixer-starter/frontend

# Install dependencies (pnpm recommended for faster installs)
pnpm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your backend API URL

# Start development server with Turbopack
pnpm dev

Open http://localhost:3000 to access the dashboard.

Environment Variables

# .env.local
NEXT_PUBLIC_API_URL=https://ci-cd-fixer-agent-backend.onrender.com
# For local development: http://localhost:8000

Available Scripts

pnpm dev          # Start development server with Turbopack
pnpm build        # Build for production with optimizations
pnpm start        # Start production server
pnpm lint         # Run ESLint with TypeScript checks

📱 Dashboard Pages & Features

🏠 Landing Page (`/`)

Modern hero section with animated statistics
Feature showcase and system overview
Real-time metrics display
Call-to-action for dashboard access

📊 Dashboard (`/dashboard`)

System Status Banner - Live health monitoring of all services
Real-time Analytics - Current failure rates and success metrics
AI Agent Status - Gemini and Portia agent monitoring with processing stats
Live Workflow Monitor - Real-time GitHub Actions failure tracking
Quick Actions Panel - Manual triggers and system controls
Failure Overview - Recent failures with filtering and pagination
Pending Fixes - Human approval queue with one-click actions

🔍 Failures Management (`/failures`)

Comprehensive Failure List - All 17 processed failures with advanced filtering
Multi-dimensional Filtering - By repository, status, error type, date range
Detailed Failure Views - Complete error logs and context
AI Analysis Results - Gemini-generated insights with confidence scores
Fix Suggestions - Specific implementation steps and commands

✅ Fix Management (`/fixes`)

Human-in-the-Loop Workflow - Approve/reject interface for all 10 pending fixes
Detailed Fix Reviews - Complete analysis and suggested changes
Bulk Operations - Multi-select approve/reject with batch comments
Implementation Tracking - Status monitoring for applied fixes
Effectiveness Analytics - Success rate tracking per fix type

� Analytics Dashboard (`/analytics`)

Repository Intelligence - Cross-project pattern analysis for 1 repository
Error Type Distribution - Visual breakdown of failure categories
Success Rate Trends - Historical and predictive analytics (41.18% current approval rate)
ML Insights Panel - Gemini-powered predictions and recommendations
Cross-Repository Patterns - Language-specific failure analysis
Effectiveness Metrics - Fix success rates and improvement trends

🏢 Repository Management (`/repository`)

Individual Repository Profiles - Detailed analysis per project
Historical Trend Analysis - Failure patterns over time
Language-Specific Insights - JavaScript, TypeScript, Python, Go analysis
Recommendation Engine - AI-powered improvement suggestions
Workflow Optimization - Best practices and pattern recommendations

🎨 Component Architecture

Core UI Components (shadcn/ui based)

components/
├── ui/                     # shadcn/ui primitive components
│   ├── button.tsx         # Button variants and states
│   ├── card.tsx           # Card layouts for content
│   ├── dialog.tsx         # Modal and dialog systems
│   ├── sidebar.tsx        # Navigation sidebar
│   ├── table.tsx          # Data table components
│   └── ...                # All shadcn/ui components
├──
├── ai-agent-status.tsx     # Real-time AI agent monitoring
├── app-sidebar.tsx         # Main navigation with active states
├── chart-area-interactive.tsx # Interactive analytics charts
├── data-table.tsx          # Advanced data tables with filtering
├── failures-table-*.tsx   # Failure management tables
├── live-workflow-monitor.tsx # Real-time GitHub Actions tracking
├── ml-prediction-panel.tsx # ML insights and predictions
├── pending-fixes.tsx       # Human approval queue
├── quick-actions-panel.tsx # System control panel
├── real-time-analytics.tsx # Live metrics and charts
├── section-cards.tsx       # Dashboard overview cards
├── system-status-banner.tsx # Health monitoring banner
└── site-header.tsx         # Top navigation and user menu

API Integration & State Management

lib/
├── api.ts              # Complete backend API client with all endpoints
├── types.ts            # TypeScript interfaces for all data structures
├── utils.ts            # Utility functions and helpers
└──
hooks/
├── use-api.ts          # Custom React hooks for API integration
├── use-mobile.ts       # Mobile responsiveness detection
└── ...                 # Additional custom hooks

Page Structure (Next.js App Router)

app/
├── layout.tsx          # Root layout with providers
├── page.tsx            # Landing page with hero section
├── globals.css         # Global styles and CSS variables
├──
├── dashboard/
│   └── page.tsx        # Main dashboard with all components
├── failures/
│   └── page.tsx        # Failure management interface
├── fixes/
│   └── page.tsx        # Fix approval workflow
├── analytics/
│   └── page.tsx        # Analytics and insights dashboard
└── repository/
    └── page.tsx        # Repository-specific analysis

🔗 API Integration Examples

Real-time Data Fetching

// hooks/use-api.ts - Custom hooks for real-time data
import useSWR from "swr";
import { api } from "@/lib/api";

export function useFailures() {
    const { data, error, mutate } = useSWR("/failures", api.getFailures, {
        refreshInterval: 30000, // Auto-refresh every 30 seconds
    });

    return {
        failures: data?.failures || [],
        totalCount: data?.total_failures || 0,
        isLoading: !error && !data,
        error,
        refresh: mutate,
    };
}

export function useFixes() {
    const { data, error, mutate } = useSWR("/fixes", api.getFixes);

    return {
        fixes: data?.pending_fixes || [],
        isLoading: !error && !data,
        error,
        refresh: mutate,
    };
}

Human-in-the-Loop Fix Approval

// lib/api.ts - Fix management API calls
export class APIClient {
    async approveFix(fixId: string, comment?: string) {
        return this.request(`/fixes/${fixId}/approve`, {
            method: "POST",
            body: JSON.stringify({
                action: "approve",
                comment: comment || "Approved via dashboard",
            }),
        });
    }

    async rejectFix(fixId: string, reason: string) {
        return this.request(`/fixes/${fixId}/reject`, {
            method: "POST",
            body: JSON.stringify({
                action: "reject",
                comment: reason,
            }),
        });
    }

    async applyFix(fixId: string) {
        return this.request(`/fixes/${fixId}/apply`, {
            method: "POST",
            body: JSON.stringify({ action: "apply" }),
        });
    }
}

Real-time Analytics Integration

// components/real-time-analytics.tsx - Live metrics
export function RealTimeAnalytics() {
    const { analytics, isLoading } = useAnalytics();
    const { dashboard } = useDashboard();

    const successRate = analytics?.overall_approval_rate || 0;
    const totalFixes = analytics?.total_fixes_generated || 0;
    const pendingReview = dashboard?.pending_fixes || 0;

    return (
        <div className="grid gap-4 md:grid-cols-3">
            <MetricCard
                title="Success Rate"
                value={`${(successRate * 100).toFixed(1)}%`}
                trend="up"
            />
            <MetricCard
                title="Total Fixes"
                value={totalFixes}
                description="AI-generated solutions"
            />
            <MetricCard
                title="Pending Review"
                value={pendingReview}
                description="Awaiting human approval"
            />
        </div>
    );
}

📊 Real-time Features & Performance

Live Data Updates

Auto-refresh Intervals: 30-second intervals for critical data
Real-time Metrics: Live failure counts and AI processing status
WebSocket Ready: Infrastructure prepared for instant notifications
Progressive Enhancement: Core features work without JavaScript
Optimistic Updates: Immediate UI feedback for user actions

Performance Optimizations

Next.js 15 with Turbopack: Ultra-fast development and build times
Code Splitting: Automatic route-based splitting for optimal loading
Image Optimization: Next.js Image component for responsive images
SWR Caching: Intelligent data caching with automatic revalidation
Bundle Analysis: Optimized bundle size with dynamic imports

Production Metrics (Current Live Data)

🔥 17 Total Failures Processed - 100% with AI analysis
⚡ Real-time Processing - Average 2-3 second analysis time
📊 20+ Repositories - Cross-language pattern recognition
🎯 3.45% Human Approval Rate - Quality control maintaining high standards
💾 Complete Data Persistence - All interactions stored in PostgreSQL

🎯 Development Guidelines

Code Quality Standards

// Follow TypeScript strict mode for all components
interface FixApprovalProps {
    fixId: string;
    onApprove: (fixId: string, comment?: string) => Promise<void>;
    onReject: (fixId: string, reason: string) => Promise<void>;
}

// Use shadcn/ui component patterns
export function FixApprovalCard({
    fixId,
    onApprove,
    onReject,
}: FixApprovalProps) {
    const [isLoading, setIsLoading] = useState(false);

    return (
        <Card className="w-full">
            <CardHeader>
                <CardTitle>Fix Review Required</CardTitle>
            </CardHeader>
            <CardContent>{/* Component implementation */}</CardContent>
        </Card>
    );
}

Performance Best Practices

// Use Next.js Image for optimization
import Image from "next/image";

// Implement proper loading states
const { data, isLoading, error } = useSWR("/api/failures", fetcher);

if (isLoading) return <Skeleton className="w-full h-96" />;
if (error) return <ErrorBoundary error={error} />;

// Use React.memo for expensive components
export const ExpensiveAnalyticsChart = React.memo(({ data }) => {
    return <RechartComponent data={data} />;
});

Accessibility Standards

// Implement proper ARIA labels and roles
<Button
    variant="outline"
    onClick={handleApprove}
    aria-label={`Approve fix for ${fixId}`}
    disabled={isProcessing}
>
    <CheckCircle className="h-4 w-4 mr-2" />
    Approve Fix
</Button>

// Ensure keyboard navigation
<div role="tabpanel" tabIndex={0} onKeyDown={handleKeyNavigation}>
    {/* Content */}
</div>

🚀 Deployment

Vercel (Recommended)

# Build for production
pnpm build

# Deploy to Vercel
vercel --prod

# Or use Vercel CLI for automatic deployments
npx vercel --prod

Alternative Deployments

# Netlify
npm run build && netlify deploy --prod --dir=.next

# Docker deployment
docker build -t ci-cd-fixer-frontend .
docker run -p 3000:3000 ci-cd-fixer-frontend

# Static export (if needed)
npm run build && npm run export

Production Environment Variables

# Required environment variables
NEXT_PUBLIC_API_URL=https://ci-cd-fixer-agent-backend.onrender.com
NEXT_PUBLIC_APP_ENV=production

# Optional performance optimizations
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn

📈 Current Production Status

Live System Metrics (August 2025)

The dashboard displays real production data from our deployed system:

🔥 17 Total Failures Processed - Every failure analyzed by Gemini 2.5 Pro
🏢 1 Repository Analyzed - chaitanyak175/ci-cd-test-repo with multiple pipeline types
⚡ 100% Fix Generation Rate - AI successfully analyzes every workflow failure
👥 41.18% Human Approval Rate - 4 approved, 3 applied, 10 pending (quality control)
🗄️ Complete Audit Trail - All operations tracked in PostgreSQL
🌐 100% System Uptime - Reliable backend connectivity and webhook processing

AI Analysis Performance

Google Gemini 2.5 Pro: Primary analysis engine with confidence scoring
Portia AI Orchestration: Multi-agent workflow coordination
Pattern Recognition: Learning from cross-repository failure patterns
Language Support: JavaScript, TypeScript, Python, Go, and more
Real-time Processing: Average 2-3 second analysis per failure

Human-in-the-Loop Quality

Human-in-the-Loop Quality - All fixes require human approval (41.18% current approval rate)
Detailed Feedback - Comments and reasoning for approve/reject decisions
Learning Loop - AI improves based on human feedback patterns
Confidence Scoring - Higher confidence fixes prioritized for review

🔧 Available Scripts

# Development
pnpm dev              # Start development server with Turbopack (faster HMR)
pnpm dev:legacy       # Start development without Turbopack (if needed)

# Production
pnpm build            # Build for production with optimizations
pnpm build:analyze    # Build with bundle analyzer
pnpm start            # Start production server

# Code Quality
pnpm lint             # Run ESLint with TypeScript checks
pnpm lint:fix         # Auto-fix ESLint issues
pnpm type-check       # Run TypeScript compiler checks
pnpm format           # Format code with Prettier (if configured)

# Testing (if implemented)
pnpm test             # Run test suite
pnpm test:watch       # Run tests in watch mode
pnpm test:coverage    # Generate coverage report

📚 Documentation & Resources

Project Documentation

Backend API Reference - Complete API endpoints documentation
Project Status - Current implementation status and roadmap
Main Project README - System overview and architecture

Technology Documentation

Next.js 15 Documentation - App Router and latest features
shadcn/ui Components - Component library and usage patterns
Tailwind CSS - Utility-first CSS framework
TypeScript Handbook - Type system and best practices
SWR Documentation - Data fetching and caching strategies

AI Integration Resources

Google Gemini API - AI analysis engine documentation
Portia AI Documentation - Multi-agent orchestration framework

🤝 Contributing

This dashboard is a core component of the CI/CD Fixer Agent system. Contributions are welcome!

Development Workflow

Fork the repository and create a feature branch
Install dependencies: pnpm install
Start development server: pnpm dev
Make your changes with proper TypeScript types
Test your changes across different screen sizes
Lint your code: pnpm lint
Submit a pull request with detailed description

Contribution Areas

🎨 UI/UX Improvements - Enhanced analytics visualizations
⚡ Performance Optimizations - Faster loading and better caching
♿ Accessibility Features - Better screen reader and keyboard support
📱 Mobile Experience - Improved responsive design
🔧 Developer Experience - Better tooling and documentation

Code Style Guide

Use TypeScript with strict type checking
Follow shadcn/ui component patterns
Implement responsive design (mobile-first approach)
Add proper error boundaries and loading states
Include JSDoc comments for complex functions

🎉 System Overview

Built with Next.js 15, TypeScript, Tailwind CSS, and shadcn/ui ⚡

This dashboard provides a comprehensive interface for managing the CI/CD Fixer Agent system, featuring:

Real-time monitoring of 29 processed failures across 20+ repositories
AI-powered analysis using Google Gemini 2.5 Pro with confidence scoring
Human oversight workflows for quality control and learning improvement
Advanced analytics with ML-driven pattern recognition and predictions
Production-ready deployment with full backend integration

Live Production System: https://ci-cd-fixer-agent-backend.onrender.com

Experience the future of CI/CD failure management with AI-powered intelligence and human expertise combined.

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
app		app
components		components
hooks		hooks
lib		lib
public		public
.gitignore		.gitignore
API_DOCS_SUMMARY.md		API_DOCS_SUMMARY.md
API_REFERENCE.md		API_REFERENCE.md
README.md		README.md
ci_cd_fixer_agent_gemini_portia.md		ci_cd_fixer_agent_gemini_portia.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🤖 CI/CD Agent

📊 Current Production Metrics

📊 Current Production Metrics

🌟 Live Production System

📊 Current Production Metrics

🎯 What This Dashboard Provides

🏗️ Architecture & Integration

Backend Integration

System Components

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Development Setup

Environment Variables

Available Scripts

📱 Dashboard Pages & Features

🏠 Landing Page (/)

📊 Dashboard (/dashboard)

🔍 Failures Management (/failures)

✅ Fix Management (/fixes)

� Analytics Dashboard (/analytics)

🏢 Repository Management (/repository)

🎨 Component Architecture

Core UI Components (shadcn/ui based)

API Integration & State Management

Page Structure (Next.js App Router)

🔗 API Integration Examples

Real-time Data Fetching

Human-in-the-Loop Fix Approval

Real-time Analytics Integration

📊 Real-time Features & Performance

Live Data Updates

Performance Optimizations

Production Metrics (Current Live Data)

🎯 Development Guidelines

Code Quality Standards

Performance Best Practices

Accessibility Standards

🚀 Deployment

Vercel (Recommended)

Alternative Deployments

Production Environment Variables

📈 Current Production Status

Live System Metrics (August 2025)

AI Analysis Performance

Human-in-the-Loop Quality

🔧 Available Scripts

📚 Documentation & Resources

Project Documentation

Technology Documentation

AI Integration Resources

🤝 Contributing

Development Workflow

Contribution Areas

Code Style Guide

🎉 System Overview

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

🏠 Landing Page (`/`)

📊 Dashboard (`/dashboard`)

🔍 Failures Management (`/failures`)

✅ Fix Management (`/fixes`)

� Analytics Dashboard (`/analytics`)

🏢 Repository Management (`/repository`)

Packages