You are an expert AI assistant tasked with generating a comprehensive, single-page Server-Side Rendering (SSR) application using Next.js and Tailwind CSS. This application, named 'SourceGuard', aims to address the growing concerns around code provenance and the integration of AI-generated code in software development, inspired by the challenges highlighted by platforms like Hacker News regarding policies like Redox OS's Certificate of Origin and no-LLM rules.
**1. PROJECT OVERVIEW:**
The 'SourceGuard' application will provide developers and organizations with a robust platform to verify the origin of their codebase and identify potential AI-generated content. It aims to enhance code integrity, ensure license compliance, and bolster security by offering transparency into the development process. The core value proposition is to provide peace of mind and a verifiable audit trail for software assets, mitigating risks associated with untrusted code sources and AI-generated contributions.
**2. TECH STACK:**
- **Framework:** Next.js (SSR and API Routes)
- **Styling:** Tailwind CSS (with Headless UI for accessible components)
- **State Management:** Zustand (lightweight and efficient for global state)
- **Data Fetching:** Next.js built-in fetch API / React Query for more complex caching and background updates if needed.
- **UI Components:** Headless UI for accessible, unstyled components, allowing full Tailwind customization.
- **Icons:** Heroicons
- **Form Handling:** React Hook Form with Zod for validation.
- **Deployment:** Vercel (recommended for Next.js)
**3. CORE FEATURES:**
* **Code Repository Integration:**
* **User Flow:** Users authenticate via GitHub (OAuth). They can then select one or more repositories to analyze. The system will automatically fetch the latest commit or allow manual triggering of analysis.
* **Functionality:** Connects to GitHub API to list user's repositories and initiate analysis. Handles repository cloning (or uses GitHub API for file content) for scanning.
* **Origin Verification (Certificate of Origin Simulation):**
* **User Flow:** After selecting a repository, the user can view a dashboard showing the provenance of the code. For each file, it attempts to identify the primary author or source based on commit history and configured rules (e.g., linking commits to registered developers).
* **Functionality:** Parses Git history to attribute files to authors. Implements a configurable policy (e.g., 'all code must be attributed to registered developers or explicitly marked AI'). This feature simulates a 'Certificate of Origin' by providing a structured report of code authorship.
* **AI-Generated Code Detection:**
* **User Flow:** During analysis, the system highlights files or code blocks that exhibit characteristics of AI generation (e.g., unusual variable naming, repetitive patterns, overly generic comments, lack of typical developer idiosyncrasies). A confidence score for AI detection is displayed.
* **Functionality:** Utilizes a combination of pattern matching, statistical analysis, and potentially a lightweight, on-device or server-side model (if feasible within scope, otherwise relies on heuristic analysis) to flag suspicious code sections. This is a heuristic-based detection for the MVP.
* **Dependency Analysis & License Compliance:**
* **User Flow:** Scans dependency files (e.g., `package.json`, `requirements.txt`) and fetches license information for each dependency. Presents a clear report of all licenses, highlighting any potential conflicts or non-compliant licenses based on user-defined policies.
* **Functionality:** Parses dependency manifests. Uses a service or local database (for MVP, a hardcoded list of common licenses and their types) to map dependency packages to their licenses. Implements rules to flag GPL violations if used in a proprietary context, etc.
* **Security Vulnerability Scanning (Basic):**
* **User Flow:** Integrates with a vulnerability database (e.g., using APIs like Snyk's or a simplified local check against common CVEs for critical dependencies). Reports known vulnerabilities associated with the project's dependencies.
* **Functionality:** Fetches dependency list and queries a vulnerability database. Flags high-severity issues.
**4. UI/UX DESIGN:**
* **Layout:** Single-page application feel. A main navigation sidebar (collapsible) for switching between Dashboard, Repositories, Analysis Reports, Settings. The central area displays the main content.
* **Color Palette:** Primary: Dark `#1a202c` (background), Secondary: `#4a5568` (accents, sidebar), Accent: `#3182ce` (buttons, links, highlights), Secondary Accent: `#63b3ed` (hover states, secondary info). White/Light Gray `#f7fafc` for text and cards.
* **Typography:** Inter font family. Headings: `font-bold text-2xl/3xl`, Body: `text-base leading-relaxed`.
* **Components:** Clean, modern, and focused. Use cards for displaying information chunks. Minimalistic icons. Clear calls to action.
* **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on small screens. Content reflows into a single column. All elements must be usable on screens down to 360px width.
* **Interactions:** Subtle hover effects on interactive elements. Smooth transitions for panel expansions/collapses and route changes.
**5. DATA MODEL:**
* **User:** `{ id: string, name: string, githubUsername: string, accessToken: string, settings: object }`
* **Repository:** `{ id: string, name: string, owner: string, url: string, lastAnalysis: Date | null, status: 'idle' | 'analyzing' | 'completed' | 'failed' }`
* **AnalysisReport:** `{ id: string, repoId: string, analysisDate: Date, originSummary: { attributed: number, unattributed: number, aiDetected: number, needsReview: number }, detectedAiSections: Array<{ filePath: string, lineStart: number, lineEnd: number, confidence: number }>, dependencies: Array<{ name: string, version: string, license: string, licenseStatus: 'compliant' | 'non-compliant' | 'unknown' }>, vulnerabilities: Array<{ dependency: string, severity: 'low' | 'medium' | 'high' | 'critical', cve: string | null }>, overallStatus: 'success' | 'warning' | 'error' }`
* **State Management (Zustand):**
* `authStore`: Handles user authentication state, GitHub token.
* `repoStore`: Manages the list of connected repositories, their statuses, and fetched analysis reports.
* `analysisStore`: Holds the state for the current analysis in progress, progress updates.
* **Local Storage:** Store user preferences, theme settings, potentially `accessToken` (with appropriate security considerations).
**6. COMPONENT BREAKDOWN:**
* **`Layout.js`:** Main application layout component. Includes Header, Sidebar, and Main Content area. Handles responsiveness.
* Props: `children`
* **`Header.js`:** Top navigation bar. Includes Logo, User Profile/Login button.
* Props: `user`
* **`Sidebar.js`:** Navigation menu. Links to different sections.
* Props: `isOpen`, `onClose`
* **`AuthButton.js`:** Handles GitHub OAuth login/logout.
* Props: None (uses context/store)
* **`RepoList.js`:** Displays a list of connected GitHub repositories.
* Props: `repositories`, `onAnalyzeClick`
* **`RepoListItem.js`:** Individual repository item in the list.
* Props: `repo`, `status`, `onAnalyzeClick`
* **`AnalysisDashboard.js`:** Main view displaying the summary of an analysis report.
* Props: `report`
* **`OriginSummaryCard.js`:** Card showing the breakdown of code origin attribution.
* Props: `summary`
* **`AiDetectionCard.js`:** Card highlighting AI detection results.
* Props: `aiSections`, `confidenceThreshold`
* **`DependencyTable.js`:** Table displaying analyzed dependencies and their licenses.
* Props: `dependencies`
* **`VulnerabilityAlerts.js`:** Component to display security vulnerabilities.
* Props: `vulnerabilities`
* **`LoadingSpinner.js`:** Reusable loading indicator.
* Props: `message`
* **`ErrorMessage.js`:** Reusable error display component.
* Props: `message`
* **`CodeViewer.js`:** (Future enhancement) Displays code snippets with highlighting for AI/origin issues.
* Props: `filePath`, `codeBlock`, `issueType`
**7. ANIMATIONS & INTERACTIONS:**
* **Hover Effects:** Subtle background color change and slight scale-up on buttons and list items. Icons might slightly rotate or change color.
* **Transitions:** Smooth fades for modal popups, sidebar opening/closing. Page transitions using `AnimatePresence` from `framer-motion` if more complex animations are desired later.
* **Loading States:** Use `LoadingSpinner` component. For list items being analyzed, show a subtle pulsing animation or a progress bar.
* **Micro-interactions:** Button click feedback (slight press effect). Success/error toast notifications using a library like `react-toastify`.
**8. EDGE CASES:**
* **No Repositories Connected:** Display a clear message and a button to connect GitHub.
* **Analysis Failed:** Show an informative error message on the report page, with details if available. Provide a 'Retry' option.
* **Empty State for Reports:** If a repo has no analysis yet, show placeholder text.
* **Rate Limiting:** Implement exponential backoff for GitHub API calls to respect rate limits. Handle 429 errors gracefully.
* **Validation:** Use React Hook Form and Zod for validating user inputs (e.g., in settings, if any are added).
* **Accessibility (a11y):** Ensure all interactive elements are keyboard-navigable. Use ARIA attributes where necessary. Ensure sufficient color contrast. Use semantic HTML5 tags. Headless UI components provide a good baseline.
**9. SAMPLE DATA:**
* **User Object:**
```json
{
"id": "user_123",
"name": "Jane Doe",
"githubUsername": "janedoe",
"accessToken": "gho_...",
"settings": {"theme": "dark"}
}
```
* **Repository Object:**
```json
{
"id": "repo_abc",
"name": "awesome-project",
"owner": "janedoe",
"url": "https://github.com/janedoe/awesome-project",
"lastAnalysis": "2023-10-27T10:00:00Z",
"status": "completed"
}
```
* **Analysis Report Object (Simplified):**
```json
{
"id": "report_xyz",
"repoId": "repo_abc",
"analysisDate": "2023-10-27T10:00:00Z",
"originSummary": {
"attributed": 85,
"unattributed": 10,
"aiDetected": 5,
"needsReview": 15
},
"detectedAiSections": [
{
"filePath": "src/utils/helpers.js",
"lineStart": 50,
"lineEnd": 75,
"confidence": 0.85
}
],
"dependencies": [
{
"name": "react",
"version": "18.2.0",
"license": "MIT",
"licenseStatus": "compliant"
},
{
"name": "lodash",
"version": "4.17.21",
"license": "MIT",
"licenseStatus": "compliant"
}
],
"vulnerabilities": [
{
"dependency": "old-package",
"severity": "high",
"cve": "CVE-2023-XXXX"
}
],
"overallStatus": "warning"
}
```
* **Mock Repository List:**
```json
[
{ "id": "repo_1", "name": "Project Alpha", "owner": "org_a", "url": "...", "lastAnalysis": null, "status": "idle" },
{ "id": "repo_2", "name": "Project Beta", "owner": "org_b", "url": "...", "lastAnalysis": "2023-10-26T12:00:00Z", "status": "completed" },
{ "id": "repo_3", "name": "AI-Experiment", "owner": "org_a", "url": "...", "lastAnalysis": null, "status": "analyzing" }
]
```
* **Mock Analysis Report (AI Focused):**
```json
{
"id": "report_ai_test",
"repoId": "repo_3",
"analysisDate": "2023-10-27T11:30:00Z",
"originSummary": {"attributed": 60, "unattributed": 5, "aiDetected": 35, "needsReview": 40},
"detectedAiSections": [
{"filePath": "src/models/transformer.py", "lineStart": 10, "lineEnd": 150, "confidence": 0.92},
{"filePath": "scripts/generate_data.py", "lineStart": 1, "lineEnd": 30, "confidence": 0.78}
],
"dependencies": [...],
"vulnerabilities": [],
"overallStatus": "error"
}
```
**10. DEPLOYMENT NOTES:**
* **Environment Variables:** Use `.env.local` for local development (e.g., `GITHUB_CLIENT_ID`, `GITHUB_CLIENT_SECRET`). Production deployment (e.g., on Vercel) will require setting these in the platform's environment settings.
* **Build:** Standard Next.js build process (`npm run build` or `yarn build`). Ensure environment variables are available during the build.
* **SSR:** Leverage Next.js SSR for initial page loads to improve SEO and performance. API routes (`pages/api/`) will handle GitHub authentication and analysis triggering.
* **Performance:** Optimize image loading if any are introduced. Code splitting will be handled by Next.js. Minimize bundle size. Consider serverless functions for analysis tasks if they become resource-intensive, potentially offloading to a separate service.
* **Security:** Securely handle GitHub OAuth tokens. Do not commit sensitive keys to the repository. Use environment variables exclusively for secrets.
* **Error Handling:** Implement robust error handling across all API routes and client-side fetches. Provide user-friendly feedback.
* **Scalability:** For large-scale analysis, consider using a job queue system and dedicated worker instances instead of direct API route processing.