Major upgrade: comprehensive code analysis with security, performance, clean code scoring, and test suggestions

backend/public/assets/index-BFNcLyEY.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background:#0d1117;color:#c9d1d9;min-height:100vh}.app{max-width:900px;margin:0 auto;padding:2rem 1rem}h1{text-align:center;font-size:2.5rem;margin-bottom:.5rem}h1 span{background:linear-gradient(135deg,#f97316,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{text-align:center;color:#8b949e;margin-bottom:2rem;font-style:italic}.editor-section{background:#161b22;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid #30363d}.editor-section label{display:block;margin-bottom:.5rem;color:#8b949e}.editor-section select{padding:.5rem;border-radius:6px;border:1px solid #30363d;background:#0d1117;color:#c9d1d9;margin-bottom:1rem}.code-input{width:100%;min-height:200px;padding:1rem;border:1px solid #30363d;border-radius:8px;background:#0d1117;color:#79c0ff;font-family:Courier New,monospace;font-size:.9rem;resize:vertical;-moz-tab-size:2;tab-size:2}.btn{width:100%;padding:1rem;border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-family:inherit;transition:transform .2s}.btn:hover{transform:scale(1.02)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading{text-align:center;padding:3rem}.loading .spinner{width:50px;height:50px;border:4px solid #30363d;border-top-color:#f97316;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.results{margin-top:2rem}.roast-card{background:#161b22;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;border:1px solid #30363d}.opening-roast{font-size:1.2rem;color:#f97316;font-style:italic;text-align:center;padding:1.5rem;background:linear-gradient(135deg,#161b22,#1c1206);border-radius:12px;border:1px solid #f97316;margin-bottom:1.5rem}.tab-nav{display:flex;gap:.3rem;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:.5rem;border-bottom:1px solid #30363d}.tab-btn{padding:.5rem 1rem;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:transparent;color:#8b949e;font-family:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .2s}.tab-btn:hover{color:#c9d1d9;background:#161b22}.tab-btn.active{color:#f97316;background:#161b22;border-color:#30363d;border-bottom:2px solid #f97316;font-weight:700}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.score-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:1.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-big{font-size:3.5rem;font-weight:700;color:#f97316;line-height:1}.hire-badge{display:inline-block;padding:.4rem 1.2rem;border-radius:20px;font-weight:700;font-size:.9rem}.hire-badge.yes{background:#238636;color:#fff}.hire-badge.maybe{background:#9e6a03;color:#fff}.hire-badge.no{background:#da3633;color:#fff}.issue-card{background:#0d1117;border-radius:8px;padding:1rem;margin-bottom:.8rem;border-left:3px solid #f97316}.issue-card .roast-text{color:#f97316;font-style:italic;margin-bottom:.5rem}.issue-card .fix-text{color:#7ee787}.vuln-card{background:#0d1117;border-radius:8px;padding:1rem;margin-bottom:.8rem;border-left:3px solid #da3633}.complexity-badge{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:.5rem 1rem;text-align:center}.test-card{background:#0d1117;border-radius:8px;padding:1rem;margin-bottom:.8rem;border-left:3px solid #388bfd}.test-type{display:inline-block;padding:.15rem .6rem;border-radius:10px;font-size:.75rem;font-weight:700;text-transform:uppercase}.test-unit{background:#238636;color:#fff}.test-integration{background:#9e6a03;color:#fff}.test-edge-case{background:#388bfd;color:#fff}.tag{display:inline-block;padding:.2rem .6rem;border-radius:12px;background:#30363d;color:#8b949e;font-size:.8rem;margin:.2rem}.tag-warn{background:#3d2e00;color:#d29922;border:1px solid #9e6a03}.tag-error{background:#3d0000;color:#f85149;border:1px solid #da3633}.rewritten-code{background:#0d1117;border:1px solid #238636;border-radius:8px;padding:1rem;overflow-x:auto;white-space:pre-wrap;color:#7ee787;font-size:.85rem;max-height:500px;overflow-y:auto}.section-title{color:#f97316;margin-bottom:.8rem;font-size:1.1rem;font-weight:700}.closing-roast{font-size:1.1rem;color:#ef4444;font-style:italic;text-align:center;padding:1.5rem;margin:1.5rem 0;background:linear-gradient(135deg,#161b22,#1c0606);border-radius:12px;border:1px solid #ef4444}.back-btn{background:#30363d;margin-top:1rem}.back-btn:hover{background:#484f58}@media(max-width:768px){h1{font-size:1.8rem}.score-big{font-size:2.5rem}.score-grid{grid-template-columns:1fr}.tab-nav{gap:.2rem}.tab-btn{padding:.4rem .6rem;font-size:.75rem}.roast-card{padding:1rem}}

backend/public/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Code Roast Battle</title>  <script type="module" crossorigin src="/assets/index-D1n-RmpM.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-BFNcLyEY.css">
+</head>
+<body><div id="root"></div></body>
+</html>

backend/services/ai.js

@@ -8,7 +8,7 @@ async function callAI(prompt) {
     const res = await fetch('https://api.groq.com/openai/v1/chat/completions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_API_KEY}` },
-      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.8 }),
+      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.8, max_tokens: 4096 }),
     });
     if (res.ok) { const data = await res.json(); return data.choices[0].message.content; }
     console.warn('Groq failed, falling back to Ollama...');
@@ -24,35 +24,104 @@ async function callAI(prompt) {
 
 function parseJSON(text) {
   try { return JSON.parse(text.trim()); }
-  catch { const m = text.match(/\{[\s\S]*\}/); if (m) return JSON.parse(m[0]); throw new Error('Failed to parse AI response'); }
+  catch {
+    const m = text.match(/\{[\s\S]*\}/);
+    if (m) return JSON.parse(m[0]);
+    throw new Error('Failed to parse AI response');
+  }
 }
-
 async function roastCode(code, language) {
-  const text = await callAI(`You are "Chef CodeRamsay" - a Gordon Ramsay-style code reviewer. You roast bad code with sharp wit, creative insults, and dramatic reactions. But you ALSO provide genuinely helpful advice.
+  const prompt = `You are "Chef CodeRamsay" - a Gordon Ramsay-style code reviewer who is also a world-class security researcher, performance engineer, and clean-code evangelist. You roast bad code with sharp wit, creative insults, and dramatic reactions. But you ALSO provide deep, genuinely expert-level analysis.
 
-LANGUAGE: ${language || 'auto-detect'}
-CODE:
+LANGUAGE: ${language || "auto-detect"}
+CODE TO REVIEW:
 \`\`\`
 ${code}
 \`\`\`
 
-Return ONLY valid JSON:
+Perform a COMPREHENSIVE code review covering ALL of these areas:
+
+1. SECURITY VULNERABILITIES: Check for SQL injection, XSS, CSRF, hardcoded secrets/API keys, insecure deserialization, path traversal, command injection, insecure random, missing input validation, and any OWASP Top 10 issues.
+
+2. PERFORMANCE ANALYSIS: Evaluate time complexity (Big O), memory usage, unnecessary loops or re-renders, N+1 queries, inefficient data structures, missing caching opportunities, blocking operations.
+
+3. BEST PRACTICES PER LANGUAGE: Evaluate naming conventions, error handling patterns, proper use of language idioms, type safety, documentation, consistent style, SOLID principles adherence.
+
+4. CODE SMELLS with severity: Identify code smells like long methods, god classes, magic numbers, deep nesting, code duplication, feature envy, shotgun surgery, etc. Rate each as info/warning/critical.
+
+5. CLEAN CODE SCORE: Rate based on Robert C. Martin Clean Code principles - meaningful names, small functions, single responsibility, DRY, no side effects, command-query separation, etc. Score 0-100.
+
+6. MAINTAINABILITY INDEX: Score 0-100 based on cyclomatic complexity, lines of code, coupling, cohesion, and readability.
+
+7. TEST COVERAGE SUGGESTIONS: What unit tests, integration tests, and edge case tests should be written for this code?
+
+8. DEPENDENCY/IMPORT ANALYSIS: Are imports used? Are there missing imports? Are there better alternatives to current dependencies? Any circular dependencies?
+
+9. OVERALL LETTER GRADE: Rate A+ through F with justification.
+Return ONLY valid JSON (no markdown, no backticks):
 {
   "language": "<detected language>",
   "overallScore": <1-100>,
+  "letterGrade": "<A+|A|A-|B+|B|B-|C+|C|C-|D+|D|D-|F>",
   "roastLevel": "<raw|medium-rare|well-done|burnt-to-a-crisp>",
-  "openingRoast": "<A 2-3 sentence Gordon Ramsay style opening roast of this code. Be dramatic and funny.>",
+  "openingRoast": "<A 2-3 sentence Gordon Ramsay style opening roast. Be dramatic, creative, and funny.>",
+  "securityAnalysis": {
+    "score": <0-100>,
+    "vulnerabilities": [
+      {"type": "<e.g. SQL Injection, XSS, Hardcoded Secret>", "severity": "<critical|high|medium|low>", "description": "<what the vulnerability is>", "location": "<line or section>", "fix": "<how to fix it>", "roast": "<Gordon Ramsay comment about this security flaw>"}
+    ],
+    "summary": "<1-2 sentence security summary>"
+  },
+  "performanceAnalysis": {
+    "score": <0-100>,
+    "timeComplexity": "<e.g. O(n^2)>",
+    "spaceComplexity": "<e.g. O(n)>",
+    "issues": [
+      {"issue": "<performance problem>", "impact": "<high|medium|low>", "suggestion": "<how to optimize>"}
+    ],
+    "summary": "<1-2 sentence performance summary>"
+  },
+  "bestPractices": {
+    "score": <0-100>,
+    "violations": [
+      {"practice": "<what best practice is violated>", "severity": "<critical|warning|info>", "description": "<details>", "fix": "<recommendation>"}
+    ]
+  },
+  "codeSmells": [
+    {"smell": "<name of code smell>", "severity": "<critical|warning|info>", "location": "<where>", "description": "<why it smells>"}
+  ],
+  "cleanCodeScore": <0-100>,
+  "cleanCodeBreakdown": {
+    "meaningfulNames": <0-10>,
+    "smallFunctions": <0-10>,
+    "singleResponsibility": <0-10>,
+    "dryPrinciple": <0-10>,
+    "errorHandling": <0-10>,
+    "readability": <0-10>,
+    "formatting": <0-10>,
+    "comments": <0-10>,
+    "noSideEffects": <0-10>,
+    "testability": <0-10>
+  },
+  "maintainabilityIndex": <0-100>,
+  "testSuggestions": [
+    {"type": "<unit|integration|edge-case>", "description": "<what test to write>", "priority": "<high|medium|low>"}
+  ],
+  "dependencyAnalysis": {
+    "unusedImports": ["<unused import 1>"],
+    "missingImports": ["<missing import 1>"],
+    "suggestions": ["<suggestion about dependencies>"]
+  },
   "issues": [
     {"line": "<line or section>", "roast": "<funny roast of this issue>", "fix": "<actual helpful fix>", "severity": "<mild|spicy|nuclear>"}
   ],
-  "codeSmells": ["<smell 1>", "<smell 2>", "<smell 3>"],
-  "bestPracticeViolations": ["<violation 1>", "<violation 2>"],
-  "rewrittenCode": "<the entire code rewritten properly with best practices>",
+  "rewrittenCode": "<the entire code rewritten properly with best practices, security fixes, and performance optimizations>",
   "closingRoast": "<A final dramatic one-liner, Gordon Ramsay style>",
   "wouldHire": "<YES|MAYBE|GET OUT OF MY KITCHEN>"
 }
 
-Return ONLY JSON, no markdown.`);
+IMPORTANT: Return ONLY the JSON object. No markdown formatting, no backticks, no explanation outside the JSON.`;
+  const text = await callAI(prompt);
   return parseJSON(text);
 }
 

frontend/src/App.jsx

@@ -3,19 +3,64 @@ import { roastCode } from './utils/api';
 
 const LANGUAGES = ['Auto-detect', 'JavaScript', 'Python', 'TypeScript', 'Java', 'C++', 'Go', 'Rust', 'PHP', 'Ruby', 'CSS', 'HTML', 'SQL', 'Other'];
 
+function ScoreBar({ label, value, max = 100 }) {
+  const pct = Math.round((Number(value) / max) * 100);
+  const barColor = pct >= 80 ? '#238636' : pct >= 50 ? '#9e6a03' : '#da3633';
+  return (
+    <div style={{ marginBottom: '0.5rem' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', marginBottom: '0.2rem' }}>
+        <span style={{ color: '#8b949e' }}>{label}</span>
+        <span style={{ color: barColor, fontWeight: 700 }}>{value}/{max}</span>
+      </div>
+      <div style={{ background: '#21262d', borderRadius: 6, height: 8, overflow: 'hidden' }}>
+        <div style={{ width: pct + '%', background: barColor, height: '100%', borderRadius: 6, transition: 'width 0.5s' }} />
+      </div>
+    </div>
+  );
+}
+
+function SeverityBadge({ level }) {
+  const colors = {
+    critical: '#da3633', high: '#da3633', nuclear: '#da3633',
+    medium: '#9e6a03', warning: '#9e6a03', spicy: '#9e6a03',
+    low: '#238636', info: '#388bfd', mild: '#238636'
+  };
+  const bg = colors[level] || '#30363d';
+  return <span style={{ display: 'inline-block', padding: '0.1rem 0.5rem', borderRadius: 10, fontSize: '0.75rem', fontWeight: 700, background: bg, color: '#fff' }}>{level}</span>;
+}
+
+function GradeDisplay({ grade }) {
+  const gradeColors = {
+    'A+': '#238636', 'A': '#238636', 'A-': '#2ea043',
+    'B+': '#56d364', 'B': '#9e6a03', 'B-': '#9e6a03',
+    'C+': '#d29922', 'C': '#d29922', 'C-': '#e3b341',
+    'D+': '#da3633', 'D': '#da3633', 'D-': '#da3633',
+    'F': '#da3633'
+  };
+  const color = gradeColors[grade] || '#8b949e';
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ fontSize: '3.5rem', fontWeight: 900, color, lineHeight: 1 }}>{grade}</div>
+      <div style={{ color: '#8b949e', fontSize: '0.8rem', marginTop: '0.3rem' }}>Letter Grade</div>
+    </div>
+  );
+}
+
 export default function App() {
   const [code, setCode] = useState('');
   const [language, setLanguage] = useState('Auto-detect');
   const [result, setResult] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [activeTab, setActiveTab] = useState('overview');
 
   const handleRoast = async () => {
     if (!code.trim()) { setError('Paste some code first!'); return; }
-    setLoading(true); setError('');
+    setLoading(true); setError(''); setResult(null);
     try {
       const data = await roastCode(code, language === 'Auto-detect' ? '' : language);
       setResult(data);
+      setActiveTab('overview');
     } catch (err) { setError(err.message); }
     finally { setLoading(false); }
   };
@@ -29,61 +74,272 @@ export default function App() {
 
   if (loading) {
     return (
-      <div className="app">
+      <div className='app'>
         <h1><span>Code Roast Battle</span></h1>
-        <div className="loading">
-          <div className="spinner"></div>
-          <p>Chef CodeRamsay is reviewing your code...</p>
-          <p style={{ color: '#8b949e', marginTop: '0.5rem', fontSize: '0.9rem' }}>"This code is so raw it's still MOOING!"</p>
+        <div className='loading'>
+          <div className='spinner'></div>
+          <p>Chef CodeRamsay is performing deep analysis...</p>
+          <p style={{ color: '#8b949e', marginTop: '0.5rem', fontSize: '0.9rem' }}>Security scan, performance review, clean code audit...</p>
         </div>
       </div>
     );
   }
 
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'security', label: 'Security' },
+    { id: 'performance', label: 'Performance' },
+    { id: 'cleancode', label: 'Clean Code' },
+    { id: 'issues', label: 'Issues' },
+    { id: 'tests', label: 'Tests' },
+    { id: 'rewrite', label: 'Rewrite' },
+  ];
+
   if (result) {
     return (
-      <div className="app">
+      <div className='app'>
         <h1><span>Code Roast Battle</span></h1>
-        <div className="results">
-          <div className="opening-roast">"{result.openingRoast}"</div>
-          
-          <div className="score-section">
-            <div><div className="score-big">{result.overallScore}<span style={{fontSize:'1.5rem'}}>/100</span></div><div style={{textAlign:'center',color:'#8b949e'}}>Code Quality</div></div>
-            <div style={{textAlign:'center'}}><div className={`hire-badge ${getHireClass(result.wouldHire)}`}>{result.wouldHire}</div><div style={{color:'#8b949e',fontSize:'0.8rem',marginTop:'0.3rem'}}>{result.roastLevel}</div></div>
+        <div className='results'>
+          <div className='opening-roast'>“{result.openingRoast}”</div>
+
+          {/* Tab Navigation */}
+          <div className='tab-nav'>
+            {tabs.map(t => (
+              <button key={t.id} className={'tab-btn' + (activeTab === t.id ? ' active' : '')} onClick={() => setActiveTab(t.id)}>{t.label}</button>
+            ))}
           </div>
 
-          {result.issues?.length > 0 && (
-            <div className="roast-card">
-              <div className="section-title">Issues Found</div>
-              {result.issues.map((issue, i) => (
-                <div key={i} className="issue-card">
-                  <div style={{display:'flex',justifyContent:'space-between',marginBottom:'0.5rem'}}><code style={{color:'#8b949e'}}>{issue.line}</code><span className={`severity ${issue.severity}`}>{issue.severity}</span></div>
-                  <div className="roast-text">"{issue.roast}"</div>
-                  <div className="fix-text">Fix: {issue.fix}</div>
+          {/* OVERVIEW TAB */}
+          {activeTab === 'overview' && (
+            <div>
+              <div className='score-grid'>
+                <div className='score-card'>
+                  <div className='score-big'>{result.overallScore}<span style={{fontSize:'1.2rem'}}>/100</span></div>
+                  <div style={{textAlign:'center',color:'#8b949e',fontSize:'0.85rem'}}>Overall Score</div>
                 </div>
-              ))}
+                {result.letterGrade && <div className='score-card'><GradeDisplay grade={result.letterGrade} /></div>}
+                <div className='score-card'>
+                  <div className={'hire-badge ' + getHireClass(result.wouldHire)}>{result.wouldHire}</div>
+                  <div style={{color:'#8b949e',fontSize:'0.8rem',marginTop:'0.5rem'}}>{result.roastLevel}</div>
+                </div>
+              </div>
+
+              {/* Score Overview Bars */}
+              <div className='roast-card'>
+                <div className='section-title'>Score Breakdown</div>
+                {result.securityAnalysis && <ScoreBar label='Security' value={result.securityAnalysis.score} />}
+                {result.performanceAnalysis && <ScoreBar label='Performance' value={result.performanceAnalysis.score} />}
+                {result.bestPractices && <ScoreBar label='Best Practices' value={result.bestPractices.score} />}
+                {result.cleanCodeScore != null && <ScoreBar label='Clean Code' value={result.cleanCodeScore} />}
+                {result.maintainabilityIndex != null && <ScoreBar label='Maintainability' value={result.maintainabilityIndex} />}
+              </div>
+
+              {/* Dependency Analysis */}
+              {result.dependencyAnalysis && (
+                <div className='roast-card'>
+                  <div className='section-title'>Dependency / Import Analysis</div>
+                  {result.dependencyAnalysis.unusedImports?.length > 0 && (
+                    <div style={{marginBottom:'0.8rem'}}>
+                      <div style={{color:'#d29922',fontSize:'0.9rem',marginBottom:'0.3rem'}}>Unused Imports</div>
+                      {result.dependencyAnalysis.unusedImports.map((u, i) => <span key={i} className='tag tag-warn'>{u}</span>)}
+                    </div>
+                  )}
+                  {result.dependencyAnalysis.missingImports?.length > 0 && (
+                    <div style={{marginBottom:'0.8rem'}}>
+                      <div style={{color:'#da3633',fontSize:'0.9rem',marginBottom:'0.3rem'}}>Missing Imports</div>
+                      {result.dependencyAnalysis.missingImports.map((m, i) => <span key={i} className='tag tag-error'>{m}</span>)}
+                    </div>
+                  )}
+                  {result.dependencyAnalysis.suggestions?.length > 0 && (
+                    <div>
+                      <div style={{color:'#388bfd',fontSize:'0.9rem',marginBottom:'0.3rem'}}>Suggestions</div>
+                      {result.dependencyAnalysis.suggestions.map((s, i) => <div key={i} style={{color:'#8b949e',fontSize:'0.85rem',marginBottom:'0.3rem'}}>- {s}</div>)}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           )}
 
-          <div className="roast-card">
-            <div className="section-title">Code Smells</div>
-            {result.codeSmells?.map((s, i) => <span key={i} className="tag">{s}</span>)}
-            {result.bestPracticeViolations?.length > 0 && (
-              <>
-                <div className="section-title" style={{marginTop:'1rem'}}>Best Practice Violations</div>
-                {result.bestPracticeViolations.map((v, i) => <span key={i} className="tag">{v}</span>)}
-              </>
-            )}
-          </div>
+          {/* SECURITY TAB */}
+          {activeTab === 'security' && result.securityAnalysis && (
+            <div>
+              <div className='roast-card'>
+                <div className='section-title'>Security Analysis</div>
+                <ScoreBar label='Security Score' value={result.securityAnalysis.score} />
+                <p style={{color:'#8b949e',fontSize:'0.9rem',marginTop:'0.5rem',marginBottom:'1rem'}}>{result.securityAnalysis.summary}</p>
+                {result.securityAnalysis.vulnerabilities?.map((v, i) => (
+                  <div key={i} className='vuln-card'>
+                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.5rem'}}>
+                      <span style={{color:'#f97316',fontWeight:700}}>{v.type}</span>
+                      <SeverityBadge level={v.severity} />
+                    </div>
+                    <div style={{color:'#c9d1d9',fontSize:'0.9rem',marginBottom:'0.3rem'}}>{v.description}</div>
+                    {v.location && <div style={{color:'#8b949e',fontSize:'0.8rem',marginBottom:'0.3rem'}}>Location: <code>{v.location}</code></div>}
+                    <div style={{color:'#7ee787',fontSize:'0.85rem',marginBottom:'0.3rem'}}>Fix: {v.fix}</div>
+                    {v.roast && <div style={{color:'#f97316',fontStyle:'italic',fontSize:'0.85rem'}}>{v.roast}</div>}
+                  </div>
+                ))}
+                {(!result.securityAnalysis.vulnerabilities || result.securityAnalysis.vulnerabilities.length === 0) && (
+                  <div style={{color:'#238636',textAlign:'center',padding:'1rem'}}>No security vulnerabilities detected. Chef is impressed... for once.</div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* PERFORMANCE TAB */}
+          {activeTab === 'performance' && result.performanceAnalysis && (
+            <div>
+              <div className='roast-card'>
+                <div className='section-title'>Performance Analysis</div>
+                <ScoreBar label='Performance Score' value={result.performanceAnalysis.score} />
+                <div style={{display:'flex',gap:'1.5rem',margin:'1rem 0',flexWrap:'wrap'}}>
+                  {result.performanceAnalysis.timeComplexity && (
+                    <div className='complexity-badge'>
+                      <div style={{color:'#8b949e',fontSize:'0.75rem'}}>Time</div>
+                      <div style={{color:'#f97316',fontWeight:700,fontSize:'1.1rem'}}>{result.performanceAnalysis.timeComplexity}</div>
+                    </div>
+                  )}
+                  {result.performanceAnalysis.spaceComplexity && (
+                    <div className='complexity-badge'>
+                      <div style={{color:'#8b949e',fontSize:'0.75rem'}}>Space</div>
+                      <div style={{color:'#388bfd',fontWeight:700,fontSize:'1.1rem'}}>{result.performanceAnalysis.spaceComplexity}</div>
+                    </div>
+                  )}
+                </div>
+                <p style={{color:'#8b949e',fontSize:'0.9rem',marginBottom:'1rem'}}>{result.performanceAnalysis.summary}</p>
+                {result.performanceAnalysis.issues?.map((issue, i) => (
+                  <div key={i} className='issue-card'>
+                    <div style={{display:'flex',justifyContent:'space-between',marginBottom:'0.3rem'}}>
+                      <span style={{color:'#c9d1d9',fontWeight:600}}>{issue.issue}</span>
+                      <SeverityBadge level={issue.impact} />
+                    </div>
+                    <div style={{color:'#7ee787',fontSize:'0.85rem'}}>Suggestion: {issue.suggestion}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* CLEAN CODE TAB */}
+          {activeTab === 'cleancode' && (
+            <div>
+              {result.cleanCodeBreakdown && (
+                <div className='roast-card'>
+                  <div className='section-title'>Clean Code Breakdown (Robert C. Martin)</div>
+                  <ScoreBar label='Overall Clean Code Score' value={result.cleanCodeScore} />
+                  <div style={{marginTop:'1rem'}}>
+                    <ScoreBar label='Meaningful Names' value={result.cleanCodeBreakdown.meaningfulNames} max={10} />
+                    <ScoreBar label='Small Functions' value={result.cleanCodeBreakdown.smallFunctions} max={10} />
+                    <ScoreBar label='Single Responsibility' value={result.cleanCodeBreakdown.singleResponsibility} max={10} />
+                    <ScoreBar label='DRY Principle' value={result.cleanCodeBreakdown.dryPrinciple} max={10} />
+                    <ScoreBar label='Error Handling' value={result.cleanCodeBreakdown.errorHandling} max={10} />
+                    <ScoreBar label='Readability' value={result.cleanCodeBreakdown.readability} max={10} />
+                    <ScoreBar label='Formatting' value={result.cleanCodeBreakdown.formatting} max={10} />
+                    <ScoreBar label='Comments' value={result.cleanCodeBreakdown.comments} max={10} />
+                    <ScoreBar label='No Side Effects' value={result.cleanCodeBreakdown.noSideEffects} max={10} />
+                    <ScoreBar label='Testability' value={result.cleanCodeBreakdown.testability} max={10} />
+                  </div>
+                </div>
+              )}
+
+              {result.maintainabilityIndex != null && (
+                <div className='roast-card'>
+                  <div className='section-title'>Maintainability Index</div>
+                  <ScoreBar label='Maintainability' value={result.maintainabilityIndex} />
+                </div>
+              )}
+
+              {/* Best Practices */}
+              {result.bestPractices?.violations?.length > 0 && (
+                <div className='roast-card'>
+                  <div className='section-title'>Best Practice Violations</div>
+                  {result.bestPractices.violations.map((v, i) => (
+                    <div key={i} className='issue-card'>
+                      <div style={{display:'flex',justifyContent:'space-between',marginBottom:'0.3rem'}}>
+                        <span style={{color:'#c9d1d9',fontWeight:600}}>{v.practice}</span>
+                        <SeverityBadge level={v.severity} />
+                      </div>
+                      <div style={{color:'#8b949e',fontSize:'0.85rem',marginBottom:'0.3rem'}}>{v.description}</div>
+                      <div style={{color:'#7ee787',fontSize:'0.85rem'}}>Fix: {v.fix}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Code Smells */}
+              {result.codeSmells?.length > 0 && (
+                <div className='roast-card'>
+                  <div className='section-title'>Code Smells</div>
+                  {result.codeSmells.map((s, i) => (
+                    <div key={i} className='issue-card'>
+                      <div style={{display:'flex',justifyContent:'space-between',marginBottom:'0.3rem'}}>
+                        <span style={{color:'#f97316',fontWeight:600}}>{typeof s === 'string' ? s : s.smell}</span>
+                        {s.severity && <SeverityBadge level={s.severity} />}
+                      </div>
+                      {s.location && <div style={{color:'#8b949e',fontSize:'0.8rem'}}>Location: {s.location}</div>}
+                      {s.description && <div style={{color:'#8b949e',fontSize:'0.85rem',marginTop:'0.2rem'}}>{s.description}</div>}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ISSUES TAB */}
+          {activeTab === "issues" && (
+            <div>
+              {result.issues?.length > 0 && (
+                <div className="roast-card">
+                  <div className="section-title">Issues Found</div>
+                  {result.issues.map((issue, i) => (
+                    <div key={i} className="issue-card">
+                      <div style={{display:"flex",justifyContent:"space-between",marginBottom:"0.5rem"}}>
+                        <code style={{color:"#8b949e"}}>{issue.line}</code>
+                        <SeverityBadge level={issue.severity} />
+                      </div>
+                      <div className="roast-text">“{issue.roast}“</div>
+                      <div className="fix-text">Fix: {issue.fix}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* TESTS TAB */}
+          {activeTab === "tests" && (
+            <div>
+              {result.testSuggestions?.length > 0 && (
+                <div className="roast-card">
+                  <div className="section-title">Suggested Tests</div>
+                  {result.testSuggestions.map((t, i) => (
+                    <div key={i} className="test-card">
+                      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"0.3rem"}}>
+                        <span className={"test-type test-" + t.type}>{t.type}</span>
+                        <SeverityBadge level={t.priority} />
+                      </div>
+                      <div style={{color:"#c9d1d9",fontSize:"0.9rem"}}>{t.description}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
 
-          {result.rewrittenCode && (
-            <div className="roast-card">
-              <div className="section-title">How It SHOULD Look</div>
-              <pre className="rewritten-code">{result.rewrittenCode}</pre>
+          {/* REWRITE TAB */}
+          {activeTab === "rewrite" && (
+            <div>
+              {result.rewrittenCode && (
+                <div className="roast-card">
+                  <div className="section-title">How It SHOULD Look</div>
+                  <pre className="rewritten-code">{result.rewrittenCode}</pre>
+                </div>
+              )}
             </div>
           )}
 
-          <div className="closing-roast">"{result.closingRoast}"</div>
+          <div className="closing-roast">“{result.closingRoast}“</div>
           <button className="btn back-btn" onClick={() => setResult(null)}>Roast More Code</button>
         </div>
       </div>
@@ -93,15 +349,15 @@ export default function App() {
   return (
     <div className="app">
       <h1><span>Code Roast Battle</span></h1>
-      <p className="subtitle">"This code is so bad, even the compiler is crying!" - Chef CodeRamsay</p>
-      {error && <p style={{ color: '#ef4444', textAlign: 'center', marginBottom: '1rem' }}>{error}</p>}
+      <p className="subtitle">“This code is so bad, even the compiler is crying!“ - Chef CodeRamsay</p>
+      {error && <p style={{ color: "#ef4444", textAlign: "center", marginBottom: "1rem" }}>{error}</p>}
       <div className="editor-section">
         <label>Language</label>
         <select value={language} onChange={e => setLanguage(e.target.value)}>
           {LANGUAGES.map(l => <option key={l}>{l}</option>)}
         </select>
         <label>Paste your code (if you dare)</label>
-        <textarea className="code-input" placeholder="// Paste your code here..." value={code} onChange={e => setCode(e.target.value)} onKeyDown={e => { if (e.key === 'Tab') { e.preventDefault(); const s = e.target.selectionStart; setCode(code.substring(0, s) + '  ' + code.substring(e.target.selectionEnd)); setTimeout(() => { e.target.selectionStart = e.target.selectionEnd = s + 2; }, 0); }}} />
+        <textarea className="code-input" placeholder="// Paste your code here..." value={code} onChange={e => setCode(e.target.value)} onKeyDown={e => { if (e.key === "Tab") { e.preventDefault(); const s = e.target.selectionStart; setCode(code.substring(0, s) + "  " + code.substring(e.target.selectionEnd)); setTimeout(() => { e.target.selectionStart = e.target.selectionEnd = s + 2; }, 0); }}} />
       </div>
       <button className="btn" onClick={handleRoast}>ROAST MY CODE</button>
     </div>

frontend/src/styles/global.css

@@ -1,5 +1,5 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: 'Courier New', monospace; background: #0d1117; color: #c9d1d9; min-height: 100vh; }
+body { font-family: "Courier New", monospace; background: #0d1117; color: #c9d1d9; min-height: 100vh; }
 .app { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
 h1 { text-align: center; font-size: 2.5rem; margin-bottom: 0.5rem; }
 h1 span { background: linear-gradient(135deg, #f97316, #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@@ -7,7 +7,7 @@ h1 span { background: linear-gradient(135deg, #f97316, #ef4444); -webkit-backgro
 .editor-section { background: #161b22; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #30363d; }
 .editor-section label { display: block; margin-bottom: 0.5rem; color: #8b949e; }
 .editor-section select { padding: 0.5rem; border-radius: 6px; border: 1px solid #30363d; background: #0d1117; color: #c9d1d9; margin-bottom: 1rem; }
-.code-input { width: 100%; min-height: 200px; padding: 1rem; border: 1px solid #30363d; border-radius: 8px; background: #0d1117; color: #79c0ff; font-family: 'Courier New', monospace; font-size: 0.9rem; resize: vertical; tab-size: 2; }
+.code-input { width: 100%; min-height: 200px; padding: 1rem; border: 1px solid #30363d; border-radius: 8px; background: #0d1117; color: #79c0ff; font-family: "Courier New", monospace; font-size: 0.9rem; resize: vertical; tab-size: 2; }
 .btn { width: 100%; padding: 1rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; font-family: inherit; transition: transform 0.2s; }
 .btn:hover { transform: scale(1.02); }
 .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@@ -15,24 +15,59 @@ h1 span { background: linear-gradient(135deg, #f97316, #ef4444); -webkit-backgro
 .loading .spinner { width: 50px; height: 50px; border: 4px solid #30363d; border-top-color: #f97316; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .results { margin-top: 2rem; }
-.roast-card { background: #161b22; border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; border: 1px solid #30363d; }
+.roast-card { background: #161b22; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #30363d; }
 .opening-roast { font-size: 1.2rem; color: #f97316; font-style: italic; text-align: center; padding: 1.5rem; background: linear-gradient(135deg, #161b22, #1c1206); border-radius: 12px; border: 1px solid #f97316; margin-bottom: 1.5rem; }
-.score-section { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
-.score-big { font-size: 4rem; font-weight: 700; color: #f97316; }
-.hire-badge { display: inline-block; padding: 0.3rem 1rem; border-radius: 20px; font-weight: 700; font-size: 0.9rem; }
+
+/* Tab Navigation */
+.tab-nav { display: flex; gap: 0.3rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: 0.5rem; border-bottom: 1px solid #30363d; }
+.tab-btn { padding: 0.5rem 1rem; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: transparent; color: #8b949e; font-family: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
+.tab-btn:hover { color: #c9d1d9; background: #161b22; }
+.tab-btn.active { color: #f97316; background: #161b22; border-color: #30363d; border-bottom: 2px solid #f97316; font-weight: 700; }
+
+/* Score Grid */
+.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
+.score-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.score-big { font-size: 3.5rem; font-weight: 700; color: #f97316; line-height: 1; }
+.hire-badge { display: inline-block; padding: 0.4rem 1.2rem; border-radius: 20px; font-weight: 700; font-size: 0.9rem; }
 .hire-badge.yes { background: #238636; color: #fff; }
 .hire-badge.maybe { background: #9e6a03; color: #fff; }
 .hire-badge.no { background: #da3633; color: #fff; }
+
+/* Issue Cards */
 .issue-card { background: #0d1117; border-radius: 8px; padding: 1rem; margin-bottom: 0.8rem; border-left: 3px solid #f97316; }
 .issue-card .roast-text { color: #f97316; font-style: italic; margin-bottom: 0.5rem; }
 .issue-card .fix-text { color: #7ee787; }
-.severity { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 700; }
-.severity.mild { background: #238636; color: #fff; }
-.severity.spicy { background: #9e6a03; color: #fff; }
-.severity.nuclear { background: #da3633; color: #fff; }
-.rewritten-code { background: #0d1117; border: 1px solid #238636; border-radius: 8px; padding: 1rem; overflow-x: auto; white-space: pre-wrap; color: #7ee787; font-size: 0.85rem; max-height: 400px; overflow-y: auto; }
-.section-title { color: #f97316; margin-bottom: 0.8rem; font-size: 1.1rem; }
+
+/* Vulnerability Cards */
+.vuln-card { background: #0d1117; border-radius: 8px; padding: 1rem; margin-bottom: 0.8rem; border-left: 3px solid #da3633; }
+
+/* Complexity Badges */
+.complexity-badge { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 0.5rem 1rem; text-align: center; }
+
+/* Test Cards */
+.test-card { background: #0d1117; border-radius: 8px; padding: 1rem; margin-bottom: 0.8rem; border-left: 3px solid #388bfd; }
+.test-type { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 10px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
+.test-unit { background: #238636; color: #fff; }
+.test-integration { background: #9e6a03; color: #fff; }
+.test-edge-case { background: #388bfd; color: #fff; }
+
+/* Tags */
 .tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; background: #30363d; color: #8b949e; font-size: 0.8rem; margin: 0.2rem; }
-.closing-roast { font-size: 1.1rem; color: #ef4444; font-style: italic; text-align: center; padding: 1rem; margin-top: 1.5rem; }
-.back-btn { background: #30363d; margin-top: 1.5rem; }
-@media (max-width: 768px) { h1 { font-size: 1.8rem; } .score-big { font-size: 3rem; } }
+.tag-warn { background: #3d2e00; color: #d29922; border: 1px solid #9e6a03; }
+.tag-error { background: #3d0000; color: #f85149; border: 1px solid #da3633; }
+
+.rewritten-code { background: #0d1117; border: 1px solid #238636; border-radius: 8px; padding: 1rem; overflow-x: auto; white-space: pre-wrap; color: #7ee787; font-size: 0.85rem; max-height: 500px; overflow-y: auto; }
+.section-title { color: #f97316; margin-bottom: 0.8rem; font-size: 1.1rem; font-weight: 700; }
+.closing-roast { font-size: 1.1rem; color: #ef4444; font-style: italic; text-align: center; padding: 1.5rem; margin: 1.5rem 0; background: linear-gradient(135deg, #161b22, #1c0606); border-radius: 12px; border: 1px solid #ef4444; }
+.back-btn { background: #30363d; margin-top: 1rem; }
+.back-btn:hover { background: #484f58; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  h1 { font-size: 1.8rem; }
+  .score-big { font-size: 2.5rem; }
+  .score-grid { grid-template-columns: 1fr; }
+  .tab-nav { gap: 0.2rem; }
+  .tab-btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; }
+  .roast-card { padding: 1rem; }
+}