Major upgrade: comprehensive debate analysis

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.7 }),
+      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.7, 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...');
@@ -28,7 +28,7 @@ function parseJSON(text) {
 }
 
 async function settleArgument(topic, side1Name, side1Argument, side2Name, side2Argument) {
-  const text = await callAI(`You are "The Settler" - a fair, witty, and brutally honest judge of arguments. You analyze both sides objectively.
+  const text = await callAI(`You are "The Settler" - a world-class debate judge with expertise in logic, rhetoric, and critical thinking. You combine the analytical rigor of a philosophy professor with the wit of a late-night show host.
 
 TOPIC: ${topic}
 
@@ -38,27 +38,54 @@ ${side1Argument}
 ${side2Name}'s ARGUMENT:
 ${side2Argument}
 
-Analyze both arguments thoroughly. Return ONLY valid JSON:
+Perform a DEEP analysis of both arguments. Check for:
+- Logical fallacies (ad hominem, straw man, false dichotomy, appeal to authority, slippery slope, etc.)
+- Evidence quality (anecdotal, statistical, expert opinion, common sense)
+- Emotional vs rational reasoning balance
+- Bias and assumptions
+- Argument structure and coherence
+
+Return ONLY valid JSON:
 {
   "topic": "<topic summary>",
   "side1": {
     "name": "${side1Name}",
     "score": <1-100>,
-    "strengths": ["<s1>", "<s2>"],
-    "weaknesses": ["<w1>", "<w2>"],
-    "devilsAdvocate": "<2-3 sentences arguing AGAINST this side>"
+    "persuasivenessScore": <1-100>,
+    "factualScore": <1-100>,
+    "emotionalVsRational": { "emotional": <0-100>, "rational": <0-100> },
+    "strengths": ["<specific strength 1>", "<specific strength 2>", "<strength 3>"],
+    "weaknesses": ["<specific weakness 1>", "<weakness 2>"],
+    "fallacies": [{ "name": "<fallacy name>", "quote": "<the part that commits it>", "explanation": "<why it's a fallacy>" }],
+    "evidenceQuality": "<anecdotal/statistical/expert/mixed - with explanation>",
+    "devilsAdvocate": "<3 sentences arguing AGAINST this side>",
+    "steelMan": "<The strongest possible version of this argument rewritten in 2-3 sentences>",
+    "whatWouldChangeTheirMind": "<What evidence or argument would make this person reconsider?>"
   },
   "side2": {
     "name": "${side2Name}",
     "score": <1-100>,
-    "strengths": ["<s1>", "<s2>"],
-    "weaknesses": ["<w1>", "<w2>"],
-    "devilsAdvocate": "<2-3 sentences arguing AGAINST this side>"
+    "persuasivenessScore": <1-100>,
+    "factualScore": <1-100>,
+    "emotionalVsRational": { "emotional": <0-100>, "rational": <0-100> },
+    "strengths": ["<specific strength 1>", "<specific strength 2>", "<strength 3>"],
+    "weaknesses": ["<specific weakness 1>", "<weakness 2>"],
+    "fallacies": [{ "name": "<fallacy name>", "quote": "<the part that commits it>", "explanation": "<why it's a fallacy>" }],
+    "evidenceQuality": "<anecdotal/statistical/expert/mixed - with explanation>",
+    "devilsAdvocate": "<3 sentences arguing AGAINST this side>",
+    "steelMan": "<The strongest possible version of this argument rewritten in 2-3 sentences>",
+    "whatWouldChangeTheirMind": "<What evidence or argument would make this person reconsider?>"
   },
   "winner": "<name of winner or 'Draw'>",
-  "verdict": "<3-4 sentence witty final verdict explaining who won and why>",
-  "commonGround": "<1-2 sentences on where both sides actually agree>",
-  "plotTwist": "<a surprising perspective neither side considered>"
+  "verdict": "<4-5 sentence witty final verdict with specific reasoning>",
+  "commonGround": "<2-3 sentences on where both sides actually agree>",
+  "plotTwist": "<A surprising perspective neither side considered>",
+  "biasCheck": "<Any shared biases or blind spots both arguers have>",
+  "compromise": "<A detailed middle-ground solution that could satisfy both sides>",
+  "debateTips": {
+    "side1Tip": "<Specific advice for ${side1Name} on how to argue better>",
+    "side2Tip": "<Specific advice for ${side2Name} on how to argue better>"
+  }
 }
 
 Return ONLY JSON, no markdown.`);

backend/services/ai.js.backup

@@ -0,0 +1,68 @@
+const GROQ_API_KEY = process.env.GROQ_API_KEY;
+const OLLAMA_URL = process.env.OLLAMA_URL || 'http://localhost:11434';
+const GROQ_MODEL = process.env.GROQ_MODEL || 'llama-3.3-70b-versatile';
+const OLLAMA_MODEL = process.env.OLLAMA_MODEL || 'llama3.2:3b';
+
+async function callAI(prompt) {
+  if (GROQ_API_KEY) {
+    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.7 }),
+    });
+    if (res.ok) { const data = await res.json(); return data.choices[0].message.content; }
+    console.warn('Groq failed, falling back to Ollama...');
+  }
+  const res = await fetch(`${OLLAMA_URL}/api/generate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ model: OLLAMA_MODEL, prompt, stream: false }),
+  });
+  if (!res.ok) throw new Error('Both Groq and Ollama failed.');
+  return (await res.json()).response;
+}
+
+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'); }
+}
+
+async function settleArgument(topic, side1Name, side1Argument, side2Name, side2Argument) {
+  const text = await callAI(`You are "The Settler" - a fair, witty, and brutally honest judge of arguments. You analyze both sides objectively.
+
+TOPIC: ${topic}
+
+${side1Name}'s ARGUMENT:
+${side1Argument}
+
+${side2Name}'s ARGUMENT:
+${side2Argument}
+
+Analyze both arguments thoroughly. Return ONLY valid JSON:
+{
+  "topic": "<topic summary>",
+  "side1": {
+    "name": "${side1Name}",
+    "score": <1-100>,
+    "strengths": ["<s1>", "<s2>"],
+    "weaknesses": ["<w1>", "<w2>"],
+    "devilsAdvocate": "<2-3 sentences arguing AGAINST this side>"
+  },
+  "side2": {
+    "name": "${side2Name}",
+    "score": <1-100>,
+    "strengths": ["<s1>", "<s2>"],
+    "weaknesses": ["<w1>", "<w2>"],
+    "devilsAdvocate": "<2-3 sentences arguing AGAINST this side>"
+  },
+  "winner": "<name of winner or 'Draw'>",
+  "verdict": "<3-4 sentence witty final verdict explaining who won and why>",
+  "commonGround": "<1-2 sentences on where both sides actually agree>",
+  "plotTwist": "<a surprising perspective neither side considered>"
+}
+
+Return ONLY JSON, no markdown.`);
+  return parseJSON(text);
+}
+
+module.exports = { settleArgument };

frontend/src/App.jsx

@@ -1,6 +1,73 @@
 import { useState } from 'react';
 import { settleArgument } from './utils/api';
 
+function ScoreBar({ label, value, color }) {
+  return (
+    <div className="score-bar-wrap">
+      <div className="score-bar-label">{label}</div>
+      <div className="score-bar-track">
+        <div className="score-bar-fill" style={{ width: `${value}%`, background: color }}></div>
+      </div>
+      <span className="score-bar-val">{value}</span>
+    </div>
+  );
+}
+
+function SidePanel({ side, color, accentClass }) {
+  return (
+    <div className={`detail-section ${accentClass}`}>
+      <h3 style={{ color }}>{side.name}</h3>
+
+      <div className="mini-scores">
+        <ScoreBar label="Overall" value={side.score} color={color} />
+        <ScoreBar label="Persuasiveness" value={side.persuasivenessScore} color={color} />
+        <ScoreBar label="Factual Accuracy" value={side.factualScore} color={color} />
+      </div>
+
+      {side.emotionalVsRational && (
+        <div className="emo-rational">
+          <span>Emotional {side.emotionalVsRational.emotional}%</span>
+          <div className="emo-bar">
+            <div className="emo-fill" style={{ width: `${side.emotionalVsRational.emotional}%` }}></div>
+          </div>
+          <span>Rational {side.emotionalVsRational.rational}%</span>
+        </div>
+      )}
+
+      <h4>Strengths</h4>
+      <ul className="list-good">{side.strengths?.map((s, i) => <li key={i}>{s}</li>)}</ul>
+
+      <h4>Weaknesses</h4>
+      <ul className="list-bad">{side.weaknesses?.map((w, i) => <li key={i}>{w}</li>)}</ul>
+
+      {side.fallacies?.length > 0 && (
+        <>
+          <h4>Logical Fallacies Detected</h4>
+          {side.fallacies.map((f, i) => (
+            <div className="fallacy-card" key={i}>
+              <span className="fallacy-name">{f.name}</span>
+              {f.quote && <p className="fallacy-quote">"{f.quote}"</p>}
+              <p className="fallacy-explain">{f.explanation}</p>
+            </div>
+          ))}
+        </>
+      )}
+
+      <h4>Evidence Quality</h4>
+      <p className="info-text">{side.evidenceQuality}</p>
+
+      <h4 style={{ color: '#ff6b6b' }}>Devil's Advocate</h4>
+      <p className="info-text">{side.devilsAdvocate}</p>
+
+      <h4 style={{ color: '#4ade80' }}>Steel Man (Strongest Version)</h4>
+      <p className="info-text">{side.steelMan}</p>
+
+      <h4>What Would Change Their Mind?</h4>
+      <p className="info-text">{side.whatWouldChangeTheirMind}</p>
+    </div>
+  );
+}
+
 export default function App() {
   const [topic, setTopic] = useState('');
   const [side1Name, setSide1Name] = useState('');
@@ -44,7 +111,7 @@ export default function App() {
         <div className="loading">
           <div className="spinner"></div>
           <p>The Settler is analyzing both sides...</p>
-          <p style={{ color: '#888', marginTop: '0.5rem', fontSize: '0.9rem' }}>Playing devil's advocate for each argument</p>
+          <p style={{ color: '#888', marginTop: '0.5rem', fontSize: '0.9rem' }}>Checking for logical fallacies, biases, and evidence quality</p>
         </div>
       </div>
     );
@@ -55,53 +122,75 @@ export default function App() {
       <div className="app">
         <h1><span>Argument Settler</span></h1>
         <div className="results">
+          {/* Verdict */}
           <div className="verdict-card">
             <div style={{ fontSize: '0.9rem', color: '#888', marginBottom: '0.5rem' }}>THE WINNER IS</div>
             <div className="winner-name">{result.winner === 'Draw' ? "It's a Draw!" : result.winner}</div>
             <div className="verdict-text">{result.verdict}</div>
           </div>
 
+          {/* Score comparison */}
           <div className="scores">
             <div className="score-card left">
               <h3>{result.side1?.name}</h3>
-              <div className="score-number">{result.side1?.score}/100</div>
+              <div className="score-number">{result.side1?.score}<span>/100</span></div>
             </div>
+            <div className="vs-badge">VS</div>
             <div className="score-card right">
               <h3>{result.side2?.name}</h3>
-              <div className="score-number">{result.side2?.score}/100</div>
+              <div className="score-number">{result.side2?.score}<span>/100</span></div>
             </div>
           </div>
 
+          {/* Detailed panels */}
           <div className="scores">
-            <div className="detail-section">
-              <h4>{result.side1?.name}'s Strengths</h4>
-              <ul>{result.side1?.strengths?.map((s, i) => <li key={i}>{s}</li>)}</ul>
-              <h4 style={{ marginTop: '1rem' }}>Weaknesses</h4>
-              <ul>{result.side1?.weaknesses?.map((w, i) => <li key={i}>{w}</li>)}</ul>
-              <h4 style={{ marginTop: '1rem', color: '#ff6b6b' }}>Devil's Advocate</h4>
-              <p style={{ color: '#bbb' }}>{result.side1?.devilsAdvocate}</p>
-            </div>
-            <div className="detail-section">
-              <h4>{result.side2?.name}'s Strengths</h4>
-              <ul>{result.side2?.strengths?.map((s, i) => <li key={i}>{s}</li>)}</ul>
-              <h4 style={{ marginTop: '1rem' }}>Weaknesses</h4>
-              <ul>{result.side2?.weaknesses?.map((w, i) => <li key={i}>{w}</li>)}</ul>
-              <h4 style={{ marginTop: '1rem', color: '#4ecdc4' }}>Devil's Advocate</h4>
-              <p style={{ color: '#bbb' }}>{result.side2?.devilsAdvocate}</p>
-            </div>
+            {result.side1 && <SidePanel side={result.side1} color="#ff6b6b" accentClass="accent-left" />}
+            {result.side2 && <SidePanel side={result.side2} color="#4ecdc4" accentClass="accent-right" />}
           </div>
 
+          {/* Bias Check */}
+          {result.biasCheck && (
+            <div className="insight-card bias">
+              <h4>Shared Bias Check</h4>
+              <p>{result.biasCheck}</p>
+            </div>
+          )}
+
+          {/* Common Ground */}
           {result.commonGround && (
-            <div className="detail-section">
+            <div className="insight-card common">
               <h4>Common Ground</h4>
-              <p style={{ color: '#bbb' }}>{result.commonGround}</p>
+              <p>{result.commonGround}</p>
+            </div>
+          )}
+
+          {/* Compromise */}
+          {result.compromise && (
+            <div className="insight-card compromise">
+              <h4>Suggested Compromise</h4>
+              <p>{result.compromise}</p>
             </div>
           )}
 
+          {/* Plot Twist */}
           {result.plotTwist && (
             <div className="plot-twist">
               <h4>Plot Twist</h4>
-              <p style={{ color: '#bbb' }}>{result.plotTwist}</p>
+              <p>{result.plotTwist}</p>
+            </div>
+          )}
+
+          {/* Debate Tips */}
+          {result.debateTips && (
+            <div className="scores">
+              <div className="insight-card tip-left">
+                <h4>Tip for {result.side1?.name}</h4>
+                <p>{result.debateTips.side1Tip}</p>
+              </div>
+              <div className="insight-card tip-right">
+                <h4>Tip for {result.side2?.name}</h4>
+                <p>{result.debateTips.side2Tip}</p>
+              </div>
             </div>
           )}
 
@@ -114,7 +203,7 @@ export default function App() {
   return (
     <div className="app">
       <h1><span>Argument Settler</span></h1>
-      <p className="subtitle">AI judges both sides fairly. No more endless debates.</p>
+      <p className="subtitle">AI debate judge with logical fallacy detection, evidence scoring, and bias analysis.</p>
 
       {error && <p style={{ color: '#ff6b6b', textAlign: 'center', marginBottom: '1rem' }}>{error}</p>}
 

frontend/src/styles/global.css

@@ -1,11 +1,10 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0f; color: #e0e0e0; min-height: 100vh; }
-.app { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
+.app { max-width: 950px; margin: 0 auto; padding: 2rem 1rem; }
 h1 { text-align: center; font-size: 2.5rem; margin-bottom: 0.5rem; }
 h1 span { background: linear-gradient(135deg, #ff6b6b, #ffd93d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 .subtitle { text-align: center; color: #888; margin-bottom: 2rem; }
 .form-section { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
-.form-section h3 { margin-bottom: 1rem; color: #ffd93d; }
 .input-group { margin-bottom: 1rem; }
 .input-group label { display: block; margin-bottom: 0.3rem; color: #aaa; font-size: 0.9rem; }
 .input-group input, .input-group textarea { width: 100%; padding: 0.8rem; border: 1px solid #333; border-radius: 8px; background: #12121a; color: #e0e0e0; font-size: 1rem; }
@@ -16,25 +15,76 @@ h1 span { background: linear-gradient(135deg, #ff6b6b, #ffd93d); -webkit-backgro
 .side.right { border-top: 3px solid #4ecdc4; }
 .btn { width: 100%; padding: 1rem; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #ff6b6b, #ffd93d); color: #000; transition: transform 0.2s; }
 .btn:hover { transform: scale(1.02); }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .loading { text-align: center; padding: 3rem; }
 .loading .spinner { width: 50px; height: 50px; border: 4px solid #333; border-top-color: #ffd93d; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.results { margin-top: 2rem; }
+.results { margin-top: 1rem; animation: fadeIn 0.4s ease; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
 .verdict-card { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 12px; padding: 2rem; text-align: center; margin-bottom: 2rem; border: 1px solid #333; }
 .winner-name { font-size: 2rem; font-weight: 700; color: #ffd93d; margin-bottom: 0.5rem; }
-.verdict-text { color: #ccc; font-size: 1.1rem; line-height: 1.6; }
-.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
-.score-card { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; }
+.verdict-text { color: #ccc; font-size: 1.05rem; line-height: 1.6; }
+.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; position: relative; }
+.vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ffd93d; color: #000; font-weight: 800; font-size: 0.8rem; padding: 0.4rem 0.7rem; border-radius: 20px; z-index: 1; }
+.score-card { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; text-align: center; }
 .score-card h3 { margin-bottom: 0.5rem; }
 .score-number { font-size: 2.5rem; font-weight: 700; }
+.score-number span { font-size: 1rem; color: #888; }
 .score-card.left .score-number { color: #ff6b6b; }
 .score-card.right .score-number { color: #4ecdc4; }
-.detail-section { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
-.detail-section h4 { color: #ffd93d; margin-bottom: 0.8rem; }
+
+/* Detail panels */
+.detail-section { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; }
+.detail-section h3 { margin-bottom: 1rem; font-size: 1.2rem; }
+.detail-section h4 { color: #ffd93d; margin: 1rem 0 0.5rem; font-size: 0.95rem; }
 .detail-section ul { padding-left: 1.2rem; }
-.detail-section li { margin-bottom: 0.4rem; color: #bbb; }
-.plot-twist { background: linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; border: 1px solid #6c5ce7; }
+.detail-section li { margin-bottom: 0.4rem; color: #bbb; line-height: 1.4; }
+.accent-left { border-left: 3px solid #ff6b6b; }
+.accent-right { border-left: 3px solid #4ecdc4; }
+
+/* Score bars */
+.mini-scores { margin-bottom: 0.5rem; }
+.score-bar-wrap { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.score-bar-label { width: 110px; font-size: 0.8rem; color: #aaa; }
+.score-bar-track { flex: 1; height: 8px; background: #12121a; border-radius: 4px; overflow: hidden; }
+.score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
+.score-bar-val { width: 30px; text-align: right; font-size: 0.85rem; font-weight: 600; }
+
+/* Emotional vs Rational bar */
+.emo-rational { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0; font-size: 0.8rem; color: #aaa; }
+.emo-bar { flex: 1; height: 8px; background: #4ecdc4; border-radius: 4px; overflow: hidden; }
+.emo-fill { height: 100%; background: #ff6b6b; border-radius: 4px; }
+
+/* Lists */
+.list-good li::marker { color: #4ade80; }
+.list-bad li::marker { color: #ef4444; }
+
+/* Fallacy cards */
+.fallacy-card { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px; padding: 0.8rem; margin-bottom: 0.5rem; }
+.fallacy-name { display: inline-block; background: rgba(239, 68, 68, 0.2); color: #ef4444; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.3px; }
+.fallacy-quote { color: #ff9999; font-style: italic; margin: 0.4rem 0; font-size: 0.85rem; }
+.fallacy-explain { color: #aaa; font-size: 0.85rem; line-height: 1.4; }
+
+.info-text { color: #bbb; line-height: 1.5; font-size: 0.95rem; }
+
+/* Insight cards */
+.insight-card { background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
+.insight-card h4 { margin-bottom: 0.5rem; }
+.insight-card p { color: #bbb; line-height: 1.5; }
+.insight-card.bias { border-left: 3px solid #fbbf24; }
+.insight-card.bias h4 { color: #fbbf24; }
+.insight-card.common { border-left: 3px solid #4ade80; }
+.insight-card.common h4 { color: #4ade80; }
+.insight-card.compromise { border-left: 3px solid #60a5fa; }
+.insight-card.compromise h4 { color: #60a5fa; }
+.insight-card.tip-left { border-left: 3px solid #ff6b6b; }
+.insight-card.tip-left h4 { color: #ff6b6b; }
+.insight-card.tip-right { border-left: 3px solid #4ecdc4; }
+.insight-card.tip-right h4 { color: #4ecdc4; }
+
+/* Plot twist */
+.plot-twist { background: linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #6c5ce7; }
 .plot-twist h4 { color: #a29bfe; margin-bottom: 0.5rem; }
+.plot-twist p { color: #bbb; line-height: 1.5; }
+
 .back-btn { background: #333; color: #fff; margin-top: 1.5rem; }
-@media (max-width: 768px) { .sides-container, .scores { grid-template-columns: 1fr; } h1 { font-size: 1.8rem; } }
+@media (max-width: 768px) { .sides-container, .scores { grid-template-columns: 1fr; } h1 { font-size: 1.8rem; } .vs-badge { display: none; } }