feat: AI "Generate Tests" output has no way to copy individual test cases — users must copy the entire AI panel text and manually extract the one test they need

[prince-pokharna]

🚀 Problem Statement

The README documents: "AI Fix with 'Apply Solution'" — the Apply Solution button makes applying a fix a one-click action. However, the "Generate Tests" AI feature has no equivalent action button. When the AI generates 5-10 test cases, a user who wants only test case #3 must:

1. Manually select the specific test case text in the AI panel
2. Copy it
3. Switch to the editor
4. Paste it in the right location

This is especially painful on mobile (Debugra has a dedicated MobileBottomNav) where text selection is frustrating.

Proposed Fix

Add a "Copy Test" button that appears on hover over each test case block in the AI response panel:

// In src/components/Editor/AIResponsePanel.jsx

// After AI generates test cases, parse them into individual blocks
function parseTestCases(aiOutput) {
  // Split by common test function patterns: def test_, it(', test(', @Test
  const testPattern = /(?=def test_|it\(['"`]|test\(['"`]|@Test)/g;
  return aiOutput.split(testPattern).filter(Boolean);
}

// Render each test case with a copy button
{aiMode === 'tests' && testCases.map((testCase, index) => (
  <div key={index} className="test-case-block">
    <div className="test-case-header">
      <span className="test-case-label">Test {index + 1}</span>
      <button
        className="btn-copy-test"
        onClick={() => {
          navigator.clipboard.writeText(testCase.trim());
          showCopiedFeedback(index);
        }}
        aria-label={`Copy test case ${index + 1}`}
      >
        {copiedIndex === index ? '✓ Copied' : 'Copy'}
      </button>
    </div>
    <pre className="test-case-code">{testCase.trim()}</pre>
  </div>
))}

Also add an "Insert All Tests" button below the full test output that appends all generated tests to a new section at the bottom of the Monaco editor (after the existing code), matching the UX pattern already established by "Apply Solution".

Files to Modify

File	Change
src/components/Editor/AIResponsePanel.jsx	Parse test cases into blocks, add per-block Copy button
src/hooks/useAI.js	Store test cases as parsed array, not raw string
src/index.css	Add .test-case-block, .btn-copy-test 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]

@prince-pokharna, @vijaypatil477, I've reviewed the issue description and think it's a great feature idea. I'd be happy to work on implementing the ability to copy individual test cases in the "Generate Tests" output. Please let me know if I can be assigned to this task.