Implement Side-by-Side Pairwise LLM Response Diff Viewer Component

[hardikkaurani]

🟡 Intermediate Issue

Problem

Evaluation results show candidate and reference text in separate cards, making it hard to spot differences between LLM outputs.

Why It Matters

A side-by-side diff viewer highlighting textual differences between candidate output and reference ground truth dramatically improves evaluation analysis workflow.

Suggested Files

• frontend/src/pages/Evaluations.tsx
• frontend/src/components/ (new DiffViewer component)

Definition of Done

• Side-by-side diff viewer component created.
• Word-level or character-level diff highlighting implemented.
• Component integrated into Evaluations page.

[hardikkaurani]

👋 Maintainer Solution Guide:

1. Create frontend/src/components/common/DiffViewer.tsx
2. Use a diff library like diff (npm) to compute word-level differences
3. Render additions in green, deletions in red, unchanged text in gray
4. Import the component in Evaluations.tsx to display candidate vs reference comparisons
5. Run npm run typecheck && npm run lint

Visual feature that users will love! 🎯