feat: implement vertically aligned split view for diff viewer

[lakshay122007]

Before opening: make sure there is an issue tracking this work, and link it below. PRs without a linked issue may be closed without review.

Linked issue

Closes #24

What this PR does

This PR updates the DiffViewer component to support a true side-by-side split layout that maintains perfect vertical alignment. It dynamically processes the diff data to inject blank "spacer" blocks where code additions and removals are asymmetrical, ensuring that unchanged code lines remain perfectly synced horizontally across both the "Before" and "After" columns.

Type of change

• Bug fix
• New feature
• ML model / training pipeline
• Refactor (no behaviour change)
• Documentation
• Tests only

ML tier (if applicable)

• Tier 1 — Triage
• Tier 2 — Predictive
• Tier 3 — Autonomous
• Not ML-related

---

Changes

Frontend

• Updated src/app/components/ui/diff-viewer.tsx to include a custom alignment algorithm within renderSplitView.
• Added a flush() mechanism to group consecutive added and removed lines and pad them with { type: "empty" } spacer lines before rendering.
• Replaced the previous split view filter logic that caused vertical misalignment.

---

Testing

How did you test this?

Ran the frontend locally via Vite and navigated to the /fix route to test against the mock vulnerability diffs. Toggled between "Unified" and "Split" views, visually verifying that both single-line and multi-line changes injected the correct number of empty spacers to keep the surrounding context lines horizontally aligned. Also verified that the "Copy" functionality remains unaffected.

Checklist

• Tested locally end-to-end (upload ZIP or GitHub URL → scan → findings returned correctly)
• New ML model falls back gracefully when model file is absent
• No new console.error or unhandled Python exceptions introduced
• Added or updated tests where applicable
• requirements.txt / package.json updated if new dependencies added
• New model files (.pkl, .pt, etc.) are gitignored, not committed

---

Anything reviewers should focus on

Reviewers can focus on the flush() logic inside renderSplitView in diff-viewer.tsx. It handles the synchronization of the left and right arrays to ensure the Tailwind flex containers maintain equal heights. No external diffing libraries were needed since the parent component already provides parsed diff objects.

Screenshots (if UI changed)

[lakshay122007]

hi @ionfwsrijan kindly review it and let me know if any changes required. thanks! attatched the screenshot of the split view in diff checker also.

[rushi-k12]

@ionfwsrijan seems fine, go ahead