V4: AI-Driven Auto-Diff — Zero-effort Red/Green suggestions and 1-click 'Apply Fix' button

pr_review_dashboard/app/Dashboard.js

@@ -28,6 +28,7 @@ export default function Dashboard({ presets, defaultHfToken }) {
   const [initialized, setInitialized] = useState(false);
   const [initStatus, setInitStatus] = useState("idle");
   const [observation, setObservation] = useState({});
+  const [originalCode, setOriginalCode] = useState(""); // Track the user's base code
   const [score, setScore] = useState(0);
   const [turn, setTurn] = useState(0);
   const [maxTurns, setMaxTurns] = useState(3);
@@ -42,11 +43,32 @@ export default function Dashboard({ presets, defaultHfToken }) {
     setLogs(prev => [...prev, `[${new Date().toLocaleTimeString()}] ${msg}`]);
   }, []);
 
-  // ── Initialize (System Check) ──
+  // ── Helper: Fetch Diff from Backend ──
+  const getVisualDiff = async (oldCode, newCode) => {
+    try {
+      const resp = await fetch("/api/diff", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ old_code: oldCode, new_code: newCode })
+      });
+      const data = await resp.json();
+      return data.diff;
+    } catch (e) {
+      console.error("Diff generation failed", e);
+      return null;
+    }
+  };
+
+  // ── Helper: Extract Code Block from AI response ──
+  const extractProposedFix = (text) => {
+    const match = text.match(/```python\n([\s\S]*?)\n```/);
+    return match ? match[1] : null;
+  };
+
+  // ── Initialize ──
   const handleInit = useCallback(async () => {
     setError(null);
     setInitStatus("loading");
-    addLog(`System Connection Test: ${activeModelId}`);
     try {
       await resetEnv(taskName);
       setInitialized(true);
@@ -55,179 +77,146 @@ export default function Dashboard({ presets, defaultHfToken }) {
     } catch (e) {
       setError(`Connection Failed: ${e.message}`);
       setInitStatus("idle");
-      addLog(`CONNECTION ERROR: ${e.message}`);
     }
-  }, [taskName, activeModelId, addLog]);
+  }, [taskName, addLog]);
 
   // ── Manual Decision ──
   const handleManual = useCallback(async ({ decision: dec, comment }) => {
     if (done) return;
     setError(null);
-    addLog(`User Decision: ${dec}`);
     try {
-      const result = await stepEnv({ 
-        decision: dec, 
-        comment: comment || "Manual verdict.",
-        issue_category: "none" // Default for manual verdicts
-      });
+      const result = await stepEnv({ decision: dec, comment: comment || "Manual verdict.", issue_category: "none" });
       setObservation(result.observation);
       setScore(prev => prev + result.reward);
       setRewards(prev => [...prev, result.reward]);
       setDone(result.done);
       setDecision(dec.toUpperCase());
       setTurn(result.observation.turn); 
-      addLog(`VERDICT APPLIED: reward=${result.reward.toFixed(2)} done=${result.done}`);
-    } catch (e) {
-      setError(e.message);
-      addLog(`VERDICT ERROR: ${e.message}`);
-    }
-  }, [done, addLog]);
+    } catch (e) { setError(e.message); }
+  }, [done]);
 
-  // ── Execute AI Round ──
+  // ── Execute AI Round (with Auto-Diff logic) ──
   const handleExecute = useCallback(async () => {
     if (done || isThinking) return;
     setError(null);
     setIsThinking(true);
-    addLog(`Requesting AI Analysis (${activeModelId})...`);
+    addLog(`AI reviewing current state...`);
     try {
-      const action = await callAgent({
-        observation, modelId: activeModelId, apiUrl: activeApiUrl, apiKey: activeApiKey,
-      });
+      const action = await callAgent({ observation, modelId: activeModelId, apiUrl: activeApiUrl, apiKey: activeApiKey });
       if (action.decision === "error") throw new Error(action.comment);
       
-      addLog(`AI Feedback Received: ${action.decision}`);
       const result = await stepEnv(action);
-      setObservation(result.observation);
+      let updatedObs = result.observation;
+
+      // --- AUTO-DIFF ENHANCEMENT ---
+      // If AI requested changes and provided a fix, we generate a visual diff automatically!
+      if (action.decision === "request_changes") {
+        const fix = extractProposedFix(action.comment);
+        if (fix && originalCode) {
+          const aiDiff = await getVisualDiff(originalCode, fix);
+          if (aiDiff) {
+            updatedObs = { ...updatedObs, diff: aiDiff, isAiProposal: true, proposedCode: fix };
+            addLog("AI generated a visual proposal. View the 'Code Changes' tab.");
+          }
+        }
+      }
+
+      setObservation(updatedObs);
       setScore(prev => prev + result.reward);
       setRewards(prev => [...prev, result.reward]);
       setDone(result.done);
       setDecision(action.decision.toUpperCase());
       setTurn(result.observation.turn);
-      addLog(`STEP SUCCESS: reward=${result.reward.toFixed(2)}`);
-    } catch (e) {
-      setError(e.message);
-      addLog(`AI ERROR: ${e.message}`);
-    } finally {
-      setIsThinking(false);
-    }
-  }, [done, isThinking, observation, activeModelId, activeApiUrl, activeApiKey, addLog]);
+    } catch (e) { setError(e.message); }
+    finally { setIsThinking(false); }
+  }, [done, isThinking, observation, originalCode, activeModelId, activeApiUrl, activeApiKey, addLog]);
+
+  // ── Apply AI Suggestion (Zero-effort update) ──
+  const handleApplyFix = useCallback(async () => {
+    if (!observation.proposedCode) return;
+    addLog("Applying AI fix to working code...");
+    try {
+      // Re-configure the scenario with the new code
+      await configCustom({ diff: observation.proposedCode, pr_title: customTitle, pr_description: customDesc });
+      // Reset the current view to show the 'Clean' version of the fix
+      setOriginalCode(observation.proposedCode);
+      setObservation(prev => ({ ...prev, diff: observation.proposedCode, isAiProposal: false }));
+      addLog("Fix applied. You can now start another review round if needed.");
+    } catch (e) { setError(e.message); }
+  }, [observation, customTitle, customDesc, addLog]);
 
-  // ── Handle Code Submission (The One-Push Trigger) ──
+  // ── One-Push Implementation ──
   const handleCodeSubmit = useCallback(async (code) => {
     setError(null);
     setIsThinking(true);
-    addLog("PHASE 2: Parsing submitted code...");
+    setOriginalCode(code); // Store the base code
     try {
-      // 1. Configure the scenario
       await configCustom({ diff: code, pr_title: customTitle, pr_description: customDesc });
-      
-      // 2. Initialize the specific environment
       const obs = await resetEnv("custom-review");
       
-      // 3. Reset state for new session
-      setObservation(obs);
-      setInitialized(true);
-      setInitStatus("ready");
-      setScore(0);
-      setTurn(1);
-      setMaxTurns(obs.max_turns || 3);
-      setDone(false);
-      setDecision("IDLE");
-      setRewards([]);
-      setTaskName("custom-review");
-      
-      addLog("CODE LOADED. Auto-triggering AI Review round...");
-      
-      // 4. AUTO-START THE REVIEW (The real "One-Push")
-      const action = await callAgent({
-        observation: obs, modelId: activeModelId, apiUrl: activeApiUrl, apiKey: activeApiKey,
-      });
-      if (action.decision === "error") throw new Error(action.comment);
-      
+      const action = await callAgent({ observation: obs, modelId: activeModelId, apiUrl: activeApiUrl, apiKey: activeApiKey });
       const result = await stepEnv(action);
-      setObservation(result.observation);
-      setScore(result.reward);
-      setRewards([result.reward]);
-      setDone(result.done);
-      setTurn(result.observation.turn); // Fix: Sync directly with backend
-      setDecision(action.decision.toUpperCase());
-      addLog(`AI REVIEW COMPLETE. Check results below.`);
-    } catch (e) {
-      setError(e.message);
-      addLog(`SESSION ERROR: ${e.message}`);
-    } finally {
-      setIsThinking(false);
-    }
-  }, [customTitle, customDesc, activeModelId, activeApiUrl, activeApiKey, addLog]);
+      let finalObs = result.observation;
 
-  const epStatus = !initialized ? "Offline" : done ? "Reviewed" : "Active";
-  const epSub = !initialized ? "Waiting for system check" : done ? "History saved" : isThinking ? "Reviewer processing..." : "Awaiting decision";
-  const prSub = initialized ? `${taskName} · Session Progress` : "Connect to begin";
+      // Generate Auto-Diff if first round identifies issues
+      if (action.decision === "request_changes") {
+        const fix = extractProposedFix(action.comment);
+        if (fix) {
+          const aiDiff = await getVisualDiff(code, fix);
+          if (aiDiff) finalObs = { ...finalObs, diff: aiDiff, isAiProposal: true, proposedCode: fix };
+        }
+      }
 
-  // Decision state for TopBar
-  const currentDecision = decision;
+      setObservation(finalObs);
+      setInitialized(true); setInitStatus("ready");
+      setScore(result.reward); setTurn(result.observation.turn);
+      setMaxTurns(obs.max_turns || 3); setDone(false);
+      setDecision(action.decision.toUpperCase()); setRewards([result.reward]);
+      setTaskName("custom-review");
+    } catch (e) { setError(e.message); }
+    finally { setIsThinking(false); }
+  }, [customTitle, customDesc, activeModelId, activeApiUrl, activeApiKey, addLog]);
 
   return (
     <div className="dash">
-      <Sidebar
-        taskName={taskName} setTaskName={setTaskName}
-        presets={presets}
+      <Sidebar 
+        taskName={taskName} setTaskName={setTaskName} presets={presets}
         selectedPreset={selectedPreset} setSelectedPreset={setSelectedPreset}
         customApiUrl={customApiUrl} setCustomApiUrl={setCustomApiUrl}
         customModelId={customModelId} setCustomModelId={setCustomModelId}
         customApiKey={customApiKey} setCustomApiKey={setCustomApiKey}
-        isInternal={isInternal}
-        onInit={handleInit}
-        initStatus={initStatus}
-        rewards={rewards}
-        customTitle={customTitle} setCustomTitle={setCustomTitle}
+        isInternal={isInternal} onInit={handleInit} initStatus={initStatus}
+        rewards={rewards} customTitle={customTitle} setCustomTitle={setCustomTitle}
         customDesc={customDesc} setCustomDesc={setCustomDesc}
       />
       <div className="main">
-        <TopBar
-          title={observation.pr_title || "PR Review Command Center"}
-          subtitle={prSub}
-          decision={currentDecision}
-        />
-        <MetricCards score={score} turn={turn} maxTurns={maxTurns} status={epStatus} statusSub={epSub} />
-        
+        <TopBar title={observation.pr_title || "PR Review Command Center"} subtitle={initialized ? `${taskName} · Session Progress` : "Connect to begin"} decision={decision} />
+        <MetricCards score={score} turn={turn} maxTurns={maxTurns} status={!initialized ? "Offline" : done ? "Reviewed" : "Active"} statusSub={done ? "History saved" : isThinking ? "Reviewer processing..." : "Awaiting decision"} />
         <div className="content unified-workspace">
           {error && <div className="status-msg error">{error}</div>}
-          
           <div className="workspace-layout">
-            {/* Stage 1: The Input Panel (Visible when no code loaded) */}
             {(!observation.diff || !initialized) ? (
               <div className="full-width-input">
-                <DiffView 
-                  diff={null} 
-                  onCodeSubmit={handleCodeSubmit}
-                  isProcessing={isThinking} 
-                />
+                <DiffView diff={null} onCodeSubmit={handleCodeSubmit} isProcessing={isThinking} />
               </div>
             ) : (
-              /* Stage 2 & 3: Parallel Review View */
               <div className="split-view">
                 <div className="split-left">
                   <div className="pane-header">CODE CHANGES</div>
                   <DiffView 
                     diff={observation.diff} 
                     isAccepted={done && decision === 'APPROVE'}
+                    isAiProposal={observation.isAiProposal}
+                    onApplyFix={handleApplyFix}
                   />
                 </div>
                 <div className="split-right">
                   <div className="pane-header">NEGOTIATION TIMELINE</div>
-                  <Timeline 
-                    history={observation.review_history || []} 
-                    isThinking={isThinking} 
-                    onExecute={handleExecute} 
-                    onManual={handleManual}
-                    done={done} 
-                  />
+                  <Timeline history={observation.review_history || []} isThinking={isThinking} onExecute={handleExecute} onManual={handleManual} done={done} />
                 </div>
               </div>
             )}
           </div>
-          
           <LogBox logs={logs} />
         </div>
       </div>

pr_review_dashboard/app/api/agent/route.js

@@ -10,14 +10,19 @@ export async function POST(request) {
 
     const client = new OpenAI({ baseURL: apiUrl, apiKey: apiKey });
 
-    const systemPrompt =
-      'You are a senior software engineer performing a pull request code review.\n' +
-      'Respond with ONLY this JSON (no markdown, no extra text):\n' +
-      '{\n' +
-      '  "decision": "approve|request_changes|escalate",\n' +
-      '  "issue_category": "logic|security|performance|correctness|none",\n' +
-      '  "comment": "your detailed review identifying root cause"\n' +
-      '}';
+    const systemPrompt = `You are a Senior Software Engineer conducting a thorough Pull Request review.
+    Your goal is to evaluate the provided diff and issue a verdict: [approve], [request_changes], or [escalate].
+    
+    CRITICAL: 
+    1. Focus on root causes (e.g., SQL injection, Race conditions, Logic errors), not just style.
+    2. If you issue [request_changes], you MUST include a "Proposed Fix" code block (using \`\`\`python) that shows the full CORRECTED version of the logic you are criticizing.
+    
+    RESPONSE FORMAT (VALID JSON):
+    {
+      "decision": "approve" | "request_changes" | "escalate",
+      "comment": "Detailed technical feedback here. Mention specific line numbers and root causes.",
+      "issue_category": "security" | "logic" | "performance" | "style" | "none"
+    }`;
 
     const historyLines = (observation.review_history || [])
       .map(h => `${h.role.toUpperCase()}: ${h.content}`)

pr_review_dashboard/app/api/diff/route.js

@@ -0,0 +1,17 @@
+export async function POST(req) {
+  try {
+    const body = await req.json();
+    const backendUrl = process.env.API_BASE_URL || "http://localhost:8000";
+    
+    const response = await fetch(`${backendUrl}/diff`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    
+    const data = await response.json();
+    return Response.json(data);
+  } catch (error) {
+    return Response.json({ error: error.message }, { status: 500 });
+  }
+}

pr_review_dashboard/components/DiffView.js

@@ -48,7 +48,7 @@ function highlightCode(text) {
   return finalHtml;
 }
 
-export default function DiffView({ diff, onCodeSubmit, isProcessing, isAccepted }) {
+export default function DiffView({ diff, onCodeSubmit, isProcessing, isAccepted, isAiProposal, onApplyFix }) {
   const [inputText, setInputText] = useState("");
   const [isDragOver, setIsDragOver] = useState(false);
 
@@ -163,13 +163,24 @@ export default function DiffView({ diff, onCodeSubmit, isProcessing, isAccepted
 
   return (
     <div className="diff-box">
-      <div className="diff-header" style={{ borderLeft: '2px solid transparent' }}>
-        <span style={{ color: isAccepted ? "#3fb950" : "inherit" }}>
-          {isAccepted ? `✓ ${filename} (Concluded)` : filename}
-        </span>
-        <span style={{ fontSize: '10px', color: '#8b949e' }}>
-          {isAccepted ? "HISTORY PRESERVED" : `+${adds} −${dels} lines`}
+      <div className="diff-header" style={{ borderLeft: isAiProposal ? '4px solid #ff7b72' : '2px solid transparent' }}>
+        <span style={{ color: isAccepted ? "#3fb950" : isAiProposal ? "#ff7b72" : "inherit" }}>
+          {isAccepted ? `✓ ${filename} (Concluded)` : isAiProposal ? `⚠️ AI PROPOSAL: ${filename}` : filename}
         </span>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <span style={{ fontSize: '10px', color: '#8b949e' }}>
+            {isAccepted ? "HISTORY PRESERVED" : `+${adds} −${dels} lines`}
+          </span>
+          {isAiProposal && onApplyFix && (
+            <button 
+              className="hunk-btn accept" 
+              onClick={onApplyFix}
+              style={{ fontSize: '9px', padding: '2px 8px' }}
+            >
+              Apply AI Suggestion →
+            </button>
+          )}
+        </div>
       </div>
       <div className="diff-body" style={{ minHeight: '400px' }}>
         {parsedLines.map((line, i) => (

server/app.py

@@ -61,6 +61,22 @@ def state():
         raise HTTPException(status_code=400, detail="No active episode. Call /reset first.")
     return env.state()
 
+@app.post("/diff")
+async def generate_diff(payload: dict):
+    old_code = payload.get("old_code", "")
+    new_code = payload.get("new_code", "")
+    filename = payload.get("filename", "file.py")
+    
+    import difflib
+    old_lines = old_code.splitlines(keepends=True)
+    new_lines = new_code.splitlines(keepends=True)
+    diff = difflib.unified_diff(
+        old_lines, new_lines,
+        fromfile=f"a/{filename}",
+        tofile=f"b/{filename}"
+    )
+    return {"diff": "".join(diff)}
+
 def main():
     import uvicorn
     import os