You are an expert AI assistant tasked with building a single-page Single Page Application (SPA) for 'Kod Doğrulama Pusulası' (Code Verification Compass). This application aims to automatically verify the correctness and adherence to requirements of AI-generated code, addressing the problem of trusting code produced by autonomous agents that developers cannot fully review.
**1. PROJECT OVERVIEW:**
Kod Doğrulama Pusulası is a SaaS platform designed to bridge the trust gap in AI-assisted software development. As AI agents generate code increasingly autonomously, manual code reviews become a bottleneck, and verifying the actual correctness of the generated code against original requirements becomes challenging. This tool automates the verification process by analyzing AI-generated code changes, generating relevant test cases, executing tests, and providing clear validation reports. It ensures that AI-generated code is not only functional but also meets the intended specifications, saving development teams time and reducing the risk of deploying faulty code.
**2. TECH STACK:**
- **Frontend Framework:** React.js
- **UI Library/Framework:** Tailwind CSS for rapid, utility-first styling.
- **State Management:** Zustand for efficient and scalable state management.
- **Routing:** React Router DOM for client-side routing.
- **API Interaction:** Axios for making HTTP requests to a potential backend (even if mock for MVP).
- **Build Tool:** Vite for fast development and optimized builds.
- **Testing (for frontend components):** Jest and React Testing Library.
- **Icons:** Heroicons or similar for a clean, modern look.
- **Form Handling:** React Hook Form for efficient form management (if forms are needed).
**3. CORE FEATURES & USER FLOWS:**
* **Repository Integration:**
* **User Flow:** User navigates to the 'Settings' or 'Integrations' page. Selects their Git provider (GitHub, GitLab, Bitbucket). Authenticates using OAuth or personal access tokens. Grants necessary permissions (read repositories, pull code, create webhooks).
* **Description:** Securely connects the platform to the user's version control system. This allows the application to fetch pull requests and associated code changes automatically.
* **Pull Request Monitoring:**
* **User Flow:** Once integrated, the platform automatically detects new pull requests targeting specified branches (e.g., `main`, `develop`). A dashboard displays a list of monitored PRs with their status (Pending, Verifying, Verified, Failed).
* **Description:** The system continuously monitors for new code changes submitted via pull requests. It acts as a webhook listener or periodically polls the Git API.
* **AI Code Analysis & Test Generation:**
* **User Flow:** Upon detecting a new PR, the system fetches the code diff. It analyzes the changes using a simulated AI reviewer (or placeholder logic for MVP) to understand the intended functionality. Based on this analysis and potentially a comparison with existing test suites or requirements, it generates new, targeted test cases.
* **Description:** This is the core intelligence. For the MVP, this might involve static analysis of diffs and using prompts to generate `jest` or `Vitest` compatible test snippets. The goal is to create tests that validate the *specific changes* made by the AI, not just general functionality.
* **Automated Test Execution:**
* **User Flow:** The generated test cases are executed in a sandboxed environment (simulated for MVP). The system captures the test results (pass/fail, error messages, coverage metrics if possible).
* **Description:** This step rigorously tests the AI-generated code. It simulates running the code with the new tests to catch regressions and logical errors introduced by the AI.
* **Verification Report Generation:**
* **User Flow:** After test execution, a detailed report is generated. This report includes a summary of the analysis, the generated test cases, execution results, any identified issues or deviations from expected behavior, and an overall 'Verification Status' (e.g., Verified, Needs Review, Failed).
* **Description:** Provides clear, actionable feedback to the developer. This report is crucial for building trust and making informed decisions about merging the code.
* **Dashboard & History:**
* **User Flow:** Users can view a dashboard summarizing the verification status of all recent PRs across their connected repositories. They can click on a PR to view its detailed verification report and historical data.
* **Description:** Offers a centralized view of code verification efforts, providing transparency and tracking over time.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application with a persistent navigation sidebar (left). Main content area displays dashboard, settings, or detailed reports. Clean, minimalist aesthetic.
* **Color Palette:** Primary: Dark blue (`#1E3A8A`). Secondary: Teal (`#14B8A6`). Accent: Light gray (`#E5E7EB`). Text: Dark gray (`#374151`) and white (`#FFFFFF`) for contrast. Status Indicators: Green (`#22C55E`) for success, Red (`#EF4444`) for failure, Yellow (`#F59E0B`) for pending/verifying.
* **Typography:** Sans-serif font like Inter or Manrope for readability. Clear hierarchy using font sizes and weights.
* **Component Structure:** Sidebar, Header (App Title, User Profile), Dashboard (PR List, Status Summary Cards), Repository Settings (Integration Form, List of Connected Repos), Verification Report Detail (Diff Viewer, Test Results, Summary).
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Content sections adjust fluidly. Ensure usability on various screen sizes (320px - 1920px+).
* **Interactions:** Subtle hover effects on buttons and list items. Smooth transitions for route changes and modal appearances. Loading spinners/skeletons for asynchronous operations.
**5. COMPONENT BREAKDOWN:**
* **`App.jsx`:** Main application component. Sets up routing, global layout.
* `layout/MainLayout.jsx`:
* `components/Sidebar.jsx`: Navigation links (Dashboard, Settings). Receives `activeLink` prop.
* `components/Header.jsx`: App title, user info, possibly a refresh button.
* `pages/DashboardPage.jsx`:
* `components/PRList.jsx`: Renders a list of PRs. Receives `prs` data array.
* `components/PRListItem.jsx`: Displays a single PR summary (title, status, author, date). Receives `pr` object. Uses `StatusBadge` component.
* `components/StatsSummary.jsx`: Cards showing total PRs, verified, failed counts. Receives `stats` object.
* `pages/SettingsPage.jsx`:
* `components/IntegrationForm.jsx`: Form for connecting Git repositories (e.g., input for repo URL, token). Receives `onSubmit` handler.
* `components/ConnectedReposList.jsx`: Lists currently connected repositories. Receives `repos` array and `onRemove` handler.
* `pages/ReportDetailPage.jsx`:
* `components/DiffViewer.jsx`: Displays code changes (simulated or placeholder). Receives `diff` string.
* `components/TestResults.jsx`: Shows detailed test outcomes. Receives `testResults` array.
* `components/VerificationSummary.jsx`: Overall verdict and key findings. Receives `summary` object.
* **`utils/api.js`:** Axios instance and helper functions for API calls.
* **`store/index.js` (Zustand):** Global state management for PR data, settings, auth status.
**6. DATA MODEL:**
* **`pr` object:**
```json
{
"id": "pr-123",
"repoName": "awesome-project",
"title": "feat: Add user authentication module",
"author": "ai-agent-bot",
"createdAt": "2024-03-15T10:30:00Z",
"status": "Verified" // "Pending", "Verifying", "Verified", "Failed", "Error"
}
```
* **`report` object:**
```json
{
"prId": "pr-123",
"analysisSummary": "Code appears to meet basic requirements, but potential edge case uncovered in validation.",
"generatedTests": [
{
"description": "Test login with invalid credentials",
"code": "test('should reject invalid credentials', async () => { await expect(login('wrong', 'pass')).rejects.toThrow(); });"
}
],
"testResults": {
"total": 5,
"passed": 4,
"failed": 1,
"errors": [
{
"testDescription": "Test login with invalid credentials",
"errorMessage": "Error: Expected promise to reject but it did not."
}
]
},
"verificationStatus": "Needs Review", // "Verified", "Needs Review", "Failed"
"reviewUrl": "/reports/pr-123"
}
```
* **`repo` object:**
```json
{
"id": "repo-abc",
"name": "awesome-project",
"url": "https://github.com/user/awesome-project",
"provider": "GitHub",
"connectedAt": "2024-03-15T09:00:00Z"
}
```
* **State Structure (Zustand):**
```javascript
{
prs: [], // Array of pr objects
connectedRepos: [], // Array of repo objects
currentReport: null, // The report for the currently viewed PR
auth: { isAuthenticated: false, user: null },
isLoading: false,
error: null
}
```
**7. ANIMATIONS & INTERACTIONS:**
* **Sidebar Toggle:** Smooth slide-in/out animation when collapsing/expanding on smaller screens.
* **Route Transitions:** Fade-in/out effect between page views using `Framer Motion` or CSS transitions.
* **Button Hover:** Subtle scale-up or background color change on interactive elements.
* **List Item Hover:** Slight background highlight or border effect on PR list items.
* **Loading States:** Skeleton loaders or spinners while fetching data (PR list, report details). Use placeholder components that mimic the final structure.
* **Status Badge Animation:** A slight pulse or color transition when the status updates.
* **Form Feedback:** Subtle animations for input validation success/error states.
**8. EDGE CASES:**
* **No Connected Repositories:** Display a clear call-to-action on the dashboard and settings page, guiding the user to connect a repository.
* **No Pull Requests:** The PR list should display an empty state message (e.g., "No active pull requests to display.").
* **API Errors:** Gracefully handle network errors or API failures. Display user-friendly error messages (e.g., "Failed to fetch pull requests. Please try again later.") and provide retry mechanisms.
* **Authentication Errors:** If the Git provider connection expires or is revoked, clearly inform the user in the settings and prompt for re-authentication.
* **Code Analysis Failure:** If the AI analysis or test generation fails for a specific PR, mark the status as 'Error' and provide details in the report.
* **Empty Diffs:** Handle cases where a PR has no code changes (e.g., only documentation updates).
* **Accessibility (a11y):** Ensure proper ARIA attributes, keyboard navigation support, sufficient color contrast, and semantic HTML structure.
* **Validation:** Client-side and server-side validation for all user inputs (e.g., repository URLs, tokens).
**9. SAMPLE DATA:**
* **PR List (`prs` state):**
```json
[
{
"id": "pr-101",
"repoName": "ai-code-verifier",
"title": "chore: Update dependencies",
"author": "dependabot",
"createdAt": "2024-03-14T08:00:00Z",
"status": "Verified"
},
{
"id": "pr-102",
"repoName": "ai-code-verifier",
"title": "fix: Resolve null pointer exception in auth service",
"author": "claude-bot",
"createdAt": "2024-03-15T09:15:00Z",
"status": "Verifying"
},
{
"id": "pr-103",
"repoName": "data-pipeline",
"title": "feat: Implement new data transformation logic",
"author": "custom-agent-v2",
"createdAt": "2024-03-15T11:05:00Z",
"status": "Failed"
}
]
```
* **Single PR for Detail View (`currentReport` state):
```json
{
"prId": "pr-102",
"analysisSummary": "AI-generated fix for null pointer exception appears sound. Added tests cover primary success and failure paths. Potential for race condition not addressed.",
"generatedTests": [
{
"description": "Test successful login after auth fix",
"code": "test('should allow login after fix', async () => { const result = await login('user', 'pass'); expect(result.success).toBe(true); });"
},
{
"description": "Test login throws error if service unavailable",
"code": "test('should throw error if service down', async () => { mockAuthService.isAvailable.mockReturnValue(false); await expect(login('user', 'pass')).rejects.toThrow('Service unavailable'); });"
}
],
"testResults": {
"total": 2,
"passed": 1,
"failed": 1,
"errors": [
{
"testDescription": "Test login throws error if service unavailable",
"errorMessage": "Error: Timeout - Async function did not settle."
}
]
},
"verificationStatus": "Needs Review",
"reviewUrl": "/reports/pr-102"
}
```
* **Connected Repos (`connectedRepos` state):**
```json
[
{
"id": "repo-xyz",
"name": "ai-code-verifier",
"url": "https://github.com/your-org/ai-code-verifier",
"provider": "GitHub",
"connectedAt": "2024-03-10T14:20:00Z"
}
]
```
**10. DEPLOYMENT NOTES:**
* **Build Configuration:** Use Vite's production build (`vite build`). Ensure environment variables are correctly injected.
* **Environment Variables:** Use `.env` files (e.g., `.env.local`) for managing API keys, base URLs, and feature flags. Prefix variables with `VITE_` for Vite to recognize them (e.g., `VITE_API_BASE_URL`).
* **Performance Optimizations:**
* Code Splitting: Vite handles this automatically to some extent. Ensure large components or unused libraries are not bundled unnecessarily.
* Lazy Loading: Use `React.lazy` and `Suspense` for page components and computationally intensive components.
* Memoization: Use `React.memo`, `useMemo`, and `useCallback` judiciously to prevent unnecessary re-renders.
* Image Optimization: If images are used, optimize them for web delivery.
* **Static Hosting:** The SPA can be easily deployed to static hosting services like Netlify, Vercel, or GitHub Pages.
* **CI/CD:** Set up a CI/CD pipeline to automate testing and deployment upon merging to the main branch.
* **Error Monitoring:** Integrate a service like Sentry for real-time error tracking in production.