feat: Groq AI "Fix" feature applies the solution to the editor without a diff view — users cannot see what changed before accepting, making it impossible to learn from the AI's fix

[prince-pokharna]

🚀 Problem Statement

Debugra's README highlights: "AI Fix with 'Apply Solution' — Click 'Fix' to generate an AI solution, review it in the AI panel, and apply it to the editor with a single click." The word "review" implies the user can inspect the fix before applying it. However, if the AI panel only shows the fixed code as a block of text (without a before/after diff), the user:

1. Cannot immediately see what changed without manually comparing
2. Cannot selectively accept parts of the fix (accept the logic change but reject a style change)
3. Misses the learning opportunity — understanding why the AI made each change is the educational core of a debugging tool

This is especially important for Debugra's target audience: students and developers learning to debug.

Proposed Fix

Show a unified diff view in the AIResponsePanel before the "Apply Solution" button using Monaco Editor's built-in diff editor:

// src/components/Editor/AIResponsePanel.jsx

import { DiffEditor } from '@monaco-editor/react';

// When AI returns a fix, render a diff instead of plain text:
{aiMode === 'fix' && suggestedFix && (
  <div className="ai-diff-container">
    <div className="diff-header">
      <span>Review AI Fix</span>
      <span className="diff-legend">
        <span className="removed">Removed</span>
        <span className="added">Added</span>
      </span>
    </div>
    <DiffEditor
      original={currentCode}       // Current editor content
      modified={suggestedFix}      // AI's suggested fix
      language={selectedLanguage}
      options={{
        readOnly: true,
        renderSideBySide: false,   // Inline diff for compact view
        minimap: { enabled: false },
      }}
      height="300px"
    />
    <div className="diff-actions">
      <button onClick={applyFix} className="btn-apply">✓ Apply Fix</button>
      <button onClick={dismissFix} className="btn-dismiss">✕ Dismiss</button>
    </div>
  </div>
)}

@monaco-editor/react is already a dependency (Monaco Editor is the core editor). The DiffEditor export is included in the same package — no new dependencies required.

Files to Modify

File	Change
src/components/Editor/AIResponsePanel.jsx	Replace plain text fix display with Monaco DiffEditor
src/hooks/useAI.js	Store suggestedFix and currentCode snapshot together
src/index.css	Add .ai-diff-container, .diff-header, .diff-legend styles

Suggested labels: enhancement, frontend, UX, level: intermediate

I would like to work on this. Could you please assign it to me?

[prince-pokharna]

Hey @vijaypatil477 ,
Please assign it to me under GSSOC 2026.
/assign /claim

[Yuvraj-Sarathe]

Hi @prince-pokharna and @vijaypatil477, I'm interested in contributing to this feature and have read the issue description. I'd be happy to take on this task, could I kindly be assigned to it? I'm looking forward to working on it and delivering a solution.