[Feature] Add Click-to-Line Highlighting for Debug Results

[Medora140]

Problem Statement

Currently, the debug panel shows issues with line numbers, but clicking an issue does not help users quickly locate the problem inside the editor.

Proposed Solution

I want to add an IDE-like experience where clicking a debug issue jumps to the exact line in the editor, highlights the affected code line, auto-scrolls the editor smoothly.

This will make debugging much faster and improve overall UX.

Files Likely Affected

Frontend

frontend/script.js
frontend/index.html
frontend/style.css

Expected Behavior

User clicks a debug issue card
Editor automatically scrolls to that line
The line gets temporarily highlighted
Works for all supported languages

Hi @imDarshanGK, I would like to work on this issue. Please assign it to me.

[SarthakKharche]

Hi @Medora140 👋
I’d like to work on this issue. The feature would significantly improve the debugging workflow by providing an IDE-like experience inside the editor.

I’m planning to implement:

• Click-to-jump functionality from debug issue cards to the exact editor line
• Smooth auto-scrolling to the target line
• Temporary line highlighting for better visibility
• Support across all currently supported languages

I have experience working with frontend JavaScript and UI interactions, and I’d be happy to take this up.
Could you please assign this issue to me under gssoc? 🚀

[priyanka58984]

Hi @Medora140, I would like to work on this issue.

I’m planning to add a proper empty state fallback for sections like Debug and Improve when analysis has not been triggered yet, instead of showing loading skeletons indefinitely.

The fix will include:

showing skeletons only during active analysis requests
displaying a friendly empty state when no data exists
guiding users to run analysis first

Please assign this issue to me.

[aabhhayy]

Hi! I'm a GSSoC 2026 contributor and i love to work on this issue. @Medora140 👋
I went through the live demo at "qyverixai.onrender.com" and reproduced the problem myself — clicking a debug issue card does nothing, and finding the exact line manually is frustrating, especially for beginners.
Here's my plan:

-> Add a click event listener on each debug issue card in script.js
-> Use the line number already present in the debug result to scroll the editor
-> Apply a temporary CSS highlight class on that line, then remove it after ~2 seconds
-> Test across Python, JS, and other supported languages

No new dependencies needed — pure vanilla JS and CSS. Clean and lightweight.
Could you please assign this to me?
Happy to share a draft implementation before the full PR if needed. 🙏

[saurabhhhcodes]

Implemented this in PR #299. Debug issue cards now jump to the referenced editor line, focus/select that line, and temporarily highlight it in both the editor gutter and code view for a faster debugging flow.

[Medora140]

Hi @saurabhhhcodes
I had opened this issue and was actively following the discussion around it. I noticed you opened a PR without being assigned by the maintainer.

I’d just like to request that in future, please avoid opening PRs on issues already claimed/opened by other contributors unless you’ve been assigned or given confirmation by the maintainer. It helps prevent duplicate work and keeps the contribution process fair for everyone participating in GSSoC.

Thanks for understanding

[Medora140]

Implemented the click-to-line debug navigation feature in PR #325.

Added:

• Clickable debug issue navigation
• Smooth auto-scrolling to target lines
• Temporary editor highlight animation
• Keyboard accessibility support
• Active issue visual state
• Responsive line-height handling
• Merge regression fixes after upstream sync

The feature has been tested locally and is working as expected.