From 96dadbbed3e7aba7bb3774b923736a65516ada35 Mon Sep 17 00:00:00 2001
From: Ravindi Fernando <140165006+RavindiFernando@users.noreply.github.com>
Date: Mon, 25 May 2026 16:49:17 +0530
Subject: [PATCH 01/10] feat: add SQLite persistent history with full-text
 search (closes #125) (#200)

* feat: add SQLite persistent history with full-text search (closes #125)

* ci: refresh PR mergeability

* fix: restore missing defaultdict import in main.py

* refactor(history): use FTS5 for full-text search, remove committed DB file
---
 backend/app/main.py              |  15 ++--
 backend/app/routers/history.py   |  63 ++++++++++++++
 backend/app/services/database.py | 111 +++++++++++++++++++++++++
 backend/requirements.txt         |   1 +
 backend/tests/test_history.py    |  86 +++++++++++++++++++
 frontend/index.html              | 136 +++++++++++++++++--------------
 6 files changed, 347 insertions(+), 65 deletions(-)
 create mode 100644 backend/app/routers/history.py
 create mode 100644 backend/app/services/database.py
 create mode 100644 backend/tests/test_history.py

diff --git a/backend/app/main.py b/backend/app/main.py
index e2ccc913..4fc561bb 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -13,11 +13,10 @@
 from collections import defaultdict
 from contextlib import asynccontextmanager
 
-
-from .routers import explanation, debugging, suggestions, analyze, subscribe, share
+from .routers import explanation, debugging, suggestions, analyze, subscribe, share, history
 from .services.scheduler import start_scheduler, stop_scheduler
-
 from .schemas import HealthResponse
+from .services import database
 
 # ── Rate limiter (in-memory, per IP) ──────────────────────────────────────────
 RATE_LIMIT = int(os.getenv("RATE_LIMIT_PER_MINUTE", "30"))
@@ -48,6 +47,7 @@ def rate_limit_headers(remaining: int) -> dict[str, str]:
 # ── Lifespan ──────────────────────────────────────────────────────────────────
 @asynccontextmanager
 async def lifespan(app: FastAPI):
+    await database.init_db()
     print("🚀 QyverixAI backend starting…")
     start_scheduler()
     yield
@@ -127,9 +127,10 @@ async def add_cache_header(request: Request, call_next):
 app.include_router(explanation.router, prefix="/explanation", tags=["Explanation"])
 app.include_router(debugging.router, prefix="/debugging", tags=["Debugging"])
 app.include_router(suggestions.router, prefix="/suggestions", tags=["Suggestions"])
-app.include_router(analyze.router, prefix="/analyze", tags=["Full Analysis"])
-app.include_router(subscribe.router, prefix="/subscribe", tags=["Subscription"])
+app.include_router(analyze.router,     prefix="/analyze",     tags=["Full Analysis"])
+app.include_router(subscribe.router,   prefix="/subscribe",   tags=["Subscription"])
 app.include_router(share.router)
+app.include_router(history.router,     prefix="/history",     tags=["History"])
 
 
 # ── Core Endpoints ────────────────────────────────────────────────────────────
@@ -145,7 +146,9 @@ async def root():
             "/suggestions/",
             "/analyze/",
             "/analyze/zip/",
+            "/subscribe/",
             "/share/",
+            "/history/",
         ],
     }
 
@@ -162,7 +165,9 @@ async def health_check():
             "/suggestions/",
             "/analyze/",
             "/analyze/zip/",
+            "/subscribe/",
             "/share/",
+            "/history/",
         ],
     }
 
diff --git a/backend/app/routers/history.py b/backend/app/routers/history.py
new file mode 100644
index 00000000..92b2a4fe
--- /dev/null
+++ b/backend/app/routers/history.py
@@ -0,0 +1,63 @@
+"""
+History router — save, retrieve, search and delete analysis history entries.
+"""
+
+from __future__ import annotations
+from fastapi import APIRouter, HTTPException, Query
+from pydantic import BaseModel, Field
+
+from ..services import database
+
+router = APIRouter()
+
+
+class HistorySaveRequest(BaseModel):
+    code: str = Field(..., min_length=1, max_length=50000)
+    language: str
+    score: int | None = None
+    issue_count: int | None = None
+
+
+class HistoryEntry(BaseModel):
+    id: int
+    code_hash: str
+    language: str
+    score: int | None
+    issue_count: int | None
+    timestamp: str
+    code_preview: str
+
+
+@router.post("/", response_model=dict, status_code=201)
+async def save_history(body: HistorySaveRequest):
+    entry_id = await database.save_entry(
+        code=body.code,
+        language=body.language,
+        score=body.score,
+        issue_count=body.issue_count,
+    )
+    return {"id": entry_id, "status": "saved"}
+
+
+@router.get("/", response_model=list[HistoryEntry])
+async def get_history(
+    limit: int = Query(20, ge=1, le=100),
+    offset: int = Query(0, ge=0),
+):
+    return await database.get_entries(limit=limit, offset=offset)
+
+
+@router.get("/search", response_model=list[HistoryEntry])
+async def search_history(
+    q: str = Query(..., min_length=1),
+    limit: int = Query(20, ge=1, le=100),
+):
+    return await database.search_entries(q=q, limit=limit)
+
+
+@router.delete("/{entry_id}", response_model=dict)
+async def delete_history(entry_id: int):
+    deleted = await database.delete_entry(entry_id)
+    if not deleted:
+        raise HTTPException(status_code=404, detail="History entry not found.")
+    return {"id": entry_id, "status": "deleted"}
diff --git a/backend/app/services/database.py b/backend/app/services/database.py
new file mode 100644
index 00000000..b26b5f62
--- /dev/null
+++ b/backend/app/services/database.py
@@ -0,0 +1,111 @@
+"""
+SQLite database service using aiosqlite for persistent history storage.
+Full-text search is powered by SQLite FTS5.
+"""
+
+from __future__ import annotations
+import hashlib
+import os
+import aiosqlite
+
+DB_PATH = os.getenv("HISTORY_DB_PATH", "history.db")
+
+
+async def init_db() -> None:
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS history (
+                id          INTEGER PRIMARY KEY AUTOINCREMENT,
+                code_hash   TEXT NOT NULL,
+                language    TEXT NOT NULL,
+                score       INTEGER,
+                issue_count INTEGER,
+                timestamp   TEXT NOT NULL DEFAULT (datetime('now')),
+                code_preview TEXT NOT NULL
+            )
+        """)
+        await db.execute("""
+            CREATE VIRTUAL TABLE IF NOT EXISTS fts_history
+            USING fts5(code_preview, content=history, content_rowid=id)
+        """)
+        await db.execute(
+            "CREATE INDEX IF NOT EXISTS idx_timestamp ON history(timestamp DESC)"
+        )
+        await db.commit()
+
+
+def hash_code(code: str) -> str:
+    return hashlib.sha256(code.encode()).hexdigest()
+
+
+async def save_entry(
+    code: str,
+    language: str,
+    score: int | None,
+    issue_count: int | None,
+) -> int:
+    code_hash = hash_code(code)
+    preview = code.strip()[:120].replace("\n", " ")
+    async with aiosqlite.connect(DB_PATH) as db:
+        cursor = await db.execute(
+            """
+            INSERT INTO history (code_hash, language, score, issue_count, code_preview)
+            VALUES (?, ?, ?, ?, ?)
+            """,
+            (code_hash, language, score, issue_count, preview),
+        )
+        row_id = cursor.lastrowid
+        await db.execute(
+            "INSERT INTO fts_history(rowid, code_preview) VALUES (?, ?)",
+            (row_id, preview),
+        )
+        await db.commit()
+        return row_id
+
+
+async def get_entries(limit: int = 20, offset: int = 0) -> list[dict]:
+    async with aiosqlite.connect(DB_PATH) as db:
+        db.row_factory = aiosqlite.Row
+        cursor = await db.execute(
+            """
+            SELECT id, code_hash, language, score, issue_count, timestamp, code_preview
+            FROM history
+            ORDER BY timestamp DESC
+            LIMIT ? OFFSET ?
+            """,
+            (limit, offset),
+        )
+        rows = await cursor.fetchall()
+        return [dict(row) for row in rows]
+
+
+async def search_entries(q: str, limit: int = 20) -> list[dict]:
+    async with aiosqlite.connect(DB_PATH) as db:
+        db.row_factory = aiosqlite.Row
+        cursor = await db.execute(
+            """
+            SELECT h.id, h.code_hash, h.language, h.score,
+                   h.issue_count, h.timestamp, h.code_preview
+            FROM history h
+            WHERE h.id IN (
+                SELECT rowid FROM fts_history WHERE fts_history MATCH ?
+            )
+            ORDER BY h.timestamp DESC
+            LIMIT ?
+            """,
+            (q, limit),
+        )
+        rows = await cursor.fetchall()
+        return [dict(row) for row in rows]
+
+
+async def delete_entry(entry_id: int) -> bool:
+    async with aiosqlite.connect(DB_PATH) as db:
+        cursor = await db.execute(
+            "DELETE FROM history WHERE id = ?", (entry_id,)
+        )
+        await db.execute(
+            "DELETE FROM fts_history WHERE rowid = ?", (entry_id,)
+        )
+        await db.commit()
+        return cursor.rowcount > 0
diff --git a/backend/requirements.txt b/backend/requirements.txt
index 67e21f3e..2f839c52 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -1,3 +1,4 @@
+aiosqlite>=0.20.0
 fastapi>=0.115.0
 uvicorn[standard]>=0.30.0
 pydantic>=2.7.0
diff --git a/backend/tests/test_history.py b/backend/tests/test_history.py
new file mode 100644
index 00000000..40f07df5
--- /dev/null
+++ b/backend/tests/test_history.py
@@ -0,0 +1,86 @@
+"""
+Tests for the /history/ endpoints.
+"""
+import sys, os, tempfile, asyncio
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+from app.services import database
+
+_tmp = tempfile.NamedTemporaryFile(suffix=".db", delete=False)
+_tmp.close()
+database.DB_PATH = _tmp.name
+
+asyncio.run(database.init_db())
+
+from fastapi.testclient import TestClient
+from app.main import app
+
+client = TestClient(app, raise_server_exceptions=True)
+
+
+def test_save_history():
+    r = client.post("/history/", json={
+        "code": "print('hello')",
+        "language": "Python",
+        "score": 85,
+        "issue_count": 1,
+    })
+    assert r.status_code == 201
+    d = r.json()
+    assert d["status"] == "saved"
+    assert "id" in d
+
+
+def test_get_history():
+    client.post("/history/", json={"code": "x = 1", "language": "Python", "score": 90, "issue_count": 0})
+    r = client.get("/history/")
+    assert r.status_code == 200
+    assert isinstance(r.json(), list)
+    assert len(r.json()) > 0
+
+
+def test_get_history_pagination():
+    r = client.get("/history/?limit=1&offset=0")
+    assert r.status_code == 200
+    assert len(r.json()) <= 1
+
+
+def test_search_history():
+    client.post("/history/", json={"code": "def my_unique_function(): pass", "language": "Python"})
+    r = client.get("/history/search?q=my_unique_function")
+    assert r.status_code == 200
+    results = r.json()
+    assert any("my_unique_function" in e["code_preview"] for e in results)
+
+
+def test_delete_history():
+    r = client.post("/history/", json={"code": "to be deleted", "language": "Python"})
+    entry_id = r.json()["id"]
+    r = client.delete(f"/history/{entry_id}")
+    assert r.status_code == 200
+    assert r.json()["status"] == "deleted"
+
+
+def test_delete_nonexistent():
+    r = client.delete("/history/999999")
+    assert r.status_code == 404
+
+
+def test_history_entry_fields():
+    client.post("/history/", json={"code": "let x = 1;", "language": "JavaScript", "score": 70, "issue_count": 2})
+    r = client.get("/history/")
+    assert r.status_code == 200
+    entry = r.json()[0]
+    assert "id" in entry
+    assert "code_hash" in entry
+    assert "language" in entry
+    assert "score" in entry
+    assert "issue_count" in entry
+    assert "timestamp" in entry
+    assert "code_preview" in entry
+
+
+def test_search_no_results():
+    r = client.get("/history/search?q=xyznotfoundever")
+    assert r.status_code == 200
+    assert r.json() == []
diff --git a/frontend/index.html b/frontend/index.html
index d2acb810..ff79ec9e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -39,71 +39,66 @@
       --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    [data-theme="light"] {
-      --bg: #f4f6fb;
-      --bg2: #ffffff;
-      --bg3: #eef1f7;
-      --border: rgba(0, 0, 0, 0.07);
-      --border2: rgba(0, 0, 0, 0.13);
-      --text: #111827;
-      --text2: #4b5563;
-      --text3: #9ca3af;
-      --shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-      --shadow2: 0 2px 8px rgba(0, 0, 0, 0.08);
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   RESET & BASE
-═══════════════════════════════════════════════════════════════ */
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0
-    }
-
-    html {
-      scroll-behavior: smooth;
-      font-size: 16px
-    }
-
-    body {
-      font-family: var(--font-ui);
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-      overflow-x: hidden;
-      line-height: 1.6;
-      transition: background var(--transition), color var(--transition);
-    }
-
-    ::selection {
-      background: var(--accent);
-      color: #fff
-    }
+      }
 
-    *:focus-visible {
-      outline: 3px solid var(--accent);
-      outline-offset: 3px;
-      box-shadow: 0 0 0 4px rgba(91, 156, 246, 0.4);
-      border-radius: 2px;
+      function renderHistory() {
+        if (!history.length) {
+          historyList.innerHTML = '<div class="list-empty">No history yet. Run your first analysis.</div>';
+          return;
+        }
+        historyList.innerHTML = history.map(h => `
+    <div class="history-item" onclick="loadEntry('${h.id}')" tabindex="0" role="button" aria-label="Load history entry for ${h.lang} at ${h.ts}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadEntry('${h.id}'); }">
+      <span class="history-lang">${h.lang || '?'}</span>
+      <span class="history-thumb">${escHtml(h.preview)}…</span>
+      <span class="history-meta">${h.ts}</span>
+    </div>`).join('');
+      }
     }
 
     /* ═══════════════════════════════════════════════════════════════
-   SCROLLBAR
+   ANALYZE CORE LOGIC PIPELINE
 ═══════════════════════════════════════════════════════════════ */
-    ::-webkit-scrollbar {
-      width: 5px;
-      height: 5px
-    }
-
-    ::-webkit-scrollbar-track {
-      background: var(--bg)
-    }
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    const resultActions = document.getElementById('resultActions');
+    const engineInfo = document.getElementById('engineInfo');
+    const timeInfo = document.getElementById('timeInfo');
+
+    analyzeBtn.addEventListener('click', doAnalyze);
+
+    async function doAnalyze() {
+      const code = editor.value.trim();
+      if (!code) {
+        toast('Please paste some code first.', 'error');
+        return;
+      }
+      const base = apiUrlInput.value.replace(/\/$/, '');
+      const endpointMap = { analyze: '/analyze/', explain: '/explanation/', debug: '/debugging/', suggest: '/suggestions/' };
+      const endpoint = endpointMap[selectedMode] || '/analyze/';
+
+      analyzeBtn.classList.add('loading');
+      analyzeBtn.disabled = true;
+      showShimmers();
+
+      try {
+        const res = await fetch(`${base}${endpoint}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code, language: selectedLang }),
+          signal: AbortSignal.timeout(30000),
+        });
 
-    ::-webkit-scrollbar-thumb {
-      background: var(--border2);
+document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
+  if (!confirm('Clear all history? This cannot be undone.')) return;
+  const base = apiUrlInput.value.replace(/\/$/, '');
+  const entries = await fetch(`${base}/history/?limit=100`).then(r => r.json()).catch(() => []);
+  for (const e of entries) {
+    fetch(`${base}/history/${e.id}`, { method: 'DELETE' }).catch(() => {});
+  }
+  history = [];
+  localStorage.removeItem('qyx_history');
+  renderHistory();
+  toast('History cleared', 'info');
+});
       border-radius: 99px
     }
 
@@ -3836,6 +3831,21 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
       /* ═══════════════════════════════════════════════════════════════
          HISTORY
       ═══════════════════════════════════════════════════════════════ */
+      async function saveHistoryToBackend(code, lang, result) {
+        try {
+          const base = apiUrlInput.value.replace(/\/$/, '');
+          const score = result.suggestions?.overall_score ?? null;
+          const issue_count = result.debugging?.error_count ?? null;
+          await fetch(`${base}/history/`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ code, language: lang, score, issue_count }),
+          });
+        } catch (_) {
+          // backend unavailable — localStorage fallback is still active
+        }
+      }
+
       function addToHistory(code, result) {
         const lang = result.explanation?.language || result.debugging?.language||result.suggestions?.language||selectedLang;
         const entry = {
@@ -3850,6 +3860,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
         localStorage.setItem('qyx_history', JSON.stringify(history));
         renderHistory();
+        saveHistoryToBackend(code, lang, result);
       }
 
       function renderHistory() {
@@ -3865,9 +3876,14 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
     </div>`).join('');
       }
 
-      document.getElementById('clearHistoryBtn').addEventListener('click', () => {
+      document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
         if (!confirm(getTranslation('confirm_clear_history'))) return;
 
+        const base = apiUrlInput.value.replace(/\/$/, '');
+        const entries = await fetch(`${base}/history/?limit=100`).then(r => r.json()).catch(() => []);
+        for (const e of entries) {
+          fetch(`${base}/history/${e.id}`, { method: 'DELETE' }).catch(() => {});
+        }
         history = [];
         localStorage.removeItem('qyx_history');
         renderHistory();

From ebc3397f4564a6c7580bfe6e81285aa9647dae1c Mon Sep 17 00:00:00 2001
From: Darshan <darshan241210s@gmail.com>
Date: Mon, 25 May 2026 17:15:06 +0530
Subject: [PATCH 02/10] fix(frontend): restore hero sizing; remove JS from
 <style> block

---
 frontend/index.html | 70 +++------------------------------------------
 1 file changed, 4 insertions(+), 66 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index ff79ec9e..2a7a7e8b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -38,69 +38,7 @@
       --font-mono: 'JetBrains Mono', monospace;
       --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     }
-
-      }
-
-      function renderHistory() {
-        if (!history.length) {
-          historyList.innerHTML = '<div class="list-empty">No history yet. Run your first analysis.</div>';
-          return;
-        }
-        historyList.innerHTML = history.map(h => `
-    <div class="history-item" onclick="loadEntry('${h.id}')" tabindex="0" role="button" aria-label="Load history entry for ${h.lang} at ${h.ts}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadEntry('${h.id}'); }">
-      <span class="history-lang">${h.lang || '?'}</span>
-      <span class="history-thumb">${escHtml(h.preview)}…</span>
-      <span class="history-meta">${h.ts}</span>
-    </div>`).join('');
-      }
-    }
-
-    /* ═══════════════════════════════════════════════════════════════
-   ANALYZE CORE LOGIC PIPELINE
-═══════════════════════════════════════════════════════════════ */
-    const analyzeBtn = document.getElementById('analyzeBtn');
-    const resultActions = document.getElementById('resultActions');
-    const engineInfo = document.getElementById('engineInfo');
-    const timeInfo = document.getElementById('timeInfo');
-
-    analyzeBtn.addEventListener('click', doAnalyze);
-
-    async function doAnalyze() {
-      const code = editor.value.trim();
-      if (!code) {
-        toast('Please paste some code first.', 'error');
-        return;
-      }
-      const base = apiUrlInput.value.replace(/\/$/, '');
-      const endpointMap = { analyze: '/analyze/', explain: '/explanation/', debug: '/debugging/', suggest: '/suggestions/' };
-      const endpoint = endpointMap[selectedMode] || '/analyze/';
-
-      analyzeBtn.classList.add('loading');
-      analyzeBtn.disabled = true;
-      showShimmers();
-
-      try {
-        const res = await fetch(`${base}${endpoint}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ code, language: selectedLang }),
-          signal: AbortSignal.timeout(30000),
-        });
-
-document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
-  if (!confirm('Clear all history? This cannot be undone.')) return;
-  const base = apiUrlInput.value.replace(/\/$/, '');
-  const entries = await fetch(`${base}/history/?limit=100`).then(r => r.json()).catch(() => []);
-  for (const e of entries) {
-    fetch(`${base}/history/${e.id}`, { method: 'DELETE' }).catch(() => {});
-  }
-  history = [];
-  localStorage.removeItem('qyx_history');
-  renderHistory();
-  toast('History cleared', 'info');
-});
-      border-radius: 99px
-    }
+    
 
     ::-webkit-scrollbar-thumb:hover {
       background: var(--text3)
@@ -382,11 +320,11 @@
 
     .hero h1 {
       font-family: var(--font-disp);
-      font-size: clamp(2.8rem, 6vw, 5rem);
+      font-size: clamp(2.2rem, 5.2vw, 4.2rem);
       font-weight: 800;
       letter-spacing: -0.04em;
       line-height: 1.16;
-      margin-bottom: 20px;
+      margin-bottom: 16px;
     }
 
     .hero h1 em {
@@ -2063,7 +2001,7 @@ <h1 data-i18n="hero_title">Debug. Understand.<br /><em>Ship faster.</em></h1>
         <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="btn btn-secondary">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
             <path
-              d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32(3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+              d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
           </svg>
           <span data-i18n="btn_star_github">Star on GitHub</span>
         </a>

From 69dec61dd193fec0781960f36c2619ffe4f66cac Mon Sep 17 00:00:00 2001
From: Darshan <darshan241210s@gmail.com>
Date: Mon, 25 May 2026 17:16:40 +0530
Subject: [PATCH 03/10] fix(frontend): tighten hero spacing and reduce heading
 size

---
 frontend/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2a7a7e8b..d0b4a32b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -253,7 +253,7 @@
 ═══════════════════════════════════════════════════════════════ */
     .hero {
       text-align: center;
-      padding: 64px 0 48px;
+      padding: 48px 0 32px;
       animation: heroEnter 0.7s ease both;
     }
 
@@ -320,11 +320,11 @@
 
     .hero h1 {
       font-family: var(--font-disp);
-      font-size: clamp(2.2rem, 5.2vw, 4.2rem);
+      font-size: clamp(2rem, 4.8vw, 3.4rem);
       font-weight: 800;
       letter-spacing: -0.04em;
-      line-height: 1.16;
-      margin-bottom: 16px;
+      line-height: 1.12;
+      margin-bottom: 12px;
     }
 
     .hero h1 em {

From 61fdc438b77533bb2e02f12704e4b3003d8cecb1 Mon Sep 17 00:00:00 2001
From: Darshan <darshan241210s@gmail.com>
Date: Mon, 25 May 2026 17:19:00 +0530
Subject: [PATCH 04/10] fix(frontend): default to dark theme when no user
 preference

---
 frontend/index.html | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index d0b4a32b..7216f2da 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2728,11 +2728,8 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
 
       const savedTheme = localStorage.getItem('qyx_theme');
 
-      const initialTheme = savedTheme
-       ? savedTheme
-       : window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light';
+      // Default to dark if user has not chosen a theme
+      const initialTheme = savedTheme || 'dark';
 
       document.documentElement.setAttribute('data-theme', initialTheme);
       setThemeIcon(initialTheme);

From 53a602b601814959287be8754e19d9fe39f0a7da Mon Sep 17 00:00:00 2001
From: Darshan <darshan241210s@gmail.com>
Date: Mon, 25 May 2026 17:21:04 +0530
Subject: [PATCH 05/10] fix(frontend): force dark theme for all users to
 restore layout

---
 frontend/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 7216f2da..70533ee6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2728,9 +2728,9 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
 
       const savedTheme = localStorage.getItem('qyx_theme');
 
-      // Default to dark if user has not chosen a theme
-      const initialTheme = savedTheme || 'dark';
-
+      // Force dark theme for now to avoid light-theme regressions
+      const initialTheme = 'dark';
+      localStorage.setItem('qyx_theme', initialTheme);
       document.documentElement.setAttribute('data-theme', initialTheme);
       setThemeIcon(initialTheme);
 

From dc15e4bda287232c21874435ca96525012e0ac6b Mon Sep 17 00:00:00 2001
From: Medora <medoragomes1402@gmail.com>
Date: Mon, 25 May 2026 18:40:53 +0530
Subject: [PATCH 06/10] Add click-to-line navigation for debug issues

---
 frontend/index.html | 2192 ++++++++++++++++++++++++-------------------
 1 file changed, 1242 insertions(+), 950 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 5a7b03b5..e39ab57c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -929,12 +929,24 @@
       margin-bottom: 10px;
       animation: cardIn 0.25s ease both;
       transition: all var(--transition);
+      cursor: pointer;
     }
 
     .issue-card:hover {
       transform: translateX(3px)
     }
 
+    .issue-card.active {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(91, 156, 246, 0.22);
+      transform: translateX(4px);
+    }
+
+    .issue-card:focus-visible {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 2px rgba(91, 156, 246, 0.25);
+    }
+
     @keyframes cardIn {
       from {
         opacity: 0;
@@ -947,6 +959,24 @@
       }
     }
 
+    .editor-highlight {
+      animation: editorFlash 0.9s ease;
+    }
+
+    @keyframes editorFlash {
+      0% {
+        box-shadow: 0 0 0 rgba(99, 102, 241, 0);
+      }
+
+      40% {
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
+      }
+
+      100% {
+        box-shadow: 0 0 0 rgba(99, 102, 241, 0);
+      }
+    }
+
     .issue-card.error {
       border-left-color: var(--red)
     }
@@ -1343,8 +1373,13 @@
       border-radius: 50%;
     }
 
-    .diff-label-before .diff-label-dot { background: var(--red); }
-    .diff-label-after  .diff-label-dot { background: var(--green); }
+    .diff-label-before .diff-label-dot {
+      background: var(--red);
+    }
+
+    .diff-label-after .diff-label-dot {
+      background: var(--green);
+    }
 
     .diff-view {
       display: grid;
@@ -1356,6 +1391,7 @@
       .diff-view {
         grid-template-columns: 1fr;
       }
+
       .diff-col:first-child {
         border-right: none;
         border-bottom: 1px solid var(--border);
@@ -1788,192 +1824,383 @@
     /* ═══════════════════════════════════════════════════════════════
    STAT BAR (quick summary at top of result)
 ═══════════════════════════════════════════════════════════════ */
-.stat-bar{
-  display:flex;gap:8px;flex-wrap:wrap;
-  margin-bottom:16px;
-}
-.stat-chip{
-  flex:1;min-width:80px;
-  padding:10px 14px;border-radius:var(--r2);
-  background:var(--bg3);border:1px solid var(--border);
-  text-align:center;
-}
-.stat-chip-num{
-  font-family:var(--font-disp);font-size:1.4rem;font-weight:800;
-  line-height:1;
-}
-.stat-chip-label{font-size:0.7rem;color:var(--text3);margin-top:2px}
-.stat-chip.error-chip .stat-chip-num{color:var(--red)}
-.stat-chip.warn-chip .stat-chip-num{color:var(--yellow)}
-.stat-chip.info-chip .stat-chip-num{color:var(--accent)}
-
-/* responsive */
-@media(max-width:600px){
-  .hero h1{font-size:2.2rem}
-  nav{flex-wrap:wrap;gap:8px}
-  .nav-links .nav-link span{display:none}
-  .hero{padding:50px 0 40px}
-  .hero-sub{font-size:0.98rem}
-  .features-row{gap:8px;padding:16px 0 40px}
-  .feat-pill{padding:10px 14px;min-width:140px}
-  .workspace{gap:14px}
-  .panel-header{padding:12px 14px}
-  .mode-row{gap:6px;padding:10px 14px}
-  .mode-btn{padding:8px 4px;font-size:0.74rem}
-  .analyze-row{padding:10px 14px}
-  .btn-analyze{padding:14px}
-  .result-content{min-height:280px;max-height:420px;padding:14px}
-  .bottom-grid{gap:14px}
-  .history-list,.fav-list{max-height:200px}
-  .score-ring-wrap{flex-direction:column;text-align:center;gap:12px}
-  .stat-bar{gap:6px}
-  .stat-chip{padding:8px 10px}
-  .stat-chip-num{font-size:1.2rem}
-  #toastContainer{bottom:12px;right:12px;left:12px}
-  .toast{min-width:unset;width:100%}
-  .hero-cta{gap:8px}
-  .btn{padding:11px 18px;font-size:0.85rem}
-}
-@media(max-width:400px){
-  .app{padding:0 14px 60px}
-  .hero h1{font-size:1.9rem}
-  .feat-pill-info p{display:none}
-  .lang-tab{padding:7px 10px;font-size:0.72rem}
-  .result-tab{padding:9px 12px;font-size:0.75rem}
-}
-</style>
-<link rel="icon" href="data:,">
+    .stat-bar {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 16px;
+    }
+
+    .stat-chip {
+      flex: 1;
+      min-width: 80px;
+      padding: 10px 14px;
+      border-radius: var(--r2);
+      background: var(--bg3);
+      border: 1px solid var(--border);
+      text-align: center;
+    }
+
+    .stat-chip-num {
+      font-family: var(--font-disp);
+      font-size: 1.4rem;
+      font-weight: 800;
+      line-height: 1;
+    }
+
+    .stat-chip-label {
+      font-size: 0.7rem;
+      color: var(--text3);
+      margin-top: 2px
+    }
+
+    .stat-chip.error-chip .stat-chip-num {
+      color: var(--red)
+    }
+
+    .stat-chip.warn-chip .stat-chip-num {
+      color: var(--yellow)
+    }
+
+    .stat-chip.info-chip .stat-chip-num {
+      color: var(--accent)
+    }
+
+    /* responsive */
+    @media(max-width:600px) {
+      .hero h1 {
+        font-size: 2.2rem
+      }
+
+      nav {
+        flex-wrap: wrap;
+        gap: 8px
+      }
+
+      .nav-links .nav-link span {
+        display: none
+      }
+
+      .hero {
+        padding: 50px 0 40px
+      }
+
+      .hero-sub {
+        font-size: 0.98rem
+      }
+
+      .features-row {
+        gap: 8px;
+        padding: 16px 0 40px
+      }
+
+      .feat-pill {
+        padding: 10px 14px;
+        min-width: 140px
+      }
+
+      .workspace {
+        gap: 14px
+      }
+
+      .panel-header {
+        padding: 12px 14px
+      }
+
+      .mode-row {
+        gap: 6px;
+        padding: 10px 14px
+      }
+
+      .mode-btn {
+        padding: 8px 4px;
+        font-size: 0.74rem
+      }
+
+      .analyze-row {
+        padding: 10px 14px
+      }
+
+      .btn-analyze {
+        padding: 14px
+      }
+
+      .result-content {
+        min-height: 280px;
+        max-height: 420px;
+        padding: 14px
+      }
+
+      .bottom-grid {
+        gap: 14px
+      }
+
+      .history-list,
+      .fav-list {
+        max-height: 200px
+      }
+
+      .score-ring-wrap {
+        flex-direction: column;
+        text-align: center;
+        gap: 12px
+      }
+
+      .stat-bar {
+        gap: 6px
+      }
+
+      .stat-chip {
+        padding: 8px 10px
+      }
+
+      .stat-chip-num {
+        font-size: 1.2rem
+      }
+
+      #toastContainer {
+        bottom: 12px;
+        right: 12px;
+        left: 12px
+      }
+
+      .toast {
+        min-width: unset;
+        width: 100%
+      }
+
+      .hero-cta {
+        gap: 8px
+      }
+
+      .btn {
+        padding: 11px 18px;
+        font-size: 0.85rem
+      }
+    }
+
+    @media(max-width:400px) {
+      .app {
+        padding: 0 14px 60px
+      }
+
+      .hero h1 {
+        font-size: 1.9rem
+      }
+
+      .feat-pill-info p {
+        display: none
+      }
+
+      .lang-tab {
+        padding: 7px 10px;
+        font-size: 0.72rem
+      }
+
+      .result-tab {
+        padding: 9px 12px;
+        font-size: 0.75rem
+      }
+    }
+  </style>
+  <link rel="icon" href="data:,">
 </head>
+
 <body>
-<div class="bg-orb bg-orb-1"></div>
-<div class="bg-orb bg-orb-2"></div>
-
-<div class="app">
-
-<!-- ── NAV ──────────────────────────────────────────────────── -->
-<nav>
-  <a href="#" class="nav-logo">
-    <div class="logo-hex">Q</div>
-    QyverixAI
-    <span style="font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(91,156,246,0.15);color:var(--accent);border:1px solid rgba(91,156,246,0.25);letter-spacing:0.04em;margin-left:4px">v3.0</span>
-  </a>
-  <div class="nav-links">
-    <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="nav-link">
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
-      <span>GitHub</span>
-    </a>
-    <a href="https://qyverixai.onrender.com/docs" target="_blank" class="nav-link">
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
-      <span>API Docs</span>
-    </a>
-    <button class="theme-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle dark mode" aria-pressed="false">
-      <svg id="themeIcon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-    </button>
-  </div>
-</nav>
-
-<!-- ── HERO ──────────────────────────────────────────────────── -->
-<section class="hero">
-  <div class="hero-badge">
-    <div class="badge-dot"></div>
-    Open Source · AI-Powered · Free
-  </div>
-  <h1>Debug. Understand.<br/><em>Ship faster.</em></h1>
-  <p class="hero-sub">
-    Paste your code and get instant bug detection, plain-English explanations, and actionable improvement suggestions — no account needed.
-  </p>
-  <div class="hero-cta">
-    <button class="btn btn-primary" onclick="document.getElementById('workspace').scrollIntoView({behavior:'smooth'})">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5,3 19,12 5,21"/></svg>
-      Start Analyzing
-    </button>
-    <button class="btn btn-secondary" onclick="loadSample()">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg>
-      Try Sample Code
-    </button>
-    <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="btn btn-secondary">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>
-      Star on GitHub
-    </a>
-  </div>
-</section>
-
-<!-- ── FEATURE PILLS ─────────────────────────────────────────── -->
-<div class="features-row">
-  <div class="feat-pill">
-    <div class="feat-pill-icon" style="background:rgba(34,212,123,0.12)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
-    <div class="feat-pill-info">
-      <h4>40+ Bug Patterns</h4>
-      <p>Python, JS, TS, Java, C++</p>
-    </div>
-  </div>
-  <div class="feat-pill">
-    <div class="feat-pill-icon" style="background:rgba(91,156,246,0.12)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
-    <div class="feat-pill-info">
-      <h4>Code Explanation</h4>
-      <p>Plain English breakdowns</p>
-    </div>
-  </div>
-  <div class="feat-pill">
-    <div class="feat-pill-icon" style="background:rgba(124,58,237,0.12)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/></svg></div>
-    <div class="feat-pill-info">
-      <h4>Smart Suggestions</h4>
-      <p>Quality score + grade</p>
-    </div>
-  </div>
-  <div class="feat-pill">
-    <div class="feat-pill-icon" style="background:rgba(245,146,62,0.12)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></div>
-    <div class="feat-pill-info">
-      <h4>Dark / Light Mode</h4>
-      <p>Persisted preference</p>
-    </div>
-  </div>
-  <div class="feat-pill">
-    <div class="feat-pill-icon" style="background:rgba(245,200,66,0.12)"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></div>
-    <div class="feat-pill-info">
-      <h4>File Upload</h4>
-      <p>.py .js .ts .java .cpp</p>
-    </div>
-  </div>
-</div>
-
-<!-- ── WORKSPACE ─────────────────────────────────────────────── -->
-<section id="workspace" class="workspace">
-
-  <!-- Editor Panel -->
-  <div class="panel">
-    <div class="panel-header">
-      <div class="panel-title">
-        <span></span>
-        Code Editor
+  <div class="bg-orb bg-orb-1"></div>
+  <div class="bg-orb bg-orb-2"></div>
+
+  <div class="app">
+
+    <!-- ── NAV ──────────────────────────────────────────────────── -->
+    <nav>
+      <a href="#" class="nav-logo">
+        <div class="logo-hex">Q</div>
+        QyverixAI
+        <span
+          style="font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(91,156,246,0.15);color:var(--accent);border:1px solid rgba(91,156,246,0.25);letter-spacing:0.04em;margin-left:4px">v3.0</span>
+      </a>
+      <div class="nav-links">
+        <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="nav-link">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+          </svg>
+          <span>GitHub</span>
+        </a>
+        <a href="https://qyverixai.onrender.com/docs" target="_blank" class="nav-link">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14,2 14,8 20,8" />
+          </svg>
+          <span>API Docs</span>
+        </a>
+        <button class="theme-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle dark mode"
+          aria-pressed="false">
+          <svg id="themeIcon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" aria-hidden="true">
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </svg>
+        </button>
       </div>
-      <div class="panel-actions">
-        <label class="icon-btn" title="Upload file" style="cursor:pointer" tabindex="0" role="button" aria-label="Upload code file" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault(); document.getElementById('fileInput').click();}">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-          <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.txt" style="display:none" tabindex="-1"/>
-        </label>
-        <button class="icon-btn" id="clearBtn" title="Clear" aria-label="Clear code editor">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
+    </nav>
+
+    <!-- ── HERO ──────────────────────────────────────────────────── -->
+    <section class="hero">
+      <div class="hero-badge">
+        <div class="badge-dot"></div>
+        Open Source · AI-Powered · Free
+      </div>
+      <h1>Debug. Understand.<br /><em>Ship faster.</em></h1>
+      <p class="hero-sub">
+        Paste your code and get instant bug detection, plain-English explanations, and actionable improvement
+        suggestions — no account needed.
+      </p>
+      <div class="hero-cta">
+        <button class="btn btn-primary"
+          onclick="document.getElementById('workspace').scrollIntoView({behavior:'smooth'})">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polygon points="5,3 19,12 5,21" />
+          </svg>
+          Start Analyzing
         </button>
-        <button class="icon-btn" id="copyBtn" title="Copy code" aria-label="Copy code to clipboard">
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        <button class="btn btn-secondary" onclick="loadSample()">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="16,18 22,12 16,6" />
+            <polyline points="8,6 2,12 8,18" />
+          </svg>
+          Try Sample Code
         </button>
+        <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" class="btn btn-secondary">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.38.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.08-.73.08-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.48 1 .11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.66 1.66.25 2.88.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58C20.57 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+          </svg>
+          Star on GitHub
+        </a>
       </div>
-    </div>
+    </section>
 
-    <!-- Language tabs -->
-    <div class="lang-tabs" role="tablist" aria-label="Select Programming Language">
-      <button class="lang-tab active" data-lang="python" role="tab" aria-selected="true">Python</button>
-      <button class="lang-tab" data-lang="javascript" role="tab" aria-selected="false">JavaScript</button>
-      <button class="lang-tab" data-lang="typescript" role="tab" aria-selected="false">TypeScript</button>
-      <button class="lang-tab" data-lang="java" role="tab" aria-selected="false">Java</button>
-      <button class="lang-tab" data-lang="cpp" role="tab" aria-selected="false">C++</button>
+    <!-- ── FEATURE PILLS ─────────────────────────────────────────── -->
+    <div class="features-row">
+      <div class="feat-pill">
+        <div class="feat-pill-icon" style="background:rgba(34,212,123,0.12)"><svg width="15" height="15"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg></div>
+        <div class="feat-pill-info">
+          <h4>40+ Bug Patterns</h4>
+          <p>Python, JS, TS, Java, C++</p>
+        </div>
+      </div>
+      <div class="feat-pill">
+        <div class="feat-pill-icon" style="background:rgba(91,156,246,0.12)"><svg width="15" height="15"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+          </svg></div>
+        <div class="feat-pill-info">
+          <h4>Code Explanation</h4>
+          <p>Plain English breakdowns</p>
+        </div>
+      </div>
+      <div class="feat-pill">
+        <div class="feat-pill-icon" style="background:rgba(124,58,237,0.12)"><svg width="15" height="15"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
+          </svg></div>
+        <div class="feat-pill-info">
+          <h4>Smart Suggestions</h4>
+          <p>Quality score + grade</p>
+        </div>
+      </div>
+      <div class="feat-pill">
+        <div class="feat-pill-icon" style="background:rgba(245,146,62,0.12)"><svg width="15" height="15"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg></div>
+        <div class="feat-pill-info">
+          <h4>Dark / Light Mode</h4>
+          <p>Persisted preference</p>
+        </div>
+      </div>
+      <div class="feat-pill">
+        <div class="feat-pill-icon" style="background:rgba(245,200,66,0.12)"><svg width="15" height="15"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+          </svg></div>
+        <div class="feat-pill-info">
+          <h4>File Upload</h4>
+          <p>.py .js .ts .java .cpp</p>
+        </div>
+      </div>
     </div>
+
+    <!-- ── WORKSPACE ─────────────────────────────────────────────── -->
+    <section id="workspace" class="workspace">
+
+      <!-- Editor Panel -->
+      <div class="panel">
+        <div class="panel-header">
+          <div class="panel-title">
+            <span></span>
+            Code Editor
+          </div>
+          <div class="panel-actions">
+            <label class="icon-btn" title="Upload file" style="cursor:pointer" tabindex="0" role="button"
+              aria-label="Upload code file"
+              onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault(); document.getElementById('fileInput').click();}">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                aria-hidden="true">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17,8 12,3 7,8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.txt" style="display:none"
+                tabindex="-1" />
+            </label>
+            <button class="icon-btn" id="clearBtn" title="Clear" aria-label="Clear code editor">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                aria-hidden="true">
+                <polyline points="3,6 5,6 21,6" />
+                <path d="M19 6l-1 14H6L5 6" />
+                <path d="M10 11v6" />
+                <path d="M14 11v6" />
+              </svg>
+            </button>
+            <button class="icon-btn" id="copyBtn" title="Copy code" aria-label="Copy code to clipboard">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                aria-hidden="true">
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Language tabs -->
+        <div class="lang-tabs" role="tablist" aria-label="Select Programming Language">
+          <button class="lang-tab active" data-lang="python" role="tab" aria-selected="true">Python</button>
+          <button class="lang-tab" data-lang="javascript" role="tab" aria-selected="false">JavaScript</button>
+          <button class="lang-tab" data-lang="typescript" role="tab" aria-selected="false">TypeScript</button>
+          <button class="lang-tab" data-lang="java" role="tab" aria-selected="false">Java</button>
+          <button class="lang-tab" data-lang="cpp" role="tab" aria-selected="false">C++</button>
+        </div>
         <!-- Editor -->
         <div class="editor-wrap">
           <div class="line-numbers" id="lineNumbers" aria-hidden="true">1</div>
           <textarea id="codeEditor" placeholder="# Paste your code here or click 'Try Sample Code' above…"
-            spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" aria-label="Code Editor"></textarea>
+            spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off"
+            aria-label="Code Editor"></textarea>
         </div>
 
         <div class="editor-footer">
@@ -2180,471 +2407,473 @@ <h3>No suggestions yet</h3>
     </div>
 
   </div><!-- /app -->
-  
-
-    <!-- ── FOOTER ─────────────────────────────────────────────────── -->
-    <footer>
-      <div class="app" style="display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;">
-        <div>
-          <div class="footer-logo">QyverixAI</div>
-          <p>
-            <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank">GitHub</a>
-            · <a href="https://qyverixai.onrender.com/docs" target="_blank">API Docs</a>
-            · MIT License
-          </p>
-          <p style="font-size:0.75rem">Built for the open source community</p>
-        </div>
-        <div style="max-width:320px;">
-          <p style="margin:0 0 6px;font-size:0.8rem;font-weight:600;color:var(--accent);">Weekly Digest</p>
-          <form id="digestForm" style="display:flex;gap:6px;">
-            <input type="email" id="digestEmail" placeholder="your@email.com" required
-                   style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);">
-            <button type="submit" id="digestBtn" style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
-          </form>
-          <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis stats.</p>
-        </div>
+
+
+  <!-- ── FOOTER ─────────────────────────────────────────────────── -->
+  <footer>
+    <div class="app" style="display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;">
+      <div>
+        <div class="footer-logo">QyverixAI</div>
+        <p>
+          <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank">GitHub</a>
+          · <a href="https://qyverixai.onrender.com/docs" target="_blank">API Docs</a>
+          · MIT License
+        </p>
+        <p style="font-size:0.75rem">Built for the open source community</p>
       </div>
-    </footer>
+      <div style="max-width:320px;">
+        <p style="margin:0 0 6px;font-size:0.8rem;font-weight:600;color:var(--accent);">Weekly Digest</p>
+        <form id="digestForm" style="display:flex;gap:6px;">
+          <input type="email" id="digestEmail" placeholder="your@email.com" required
+            style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);">
+          <button type="submit" id="digestBtn"
+            style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
+        </form>
+        <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis
+          stats.</p>
+      </div>
+    </div>
+  </footer>
 
-    <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
-    <div id="toastContainer"></div>
+  <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
+  <div id="toastContainer"></div>
 
-    <script>
-      /* ═══════════════════════════════════════════════════════════════
-         STATE
-      ═══════════════════════════════════════════════════════════════ */
-      const MAX_HISTORY = 50;
-      let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-      let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
-      let currentResult = null;
-      let selectedLang = 'python';
-      let selectedMode = 'analyze';
+  <script>
+    /* ═══════════════════════════════════════════════════════════════
+       STATE
+    ═══════════════════════════════════════════════════════════════ */
+    const MAX_HISTORY = 50;
+    let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
+    let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
+    let currentResult = null;
+    let selectedLang = 'python';
+    let selectedMode = 'analyze';
 
-      /* ═══════════════════════════════════════════════════════════════
-         DOM REFS
-      ═══════════════════════════════════════════════════════════════ */
-      const editor = document.getElementById('codeEditor');
-      const lineNumbers = document.getElementById('lineNumbers');
-      const charCount = document.getElementById('charCount');
-      const analyzeBtn = document.getElementById('analyzeBtn');
-      const spinner = document.getElementById('spinner');
-      const apiUrlInput = document.getElementById('apiUrl');
-      const apiDot = document.getElementById('apiDot');
-      const apiStatusText = document.getElementById('apiStatusText');
-      const historyList = document.getElementById('historyList');
-      const favList = document.getElementById('favList');
-      const resultActions = document.getElementById('resultActions');
-      const engineInfo = document.getElementById('engineInfo');
-      const timeInfo = document.getElementById('timeInfo');
+    /* ═══════════════════════════════════════════════════════════════
+       DOM REFS
+    ═══════════════════════════════════════════════════════════════ */
+    const editor = document.getElementById('codeEditor');
+    const lineNumbers = document.getElementById('lineNumbers');
+    const charCount = document.getElementById('charCount');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    const spinner = document.getElementById('spinner');
+    const apiUrlInput = document.getElementById('apiUrl');
+    const apiDot = document.getElementById('apiDot');
+    const apiStatusText = document.getElementById('apiStatusText');
+    const historyList = document.getElementById('historyList');
+    const favList = document.getElementById('favList');
+    const resultActions = document.getElementById('resultActions');
+    const engineInfo = document.getElementById('engineInfo');
+    const timeInfo = document.getElementById('timeInfo');
 
-      /* ═══════════════════════════════════════════════════════════════
-         THEME
-      ═══════════════════════════════════════════════════════════════ */
-      // dark mode → moon, light mode → sun
-      function setThemeIcon(theme) {
-        const icon = document.getElementById('themeIcon');
-        if (!icon) return;
-        if (theme === 'dark') {
-          icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
-        } else {
-          icon.innerHTML = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
-        }
-        const btn = document.getElementById('themeToggle');
-        btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
-        btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+    /* ═══════════════════════════════════════════════════════════════
+       THEME
+    ═══════════════════════════════════════════════════════════════ */
+    // dark mode → moon, light mode → sun
+    function setThemeIcon(theme) {
+      const icon = document.getElementById('themeIcon');
+      if (!icon) return;
+      if (theme === 'dark') {
+        icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
+      } else {
+        icon.innerHTML = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
       }
+      const btn = document.getElementById('themeToggle');
+      btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+      btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
+    }
 
-      const savedTheme = localStorage.getItem('qyx_theme') || 'dark';
-      document.documentElement.setAttribute('data-theme', savedTheme);
-      setThemeIcon(savedTheme);
+    const savedTheme = localStorage.getItem('qyx_theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    setThemeIcon(savedTheme);
 
-      document.getElementById('themeToggle').addEventListener('click', () => {
-        const cur = document.documentElement.getAttribute('data-theme');
-        const next = cur === 'dark' ? 'light' : 'dark';
-        document.documentElement.setAttribute('data-theme', next);
-        localStorage.setItem('qyx_theme', next);
-        setThemeIcon(next);
-      });
+    document.getElementById('themeToggle').addEventListener('click', () => {
+      const cur = document.documentElement.getAttribute('data-theme');
+      const next = cur === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('qyx_theme', next);
+      setThemeIcon(next);
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         EDITOR
-      ═══════════════════════════════════════════════════════════════ */
-      function updateEditor() {
-        const val = editor.value;
-        const lines = val ? val.split('\n').length : 0;
-        const chars = val.length;
-        const nonBlank = val ? val.split('\n').filter(l => l.trim()).length : 0;
-        charCount.textContent = val
-          ? chars.toLocaleString() + ' chars · ' + lines + ' lines · ' + nonBlank + ' non-blank'
-          : 'Paste or type code to begin';
-        const lineCount = Math.max(lines, 1);
-        lineNumbers.innerHTML = val
-          ? Array.from({ length: lineCount }, (_, i) => i + 1).join('<br>')
-          : '1';
-      }
-
-      function looksLikeRestoredPageSource(text) {
-        return /<\s*html|<\s*style|<\s*script|function\s+updateEditor\s*\(|\.stat-bar|\.hero\s*\{|\.workspace\s*\{/i.test(text);
-      }
-
-      function normalizeEditorOnLoad() {
-        if (looksLikeRestoredPageSource(editor.value || '')) {
-          editor.value = '';
-          updateEditor();
-        }
+    /* ═══════════════════════════════════════════════════════════════
+       EDITOR
+    ═══════════════════════════════════════════════════════════════ */
+    function updateEditor() {
+      const val = editor.value;
+      const lines = val ? val.split('\n').length : 0;
+      const chars = val.length;
+      const nonBlank = val ? val.split('\n').filter(l => l.trim()).length : 0;
+      charCount.textContent = val
+        ? chars.toLocaleString() + ' chars · ' + lines + ' lines · ' + nonBlank + ' non-blank'
+        : 'Paste or type code to begin';
+      const lineCount = Math.max(lines, 1);
+      lineNumbers.innerHTML = val
+        ? Array.from({ length: lineCount }, (_, i) => i + 1).join('<br>')
+        : '1';
+    }
+
+    function looksLikeRestoredPageSource(text) {
+      return /<\s*html|<\s*style|<\s*script|function\s+updateEditor\s*\(|\.stat-bar|\.hero\s*\{|\.workspace\s*\{/i.test(text);
+    }
+
+    function normalizeEditorOnLoad() {
+      if (looksLikeRestoredPageSource(editor.value || '')) {
+        editor.value = '';
+        updateEditor();
       }
+    }
 
-      normalizeEditorOnLoad();
-      window.addEventListener('pageshow', normalizeEditorOnLoad);
-      setTimeout(normalizeEditorOnLoad, 0);
+    normalizeEditorOnLoad();
+    window.addEventListener('pageshow', normalizeEditorOnLoad);
+    setTimeout(normalizeEditorOnLoad, 0);
 
-      editor.addEventListener('input', updateEditor);
-      editor.addEventListener('scroll', () => {
-        lineNumbers.scrollTop = editor.scrollTop;
-      });
+    editor.addEventListener('input', updateEditor);
+    editor.addEventListener('scroll', () => {
+      lineNumbers.scrollTop = editor.scrollTop;
+    });
 
-      // Tab key support
-      editor.addEventListener('keydown', e => {
+    // Tab key support
+    editor.addEventListener('keydown', e => {
 
-        // TAB SUPPORT
-        if (e.key === 'Tab' && !e.shiftKey) {
+      // TAB SUPPORT
+      if (e.key === 'Tab' && !e.shiftKey) {
 
-          e.preventDefault();
+        e.preventDefault();
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-          editor.value =
-            editor.value.substring(0, start) +
-            '    ' +
-            editor.value.substring(end);
+        editor.value =
+          editor.value.substring(0, start) +
+          '    ' +
+          editor.value.substring(end);
 
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 4;
+        editor.selectionStart =
+          editor.selectionEnd =
+          start + 4;
 
-          updateEditor();
-        }
+        updateEditor();
+      }
 
-        // AUTO INDENT ON ENTER
-        else if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
+      // AUTO INDENT ON ENTER
+      else if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
 
-          e.preventDefault();
+        e.preventDefault();
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-          const value = editor.value;
+        const value = editor.value;
 
-          // Find current line
-          const lineStart =
-            value.lastIndexOf('\n', start - 1) + 1;
+        // Find current line
+        const lineStart =
+          value.lastIndexOf('\n', start - 1) + 1;
 
-          const currentLine =
-            value.substring(lineStart, start);
+        const currentLine =
+          value.substring(lineStart, start);
 
-          // Preserve existing indentation
-          const indentMatch = currentLine.match(/^\s*/);
+        // Preserve existing indentation
+        const indentMatch = currentLine.match(/^\s*/);
 
-          let indent = indentMatch
-            ? indentMatch[0]
-            : '';
+        let indent = indentMatch
+          ? indentMatch[0]
+          : '';
 
-          const trimmed = currentLine.trim();
+        const trimmed = currentLine.trim();
 
-          // Python indentation
-          if (
-            selectedLang === 'python' &&
-            trimmed.endsWith(':')
-          ) {
-            indent += '    ';
-          }
+        // Python indentation
+        if (
+          selectedLang === 'python' &&
+          trimmed.endsWith(':')
+        ) {
+          indent += '    ';
+        }
 
-          // JavaScript / TypeScript / Java / C++
-          else if (
-            ['javascript', 'typescript', 'java', 'cpp']
-              .includes(selectedLang) &&
-            trimmed.endsWith('{')
-          ) {
-            indent += '    ';
-          }
+        // JavaScript / TypeScript / Java / C++
+        else if (
+          ['javascript', 'typescript', 'java', 'cpp']
+            .includes(selectedLang) &&
+          trimmed.endsWith('{')
+        ) {
+          indent += '    ';
+        }
 
-          editor.value =
-            value.substring(0, start) +
-            '\n' + indent +
-            value.substring(end);
+        editor.value =
+          value.substring(0, start) +
+          '\n' + indent +
+          value.substring(end);
 
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 1 + indent.length;
+        editor.selectionStart =
+          editor.selectionEnd =
+          start + 1 + indent.length;
 
-          updateEditor();
-        }
+        updateEditor();
+      }
 
-        // SMART BACKSPACE
-        else if (e.key === 'Backspace') {
+      // SMART BACKSPACE
+      else if (e.key === 'Backspace') {
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-          // Only if no text selected
-          if (start === end) {
+        // Only if no text selected
+        if (start === end) {
 
-            const value = editor.value;
+          const value = editor.value;
 
-            // Text before cursor
-            const beforeCursor =
-              value.substring(0, start);
+          // Text before cursor
+          const beforeCursor =
+            value.substring(0, start);
 
-            // Current line
-            const lineStart =
-              beforeCursor.lastIndexOf('\n') + 1;
+          // Current line
+          const lineStart =
+            beforeCursor.lastIndexOf('\n') + 1;
 
-            const currentLine =
-              beforeCursor.substring(lineStart);
+          const currentLine =
+            beforeCursor.substring(lineStart);
 
-            // Remove full indentation level
-            if (currentLine.endsWith('    ')) {
+          // Remove full indentation level
+          if (currentLine.endsWith('    ')) {
 
-              e.preventDefault();
+            e.preventDefault();
 
-              editor.value =
-                value.substring(0, start - 4) +
-                value.substring(end);
+            editor.value =
+              value.substring(0, start - 4) +
+              value.substring(end);
 
-              editor.selectionStart =
-                editor.selectionEnd =
-                start - 4;
+            editor.selectionStart =
+              editor.selectionEnd =
+              start - 4;
 
-              updateEditor();
-            }
+            updateEditor();
           }
         }
-      });
+      }
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         FILE UPLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('fileInput').addEventListener('change', e => {
-        const file = e.target.files[0];
-        if (!file) return;
-        const ext = file.name.split('.').pop().toLowerCase();
-        const langMap = { py: 'python', js: 'javascript', ts: 'typescript', java: 'java', cpp: 'cpp' };
-        if (langMap[ext]) setLanguage(langMap[ext]);
-        const reader = new FileReader();
-        reader.onload = ev => {
-          editor.value = ev.target.result;
-          updateEditor();
-          toast(`Loaded ${file.name}`, 'success');
-        };
-        reader.readAsText(file);
-        e.target.value = '';
-      });
+    /* ═══════════════════════════════════════════════════════════════
+       FILE UPLOAD
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('fileInput').addEventListener('change', e => {
+      const file = e.target.files[0];
+      if (!file) return;
+      const ext = file.name.split('.').pop().toLowerCase();
+      const langMap = { py: 'python', js: 'javascript', ts: 'typescript', java: 'java', cpp: 'cpp' };
+      if (langMap[ext]) setLanguage(langMap[ext]);
+      const reader = new FileReader();
+      reader.onload = ev => {
+        editor.value = ev.target.result;
+        updateEditor();
+        toast(`Loaded ${file.name}`, 'success');
+      };
+      reader.readAsText(file);
+      e.target.value = '';
+    });
+
+    /* Drag and drop */
+    document.body.addEventListener('dragover', e => e.preventDefault());
+    document.body.addEventListener('drop', e => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = ev => {
+        editor.value = ev.target.result;
+        updateEditor();
+        toast(`Dropped ${file.name}`, 'success');
+      };
+      reader.readAsText(file);
+    });
 
-      /* Drag and drop */
-      document.body.addEventListener('dragover', e => e.preventDefault());
-      document.body.addEventListener('drop', e => {
-        e.preventDefault();
-        const file = e.dataTransfer.files[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.onload = ev => {
-          editor.value = ev.target.result;
-          updateEditor();
-          toast(`Dropped ${file.name}`, 'success');
-        };
-        reader.readAsText(file);
-      });
+    /* ═══════════════════════════════════════════════════════════════
+       LANGUAGE TABS
+    ═══════════════════════════════════════════════════════════════ */
+    function setLanguage(lang) {
+      selectedLang = lang;
 
-      /* ═══════════════════════════════════════════════════════════════
-         LANGUAGE TABS
-      ═══════════════════════════════════════════════════════════════ */
-      function setLanguage(lang) {
-        selectedLang = lang;
-
-        // 1. Update the visual tabs
-        document.querySelectorAll('.lang-tab').forEach(t => {
-          const isActive = t.dataset.lang === lang;
-          t.classList.toggle('active', isActive);
-          t.setAttribute('aria-selected', isActive ? 'true' : 'false');
-        });
+      // 1. Update the visual tabs
+      document.querySelectorAll('.lang-tab').forEach(t => {
+        const isActive = t.dataset.lang === lang;
+        t.classList.toggle('active', isActive);
+        t.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      });
 
-        // 2. Check if the editor currently contains one of the samples
-        const currentCode = editor.value.trim();
-        const isSample = Object.values(SAMPLES).map(s => s.trim()).includes(currentCode);
+      // 2. Check if the editor currently contains one of the samples
+      const currentCode = editor.value.trim();
+      const isSample = Object.values(SAMPLES).map(s => s.trim()).includes(currentCode);
 
-        // 3. If it is a sample, swap it to the new language's sample automatically
-        if (isSample) {
-          editor.value = SAMPLES[lang] || SAMPLES.python;
-          updateEditor();
-        }
+      // 3. If it is a sample, swap it to the new language's sample automatically
+      if (isSample) {
+        editor.value = SAMPLES[lang] || SAMPLES.python;
+        updateEditor();
       }
+    }
 
-      document.querySelectorAll('.lang-tab').forEach(t => {
-        t.addEventListener('click', () => setLanguage(t.dataset.lang));
-      });
+    document.querySelectorAll('.lang-tab').forEach(t => {
+      t.addEventListener('click', () => setLanguage(t.dataset.lang));
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         MODE BUTTONS
-      ═══════════════════════════════════════════════════════════════ */
-      document.querySelectorAll('.mode-btn').forEach(b => {
-        b.addEventListener('click', () => {
-          selectedMode = b.dataset.mode;
-          document.querySelectorAll('.mode-btn').forEach(x => {
-            x.classList.remove('active');
-            x.setAttribute('aria-pressed', 'false');
-          });
-          b.classList.add('active');
-          b.setAttribute('aria-pressed', 'true');
+    /* ═══════════════════════════════════════════════════════════════
+       MODE BUTTONS
+    ═══════════════════════════════════════════════════════════════ */
+    document.querySelectorAll('.mode-btn').forEach(b => {
+      b.addEventListener('click', () => {
+        selectedMode = b.dataset.mode;
+        document.querySelectorAll('.mode-btn').forEach(x => {
+          x.classList.remove('active');
+          x.setAttribute('aria-pressed', 'false');
         });
+        b.classList.add('active');
+        b.setAttribute('aria-pressed', 'true');
       });
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         RESULT TABS
-      ═══════════════════════════════════════════════════════════════ */
-      document.querySelectorAll('.result-tab').forEach(t => {
-        t.addEventListener('click', () => {
-          const tab = t.dataset.rtab;
-          document.querySelectorAll('.result-tab').forEach(x => {
-            x.classList.remove('active');
-            x.setAttribute('aria-selected', 'false');
-          });
-          document.querySelectorAll('.result-pane').forEach(x => x.classList.remove('active'));
-          t.classList.add('active');
-          t.setAttribute('aria-selected', 'true');
-          document.getElementById(`pane-${tab}`).classList.add('active');
+    /* ═══════════════════════════════════════════════════════════════
+       RESULT TABS
+    ═══════════════════════════════════════════════════════════════ */
+    document.querySelectorAll('.result-tab').forEach(t => {
+      t.addEventListener('click', () => {
+        const tab = t.dataset.rtab;
+        document.querySelectorAll('.result-tab').forEach(x => {
+          x.classList.remove('active');
+          x.setAttribute('aria-selected', 'false');
         });
+        document.querySelectorAll('.result-pane').forEach(x => x.classList.remove('active'));
+        t.classList.add('active');
+        t.setAttribute('aria-selected', 'true');
+        document.getElementById(`pane-${tab}`).classList.add('active');
       });
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         CLEAR / COPY
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('clearBtn').addEventListener('click', () => {
-        editor.value = '';
-        updateEditor();
-        resetResults();
-      });
-      document.getElementById('copyBtn').addEventListener('click', () => {
-        if (!editor.value.trim()) return;
-        navigator.clipboard.writeText(editor.value).then(() => toast('Code copied!', 'success'));
-      });
+    /* ═══════════════════════════════════════════════════════════════
+       CLEAR / COPY
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('clearBtn').addEventListener('click', () => {
+      editor.value = '';
+      updateEditor();
+      resetResults();
+    });
+    document.getElementById('copyBtn').addEventListener('click', () => {
+      if (!editor.value.trim()) return;
+      navigator.clipboard.writeText(editor.value).then(() => toast('Code copied!', 'success'));
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         API PING
-      ═══════════════════════════════════════════════════════════════ */
-      async function pingApi() {
-        const base = apiUrlInput.value.replace(/\/$/, '');
-        try {
-          const r = await fetch(`${base}/health`, { signal: AbortSignal.timeout(5000) });
-          if (r.ok) {
-            apiDot.classList.add('connected');
-            apiStatusText.textContent = 'Connected';
-            toast('API is reachable', 'success');
-          } else {
-            apiDot.classList.remove('connected');
-            apiStatusText.textContent = 'Error ' + r.status;
-          }
-        } catch {
+    /* ═══════════════════════════════════════════════════════════════
+       API PING
+    ═══════════════════════════════════════════════════════════════ */
+    async function pingApi() {
+      const base = apiUrlInput.value.replace(/\/$/, '');
+      try {
+        const r = await fetch(`${base}/health`, { signal: AbortSignal.timeout(5000) });
+        if (r.ok) {
+          apiDot.classList.add('connected');
+          apiStatusText.textContent = 'Connected';
+          toast('API is reachable', 'success');
+        } else {
           apiDot.classList.remove('connected');
-          apiStatusText.textContent = 'Unreachable';
-          toast('Cannot reach API. Check the URL.', 'error');
+          apiStatusText.textContent = 'Error ' + r.status;
         }
+      } catch {
+        apiDot.classList.remove('connected');
+        apiStatusText.textContent = 'Unreachable';
+        toast('Cannot reach API. Check the URL.', 'error');
       }
-      document.getElementById('pingBtn').addEventListener('click', pingApi);
-
-      // Auto-ping on load
-      setTimeout(pingApi, 800);
-
-      /* ═══════════════════════════════════════════════════════════════
-         ANALYZE
-      ═══════════════════════════════════════════════════════════════ */
-      analyzeBtn.addEventListener('click', doAnalyze);
-
-      async function doAnalyze() {
-        const code = editor.value.trim();
-        if (!code) { toast('Please paste some code first.', 'error'); return; }
-
-        const base = apiUrlInput.value.replace(/\/$/, '');
-        const endpointMap = {
-          analyze: '/analyze/',
-          explain: '/explanation/',
-          debug: '/debugging/',
-          suggest: '/suggestions/',
-        };
-        const endpoint = endpointMap[selectedMode] || '/analyze/';
-
-        // Loading state
-        analyzeBtn.classList.add('loading');
-        analyzeBtn.disabled = true;
-        showShimmers();
+    }
+    document.getElementById('pingBtn').addEventListener('click', pingApi);
 
-        try {
-          const res = await fetch(`${base}${endpoint}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ code, language: selectedLang }),
-            signal: AbortSignal.timeout(30000),
-          });
-          if (!res.ok) {
-            const err = await res.json().catch(() => ({}));
-            throw new Error(err.detail || `HTTP ${res.status}`);
-          }
-          const data = await res.json();
-          const elapsed = res.headers.get('X-Process-Time-Ms');
-
-          // Normalize to full analysis shape
-          let result;
-          if (selectedMode === 'analyze') {
-            result = data;
-          } else if (selectedMode === 'explain') {
-            result = { explanation: data, debugging: null, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
-          } else if (selectedMode === 'debug') {
-            result = { explanation: null, debugging: data, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
-          } else {
-            result = { explanation: null, debugging: null, suggestions: data, provider: 'rule-based', analysis_time_ms: null };
-          }
+    // Auto-ping on load
+    setTimeout(pingApi, 800);
 
-          currentResult = result;
-          renderResults(result, code);
-          addToHistory(code, result);
-          apiDot.classList.add('connected');
-          apiStatusText.textContent = 'Connected';
-          document.getElementById('engineBar').style.display = 'flex';
-          engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
-          if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
-          else if (data.analysis_time_ms) timeInfo.textContent = data.analysis_time_ms + 'ms';
-          resultActions.style.display = 'flex';
-
-        } catch (err) {
-          toast(`Error: ${err.message}`, 'error');
-          resetResults();
-        } finally {
-          analyzeBtn.classList.remove('loading');
-          analyzeBtn.disabled = false;
+    /* ═══════════════════════════════════════════════════════════════
+       ANALYZE
+    ═══════════════════════════════════════════════════════════════ */
+    analyzeBtn.addEventListener('click', doAnalyze);
+
+    async function doAnalyze() {
+      const code = editor.value.trim();
+      if (!code) { toast('Please paste some code first.', 'error'); return; }
+
+      const base = apiUrlInput.value.replace(/\/$/, '');
+      const endpointMap = {
+        analyze: '/analyze/',
+        explain: '/explanation/',
+        debug: '/debugging/',
+        suggest: '/suggestions/',
+      };
+      const endpoint = endpointMap[selectedMode] || '/analyze/';
+
+      // Loading state
+      analyzeBtn.classList.add('loading');
+      analyzeBtn.disabled = true;
+      showShimmers();
+
+      try {
+        const res = await fetch(`${base}${endpoint}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code, language: selectedLang }),
+          signal: AbortSignal.timeout(30000),
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.detail || `HTTP ${res.status}`);
+        }
+        const data = await res.json();
+        const elapsed = res.headers.get('X-Process-Time-Ms');
+
+        // Normalize to full analysis shape
+        let result;
+        if (selectedMode === 'analyze') {
+          result = data;
+        } else if (selectedMode === 'explain') {
+          result = { explanation: data, debugging: null, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
+        } else if (selectedMode === 'debug') {
+          result = { explanation: null, debugging: data, suggestions: null, provider: 'rule-based', analysis_time_ms: null };
+        } else {
+          result = { explanation: null, debugging: null, suggestions: data, provider: 'rule-based', analysis_time_ms: null };
         }
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         RENDER RESULTS
-      ═══════════════════════════════════════════════════════════════ */
-      function renderResults(result, code) {
-        if (result.explanation) renderExplain(result.explanation);
-        if (result.debugging) renderDebug(result.debugging);
-        if (result.suggestions) renderSuggest(result.suggestions);
 
-        // Auto-switch to relevant tab
-        const tabOrder = { analyze: 'explain', explain: 'explain', debug: 'debug', suggest: 'suggest' };
-        const targetTab = tabOrder[selectedMode] || 'explain';
-        document.querySelector(`[data-rtab="${targetTab}"]`).click();
+        currentResult = result;
+        renderResults(result, code);
+        addToHistory(code, result);
+        apiDot.classList.add('connected');
+        apiStatusText.textContent = 'Connected';
+        document.getElementById('engineBar').style.display = 'flex';
+        engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
+        if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
+        else if (data.analysis_time_ms) timeInfo.textContent = data.analysis_time_ms + 'ms';
+        resultActions.style.display = 'flex';
+
+      } catch (err) {
+        toast(`Error: ${err.message}`, 'error');
+        resetResults();
+      } finally {
+        analyzeBtn.classList.remove('loading');
+        analyzeBtn.disabled = false;
       }
+    }
 
-      function renderExplain(exp) {
-        document.getElementById('emptyExplain').style.display = 'none';
-        const el = document.getElementById('explainResult');
-        el.style.display = 'block';
-        document.getElementById('explainBadge').textContent = exp.complexity;
-
-        el.innerHTML = `
+    /* ═══════════════════════════════════════════════════════════════
+       RENDER RESULTS
+    ═══════════════════════════════════════════════════════════════ */
+    function renderResults(result, code) {
+      if (result.explanation) renderExplain(result.explanation);
+      if (result.debugging) renderDebug(result.debugging);
+      if (result.suggestions) renderSuggest(result.suggestions);
+
+      // Auto-switch to relevant tab
+      const tabOrder = { analyze: 'explain', explain: 'explain', debug: 'debug', suggest: 'suggest' };
+      const targetTab = tabOrder[selectedMode] || 'explain';
+      document.querySelector(`[data-rtab="${targetTab}"]`).click();
+    }
+
+    function renderExplain(exp) {
+      document.getElementById('emptyExplain').style.display = 'none';
+      const el = document.getElementById('explainResult');
+      el.style.display = 'block';
+      document.getElementById('explainBadge').textContent = exp.complexity;
+
+      el.innerHTML = `
     <div class="explain-summary" tabindex="0">${exp.summary}</div>
     <div class="explain-meta">
       <div class="meta-chip complexity-${exp.complexity}">
@@ -2663,27 +2892,27 @@ <h3>No suggestions yet</h3>
       ${exp.key_points.map((p, i) => `<li style="animation-delay:${i * 0.05}s">${renderMarkdown(p)}</li>`).join('')}
     </ul>
   `;
-      }
+    }
 
-      function renderDebug(dbg) {
-        document.getElementById('emptyDebug').style.display = 'none';
-        const el = document.getElementById('debugResult');
-        el.style.display = 'block';
+    function renderDebug(dbg) {
+      document.getElementById('emptyDebug').style.display = 'none';
+      const el = document.getElementById('debugResult');
+      el.style.display = 'block';
 
-        const badge = dbg.error_count > 0 ? dbg.error_count : dbg.issues.length;
-        document.getElementById('debugBadge').textContent = badge || '0';
+      const badge = dbg.error_count > 0 ? dbg.error_count : dbg.issues.length;
+      document.getElementById('debugBadge').textContent = badge || '0';
 
-        if (dbg.clean) {
-          el.innerHTML = `
+      if (dbg.clean) {
+        el.innerHTML = `
       <div class="clean-state">
         <div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg></div>
         <h3>No issues detected!</h3>
         <p>Your code passed all ${40}+ pattern checks. Keep it up!</p>
       </div>`;
-          return;
-        }
+        return;
+      }
 
-        const statBar = `
+      const statBar = `
     <div class="stat-bar">
       <div class="stat-chip error-chip">
         <div class="stat-chip-num">${dbg.error_count}</div>
@@ -2699,8 +2928,13 @@ <h3>No issues detected!</h3>
       </div>
     </div>`;
 
-        const cards = dbg.issues.map((issue, i) => `
-    <div class="issue-card ${issue.severity}" style="animation-delay:${i * 0.05}s" tabindex="0">
+      const cards = dbg.issues.map((issue, i) => `
+    <div class="issue-card ${issue.severity}" 
+    data-line="${issue.line || 1}"
+  tabindex="0"
+  role="button"
+  aria-label="Jump to line ${issue.line || 1}"
+  style="animation-delay:${i * 0.05}s">
       <div class="issue-header">
         <span class="issue-badge">${issue.severity}</span>
         <span class="issue-type">${issue.type}</span>
@@ -2711,120 +2945,121 @@ <h3>No issues detected!</h3>
       <div class="issue-fix">${issue.suggestion}</div>
     </div>`).join('');
 
-        el.innerHTML = statBar + cards;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         PURE-JS LINE DIFF (LCS-based)
-      ═══════════════════════════════════════════════════════════════ */
-      function computeDiff(originalText, fixedText) {
-        const aLines = originalText.split('\n');
-        const bLines = fixedText.split('\n');
-        const m = aLines.length, n = bLines.length;
-
-        // Build LCS table
-        const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
-        for (let i = 1; i <= m; i++) {
-          for (let j = 1; j <= n; j++) {
-            dp[i][j] = aLines[i - 1] === bLines[j - 1]
-              ? dp[i - 1][j - 1] + 1
-              : Math.max(dp[i - 1][j], dp[i][j - 1]);
-          }
-        }
+      el.innerHTML = statBar + cards;
+      attachIssueNavigation();
+    }
 
-        // Backtrack to get edit script
-        const left = [];   // original column (removed + equal)
-        const right = [];  // fixed column    (added + equal)
-        let i = m, j = n;
-        const edits = [];
-        while (i > 0 || j > 0) {
-          if (i > 0 && j > 0 && aLines[i - 1] === bLines[j - 1]) {
-            edits.push({ type: 'equal', a: aLines[i - 1], b: bLines[j - 1] });
-            i--; j--;
-          } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
-            edits.push({ type: 'added', b: bLines[j - 1] });
-            j--;
-          } else {
-            edits.push({ type: 'removed', a: aLines[i - 1] });
-            i--;
-          }
+    /* ═══════════════════════════════════════════════════════════════
+       PURE-JS LINE DIFF (LCS-based)
+    ═══════════════════════════════════════════════════════════════ */
+    function computeDiff(originalText, fixedText) {
+      const aLines = originalText.split('\n');
+      const bLines = fixedText.split('\n');
+      const m = aLines.length, n = bLines.length;
+
+      // Build LCS table
+      const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+      for (let i = 1; i <= m; i++) {
+        for (let j = 1; j <= n; j++) {
+          dp[i][j] = aLines[i - 1] === bLines[j - 1]
+            ? dp[i - 1][j - 1] + 1
+            : Math.max(dp[i - 1][j], dp[i][j - 1]);
         }
-        edits.reverse();
-
-        // Separate into two column lists
-        let aIdx = 0, bIdx = 0;
-        edits.forEach(e => {
-          if (e.type === 'equal') {
-            left.push({ type: 'equal', text: e.a, num: ++aIdx });
-            right.push({ type: 'equal', text: e.b, num: ++bIdx });
-          } else if (e.type === 'removed') {
-            left.push({ type: 'removed', text: e.a, num: ++aIdx });
-            right.push({ type: 'placeholder', text: '' });
-          } else {
-            left.push({ type: 'placeholder', text: '' });
-            right.push({ type: 'added', text: e.b, num: ++bIdx });
-          }
-        });
-        return { left, right };
       }
 
-      function renderDiffCol(lines) {
-        return lines.map(l => {
-          if (l.type === 'placeholder') {
-            return `<div class="diff-line diff-line-placeholder"><span class="diff-line-num"></span><span class="diff-line-content"> </span></div>`;
-          }
-          const cls = l.type === 'removed' ? 'diff-line-removed'
-            : l.type === 'added' ? 'diff-line-added'
-              : 'diff-line-equal';
-          const prefix = l.type === 'removed' ? '− ' : l.type === 'added' ? '+ ' : '  ';
-          return `<div class="diff-line ${cls}"><span class="diff-line-num">${l.num}</span><span class="diff-line-content">${prefix}${escHtml(l.text)}</span></div>`;
-        }).join('');
+      // Backtrack to get edit script
+      const left = [];   // original column (removed + equal)
+      const right = [];  // fixed column    (added + equal)
+      let i = m, j = n;
+      const edits = [];
+      while (i > 0 || j > 0) {
+        if (i > 0 && j > 0 && aLines[i - 1] === bLines[j - 1]) {
+          edits.push({ type: 'equal', a: aLines[i - 1], b: bLines[j - 1] });
+          i--; j--;
+        } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+          edits.push({ type: 'added', b: bLines[j - 1] });
+          j--;
+        } else {
+          edits.push({ type: 'removed', a: aLines[i - 1] });
+          i--;
+        }
       }
+      edits.reverse();
+
+      // Separate into two column lists
+      let aIdx = 0, bIdx = 0;
+      edits.forEach(e => {
+        if (e.type === 'equal') {
+          left.push({ type: 'equal', text: e.a, num: ++aIdx });
+          right.push({ type: 'equal', text: e.b, num: ++bIdx });
+        } else if (e.type === 'removed') {
+          left.push({ type: 'removed', text: e.a, num: ++aIdx });
+          right.push({ type: 'placeholder', text: '' });
+        } else {
+          left.push({ type: 'placeholder', text: '' });
+          right.push({ type: 'added', text: e.b, num: ++bIdx });
+        }
+      });
+      return { left, right };
+    }
 
-      /* Find the region of the editor code that best matches the fixed snippet.
-         Returns the matching original lines (as a string) or null if nothing found. */
-      function findOriginalSnippet(editorCode, fixedCode) {
-        if (!editorCode || !fixedCode) return null;
-        const fixedLines  = fixedCode.split('\n').map(l => l.trim()).filter(Boolean);
-        const editorLines = editorCode.split('\n');
-        if (!fixedLines.length || !editorLines.length) return null;
-
-        let bestScore = 0, bestStart = -1;
-
-        for (let i = 0; i < editorLines.length; i++) {
-          let score = 0;
-          for (let j = 0; j < fixedLines.length && i + j < editorLines.length; j++) {
-            const el = editorLines[i + j].trim();
-            const fl = fixedLines[j].trim();
-            if (!el || !fl) continue;
-            if (el === fl) {
-              score += 2;
-            } else if (fl.length > 6 && el.includes(fl.slice(0, Math.min(fl.length, 18)))) {
-              score += 1;
-            } else if (el.length > 6 && fl.includes(el.slice(0, Math.min(el.length, 18)))) {
-              score += 1;
-            }
+    function renderDiffCol(lines) {
+      return lines.map(l => {
+        if (l.type === 'placeholder') {
+          return `<div class="diff-line diff-line-placeholder"><span class="diff-line-num"></span><span class="diff-line-content"> </span></div>`;
+        }
+        const cls = l.type === 'removed' ? 'diff-line-removed'
+          : l.type === 'added' ? 'diff-line-added'
+            : 'diff-line-equal';
+        const prefix = l.type === 'removed' ? '− ' : l.type === 'added' ? '+ ' : '  ';
+        return `<div class="diff-line ${cls}"><span class="diff-line-num">${l.num}</span><span class="diff-line-content">${prefix}${escHtml(l.text)}</span></div>`;
+      }).join('');
+    }
+
+    /* Find the region of the editor code that best matches the fixed snippet.
+       Returns the matching original lines (as a string) or null if nothing found. */
+    function findOriginalSnippet(editorCode, fixedCode) {
+      if (!editorCode || !fixedCode) return null;
+      const fixedLines = fixedCode.split('\n').map(l => l.trim()).filter(Boolean);
+      const editorLines = editorCode.split('\n');
+      if (!fixedLines.length || !editorLines.length) return null;
+
+      let bestScore = 0, bestStart = -1;
+
+      for (let i = 0; i < editorLines.length; i++) {
+        let score = 0;
+        for (let j = 0; j < fixedLines.length && i + j < editorLines.length; j++) {
+          const el = editorLines[i + j].trim();
+          const fl = fixedLines[j].trim();
+          if (!el || !fl) continue;
+          if (el === fl) {
+            score += 2;
+          } else if (fl.length > 6 && el.includes(fl.slice(0, Math.min(fl.length, 18)))) {
+            score += 1;
+          } else if (el.length > 6 && fl.includes(el.slice(0, Math.min(el.length, 18)))) {
+            score += 1;
           }
-          if (score > bestScore) { bestScore = score; bestStart = i; }
         }
+        if (score > bestScore) { bestScore = score; bestStart = i; }
+      }
 
-        if (bestStart === -1 || bestScore < 1) return null;
+      if (bestStart === -1 || bestScore < 1) return null;
 
-        // Extract the matched region (same number of lines as the fixed snippet)
-        const start = Math.max(0, bestStart);
-        const end   = Math.min(editorLines.length, bestStart + fixedLines.length);
-        return editorLines.slice(start, end).join('\n');
-      }
+      // Extract the matched region (same number of lines as the fixed snippet)
+      const start = Math.max(0, bestStart);
+      const end = Math.min(editorLines.length, bestStart + fixedLines.length);
+      return editorLines.slice(start, end).join('\n');
+    }
 
-      /* Build the side-by-side diff HTML for one suggestion's example */
-      function buildDiffHtml(originalSnippet, fixedCode, copyId) {
-        const diff = computeDiff(originalSnippet, fixedCode);
-        const hasChanges = diff.left.some(l  => l.type === 'removed') ||
-                           diff.right.some(r => r.type === 'added');
-        // If nothing changed (identical), just show as fixed-code block
-        if (!hasChanges) {
-          const lines = fixedCode.split('\n').map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
-          return `
+    /* Build the side-by-side diff HTML for one suggestion's example */
+    function buildDiffHtml(originalSnippet, fixedCode, copyId) {
+      const diff = computeDiff(originalSnippet, fixedCode);
+      const hasChanges = diff.left.some(l => l.type === 'removed') ||
+        diff.right.some(r => r.type === 'added');
+      // If nothing changed (identical), just show as fixed-code block
+      if (!hasChanges) {
+        const lines = fixedCode.split('\n').map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
+        return `
           <div class="diff-wrapper">
             <div class="diff-header">
               <div class="diff-header-labels">
@@ -2837,8 +3072,8 @@ <h3>No issues detected!</h3>
             </div>
             <div class="diff-col" style="width:100%">${renderDiffCol(lines)}</div>
           </div>`;
-        }
-        return `
+      }
+      return `
         <div class="diff-wrapper">
           <div class="diff-header">
             <div class="diff-header-labels">
@@ -2855,25 +3090,25 @@ <h3>No issues detected!</h3>
             <div class="diff-col">${renderDiffCol(diff.right)}</div>
           </div>
         </div>`;
-      }
-
-      /* ═══════════════════════════════════════════════════════════════
-         RENDER SUGGESTIONS (with diff view)
-      ═══════════════════════════════════════════════════════════════ */
-      function renderSuggest(sugg) {
-        document.getElementById('emptySuggest').style.display = 'none';
-        const el = document.getElementById('suggestResult');
-        el.style.display = 'block';
-        document.getElementById('suggestBadge').textContent = sugg.suggestions.length || '0';
-
-        const scoreColor = sugg.overall_score >= 80 ? 'var(--green)'
-          : sugg.overall_score >= 60 ? 'var(--yellow)'
-            : 'var(--red)';
-
-        const circumference = 2 * Math.PI * 30;
-        const dashOffset = circumference - (sugg.overall_score / 100) * circumference;
+    }
 
-        const ring = `
+    /* ═══════════════════════════════════════════════════════════════
+       RENDER SUGGESTIONS (with diff view)
+    ═══════════════════════════════════════════════════════════════ */
+    function renderSuggest(sugg) {
+      document.getElementById('emptySuggest').style.display = 'none';
+      const el = document.getElementById('suggestResult');
+      el.style.display = 'block';
+      document.getElementById('suggestBadge').textContent = sugg.suggestions.length || '0';
+
+      const scoreColor = sugg.overall_score >= 80 ? 'var(--green)'
+        : sugg.overall_score >= 60 ? 'var(--yellow)'
+          : 'var(--red)';
+
+      const circumference = 2 * Math.PI * 30;
+      const dashOffset = circumference - (sugg.overall_score / 100) * circumference;
+
+      const ring = `
     <div class="score-ring-wrap">
       <div class="score-ring">
         <svg width="80" height="80" viewBox="0 0 80 80">
@@ -2895,40 +3130,40 @@ <h3>Quality Score</h3>
       </div>
     </div>`;
 
-        const cards = sugg.suggestions.length === 0
-          ? `<div class="clean-state"><div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></div><h3>Perfect score!</h3><p>No improvement suggestions found.</p></div>`
-          : sugg.suggestions.map((s, i) => {
+      const cards = sugg.suggestions.length === 0
+        ? `<div class="clean-state"><div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></div><h3>Perfect score!</h3><p>No improvement suggestions found.</p></div>`
+        : sugg.suggestions.map((s, i) => {
 
-            let exampleHtml = '';
-            if (s.example) {
-              const copyId  = `copy-fix-${i}`;
-              const rawLines = s.example.split('\n');
+          let exampleHtml = '';
+          if (s.example) {
+            const copyId = `copy-fix-${i}`;
+            const rawLines = s.example.split('\n');
 
-              // Case 1: example has unified diff markers (- / +)
-              const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
-              if (hasMarkers) {
-                const originalText = rawLines.filter(l => !l.startsWith('+')).map(l => l.replace(/^-\s?/, '')).join('\n');
-                const fixedText    = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
-                exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
+            // Case 1: example has unified diff markers (- / +)
+            const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
+            if (hasMarkers) {
+              const originalText = rawLines.filter(l => !l.startsWith('+')).map(l => l.replace(/^-\s?/, '')).join('\n');
+              const fixedText = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
+              exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
 
               // Case 2: two blocks separated by a blank line (before \n\n after)
-              } else {
-                const blankIdx = rawLines.findIndex(l => l.trim() === '');
-                if (blankIdx > 0 && blankIdx < rawLines.length - 1) {
-                  const originalText = rawLines.slice(0, blankIdx).join('\n');
-                  const fixedText    = rawLines.slice(blankIdx + 1).join('\n');
-                  exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
+            } else {
+              const blankIdx = rawLines.findIndex(l => l.trim() === '');
+              if (blankIdx > 0 && blankIdx < rawLines.length - 1) {
+                const originalText = rawLines.slice(0, blankIdx).join('\n');
+                const fixedText = rawLines.slice(blankIdx + 1).join('\n');
+                exampleHtml = buildDiffHtml(originalText, fixedText, copyId);
 
                 // Case 3 (most common from API): single fixed-code block
                 // → find matching region in editor as "Before", diff against example as "After"
+              } else {
+                const originalSnippet = findOriginalSnippet(editor.value, s.example);
+                if (originalSnippet) {
+                  exampleHtml = buildDiffHtml(originalSnippet, s.example, copyId);
                 } else {
-                  const originalSnippet = findOriginalSnippet(editor.value, s.example);
-                  if (originalSnippet) {
-                    exampleHtml = buildDiffHtml(originalSnippet, s.example, copyId);
-                  } else {
-                    // No match – show fixed code as green "Fixed Code" block
-                    const lines = rawLines.map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
-                    exampleHtml = `
+                  // No match – show fixed code as green "Fixed Code" block
+                  const lines = rawLines.map((text, idx) => ({ type: 'added', text, num: idx + 1 }));
+                  exampleHtml = `
                     <div class="diff-wrapper">
                       <div class="diff-header">
                         <div class="diff-header-labels">
@@ -2941,12 +3176,12 @@ <h3>Quality Score</h3>
                       </div>
                       <div class="diff-col" style="width:100%">${renderDiffCol(lines)}</div>
                     </div>`;
-                  }
                 }
               }
             }
+          }
 
-            return `
+          return `
       <div class="suggest-card priority-${s.priority}" style="animation-delay:${i * 0.05}s" tabindex="0">
         <div class="suggest-header">
           <span class="suggest-cat">${s.category}</span>
@@ -2955,245 +3190,302 @@ <h3>Quality Score</h3>
         <div class="suggest-desc">${s.description}</div>
         ${exampleHtml}
       </div>`;
-          }).join('');
-
-        el.innerHTML = ring + cards;
-
-        // Wire up "Copy fixed" buttons after DOM insertion
-        sugg.suggestions.forEach((s, i) => {
-          if (!s.example) return;
-          const btn = document.getElementById(`copy-fix-${i}`);
-          if (!btn) return;
-
-          // Always copy the after/fixed code
-          const rawLines   = s.example.split('\n');
-          const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
-          let fixedCode;
-          if (hasMarkers) {
-            fixedCode = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
-          } else {
-            const blankIdx = rawLines.findIndex(l => l.trim() === '');
-            fixedCode = blankIdx > 0 && blankIdx < rawLines.length - 1
-              ? rawLines.slice(blankIdx + 1).join('\n')
-              : s.example;
-          }
+        }).join('');
 
-          btn.addEventListener('click', () => {
-            navigator.clipboard.writeText(fixedCode).then(() => {
-              btn.textContent = '\u2713 Copied!';
-              btn.style.background = 'rgba(34,212,123,0.25)';
-              setTimeout(() => {
-                btn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy fixed`;
-                btn.style.background = '';
-              }, 2000);
-            }).catch(() => toast('Copy failed', 'error'));
-          });
-        });
-      }
+      el.innerHTML = ring + cards;
 
-      /* ═══════════════════════════════════════════════════════════════
-         SHIMMER LOADING
-      ═══════════════════════════════════════════════════════════════ */
-      function showShimmers() {
-        const shims = '<div class="shimmer-card"></div>'.repeat(3);
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          const el = document.getElementById(id);
-          el.style.display = 'block';
-          el.innerHTML = shims;
-        });
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'none';
-        });
-      }
+      // Wire up "Copy fixed" buttons after DOM insertion
+      sugg.suggestions.forEach((s, i) => {
+        if (!s.example) return;
+        const btn = document.getElementById(`copy-fix-${i}`);
+        if (!btn) return;
 
-      function resetResults() {
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          const el = document.getElementById(id);
-          el.style.display = 'none';
-          el.innerHTML = '';
-        });
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'flex';
-        });
-        ['explainBadge', 'debugBadge', 'suggestBadge'].forEach(id => {
-          document.getElementById(id).textContent = '';
+        // Always copy the after/fixed code
+        const rawLines = s.example.split('\n');
+        const hasMarkers = rawLines.some(l => /^[\-\+]/.test(l) && l.length > 1);
+        let fixedCode;
+        if (hasMarkers) {
+          fixedCode = rawLines.filter(l => !l.startsWith('-')).map(l => l.replace(/^\+\s?/, '')).join('\n');
+        } else {
+          const blankIdx = rawLines.findIndex(l => l.trim() === '');
+          fixedCode = blankIdx > 0 && blankIdx < rawLines.length - 1
+            ? rawLines.slice(blankIdx + 1).join('\n')
+            : s.example;
+        }
+
+        btn.addEventListener('click', () => {
+          navigator.clipboard.writeText(fixedCode).then(() => {
+            btn.textContent = '\u2713 Copied!';
+            btn.style.background = 'rgba(34,212,123,0.25)';
+            setTimeout(() => {
+              btn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy fixed`;
+              btn.style.background = '';
+            }, 2000);
+          }).catch(() => toast('Copy failed', 'error'));
         });
-        resultActions.style.display = 'none';
-        document.getElementById('engineBar').style.display = 'none';
-        engineInfo.textContent = '';
-        timeInfo.textContent = '';
-        currentResult = null;
-      }
+      });
+    }
 
-      /* ═══════════════════════════════════════════════════════════════
-         HISTORY
-      ═══════════════════════════════════════════════════════════════ */
-      function addToHistory(code, result) {
-        const lang = result.explanation?.language || result.debugging?.language||result.suggestions?.language||selectedLang;
-        const entry = {
-          id: Date.now(),
-          code,
-          result,
-          lang,
-          ts: new Date().toLocaleTimeString(),
-          preview: code.slice(0, 60).replace(/\n/g, ' '),
-        };
-        history.unshift(entry);
-        if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
-        localStorage.setItem('qyx_history', JSON.stringify(history));
-        renderHistory();
-      }
-
-      function renderHistory() {
-        if (!history.length) {
-          historyList.innerHTML = '<div class="list-empty">No history yet. Run your first analysis.</div>';
-          return;
-        }
-        historyList.innerHTML = history.map(h => `
+    /* ═══════════════════════════════════════════════════════════════
+       SHIMMER LOADING
+    ═══════════════════════════════════════════════════════════════ */
+    function showShimmers() {
+      const shims = '<div class="shimmer-card"></div>'.repeat(3);
+      ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
+        const el = document.getElementById(id);
+        el.style.display = 'block';
+        el.innerHTML = shims;
+      });
+      ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
+        document.getElementById(id).style.display = 'none';
+      });
+    }
+
+    function resetResults() {
+      ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
+        const el = document.getElementById(id);
+        el.style.display = 'none';
+        el.innerHTML = '';
+      });
+      ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
+        document.getElementById(id).style.display = 'flex';
+      });
+      ['explainBadge', 'debugBadge', 'suggestBadge'].forEach(id => {
+        document.getElementById(id).textContent = '';
+      });
+      resultActions.style.display = 'none';
+      document.getElementById('engineBar').style.display = 'none';
+      engineInfo.textContent = '';
+      timeInfo.textContent = '';
+      currentResult = null;
+    }
+
+    /* ═══════════════════════════════════════════════════════════════
+       HISTORY
+    ═══════════════════════════════════════════════════════════════ */
+    function addToHistory(code, result) {
+      const lang = result.explanation?.language || result.debugging?.language || result.suggestions?.language || selectedLang;
+      const entry = {
+        id: Date.now(),
+        code,
+        result,
+        lang,
+        ts: new Date().toLocaleTimeString(),
+        preview: code.slice(0, 60).replace(/\n/g, ' '),
+      };
+      history.unshift(entry);
+      if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
+      localStorage.setItem('qyx_history', JSON.stringify(history));
+      renderHistory();
+    }
+
+    function renderHistory() {
+      if (!history.length) {
+        historyList.innerHTML = '<div class="list-empty">No history yet. Run your first analysis.</div>';
+        return;
+      }
+      historyList.innerHTML = history.map(h => `
     <div class="history-item" onclick="loadEntry('${h.id}')" tabindex="0" role="button" aria-label="Load history entry for ${h.lang} at ${h.ts}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadEntry('${h.id}'); }">
       <span class="history-lang">${h.lang || '?'}</span>
       <span class="history-thumb">${escHtml(h.preview)}…</span>
       <span class="history-meta">${h.ts}</span>
     </div>`).join('');
-      }
-
-document.getElementById('clearHistoryBtn').addEventListener('click', () => {
-  if (!window.confirm('Are you sure you want to clear your history? This cannot be undone.')) return;
+    }
 
-  history = [];
-  localStorage.removeItem('qyx_history');
-  renderHistory();
-  toast('History cleared', 'info');
-});
-      function loadEntry(id) {
-        const entry = history.find(h => h.id === Number (id));
-        console.log(entry);
-        if (!entry) return;
-        editor.value = entry.code;
+    document.getElementById('clearHistoryBtn').addEventListener('click', () => {
+      if (!window.confirm('Are you sure you want to clear your history? This cannot be undone.')) return;
 
-        if(entry.lang){
-          setLanguage(entry.lang.toLowerCase());
-        }
-        
-        updateEditor();
-        currentResult = entry.result;
-        renderResults(entry.result, entry.code);
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+      history = [];
+      localStorage.removeItem('qyx_history');
+      renderHistory();
+      toast('History cleared', 'info');
+    });
+    function loadEntry(id) {
+      const entry = history.find(h => h.id === Number(id));
+      console.log(entry);
+      if (!entry) return;
+      editor.value = entry.code;
+
+      if (entry.lang) {
+        setLanguage(entry.lang.toLowerCase());
       }
 
-      /* ═══════════════════════════════════════════════════════════════
-         FAVORITES
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('favBtn').addEventListener('click', () => {
-        if (!currentResult || !editor.value.trim()) return;
-        const entry = {
-          id: Date.now(),
-          code: editor.value,
-          result: currentResult,
-          lang: currentResult.explanation?.language || selectedLang,
-          ts: new Date().toLocaleDateString(),
-          preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
-        };
-        favorites.unshift(entry);
-        if (favorites.length > 30) favorites = favorites.slice(0, 30);
-        localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
-        renderFavorites();
-        toast('Saved to favorites', 'success');
-      });
+      updateEditor();
+      currentResult = entry.result;
+      renderResults(entry.result, entry.code);
+      document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+    }
 
-      function renderFavorites() {
-        if (!favorites.length) {
-          favList.innerHTML = '<div class="list-empty">No favorites saved yet.</div>';
-          return;
-        }
-        favList.innerHTML = favorites.map(f => `
+    /* ═══════════════════════════════════════════════════════════════
+       FAVORITES
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('favBtn').addEventListener('click', () => {
+      if (!currentResult || !editor.value.trim()) return;
+      const entry = {
+        id: Date.now(),
+        code: editor.value,
+        result: currentResult,
+        lang: currentResult.explanation?.language || selectedLang,
+        ts: new Date().toLocaleDateString(),
+        preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
+      };
+      favorites.unshift(entry);
+      if (favorites.length > 30) favorites = favorites.slice(0, 30);
+      localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
+      renderFavorites();
+      toast('Saved to favorites', 'success');
+    });
+
+    function renderFavorites() {
+      if (!favorites.length) {
+        favList.innerHTML = '<div class="list-empty">No favorites saved yet.</div>';
+        return;
+      }
+      favList.innerHTML = favorites.map(f => `
     <div class="fav-item" onclick="loadFav('${f.id}')" tabindex="0" role="button" aria-label="Load favorite entry for ${f.lang} at ${f.ts}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadFav('${f.id}'); }">
       <span class="history-lang">${f.lang || '?'}</span>
       <span class="history-thumb">${escHtml(f.preview)}…</span>
       <span class="history-meta" style="opacity:0.5"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></span>
     </div>`).join('');
-      }
+    }
 
-document.getElementById('clearFavsBtn').addEventListener('click', () => {
-  if (!window.confirm('Are you sure you want to clear your favorites? This cannot be undone.')) return;
-  
-  favorites = [];
-  localStorage.removeItem('qyx_favorites');
-  renderFavorites();
-  toast('Favorites cleared', 'info');
-});
-      function loadFav(id) {
-        const entry = favorites.find(f => f.id === Number(id));
-        if (!entry) return;
-        editor.value = entry.code;
-        selectedLang = entry.lang.toLowerCase();
-        document.querySelectorAll('.lang-tab').forEach(tab =>{
-          const active = tab.dataset.lang === selectedLang;
-          tab.classList.toggle('active', active);
-          tab.setAttribute('aria-selected', active ? 'true' : 'false');
-        });
-        updateEditor();
-        currentResult = entry.result;
-        renderResults(entry.result, entry.code);
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
-      }
-      /* ═══════════════════════════════════════════════════════════════
-         DOWNLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('downloadBtn').addEventListener('click', () => {
-        if (!currentResult) return;
-        const text = buildReport(currentResult, editor.value);
-        const blob = new Blob([text], { type: 'text/plain' });
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = `qyverixai-report-${Date.now()}.txt`;
-        a.click();
-        URL.revokeObjectURL(a.href);
-        toast('Report downloaded', 'success');
-      });
+    document.getElementById('clearFavsBtn').addEventListener('click', () => {
+      if (!window.confirm('Are you sure you want to clear your favorites? This cannot be undone.')) return;
 
-      function buildReport(r, code) {
-        const lines = ['═══ QyverixAI Analysis Report ═══', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, ''];
-        if (r.explanation) {
-          lines.push('── EXPLANATION ──', `Language: ${r.explanation.language}`, `Complexity: ${r.explanation.complexity}`, `Summary: ${r.explanation.summary}`, '', ...r.explanation.key_points.map(p => `• ${p}`), '');
-        }
-        if (r.debugging) {
-          lines.push('── DEBUGGING ──', r.debugging.summary, '');
-          r.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
-        }
-        if (r.suggestions) {
-          lines.push('── SUGGESTIONS ──', `Score: ${r.suggestions.overall_score}/100 (${r.suggestions.grade})`, r.suggestions.next_step, '');
-          r.suggestions.suggestions.forEach(s => lines.push(`[${s.priority.toUpperCase()}] ${s.category}: ${s.description}`, ''));
-        }
-        lines.push('── CODE ──', '', code);
-        return lines.join('\n');
+      favorites = [];
+      localStorage.removeItem('qyx_favorites');
+      renderFavorites();
+      toast('Favorites cleared', 'info');
+    });
+    function loadFav(id) {
+      const entry = favorites.find(f => f.id === Number(id));
+      if (!entry) return;
+      editor.value = entry.code;
+      selectedLang = entry.lang.toLowerCase();
+      document.querySelectorAll('.lang-tab').forEach(tab => {
+        const active = tab.dataset.lang === selectedLang;
+        tab.classList.toggle('active', active);
+        tab.setAttribute('aria-selected', active ? 'true' : 'false');
+      });
+      updateEditor();
+      currentResult = entry.result;
+      renderResults(entry.result, entry.code);
+      document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+    }
+    /* ═══════════════════════════════════════════════════════════════
+       DOWNLOAD
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('downloadBtn').addEventListener('click', () => {
+      if (!currentResult) return;
+      const text = buildReport(currentResult, editor.value);
+      const blob = new Blob([text], { type: 'text/plain' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `qyverixai-report-${Date.now()}.txt`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+      toast('Report downloaded', 'success');
+    });
+
+    function buildReport(r, code) {
+      const lines = ['═══ QyverixAI Analysis Report ═══', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, ''];
+      if (r.explanation) {
+        lines.push('── EXPLANATION ──', `Language: ${r.explanation.language}`, `Complexity: ${r.explanation.complexity}`, `Summary: ${r.explanation.summary}`, '', ...r.explanation.key_points.map(p => `• ${p}`), '');
       }
-
-      /* ═══════════════════════════════════════════════════════════════
-         TOAST
-      ═══════════════════════════════════════════════════════════════ */
-      function toast(msg, type = 'info') {
-        const container = document.getElementById('toastContainer');
-        const el = document.createElement('div');
-        el.className = 'toast ' + type;
-        const icons = { success: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>', error: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', info: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' };
-        el.innerHTML = '<span class="toast-icon">' + (icons[type] || icons.info) + '</span><span>' + msg + '</span>';
-        container.appendChild(el);
-        setTimeout(() => {
-          el.classList.add('fadeout');
-          el.addEventListener('animationend', () => el.remove());
-        }, 3000);
+      if (r.debugging) {
+        lines.push('── DEBUGGING ──', r.debugging.summary, '');
+        r.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
       }
-
-      /* ═══════════════════════════════════════════════════════════════
-         HELPERS
-      ═══════════════════════════════════════════════════════════════ */
-      function escHtml(s) {
-        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      if (r.suggestions) {
+        lines.push('── SUGGESTIONS ──', `Score: ${r.suggestions.overall_score}/100 (${r.suggestions.grade})`, r.suggestions.next_step, '');
+        r.suggestions.suggestions.forEach(s => lines.push(`[${s.priority.toUpperCase()}] ${s.category}: ${s.description}`, ''));
       }
-      function renderMarkdown(s) {
-        return s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-          .replace(/`(.+?)`/g, '<code style="font-family:var(--font-mono);font-size:0.85em;background:var(--bg);padding:1px 5px;border-radius:4px;border:1px solid var(--border)">$1</code>');
+      lines.push('── CODE ──', '', code);
+      return lines.join('\n');
+    }
+
+    /* ═══════════════════════════════════════════════════════════════
+       TOAST
+    ═══════════════════════════════════════════════════════════════ */
+    function toast(msg, type = 'info') {
+      const container = document.getElementById('toastContainer');
+      const el = document.createElement('div');
+      el.className = 'toast ' + type;
+      const icons = { success: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20,6 9,17 4,12"/></svg>', error: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', info: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' };
+      el.innerHTML = '<span class="toast-icon">' + (icons[type] || icons.info) + '</span><span>' + msg + '</span>';
+      container.appendChild(el);
+      setTimeout(() => {
+        el.classList.add('fadeout');
+        el.addEventListener('animationend', () => el.remove());
+      }, 3000);
+    }
+
+    /* ═══════════════════════════════════════════════════════════════
+       HELPERS
+    ═══════════════════════════════════════════════════════════════ */
+    function escHtml(s) {
+      return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    function renderMarkdown(s) {
+      return s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/`(.+?)`/g, '<code style="font-family:var(--font-mono);font-size:0.85em;background:var(--bg);padding:1px 5px;border-radius:4px;border:1px solid var(--border)">$1</code>');
+    }
+    function attachIssueNavigation() {
+      const debugResult = document.getElementById('debugResult');
+      if (!debugResult) return;
+      // Prevent duplicate delegation 
+      if (debugResult.dataset.navBound === 'true') return; debugResult.dataset.navBound = 'true';
+      const jumpToIssueLine = (card) => {
+        if (!card) return;
+        // Active state
+        document.querySelectorAll('.issue-card').forEach(c => c.classList.remove('active'));
+        card.classList.add('active');
+        const line = parseInt(card.dataset.line, 10);
+        if (!line || !editor) return;
+
+          const lines = editor.value.split('\n');
+
+            let cursorPos = 0;
+
+            for (let i = 0; i < line - 1; i++) {
+              cursorPos += lines[i].length + 1;
+            }
+
+            editor.focus();
+
+            editor.setSelectionRange(cursorPos, cursorPos);
+
+            const lineHeight = parseFloat(getComputedStyle(editor).lineHeight) || 24;
+
+            editor.scrollTo({
+              top: Math.max(0, (line - 3) * lineHeight),
+              behavior: 'smooth'
+            });
+
+            editor.classList.remove('editor-highlight');
+
+            void editor.offsetWidth;
+
+            editor.classList.add('editor-highlight');
+          setTimeout(() => { editor.classList.remove('editor-highlight'); }, 900); };
+
+          // Click delegation 
+          debugResult.addEventListener('click', (e) => { 
+            const card = e.target.closest('.issue-card'); 
+            if (!card) return; 
+            jumpToIssueLine(card); 
+          });
+
+          // Keyboard delegation
+          debugResult.addEventListener('keydown', (e) => 
+          { 
+            if (e.key !== 'Enter' && e.key !== ' ') 
+            return; 
+          const card = e.target.closest('.issue-card'); 
+          if (!card) return; 
+          e.preventDefault(); 
+          jumpToIssueLine(card); 
+        }); 
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -3353,7 +3645,7 @@ <h3>Quality Score</h3>
           btn.textContent = 'Subscribe';
         }
       });
-    </script>
+  </script>
 </body>
 
 </html>
\ No newline at end of file

From 89d88da30898988b7d86aac4f4167bf48928e553 Mon Sep 17 00:00:00 2001
From: Medora <medoragomes1402@gmail.com>
Date: Mon, 25 May 2026 19:48:42 +0530
Subject: [PATCH 07/10] Fix upstream merge regressions

---
 frontend/index.html | 2138 ++++++++++++++++++++++---------------------
 1 file changed, 1104 insertions(+), 1034 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 21abf935..12204162 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -38,7 +38,7 @@
       --font-mono: 'JetBrains Mono', monospace;
       --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    
+
 
     ::-webkit-scrollbar-thumb:hover {
       background: var(--text3)
@@ -422,6 +422,7 @@
       border: 1px solid var(--border);
       transition: all var(--transition);
       cursor: default;
+      color: var(--text2);
     }
 
     .feat-pill:hover {
@@ -669,6 +670,55 @@
       font-weight: 600
     }
 
+    /* ── API Config ── */
+
+    .api-config-row {
+      padding: 14px 18px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .api-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.78rem;
+      color: var(--text2);
+    }
+
+    .api-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--red);
+    }
+
+    .api-dot.connected {
+      background: var(--green);
+    }
+
+    .api-config-inner {
+      display: flex;
+      gap: 8px;
+    }
+
+    #apiUrl {
+      flex: 1;
+      padding: 8px 10px;
+      border-radius: var(--r2);
+      border: 1px solid var(--border);
+      background: var(--bg3);
+      color: var(--text);
+      font-size: 0.8rem;
+      outline: none;
+    }
+
+    #apiUrl:focus {
+      border-color: var(--accent);
+    }
+
     /* ── Analyze Button ── */
     .analyze-row {
       padding: 14px 18px
@@ -1040,7 +1090,7 @@
       border: 1px solid var(--border);
       margin-bottom: 16px;
       font-size: 0.88rem;
-      color: var(--text2);
+      color: var(--text);
       line-height: 1.6;
     }
 
@@ -1061,6 +1111,7 @@
       display: flex;
       align-items: center;
       gap: 6px;
+      color: var(--text2);
     }
 
     .meta-chip .dot {
@@ -1142,6 +1193,7 @@
       margin-bottom: 6px;
       border-radius: var(--r2);
       background: var(--bg3);
+      color: var(--text2);
       font-size: 0.83rem;
       line-height: 1.5;
       display: flex;
@@ -2096,7 +2148,8 @@
           style="font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(91,156,246,0.15);color:var(--accent);border:1px solid rgba(91,156,246,0.25);letter-spacing:0.04em;margin-left:4px">v3.0</span>
       </a>
       <div class="nav-links">
-        <select id="langSelect" class="lang-select" aria-label="Select Language" data-i18n-aria-label="lang_select_label">
+        <select id="langSelect" class="lang-select" aria-label="Select Language"
+          data-i18n-aria-label="lang_select_label">
           <option value="en" data-i18n="lang_option_en">English</option>
           <option value="ta" data-i18n="lang_option_ta">தமிழ் (Tamil)</option>
           <option value="hi" data-i18n="lang_option_hi">हिन्दी (Hindi)</option>
@@ -2116,8 +2169,8 @@
           </svg>
           <span data-i18n="nav_api_docs">API Docs</span>
         </a>
-        <button class="theme-btn" id="themeToggle" title="Toggle theme" data-i18n-title="btn_toggle_theme" data-i18n-aria-label="btn_toggle_theme" aria-label="Toggle dark mode"
-          aria-pressed="false">
+        <button class="theme-btn" id="themeToggle" title="Toggle theme" data-i18n-title="btn_toggle_theme"
+          data-i18n-aria-label="btn_toggle_theme" aria-label="Toggle dark mode" aria-pressed="false">
           <svg id="themeIcon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" aria-hidden="true">
             <circle cx="12" cy="12" r="5" />
@@ -2237,8 +2290,8 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
             <span data-i18n="editor_title">Code Editor</span>
           </div>
           <div class="panel-actions">
-            <label class="icon-btn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload" style="cursor:pointer" tabindex="0" role="button"
-              aria-label="Upload code file"
+            <label class="icon-btn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload"
+              style="cursor:pointer" tabindex="0" role="button" aria-label="Upload code file"
               onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault(); document.getElementById('fileInput').click();}">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
@@ -2246,10 +2299,11 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
                 <polyline points="17,8 12,3 7,8" />
                 <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
-              <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip" style="display:none"
-                tabindex="-1" />
+              <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip"
+                style="display:none" tabindex="-1" />
             </label>
-            <button class="icon-btn" id="clearBtn" title="Clear" data-i18n-title="btn_clear" data-i18n-aria-label="btn_clear" aria-label="Clear code editor">
+            <button class="icon-btn" id="clearBtn" title="Clear" data-i18n-title="btn_clear"
+              data-i18n-aria-label="btn_clear" aria-label="Clear code editor">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
                 <polyline points="3,6 5,6 21,6" />
@@ -2258,7 +2312,8 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
                 <path d="M14 11v6" />
               </svg>
             </button>
-            <button class="icon-btn" id="copyBtn" title="Copy code" data-i18n-title="btn_copy" data-i18n-aria-label="btn_copy" aria-label="Copy code to clipboard">
+            <button class="icon-btn" id="copyBtn" title="Copy code" data-i18n-title="btn_copy"
+              data-i18n-aria-label="btn_copy" aria-label="Copy code to clipboard">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
                 <rect x="9" y="9" width="13" height="13" rx="2" />
@@ -2270,29 +2325,51 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
 
         <!-- Language tabs -->
         <div class="lang-tabs" role="tablist" aria-label="Select Programming Language">
-          <button class="lang-tab active" data-lang="python" role="tab" aria-selected="true" data-i18n="lang_tab_python">Python</button>
-          <button class="lang-tab" data-lang="javascript" role="tab" aria-selected="false" data-i18n="lang_tab_javascript">JavaScript</button>
-          <button class="lang-tab" data-lang="typescript" role="tab" aria-selected="false" data-i18n="lang_tab_typescript">TypeScript</button>
-          <button class="lang-tab" data-lang="java" role="tab" aria-selected="false" data-i18n="lang_tab_java">Java</button>
-          <button class="lang-tab" data-lang="cpp" role="tab" aria-selected="false" data-i18n="lang_tab_cpp">C++</button>
+          <button class="lang-tab active" data-lang="python" role="tab" aria-selected="true"
+            data-i18n="lang_tab_python">Python</button>
+          <button class="lang-tab" data-lang="javascript" role="tab" aria-selected="false"
+            data-i18n="lang_tab_javascript">JavaScript</button>
+          <button class="lang-tab" data-lang="typescript" role="tab" aria-selected="false"
+            data-i18n="lang_tab_typescript">TypeScript</button>
+          <button class="lang-tab" data-lang="java" role="tab" aria-selected="false"
+            data-i18n="lang_tab_java">Java</button>
+          <button class="lang-tab" data-lang="cpp" role="tab" aria-selected="false"
+            data-i18n="lang_tab_cpp">C++</button>
         </div>
         <!-- Editor area (line numbers + code editor) -->
         <div class="editor-wrap">
           <div class="line-numbers" id="lineNumbers">1</div>
-          <textarea id="codeEditor" placeholder="# Paste your code here or click 'Try Sample Code' above…" aria-label="Code editor" style="width:100%"></textarea>
+          <textarea id="codeEditor" placeholder="# Paste your code here or click 'Try Sample Code' above…"
+            aria-label="Code editor" style="width:100%"></textarea>
         </div>
 
         <div class="editor-footer">
           <div id="charCount">0 chars · 0 lines</div>
           <div style="display:flex;gap:8px">
             <div class="mode-row" role="tablist" aria-label="Mode selector">
-              <button class="mode-btn active" data-mode="analyze" aria-pressed="true">Full</button>
-              <button class="mode-btn" data-mode="explain" aria-pressed="false">Explain</button>
-              <button class="mode-btn" data-mode="debug" aria-pressed="false">Debug</button>
-              <button class="mode-btn" data-mode="suggest" aria-pressed="false">Improve</button>
+              <button class="mode-btn active" data-mode="analyze" aria-pressed="true"><span data-i18n="mode_full">Full</span></button>
+              <button class="mode-btn" data-mode="explain" aria-pressed="false"><span data-i18n="mode_explain">Explain</span></button>
+              <button class="mode-btn" data-mode="debug" aria-pressed="false"><span data-i18n="mode_debug">Debug</span></button>
+              <button class="mode-btn" data-mode="suggest" aria-pressed="false"><span data-i18n="mode_improve">Improve</span></button>
             </div>
           </div>
         </div>
+        <!-- API URL -->
+        <div class="api-config-row">
+          <div class="api-status" aria-live="polite">
+            <div class="api-dot" id="apiDot" aria-hidden="true"></div>
+            <span id="apiStatusText">Disconnected</span>
+          </div>
+
+          <div class="api-config-inner">
+            <input type="text" id="apiUrl" placeholder="https://qyverixai.onrender.com"
+              value="https://qyverixai.onrender.com" aria-label="Backend API URL" />
+
+            <button class="btn-clear" id="pingBtn" aria-label="Ping API">
+              Ping
+            </button>
+          </div>
+        </div>
 
         <div class="analyze-row">
           <button class="btn-analyze" id="analyzeBtn" title="Analyze Code" aria-label="Analyze Code">
@@ -2301,11 +2378,7 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
           </button>
         </div>
 
-        <!-- Result action buttons (hidden until results) -->
-        <div id="resultActions" class="result-actions" style="display:none">
-          <button class="icon-btn" id="favBtn" title="Save to favorites">★</button>
-          <button class="icon-btn" id="downloadBtn" title="Download results">⬇</button>
-        </div>
+        
 
       </div>
 
@@ -2318,17 +2391,26 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
 
         <div class="result-tabs" role="tablist" aria-label="Result Tabs" style="margin-bottom:12px">
           <button class="result-tab active" data-rtab="explain" role="tab" aria-selected="true">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/></svg>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              aria-hidden="true">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+            </svg>
             <span data-i18n="tab_explain">Explain</span>
             <span class="tab-badge" id="explainBadge"></span>
           </button>
           <button class="result-tab" data-rtab="debug" role="tab" aria-selected="false">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M8 2l1.5 1.5"/></svg>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              aria-hidden="true">
+              <path d="M8 2l1.5 1.5" />
+            </svg>
             <span data-i18n="tab_debug">Debug</span>
             <span class="tab-badge" id="debugBadge"></span>
           </button>
           <button class="result-tab" data-rtab="suggest" role="tab" aria-selected="false">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="13,2 3,14 12,14 11,22 21,10 12,10"/></svg>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              aria-hidden="true">
+              <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
+            </svg>
             <span data-i18n="tab_improve">Improve</span>
             <span class="tab-badge" id="suggestBadge"></span>
           </button>
@@ -2381,6 +2463,12 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           </div>
         </div>
 
+        <!-- Result action buttons (hidden until results) -->
+        <div id="resultActions" class="result-actions" style="display:none">
+          <button class="icon-btn" id="favBtn" title="Save to favorites">★</button>
+          <button class="icon-btn" id="downloadBtn" title="Download results">⬇</button>
+        </div>
+
         <!-- Analysis time footer -->
         <div id="engineBar"
           style="padding:8px 18px;border-top:1px solid var(--border);font-size:0.72rem;color:var(--text3);font-family:var(--font-mono);display:none;gap:16px">
@@ -2395,7 +2483,8 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       <div class="panel">
         <div class="panel-header">
           <div class="panel-title" data-i18n="history_title">Query History</div>
-          <button class="btn-clear" id="clearHistoryBtn" aria-label="Clear query history" data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
+          <button class="btn-clear" id="clearHistoryBtn" aria-label="Clear query history"
+            data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
         </div>
         <div class="history-list" id="historyList" aria-live="polite">
           <div class="list-empty" data-i18n="empty_history">No history yet. Run your first analysis.</div>
@@ -2404,7 +2493,8 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       <div class="panel">
         <div class="panel-header">
           <div class="panel-title" data-i18n="favorites_title">Saved Favorites</div>
-          <button class="btn-clear" id="clearFavsBtn" aria-label="Clear saved favorites" data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
+          <button class="btn-clear" id="clearFavsBtn" aria-label="Clear saved favorites"
+            data-i18n-aria-label="btn_clear" data-i18n="btn_clear">Clear</button>
         </div>
         <div class="fav-list" id="favList" aria-live="polite">
           <div class="list-empty" data-i18n="empty_favorites">No favorites saved yet.</div>
@@ -2415,444 +2505,425 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
   </div><!-- /app -->
 
 
-    <!-- ── FOOTER ─────────────────────────────────────────────────── -->
-    <footer>
-      <div class="app">
-        <div class="footer-logo">QyverixAI</div>
-        <p>
-          <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" data-i18n="nav_github">GitHub</a>
-          · <a href="https://qyverixai.onrender.com/docs" target="_blank" data-i18n="nav_api_docs">API Docs</a>
-          · <span data-i18n="footer_license">MIT License</span>
-        </p>
-        <p style="margin-top:8px;font-size:0.75rem" data-i18n="footer_built_for">Built for the open source community</p>
-      <div class="app" style="display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;">
-        <div>
-          <div class="footer-logo">QyverixAI</div>
-          <p>
-            <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank">GitHub</a>
-            · <a href="https://qyverixai.onrender.com/docs" target="_blank">API Docs</a>
-            · MIT License
-          </p>
-          <p style="font-size:0.75rem">Built for the open source community</p>
-        </div>
-        <div style="max-width:320px;">
-          <p style="margin:0 0 6px;font-size:0.8rem;font-weight:600;color:var(--accent);">Weekly Digest</p>
-          <form id="digestForm" style="display:flex;gap:6px;">
-            <input type="email" id="digestEmail" placeholder="your@email.com" required
-                   style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);">
-            <button type="submit" id="digestBtn" style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
-          </form>
-          <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis stats.</p>
-        </div>
-      </div>
-    </footer>
+  <!-- ── FOOTER ─────────────────────────────────────────────────── -->
+  <footer>
+    <div class="app">
+      <div class="footer-logo">QyverixAI</div>
+      <p>
+        <a href="https://github.com/imDarshanGK/AI-dev-assistant" target="_blank" data-i18n="nav_github">GitHub</a>
+        · <a href="https://qyverixai.onrender.com/docs" target="_blank" data-i18n="nav_api_docs">API Docs</a>
+        · <span data-i18n="footer_license">MIT License</span>
+      </p>
+      <p style="margin-top:8px;font-size:0.75rem" data-i18n="footer_built_for">Built for the open source community</p>
+      
+  </footer>
 
   <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
   <div id="toastContainer"></div>
 
-    <script>
-      /* ═══════════════════════════════════════════════════════════════
-         STATE & TRANSLATIONS
-      ═══════════════════════════════════════════════════════════════ */
-      const TRANSLATIONS = {
-        en: {
-          lang_select_label: "Select language",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "GitHub",
-          nav_api_docs: "API Docs",
-          hero_badge: "Open Source · AI-Powered · Free",
-          hero_title: "Debug. Understand.<br /><em>Ship faster.</em>",
-          hero_subtitle: "Paste your code and get instant bug detection, plain-English explanations, and actionable improvement suggestions — no account needed.",
-          btn_start_analyzing: "Start Analyzing",
-          btn_try_sample: "Try Sample Code",
-          btn_star_github: "Star on GitHub",
-          pill_patterns_title: "40+ Bug Patterns",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "Code Explanation",
-          pill_explain_desc: "Plain English breakdowns",
-          mode_improve: "Smart Suggestions",
-          pill_improve_desc: "Quality score + grade",
-          pill_theme_title: "Dark / Light Mode",
-          pill_theme_desc: "Persisted preference",
-          pill_upload_title: "File Upload",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "Code Editor",
-          editor_placeholder: "# Paste your code here or click 'Try Sample Code' above…",
-          char_count_initial: "Paste or type code to begin",
-          char_count_format: "{chars} chars · {lines} lines · {nonBlank} non-blank",
-          ctrl_enter_hint: "Ctrl+Enter to analyze",
-          mode_full: "Full",
-          mode_debug: "Debug",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "Disconnected",
-          api_status_connected: "Connected",
-          api_status_unreachable: "Unreachable",
-          api_status_error: "Error {status}",
-          btn_ping: "Ping",
-          btn_analyze_code: "Analyze Code",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "Analysis Results",
-          tab_explain: "Explain",
-          tab_debug: "Debug",
-          tab_improve: "Improve",
-          empty_explain_title: "No analysis yet",
-          empty_explain_desc: "Paste your code and click Analyze to see results",
-          empty_debug_title: "No bugs scanned",
-          empty_debug_desc: "Run analysis to detect issues in your code",
-          empty_suggest_title: "No suggestions yet",
-          empty_suggest_desc: "Run analysis to get improvement ideas",
-          history_title: "Query History",
-          favorites_title: "Saved Favorites",
-          empty_history: "No history yet. Run your first analysis.",
-          empty_favorites: "No favorites saved yet.",
-          btn_clear: "Clear",
-          footer_license: "MIT License",
-          footer_built_for: "Built for the open source community",
-          confirm_clear_history: "Clear all history? This cannot be undone.",
-          confirm_clear_favs: "Clear all favorites? This cannot be undone.",
-          toast_code_copied: "Code copied!",
-          toast_api_reachable: "API is reachable",
-          toast_api_unreachable: "Cannot reach API. Check the URL.",
-          toast_please_paste: "Please paste some code first.",
-          toast_saved_favorites: "Saved to favorites",
-          toast_report_downloaded: "Report downloaded",
-          toast_sample_loaded: "Sample code loaded — click Analyze!",
-          toast_history_cleared: "History cleared",
-          toast_favorites_cleared: "Favorites cleared",
-          toast_loaded: "Loaded {name}",
-          toast_dropped: "Dropped {name}",
-          debug_clean_title: "No issues detected!",
-          debug_clean_desc: "Your code passed all 40+ pattern checks. Keep it up!",
-          debug_errors: "Errors",
-          debug_warnings: "Warnings",
-          debug_info: "Info",
-          debug_line: "Line {line}",
-          suggest_quality_score: "Quality Score",
-          suggest_perfect_title: "Perfect score!",
-          suggest_perfect_desc: "No improvement suggestions found.",
-          suggest_priority: "{priority} priority",
-          btn_copy: "Copy code",
-          btn_upload: "Upload file",
-          btn_save_favorites: "Save to favorites",
-          btn_download_results: "Download results",
-          btn_toggle_theme: "Toggle theme",
-          analyze_btn_title: "Analyze Code (Ctrl+Enter)",
-          meta_lines: "{count} lines",
-          meta_functions: "{count} functions",
-          meta_classes: "{count} classes",
-          toast_analysis_failed: "Analysis failed: {message}",
-          history_entry_label: "Load history entry for {lang} at {time}",
-          favorite_entry_label: "Load favorite entry for {lang} at {time}"
-        },
-        ta: {
-          lang_select_label: "மொழியைத் தேர்ந்தெடுக்கவும்",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "கிட்ஹப் (GitHub)",
-          nav_api_docs: "ஏபிஐ ஆவணங்கள் (API Docs)",
-          hero_badge: "திறந்த மூல · ஏஐ-ஆற்றல் · இலவசம்",
-          hero_title: "பிழையறி. புரிந்துகொள்.<br /><em>வேகமாக அனுப்பு.</em>",
-          hero_subtitle: "உங்கள் குறியீட்டை ஒட்டி, உடனடி பிழை கண்டறிதல், எளிய ஆங்கில விளக்கங்கள் மற்றும் பயனுள்ள மேம்பாட்டு பரிந்துரைகளைப் பெறுங்கள் — கணக்கு தேவையில்லை.",
-          btn_start_analyzing: "பகுப்பாய்வைத் தொடங்கு",
-          btn_try_sample: "மாதிரிக் குறியீட்டை முயல்க",
-          btn_star_github: "கிட்ஹப்பில் ஸ்டார் செய்க",
-          pill_patterns_title: "40+ பிழை வடிவங்கள்",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "குறியீடு விளக்கம்",
-          pill_explain_desc: "எளிய ஆங்கில விளக்கங்கள்",
-          mode_improve: "ஸ்மார்ட் பரிந்துரைகள்",
-          pill_improve_desc: "தரமான மதிப்பெண் + தரம்",
-          pill_theme_title: "இருண்ட / ஒளி முறை",
-          pill_theme_desc: "சேமிக்கப்பட்ட விருப்பம்",
-          pill_upload_title: "கோப்பு பதிவேற்றம்",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "குறியீட்டு எடிட்டர்",
-          editor_placeholder: "# உங்கள் குறியீட்டை இங்கே ஒட்டவும் அல்லது மேலே உள்ள 'மாதிரிக் குறியீட்டை முயல்க' என்பதைக் கிளிக் செய்யவும்…",
-          char_count_initial: "தொடங்குவதற்கு குறியீட்டை ஒட்டவும் அல்லது தட்டச்சு செய்யவும்",
-          char_count_format: "{chars} எழுத்துக்கள் · {lines} வரிகள் · {nonBlank} வெற்று அல்லாத வரிகள்",
-          ctrl_enter_hint: "பகுப்பாய்வு செய்ய Ctrl+Enter அழுத்தவும்",
-          mode_full: "முழுமையான",
-          mode_debug: "பிழைத்திருத்தம்",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "இணைப்பு துண்டிக்கப்பட்டது",
-          api_status_connected: "இணைக்கப்பட்டது",
-          api_status_unreachable: "அடைய முடியாதது",
-          api_status_error: "பிழை {status}",
-          btn_ping: "பிங்",
-          btn_analyze_code: "குறியீட்டை பகுப்பாய்",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "பகுப்பாய்வு முடிவுகள்",
-          tab_explain: "விளக்கு",
-          tab_debug: "பிழைத்திருத்து",
-          tab_improve: "மேம்படுத்து",
-          empty_explain_title: "இன்னும் பகுப்பாய்வு இல்லை",
-          empty_explain_desc: "விளைவுகளைக் காண குறியீட்டை ஒட்டி, பகுப்பாய் என்பதைக் கிளிக் செய்யவும்",
-          empty_debug_title: "பிழைகள் எதுவும் கண்டறியப்படவில்லை",
-          empty_debug_desc: "உங்கள் குறியீட்டில் உள்ள சிக்கல்களைக் கண்டறிய பகுப்பாய்வை இயக்கவும்",
-          empty_suggest_title: "இன்னும் பரிந்துரைகள் இல்லை",
-          empty_suggest_desc: "மேம்பாட்டு யோசனைகளைப் பெற பகுப்பாய்வை இயக்கவும்",
-          history_title: "வினவல் வரலாறு",
-          favorites_title: "சேமிக்கப்பட்ட பிடித்தவை",
-          empty_history: "இன்னும் வரலாறு இல்லை. உங்கள் முதல் பகுப்பாய்வை இயக்கவும்.",
-          empty_favorites: "இன்னும் பிடித்தவை எதுவும் சேமிக்கப்படவில்லை.",
-          btn_clear: "அழி",
-          footer_license: "எம்ஐடி உரிமம் (MIT License)",
-          footer_built_for: "திறந்த மூல சமூகத்திற்காக உருவாக்கப்பட்டது",
-          confirm_clear_history: "எல்லா வரலாற்றையும் அழிக்கவா? இதை மாற்ற முடியாது.",
-          confirm_clear_favs: "பிடித்தவை அனைத்தையும் அழிக்கவா? இதை மாற்ற முடியாது.",
-          toast_code_copied: "குறியீடு நகலெடுக்கப்பட்டது!",
-          toast_api_reachable: "ஏபிஐ அணுகக்கூடியது",
-          toast_api_unreachable: "ஏபிஐ-ஐ அணுக முடியவில்லை. முகவரியைச் சரிபார்க்கவும்.",
-          toast_please_paste: "தயவுசெய்து முதலில் குறியீட்டை ஒட்டவும்.",
-          toast_saved_favorites: "பிடித்தவற்றில் சேமிக்கப்பட்டது",
-          toast_report_downloaded: "அறிக்கை பதிவிறக்கம் செய்யப்பட்டது",
-          toast_sample_loaded: "மாதிரிக் குறியீடு ஏற்றப்பட்டது — பகுப்பாய் என்பதைக் கிளிக் செய்க!",
-          toast_history_cleared: "வரலாறு அழிக்கப்பட்டது",
-          toast_favorites_cleared: "பிடித்தவை அழிக்கப்பட்டன",
-          toast_loaded: "{name} ஏற்றப்பட்டது",
-          toast_dropped: "{name} விடப்பட்டது",
-          debug_clean_title: "சிக்கல்கள் எதுவும் கண்டறியப்படவில்லை!",
-          debug_clean_desc: "உங்கள் குறியீடு அனைத்து 40+ வடிவ சோதனைகளையும் கடந்துவிட்டது. தொடருங்கள்!",
-          debug_errors: "பிழைகள்",
-          debug_warnings: "எச்சரிக்கைகள்",
-          debug_info: "தகவல்",
-          debug_line: "வரி {line}",
-          suggest_quality_score: "தர மதிப்பெண்",
-          suggest_perfect_title: "சரியான மதிப்பெண்!",
-          suggest_perfect_desc: "மேம்பாட்டு பரிந்துரைகள் எதுவும் இல்லை.",
-          suggest_priority: "{priority} முன்னுரிமை",
-          btn_copy: "குறியீட்டை நகலெடு",
-          btn_upload: "கோப்பைப் பதிவேற்று",
-          btn_save_favorites: "பிடித்தவற்றில் சேமி",
-          btn_download_results: "முடிவுகளைப் பதிவிறக்கு",
-          btn_toggle_theme: "தீம் மாற்று",
-          analyze_btn_title: "குறியீட்டை பகுப்பாய் (Ctrl+Enter)",
-          meta_lines: "{count} வரிகள்",
-          meta_functions: "{count} செயல்பாடுகள்",
-          meta_classes: "{count} வகுப்புகள்",
-          toast_analysis_failed: "பகுப்பாய்வு தோல்வியடைந்தது: {message}",
-          history_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள வரலாறு பதிவை ஏற்று",
-          favorite_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள பிடித்த பதிவை ஏற்று"
-        },
-        hi: {
-          lang_select_label: "भाषा चुनें",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "गिटहब (GitHub)",
-          nav_api_docs: "एपीआई दस्तावेज़ (API Docs)",
-          hero_badge: "ओपन सोर्स · एआई-संचालित · मुफ्त",
-          hero_title: "डीबग करें। समझें।<br /><em>तेज़ी से शिप करें।</em>",
-          hero_subtitle: "अपना कोड पेस्ट करें और तुरंत बग डिटेक्शन, सरल हिंदी में स्पष्टीकरण और व्यावहारिक सुधार सुझाव प्राप्त करें — किसी खाते की आवश्यकता नहीं है।",
-          btn_start_analyzing: "विश्लेषण शुरू करें",
-          btn_try_sample: "सैंपल कोड आज़माएं",
-          btn_star_github: "गिटहब पर स्टार करें",
-          pill_patterns_title: "40+ बग पैटर्न",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "कोड का स्पष्टीकरण",
-          pill_explain_desc: "सरल स्पष्टीकरण",
-          mode_improve: "स्मार्ट सुझाव",
-          pill_improve_desc: "क्वालिटी स्कोर + ग्रेड",
-          pill_theme_title: "डार्क / लाइट मोड",
-          pill_theme_desc: "सहेजी गई प्राथमिकता",
-          pill_upload_title: "फ़ाइल अपलोड",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "कोड एडिटर",
-          editor_placeholder: "# अपना कोड यहाँ पेस्ट करें या ऊपर 'सैंपल कोड आज़माएं' पर क्लिक करें…",
-          char_count_initial: "शुरू करने के लिए कोड पेस्ट करें या टाइप करें",
-          char_count_format: "{chars} वर्ण · {lines} पंक्तियाँ · {nonBlank} गैर-रिक्त",
-          ctrl_enter_hint: "विश्लेषण करने के लिए Ctrl+Enter दबाएं",
-          mode_full: "पूर्ण",
-          mode_debug: "डीबग",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "डिस्कनेक्टेड",
-          api_status_connected: "कनेक्टेड",
-          api_status_unreachable: "पहुंच से बाहर",
-          api_status_error: "त्रुटि {status}",
-          btn_ping: "पिंग",
-          btn_analyze_code: "कोड का विश्लेषण करें",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "विश्लेषण के परिणाम",
-          tab_explain: "समझाएं",
-          tab_debug: "डीबग",
-          tab_improve: "सुधारें",
-          empty_explain_title: "अभी तक कोई विश्लेषण नहीं",
-          empty_explain_desc: "परिणाम देखने के लिए अपना कोड पेस्ट करें और विश्लेषण पर क्लिक करें",
-          empty_debug_title: "कोई बग नहीं मिला",
-          empty_debug_desc: "अपने कोड में समस्याओं का पता लगाने के लिए विश्लेषण चलाएं",
-          empty_suggest_title: "अभी तक कोई सुझाव नहीं",
-          empty_suggest_desc: "सुधार के विचार प्राप्त करने के लिए विश्लेषण चलाएं",
-          history_title: "क्वेरी इतिहास",
-          favorites_title: "सहेजे गए पसंदीदा",
-          empty_history: "अभी तक कोई इतिहास नहीं है। अपना पहला विश्लेषण चलाएं।",
-          empty_favorites: "अभी तक कोई पसंदीदा सहेजा नहीं गया है।",
-          btn_clear: "साफ करें",
-          footer_license: "एमआईटी लाइसेंस (MIT License)",
-          footer_built_for: "ओपन सोर्स समुदाय के लिए निर्मित",
-          confirm_clear_history: "इतिहास पूरी तरह साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
-          confirm_clear_favs: "सभी पसंदीदा साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
-          toast_code_copied: "कोड कॉपी किया गया!",
-          toast_api_reachable: "एपीआई पहुंच योग्य है",
-          toast_api_unreachable: "एपीआई तक नहीं पहुंचा जा सकता। यूआरएल की जांच करें।",
-          toast_please_paste: "कृपया पहले कुछ कोड पेस्ट करें।",
-          toast_saved_favorites: "पसंदीदा में सहेजा गया",
-          toast_report_downloaded: "रिपोर्ट डाउनलोड हो गई",
-          toast_sample_loaded: "सैंपल कोड लोड हो गया — विश्लेषण पर क्लिक करें!",
-          toast_history_cleared: "इतिहास साफ कर दिया गया",
-          toast_favorites_cleared: "पसंदीदा साफ कर दिए गए",
-          toast_loaded: "{name} लोड किया गया",
-          toast_dropped: "{name} ड्रॉप किया गया",
-          debug_clean_title: "कोई समस्या नहीं मिली!",
-          debug_clean_desc: "आपका कोड सभी 40+ पैटर्न जांचों में सफल रहा। इसे जारी रखें!",
-          debug_errors: "त्रुटियाँ",
-          debug_warnings: "चेतावनी",
-          debug_info: "जानकारी",
-          debug_line: "पंक्ति {line}",
-          suggest_quality_score: "क्वालिटी स्कोर",
-          suggest_perfect_title: "उत्कृष्ट स्कोर!",
-          suggest_perfect_desc: "कोई सुधार सुझाव नहीं मिला।",
-          suggest_priority: "{priority} प्राथमिकता",
-          btn_copy: "कोड कॉपी करें",
-          btn_upload: "फ़ाइल अपलोड करें",
-          btn_save_favorites: "पसंदीदा में सहेजें",
-          btn_download_results: "परिणाम डाउनलोड करें",
-          btn_toggle_theme: "थीम बदलें",
-          analyze_btn_title: "कोड का विश्लेषण करें (Ctrl+Enter)",
-          meta_lines: "{count} पंक्तियाँ",
-          meta_functions: "{count} फ़ंक्शन",
-          meta_classes: "{count} क्लासें",
-          toast_analysis_failed: "विश्लेषण विफल रहा: {message}",
-          history_entry_label: "{time} पर {lang} के लिए इतिहास प्रविष्टि लोड करें",
-          favorite_entry_label: "{time} पर {lang} के लिए पसंदीदा प्रविष्टि लोड करें"
-        },
-        fr: {
-          lang_select_label: "Choisir la langue",
-          lang_option_en: "English",
-          lang_option_ta: "தமிழ் (Tamil)",
-          lang_option_hi: "हिन्दी (Hindi)",
-          lang_option_fr: "Français (French)",
-          lang_tab_python: "Python",
-          lang_tab_javascript: "JavaScript",
-          lang_tab_typescript: "TypeScript",
-          lang_tab_java: "Java",
-          lang_tab_cpp: "C++",
-          nav_github: "GitHub",
-          nav_api_docs: "Docs API",
-          hero_badge: "Open Source · Propulsé par l'IA · Gratuit",
-          hero_title: "Déboguez. Comprenez.<br /><em>Lisez plus vite.</em>",
-          hero_subtitle: "Collez votre code et obtenez une détection instantanée des bogues, des explications simples et des suggestions d'amélioration exploitables — aucun compte requis.",
-          btn_start_analyzing: "Démarrer l'analyse",
-          btn_try_sample: "Essayer l'exemple",
-          btn_star_github: "Star sur GitHub",
-          pill_patterns_title: "40+ Modèles de bogues",
-          pill_patterns_desc: "Python, JS, TS, Java, C++",
-          mode_explain: "Explication de code",
-          pill_explain_desc: "Analyses en français simple",
-          mode_improve: "Suggestions intelligentes",
-          pill_improve_desc: "Score de qualité + note",
-          pill_theme_title: "Mode Sombre / Clair",
-          pill_theme_desc: "Préférence persistée",
-          pill_upload_title: "Télécharger un fichier",
-          pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
-          editor_title: "Éditeur de code",
-          editor_placeholder: "# Collez votre code ici ou cliquez sur 'Essayer l'exemple' ci-dessus…",
-          char_count_initial: "Collez ou tapez du code pour commencer",
-          char_count_format: "{chars} chars · {lines} lignes · {nonBlank} non vides",
-          ctrl_enter_hint: "Ctrl+Enter pour analyser",
-          mode_full: "Complet",
-          mode_debug: "Débogage",
-          api_url_placeholder: "https://qyverixai.onrender.com",
-          api_status_disconnected: "Déconnecté",
-          api_status_connected: "Connecté",
-          api_status_unreachable: "Inaccessible",
-          api_status_error: "Erreur {status}",
-          btn_ping: "Ping",
-          btn_analyze_code: "Analyser le code",
-          desktop_hint: "(Ctrl+Enter)",
-          results_title: "Résultats de l'analyse",
-          tab_explain: "Expliquer",
-          tab_debug: "Déboguer",
-          tab_improve: "Améliorer",
-          empty_explain_title: "Aucune analyse pour le moment",
-          empty_explain_desc: "Collez votre code et cliquez sur Analyser pour voir les résultats",
-          empty_debug_title: "Aucun bogue détecté",
-          empty_debug_desc: "Exécutez l'analyse pour détecter les problèmes dans votre code",
-          empty_suggest_title: "Aucune suggestion pour le moment",
-          empty_suggest_desc: "Exécutez l'analyse pour obtenir des idées d'amélioration",
-          history_title: "Historique des requêtes",
-          favorites_title: "Favoris enregistrés",
-          empty_history: "Aucun historique pour le moment. Lancez votre première analyse.",
-          empty_favorites: "Aucun favori enregistré pour le moment.",
-          btn_clear: "Effacer",
-          footer_license: "Licence MIT",
-          footer_built_for: "Conçu pour la communauté open source",
-          confirm_clear_history: "Effacer tout l'historique ? Cette action est irréversible.",
-          confirm_clear_favs: "Effacer tous les favoris ? Cette action est irréversible.",
-          toast_code_copied: "Code copié !",
-          toast_api_reachable: "L'API est accessible",
-          toast_api_unreachable: "Impossible de joindre l'API. Vérifiez l'URL.",
-          toast_please_paste: "Veuillez d'abord coller du code.",
-          toast_saved_favorites: "Enregistré dans les favoris",
-          toast_report_downloaded: "Rapport téléchargé",
-          toast_sample_loaded: "Exemple de code chargé — cliquez sur Analyser !",
-          toast_history_cleared: "Historique effacé",
-          toast_favorites_cleared: "Favoris effacés",
-          toast_loaded: "{name} chargé",
-          toast_dropped: "{name} déposé",
-          debug_clean_title: "Aucun problème détecté !",
-          debug_clean_desc: "Votre code a passé les 40+ vérifications avec succès. Continuez ainsi !",
-          debug_errors: "Erreurs",
-          debug_warnings: "Avertissements",
-          debug_info: "Infos",
-          debug_line: "Ligne {line}",
-          suggest_quality_score: "Score de qualité",
-          suggest_perfect_title: "Score parfait !",
-          suggest_perfect_desc: "Aucune suggestion d'amélioration trouvée.",
-          suggest_priority: "Priorité {priority}",
-          btn_copy: "Copier le code",
-          btn_upload: "Télécharger le fichier",
-          btn_save_favorites: "Enregistrer dans les favoris",
-          btn_download_results: "Télécharger les résultats",
-          btn_toggle_theme: "Changer le thème",
-          analyze_btn_title: "Analyser le code (Ctrl+Enter)",
-          meta_lines: "{count} lignes",
-          meta_functions: "{count} fonctions",
-          meta_classes: "{count} classes",
-          toast_analysis_failed: "Échec de l'analyse : {message}",
-          history_entry_label: "Charger l'entrée d'historique pour {lang} à {time}",
-          favorite_entry_label: "Charger le favori pour {lang} à {time}"
-        }
-      };
+  <script>
+    /* ═══════════════════════════════════════════════════════════════
+       STATE & TRANSLATIONS
+    ═══════════════════════════════════════════════════════════════ */
+    const TRANSLATIONS = {
+      en: {
+        lang_select_label: "Select language",
+        lang_option_en: "English",
+        lang_option_ta: "தமிழ் (Tamil)",
+        lang_option_hi: "हिन्दी (Hindi)",
+        lang_option_fr: "Français (French)",
+        lang_tab_python: "Python",
+        lang_tab_javascript: "JavaScript",
+        lang_tab_typescript: "TypeScript",
+        lang_tab_java: "Java",
+        lang_tab_cpp: "C++",
+        nav_github: "GitHub",
+        nav_api_docs: "API Docs",
+        hero_badge: "Open Source · AI-Powered · Free",
+        hero_title: "Debug. Understand.<br /><em>Ship faster.</em>",
+        hero_subtitle: "Paste your code and get instant bug detection, plain-English explanations, and actionable improvement suggestions — no account needed.",
+        btn_start_analyzing: "Start Analyzing",
+        btn_try_sample: "Try Sample Code",
+        btn_star_github: "Star on GitHub",
+        pill_patterns_title: "40+ Bug Patterns",
+        pill_patterns_desc: "Python, JS, TS, Java, C++",
+        mode_explain: "Code Explanation",
+        pill_explain_desc: "Plain English breakdowns",
+        mode_improve: "Smart Suggestions",
+        pill_improve_desc: "Quality score + grade",
+        pill_theme_title: "Dark / Light Mode",
+        pill_theme_desc: "Persisted preference",
+        pill_upload_title: "File Upload",
+        pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
+        editor_title: "Code Editor",
+        editor_placeholder: "# Paste your code here or click 'Try Sample Code' above…",
+        char_count_initial: "Paste or type code to begin",
+        char_count_format: "{chars} chars · {lines} lines · {nonBlank} non-blank",
+        ctrl_enter_hint: "Ctrl+Enter to analyze",
+        mode_full: "Full",
+        mode_debug: "Debug",
+        api_url_placeholder: "https://qyverixai.onrender.com",
+        api_status_disconnected: "Disconnected",
+        api_status_connected: "Connected",
+        api_status_unreachable: "Unreachable",
+        api_status_error: "Error {status}",
+        btn_ping: "Ping",
+        btn_analyze_code: "Analyze Code",
+        desktop_hint: "(Ctrl+Enter)",
+        results_title: "Analysis Results",
+        tab_explain: "Explain",
+        tab_debug: "Debug",
+        tab_improve: "Improve",
+        empty_explain_title: "No analysis yet",
+        empty_explain_desc: "Paste your code and click Analyze to see results",
+        empty_debug_title: "No bugs scanned",
+        empty_debug_desc: "Run analysis to detect issues in your code",
+        empty_suggest_title: "No suggestions yet",
+        empty_suggest_desc: "Run analysis to get improvement ideas",
+        history_title: "Query History",
+        favorites_title: "Saved Favorites",
+        empty_history: "No history yet. Run your first analysis.",
+        empty_favorites: "No favorites saved yet.",
+        btn_clear: "Clear",
+        footer_license: "MIT License",
+        footer_built_for: "Built for the open source community",
+        confirm_clear_history: "Clear all history? This cannot be undone.",
+        confirm_clear_favs: "Clear all favorites? This cannot be undone.",
+        toast_code_copied: "Code copied!",
+        toast_api_reachable: "API is reachable",
+        toast_api_unreachable: "Cannot reach API. Check the URL.",
+        toast_please_paste: "Please paste some code first.",
+        toast_saved_favorites: "Saved to favorites",
+        toast_report_downloaded: "Report downloaded",
+        toast_sample_loaded: "Sample code loaded — click Analyze!",
+        toast_history_cleared: "History cleared",
+        toast_favorites_cleared: "Favorites cleared",
+        toast_loaded: "Loaded {name}",
+        toast_dropped: "Dropped {name}",
+        debug_clean_title: "No issues detected!",
+        debug_clean_desc: "Your code passed all 40+ pattern checks. Keep it up!",
+        debug_errors: "Errors",
+        debug_warnings: "Warnings",
+        debug_info: "Info",
+        debug_line: "Line {line}",
+        suggest_quality_score: "Quality Score",
+        suggest_perfect_title: "Perfect score!",
+        suggest_perfect_desc: "No improvement suggestions found.",
+        suggest_priority: "{priority} priority",
+        btn_copy: "Copy code",
+        btn_upload: "Upload file",
+        btn_save_favorites: "Save to favorites",
+        btn_download_results: "Download results",
+        btn_toggle_theme: "Toggle theme",
+        analyze_btn_title: "Analyze Code (Ctrl+Enter)",
+        meta_lines: "{count} lines",
+        meta_functions: "{count} functions",
+        meta_classes: "{count} classes",
+        toast_analysis_failed: "Analysis failed: {message}",
+        history_entry_label: "Load history entry for {lang} at {time}",
+        favorite_entry_label: "Load favorite entry for {lang} at {time}"
+      },
+      ta: {
+        lang_select_label: "மொழியைத் தேர்ந்தெடுக்கவும்",
+        lang_option_en: "English",
+        lang_option_ta: "தமிழ் (Tamil)",
+        lang_option_hi: "हिन्दी (Hindi)",
+        lang_option_fr: "Français (French)",
+        lang_tab_python: "Python",
+        lang_tab_javascript: "JavaScript",
+        lang_tab_typescript: "TypeScript",
+        lang_tab_java: "Java",
+        lang_tab_cpp: "C++",
+        nav_github: "கிட்ஹப் (GitHub)",
+        nav_api_docs: "ஏபிஐ ஆவணங்கள் (API Docs)",
+        hero_badge: "திறந்த மூல · ஏஐ-ஆற்றல் · இலவசம்",
+        hero_title: "பிழையறி. புரிந்துகொள்.<br /><em>வேகமாக அனுப்பு.</em>",
+        hero_subtitle: "உங்கள் குறியீட்டை ஒட்டி, உடனடி பிழை கண்டறிதல், எளிய ஆங்கில விளக்கங்கள் மற்றும் பயனுள்ள மேம்பாட்டு பரிந்துரைகளைப் பெறுங்கள் — கணக்கு தேவையில்லை.",
+        btn_start_analyzing: "பகுப்பாய்வைத் தொடங்கு",
+        btn_try_sample: "மாதிரிக் குறியீட்டை முயல்க",
+        btn_star_github: "கிட்ஹப்பில் ஸ்டார் செய்க",
+        pill_patterns_title: "40+ பிழை வடிவங்கள்",
+        pill_patterns_desc: "Python, JS, TS, Java, C++",
+        mode_explain: "குறியீடு விளக்கம்",
+        pill_explain_desc: "எளிய ஆங்கில விளக்கங்கள்",
+        mode_improve: "ஸ்மார்ட் பரிந்துரைகள்",
+        pill_improve_desc: "தரமான மதிப்பெண் + தரம்",
+        pill_theme_title: "இருண்ட / ஒளி முறை",
+        pill_theme_desc: "சேமிக்கப்பட்ட விருப்பம்",
+        pill_upload_title: "கோப்பு பதிவேற்றம்",
+        pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
+        editor_title: "குறியீட்டு எடிட்டர்",
+        editor_placeholder: "# உங்கள் குறியீட்டை இங்கே ஒட்டவும் அல்லது மேலே உள்ள 'மாதிரிக் குறியீட்டை முயல்க' என்பதைக் கிளிக் செய்யவும்…",
+        char_count_initial: "தொடங்குவதற்கு குறியீட்டை ஒட்டவும் அல்லது தட்டச்சு செய்யவும்",
+        char_count_format: "{chars} எழுத்துக்கள் · {lines} வரிகள் · {nonBlank} வெற்று அல்லாத வரிகள்",
+        ctrl_enter_hint: "பகுப்பாய்வு செய்ய Ctrl+Enter அழுத்தவும்",
+        mode_full: "முழுமையான",
+        mode_debug: "பிழைத்திருத்தம்",
+        api_url_placeholder: "https://qyverixai.onrender.com",
+        api_status_disconnected: "இணைப்பு துண்டிக்கப்பட்டது",
+        api_status_connected: "இணைக்கப்பட்டது",
+        api_status_unreachable: "அடைய முடியாதது",
+        api_status_error: "பிழை {status}",
+        btn_ping: "பிங்",
+        btn_analyze_code: "குறியீட்டை பகுப்பாய்",
+        desktop_hint: "(Ctrl+Enter)",
+        results_title: "பகுப்பாய்வு முடிவுகள்",
+        tab_explain: "விளக்கு",
+        tab_debug: "பிழைத்திருத்து",
+        tab_improve: "மேம்படுத்து",
+        empty_explain_title: "இன்னும் பகுப்பாய்வு இல்லை",
+        empty_explain_desc: "விளைவுகளைக் காண குறியீட்டை ஒட்டி, பகுப்பாய் என்பதைக் கிளிக் செய்யவும்",
+        empty_debug_title: "பிழைகள் எதுவும் கண்டறியப்படவில்லை",
+        empty_debug_desc: "உங்கள் குறியீட்டில் உள்ள சிக்கல்களைக் கண்டறிய பகுப்பாய்வை இயக்கவும்",
+        empty_suggest_title: "இன்னும் பரிந்துரைகள் இல்லை",
+        empty_suggest_desc: "மேம்பாட்டு யோசனைகளைப் பெற பகுப்பாய்வை இயக்கவும்",
+        history_title: "வினவல் வரலாறு",
+        favorites_title: "சேமிக்கப்பட்ட பிடித்தவை",
+        empty_history: "இன்னும் வரலாறு இல்லை. உங்கள் முதல் பகுப்பாய்வை இயக்கவும்.",
+        empty_favorites: "இன்னும் பிடித்தவை எதுவும் சேமிக்கப்படவில்லை.",
+        btn_clear: "அழி",
+        footer_license: "எம்ஐடி உரிமம் (MIT License)",
+        footer_built_for: "திறந்த மூல சமூகத்திற்காக உருவாக்கப்பட்டது",
+        confirm_clear_history: "எல்லா வரலாற்றையும் அழிக்கவா? இதை மாற்ற முடியாது.",
+        confirm_clear_favs: "பிடித்தவை அனைத்தையும் அழிக்கவா? இதை மாற்ற முடியாது.",
+        toast_code_copied: "குறியீடு நகலெடுக்கப்பட்டது!",
+        toast_api_reachable: "ஏபிஐ அணுகக்கூடியது",
+        toast_api_unreachable: "ஏபிஐ-ஐ அணுக முடியவில்லை. முகவரியைச் சரிபார்க்கவும்.",
+        toast_please_paste: "தயவுசெய்து முதலில் குறியீட்டை ஒட்டவும்.",
+        toast_saved_favorites: "பிடித்தவற்றில் சேமிக்கப்பட்டது",
+        toast_report_downloaded: "அறிக்கை பதிவிறக்கம் செய்யப்பட்டது",
+        toast_sample_loaded: "மாதிரிக் குறியீடு ஏற்றப்பட்டது — பகுப்பாய் என்பதைக் கிளிக் செய்க!",
+        toast_history_cleared: "வரலாறு அழிக்கப்பட்டது",
+        toast_favorites_cleared: "பிடித்தவை அழிக்கப்பட்டன",
+        toast_loaded: "{name} ஏற்றப்பட்டது",
+        toast_dropped: "{name} விடப்பட்டது",
+        debug_clean_title: "சிக்கல்கள் எதுவும் கண்டறியப்படவில்லை!",
+        debug_clean_desc: "உங்கள் குறியீடு அனைத்து 40+ வடிவ சோதனைகளையும் கடந்துவிட்டது. தொடருங்கள்!",
+        debug_errors: "பிழைகள்",
+        debug_warnings: "எச்சரிக்கைகள்",
+        debug_info: "தகவல்",
+        debug_line: "வரி {line}",
+        suggest_quality_score: "தர மதிப்பெண்",
+        suggest_perfect_title: "சரியான மதிப்பெண்!",
+        suggest_perfect_desc: "மேம்பாட்டு பரிந்துரைகள் எதுவும் இல்லை.",
+        suggest_priority: "{priority} முன்னுரிமை",
+        btn_copy: "குறியீட்டை நகலெடு",
+        btn_upload: "கோப்பைப் பதிவேற்று",
+        btn_save_favorites: "பிடித்தவற்றில் சேமி",
+        btn_download_results: "முடிவுகளைப் பதிவிறக்கு",
+        btn_toggle_theme: "தீம் மாற்று",
+        analyze_btn_title: "குறியீட்டை பகுப்பாய் (Ctrl+Enter)",
+        meta_lines: "{count} வரிகள்",
+        meta_functions: "{count} செயல்பாடுகள்",
+        meta_classes: "{count} வகுப்புகள்",
+        toast_analysis_failed: "பகுப்பாய்வு தோல்வியடைந்தது: {message}",
+        history_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள வரலாறு பதிவை ஏற்று",
+        favorite_entry_label: "{lang} இல் {time} நேரத்தில் உள்ள பிடித்த பதிவை ஏற்று"
+      },
+      hi: {
+        lang_select_label: "भाषा चुनें",
+        lang_option_en: "English",
+        lang_option_ta: "தமிழ் (Tamil)",
+        lang_option_hi: "हिन्दी (Hindi)",
+        lang_option_fr: "Français (French)",
+        lang_tab_python: "Python",
+        lang_tab_javascript: "JavaScript",
+        lang_tab_typescript: "TypeScript",
+        lang_tab_java: "Java",
+        lang_tab_cpp: "C++",
+        nav_github: "गिटहब (GitHub)",
+        nav_api_docs: "एपीआई दस्तावेज़ (API Docs)",
+        hero_badge: "ओपन सोर्स · एआई-संचालित · मुफ्त",
+        hero_title: "डीबग करें। समझें।<br /><em>तेज़ी से शिप करें।</em>",
+        hero_subtitle: "अपना कोड पेस्ट करें और तुरंत बग डिटेक्शन, सरल हिंदी में स्पष्टीकरण और व्यावहारिक सुधार सुझाव प्राप्त करें — किसी खाते की आवश्यकता नहीं है।",
+        btn_start_analyzing: "विश्लेषण शुरू करें",
+        btn_try_sample: "सैंपल कोड आज़माएं",
+        btn_star_github: "गिटहब पर स्टार करें",
+        pill_patterns_title: "40+ बग पैटर्न",
+        pill_patterns_desc: "Python, JS, TS, Java, C++",
+        mode_explain: "कोड का स्पष्टीकरण",
+        pill_explain_desc: "सरल स्पष्टीकरण",
+        mode_improve: "स्मार्ट सुझाव",
+        pill_improve_desc: "क्वालिटी स्कोर + ग्रेड",
+        pill_theme_title: "डार्क / लाइट मोड",
+        pill_theme_desc: "सहेजी गई प्राथमिकता",
+        pill_upload_title: "फ़ाइल अपलोड",
+        pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
+        editor_title: "कोड एडिटर",
+        editor_placeholder: "# अपना कोड यहाँ पेस्ट करें या ऊपर 'सैंपल कोड आज़माएं' पर क्लिक करें…",
+        char_count_initial: "शुरू करने के लिए कोड पेस्ट करें या टाइप करें",
+        char_count_format: "{chars} वर्ण · {lines} पंक्तियाँ · {nonBlank} गैर-रिक्त",
+        ctrl_enter_hint: "विश्लेषण करने के लिए Ctrl+Enter दबाएं",
+        mode_full: "पूर्ण",
+        mode_debug: "डीबग",
+        api_url_placeholder: "https://qyverixai.onrender.com",
+        api_status_disconnected: "डिस्कनेक्टेड",
+        api_status_connected: "कनेक्टेड",
+        api_status_unreachable: "पहुंच से बाहर",
+        api_status_error: "त्रुटि {status}",
+        btn_ping: "पिंग",
+        btn_analyze_code: "कोड का विश्लेषण करें",
+        desktop_hint: "(Ctrl+Enter)",
+        results_title: "विश्लेषण के परिणाम",
+        tab_explain: "समझाएं",
+        tab_debug: "डीबग",
+        tab_improve: "सुधारें",
+        empty_explain_title: "अभी तक कोई विश्लेषण नहीं",
+        empty_explain_desc: "परिणाम देखने के लिए अपना कोड पेस्ट करें और विश्लेषण पर क्लिक करें",
+        empty_debug_title: "कोई बग नहीं मिला",
+        empty_debug_desc: "अपने कोड में समस्याओं का पता लगाने के लिए विश्लेषण चलाएं",
+        empty_suggest_title: "अभी तक कोई सुझाव नहीं",
+        empty_suggest_desc: "सुधार के विचार प्राप्त करने के लिए विश्लेषण चलाएं",
+        history_title: "क्वेरी इतिहास",
+        favorites_title: "सहेजे गए पसंदीदा",
+        empty_history: "अभी तक कोई इतिहास नहीं है। अपना पहला विश्लेषण चलाएं।",
+        empty_favorites: "अभी तक कोई पसंदीदा सहेजा नहीं गया है।",
+        btn_clear: "साफ करें",
+        footer_license: "एमआईटी लाइसेंस (MIT License)",
+        footer_built_for: "ओपन सोर्स समुदाय के लिए निर्मित",
+        confirm_clear_history: "इतिहास पूरी तरह साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
+        confirm_clear_favs: "सभी पसंदीदा साफ करें? इसे पूर्ववत नहीं किया जा सकता।",
+        toast_code_copied: "कोड कॉपी किया गया!",
+        toast_api_reachable: "एपीआई पहुंच योग्य है",
+        toast_api_unreachable: "एपीआई तक नहीं पहुंचा जा सकता। यूआरएल की जांच करें।",
+        toast_please_paste: "कृपया पहले कुछ कोड पेस्ट करें।",
+        toast_saved_favorites: "पसंदीदा में सहेजा गया",
+        toast_report_downloaded: "रिपोर्ट डाउनलोड हो गई",
+        toast_sample_loaded: "सैंपल कोड लोड हो गया — विश्लेषण पर क्लिक करें!",
+        toast_history_cleared: "इतिहास साफ कर दिया गया",
+        toast_favorites_cleared: "पसंदीदा साफ कर दिए गए",
+        toast_loaded: "{name} लोड किया गया",
+        toast_dropped: "{name} ड्रॉप किया गया",
+        debug_clean_title: "कोई समस्या नहीं मिली!",
+        debug_clean_desc: "आपका कोड सभी 40+ पैटर्न जांचों में सफल रहा। इसे जारी रखें!",
+        debug_errors: "त्रुटियाँ",
+        debug_warnings: "चेतावनी",
+        debug_info: "जानकारी",
+        debug_line: "पंक्ति {line}",
+        suggest_quality_score: "क्वालिटी स्कोर",
+        suggest_perfect_title: "उत्कृष्ट स्कोर!",
+        suggest_perfect_desc: "कोई सुधार सुझाव नहीं मिला।",
+        suggest_priority: "{priority} प्राथमिकता",
+        btn_copy: "कोड कॉपी करें",
+        btn_upload: "फ़ाइल अपलोड करें",
+        btn_save_favorites: "पसंदीदा में सहेजें",
+        btn_download_results: "परिणाम डाउनलोड करें",
+        btn_toggle_theme: "थीम बदलें",
+        analyze_btn_title: "कोड का विश्लेषण करें (Ctrl+Enter)",
+        meta_lines: "{count} पंक्तियाँ",
+        meta_functions: "{count} फ़ंक्शन",
+        meta_classes: "{count} क्लासें",
+        toast_analysis_failed: "विश्लेषण विफल रहा: {message}",
+        history_entry_label: "{time} पर {lang} के लिए इतिहास प्रविष्टि लोड करें",
+        favorite_entry_label: "{time} पर {lang} के लिए पसंदीदा प्रविष्टि लोड करें"
+      },
+      fr: {
+        lang_select_label: "Choisir la langue",
+        lang_option_en: "English",
+        lang_option_ta: "தமிழ் (Tamil)",
+        lang_option_hi: "हिन्दी (Hindi)",
+        lang_option_fr: "Français (French)",
+        lang_tab_python: "Python",
+        lang_tab_javascript: "JavaScript",
+        lang_tab_typescript: "TypeScript",
+        lang_tab_java: "Java",
+        lang_tab_cpp: "C++",
+        nav_github: "GitHub",
+        nav_api_docs: "Docs API",
+        hero_badge: "Open Source · Propulsé par l'IA · Gratuit",
+        hero_title: "Déboguez. Comprenez.<br /><em>Lisez plus vite.</em>",
+        hero_subtitle: "Collez votre code et obtenez une détection instantanée des bogues, des explications simples et des suggestions d'amélioration exploitables — aucun compte requis.",
+        btn_start_analyzing: "Démarrer l'analyse",
+        btn_try_sample: "Essayer l'exemple",
+        btn_star_github: "Star sur GitHub",
+        pill_patterns_title: "40+ Modèles de bogues",
+        pill_patterns_desc: "Python, JS, TS, Java, C++",
+        mode_explain: "Explication de code",
+        pill_explain_desc: "Analyses en français simple",
+        mode_improve: "Suggestions intelligentes",
+        pill_improve_desc: "Score de qualité + note",
+        pill_theme_title: "Mode Sombre / Clair",
+        pill_theme_desc: "Préférence persistée",
+        pill_upload_title: "Télécharger un fichier",
+        pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
+        editor_title: "Éditeur de code",
+        editor_placeholder: "# Collez votre code ici ou cliquez sur 'Essayer l'exemple' ci-dessus…",
+        char_count_initial: "Collez ou tapez du code pour commencer",
+        char_count_format: "{chars} chars · {lines} lignes · {nonBlank} non vides",
+        ctrl_enter_hint: "Ctrl+Enter pour analyser",
+        mode_full: "Complet",
+        mode_debug: "Débogage",
+        api_url_placeholder: "https://qyverixai.onrender.com",
+        api_status_disconnected: "Déconnecté",
+        api_status_connected: "Connecté",
+        api_status_unreachable: "Inaccessible",
+        api_status_error: "Erreur {status}",
+        btn_ping: "Ping",
+        btn_analyze_code: "Analyser le code",
+        desktop_hint: "(Ctrl+Enter)",
+        results_title: "Résultats de l'analyse",
+        tab_explain: "Expliquer",
+        tab_debug: "Déboguer",
+        tab_improve: "Améliorer",
+        empty_explain_title: "Aucune analyse pour le moment",
+        empty_explain_desc: "Collez votre code et cliquez sur Analyser pour voir les résultats",
+        empty_debug_title: "Aucun bogue détecté",
+        empty_debug_desc: "Exécutez l'analyse pour détecter les problèmes dans votre code",
+        empty_suggest_title: "Aucune suggestion pour le moment",
+        empty_suggest_desc: "Exécutez l'analyse pour obtenir des idées d'amélioration",
+        history_title: "Historique des requêtes",
+        favorites_title: "Favoris enregistrés",
+        empty_history: "Aucun historique pour le moment. Lancez votre première analyse.",
+        empty_favorites: "Aucun favori enregistré pour le moment.",
+        btn_clear: "Effacer",
+        footer_license: "Licence MIT",
+        footer_built_for: "Conçu pour la communauté open source",
+        confirm_clear_history: "Effacer tout l'historique ? Cette action est irréversible.",
+        confirm_clear_favs: "Effacer tous les favoris ? Cette action est irréversible.",
+        toast_code_copied: "Code copié !",
+        toast_api_reachable: "L'API est accessible",
+        toast_api_unreachable: "Impossible de joindre l'API. Vérifiez l'URL.",
+        toast_please_paste: "Veuillez d'abord coller du code.",
+        toast_saved_favorites: "Enregistré dans les favoris",
+        toast_report_downloaded: "Rapport téléchargé",
+        toast_sample_loaded: "Exemple de code chargé — cliquez sur Analyser !",
+        toast_history_cleared: "Historique effacé",
+        toast_favorites_cleared: "Favoris effacés",
+        toast_loaded: "{name} chargé",
+        toast_dropped: "{name} déposé",
+        debug_clean_title: "Aucun problème détecté !",
+        debug_clean_desc: "Votre code a passé les 40+ vérifications avec succès. Continuez ainsi !",
+        debug_errors: "Erreurs",
+        debug_warnings: "Avertissements",
+        debug_info: "Infos",
+        debug_line: "Ligne {line}",
+        suggest_quality_score: "Score de qualité",
+        suggest_perfect_title: "Score parfait !",
+        suggest_perfect_desc: "Aucune suggestion d'amélioration trouvée.",
+        suggest_priority: "Priorité {priority}",
+        btn_copy: "Copier le code",
+        btn_upload: "Télécharger le fichier",
+        btn_save_favorites: "Enregistrer dans les favoris",
+        btn_download_results: "Télécharger les résultats",
+        btn_toggle_theme: "Changer le thème",
+        analyze_btn_title: "Analyser le code (Ctrl+Enter)",
+        meta_lines: "{count} lignes",
+        meta_functions: "{count} fonctions",
+        meta_classes: "{count} classes",
+        toast_analysis_failed: "Échec de l'analyse : {message}",
+        history_entry_label: "Charger l'entrée d'historique pour {lang} à {time}",
+        favorite_entry_label: "Charger le favori pour {lang} à {time}"
+      }
+    };
 
-      const MAX_HISTORY = 50;
-      let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-      let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
-      let currentResult = null;
-      let selectedLang = 'python';
-      let selectedMode = 'analyze';
-      let selectedZipFile = null;
-      let appLang = localStorage.getItem('qyx_lang') || 'en';
+    const MAX_HISTORY = 50;
+    let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
+    let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
+    let currentResult = null;
+    let selectedLang = 'python';
+    let selectedMode = 'analyze';
+    let selectedZipFile = null;
+    let appLang = localStorage.getItem('qyx_lang') || 'en';
 
     /* ═══════════════════════════════════════════════════════════════
        DOM REFS
@@ -2888,118 +2959,118 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       btn.setAttribute('aria-pressed', theme === 'light' ? 'true' : 'false');
     }
 
-      const savedTheme = localStorage.getItem('qyx_theme');
+    const savedTheme = localStorage.getItem('qyx_theme');
 
-      // Force dark theme for now to avoid light-theme regressions
-      const initialTheme = 'dark';
-      localStorage.setItem('qyx_theme', initialTheme);
-      document.documentElement.setAttribute('data-theme', initialTheme);
-      setThemeIcon(initialTheme);
+    // Force dark theme for now to avoid light-theme regressions
+    const initialTheme = savedTheme || 'dark';
+    localStorage.setItem('qyx_theme', initialTheme);
+    document.documentElement.setAttribute('data-theme', initialTheme);
+    setThemeIcon(initialTheme);
 
-      document.getElementById('themeToggle').addEventListener('click', () => {
-        const cur = document.documentElement.getAttribute('data-theme');
-        const next = cur === 'dark' ? 'light' : 'dark';
-        document.documentElement.setAttribute('data-theme', next);
-        localStorage.setItem('qyx_theme', next);
-        setThemeIcon(next);
-      });
+    document.getElementById('themeToggle').addEventListener('click', () => {
+      const cur = document.documentElement.getAttribute('data-theme');
+      const next = cur === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('qyx_theme', next);
+      setThemeIcon(next);
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         I18N IMPLEMENTATION
-      ═══════════════════════════════════════════════════════════════ */
-      function getTranslation(key) {
-        return TRANSLATIONS[appLang]?.[key] || TRANSLATIONS['en']?.[key] || key;
-      }
+    /* ═══════════════════════════════════════════════════════════════
+       I18N IMPLEMENTATION
+    ═══════════════════════════════════════════════════════════════ */
+    function getTranslation(key) {
+      return TRANSLATIONS[appLang]?.[key] || TRANSLATIONS['en']?.[key] || key;
+    }
 
-      function setAppLanguage(lang) {
-        appLang = lang;
-        localStorage.setItem('qyx_lang', lang);
-        document.documentElement.setAttribute('lang', lang);
+    function setAppLanguage(lang) {
+      appLang = lang;
+      localStorage.setItem('qyx_lang', lang);
+      document.documentElement.setAttribute('lang', lang);
 
-        // Sync select dropdown
-        const select = document.getElementById('langSelect');
-        if (select) select.value = lang;
+      // Sync select dropdown
+      const select = document.getElementById('langSelect');
+      if (select) select.value = lang;
 
-        // Update elements with data-i18n
-        document.querySelectorAll('[data-i18n]').forEach(el => {
-          const key = el.getAttribute('data-i18n');
-          const trans = getTranslation(key);
-          if (trans) el.innerHTML = trans;
-        });
-
-        // Update placeholders
-        document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
-          const key = el.getAttribute('data-i18n-placeholder');
-          const trans = getTranslation(key);
-          if (trans) el.placeholder = trans;
-        });
+      // Update elements with data-i18n
+      document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        const trans = getTranslation(key);
+        if (trans) el.innerHTML = trans;
+      });
 
-        // Update titles
-        document.querySelectorAll('[data-i18n-title]').forEach(el => {
-          const key = el.getAttribute('data-i18n-title');
-          const trans = getTranslation(key);
-          if (trans) el.title = trans;
-        });
+      // Update placeholders
+      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        const trans = getTranslation(key);
+        if (trans) el.placeholder = trans;
+      });
 
-        document.querySelectorAll('[data-i18n-aria-label]').forEach(el => {
-          const key = el.getAttribute('data-i18n-aria-label');
-          const trans = getTranslation(key);
-          if (trans) el.setAttribute('aria-label', trans);
-        });
+      // Update titles
+      document.querySelectorAll('[data-i18n-title]').forEach(el => {
+        const key = el.getAttribute('data-i18n-title');
+        const trans = getTranslation(key);
+        if (trans) el.title = trans;
+      });
 
-        syncApiStatusText();
+      document.querySelectorAll('[data-i18n-aria-label]').forEach(el => {
+        const key = el.getAttribute('data-i18n-aria-label');
+        const trans = getTranslation(key);
+        if (trans) el.setAttribute('aria-label', trans);
+      });
 
-        updateEditor();
-        renderHistory();
-        renderFavorites();
-        if (currentResult) {
-          renderResults(currentResult, editor.value);
-        }
-      }
+      syncApiStatusText();
 
-      /* ═══════════════════════════════════════════════════════════════
-         EDITOR
-      ═══════════════════════════════════════════════════════════════ */
-      function updateEditor() {
-        const val = editor.value;
-        const lines = val ? val.split('\n').length : 0;
-        const chars = val.length;
-        const nonBlank = val ? val.split('\n').filter(l => l.trim()).length : 0;
-        charCount.textContent = val
-          ? getTranslation('char_count_format')
-              .replace('{chars}', chars.toLocaleString())
-              .replace('{lines}', lines)
-              .replace('{nonBlank}', nonBlank)
-          : getTranslation('char_count_initial');
-        const lineCount = Math.max(lines, 1);
-        lineNumbers.innerHTML = val
-          ? Array.from({ length: lineCount }, (_, i) => i + 1).join('<br>')
-          : '1';
+      updateEditor();
+      renderHistory();
+      renderFavorites();
+      if (currentResult) {
+        renderResults(currentResult, editor.value);
       }
+    }
 
-      function syncApiStatusText() {
-        if (!apiStatusText) return;
-        const state = apiStatusText.dataset.status || 'disconnected';
-        const stateToKey = {
-          connected: 'api_status_connected',
-          unreachable: 'api_status_unreachable',
-          error: 'api_status_error',
-          disconnected: 'api_status_disconnected',
-        };
-        const key = stateToKey[state] || 'api_status_disconnected';
-        const text = getTranslation(key);
-        apiStatusText.textContent = key === 'api_status_error'
-          ? text.replace('{status}', apiStatusText.dataset.statusCode || '')
-          : text;
-      }
+    /* ═══════════════════════════════════════════════════════════════
+       EDITOR
+    ═══════════════════════════════════════════════════════════════ */
+    function updateEditor() {
+      const val = editor.value;
+      const lines = val ? val.split('\n').length : 0;
+      const chars = val.length;
+      const nonBlank = val ? val.split('\n').filter(l => l.trim()).length : 0;
+      charCount.textContent = val
+        ? getTranslation('char_count_format')
+          .replace('{chars}', chars.toLocaleString())
+          .replace('{lines}', lines)
+          .replace('{nonBlank}', nonBlank)
+        : getTranslation('char_count_initial');
+      const lineCount = Math.max(lines, 1);
+      lineNumbers.innerHTML = val
+        ? Array.from({ length: lineCount }, (_, i) => i + 1).join('<br>')
+        : '1';
+    }
+
+    function syncApiStatusText() {
+      if (!apiStatusText) return;
+      const state = apiStatusText.dataset.status || 'disconnected';
+      const stateToKey = {
+        connected: 'api_status_connected',
+        unreachable: 'api_status_unreachable',
+        error: 'api_status_error',
+        disconnected: 'api_status_disconnected',
+      };
+      const key = stateToKey[state] || 'api_status_disconnected';
+      const text = getTranslation(key);
+      apiStatusText.textContent = key === 'api_status_error'
+        ? text.replace('{status}', apiStatusText.dataset.statusCode || '')
+        : text;
+    }
 
-      function looksLikeRestoredPageSource(text) {
-        return /<\s*html|<\s*style|<\s*script|function\s+updateEditor\s*\(|\.stat-bar|\.hero\s*\{|\.workspace\s*\{/i.test(text);
-      }
+    function looksLikeRestoredPageSource(text) {
+      return /<\s*html|<\s*style|<\s*script|function\s+updateEditor\s*\(|\.stat-bar|\.hero\s*\{|\.workspace\s*\{/i.test(text);
+    }
 
-      function getApiBase() {
-        return ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || 'http://localhost:8000').replace(/\/$/, '');
-      }
+    function getApiBase() {
+      return ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || 'http://localhost:8000').replace(/\/$/, '');
+    }
 
     function normalizeEditorOnLoad() {
       if (looksLikeRestoredPageSource(editor.value || '')) {
@@ -3012,13 +3083,13 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
     window.addEventListener('pageshow', normalizeEditorOnLoad);
     setTimeout(normalizeEditorOnLoad, 0);
 
-      editor.addEventListener('input', () => {
-        selectedZipFile = null;
-        updateEditor();
-      });
-      editor.addEventListener('scroll', () => {
-        lineNumbers.scrollTop = editor.scrollTop;
-      });
+    editor.addEventListener('input', () => {
+      selectedZipFile = null;
+      updateEditor();
+    });
+    editor.addEventListener('scroll', () => {
+      lineNumbers.scrollTop = editor.scrollTop;
+    });
 
     // Tab key support
     editor.addEventListener('keydown', e => {
@@ -3139,67 +3210,66 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       }
     });
 
-      /* ═══════════════════════════════════════════════════════════════
-         FILE UPLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('fileInput').addEventListener('change', e => {
-        const file = e.target.files[0];
-        if (!file) return;
-        handleUploadedFile(file);
-        e.target.value = '';
-      });
-
-      /* Drag and drop */
-      document.body.addEventListener('dragover', e => e.preventDefault());
-      document.body.addEventListener('drop', e => {
-        e.preventDefault();
-        const file = e.dataTransfer.files[0];
-        if (!file) return;
-        handleUploadedFile(file);
-      });
+    /* ═══════════════════════════════════════════════════════════════
+       FILE UPLOAD
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('fileInput').addEventListener('change', e => {
+      const file = e.target.files[0];
+      if (!file) return;
+      handleUploadedFile(file);
+      e.target.value = '';
+    });
 
-      function handleUploadedFile(file) {
-        const ext = file.name.split('.').pop().toLowerCase();
-        if (ext === 'zip') {
-          selectedZipFile = file;
-          selectedMode = 'analyze';
-          document.querySelectorAll('.mode-btn').forEach(x => {
-            x.classList.toggle('active', x.dataset.mode === 'analyze');
-            x.setAttribute('aria-pressed', x.dataset.mode === 'analyze' ? 'true' : 'false');
-          });
-          editor.value = `ZIP ready for project analysis: ${file.name}\n\nClick Analyze Code to scan up to 20 source files.`;
-          updateEditor();
-          resetResults();
-          toast(`Loaded ZIP ${file.name}`, 'success');
-          return;
-        }
+    /* Drag and drop */
+    document.body.addEventListener('dragover', e => e.preventDefault());
+    document.body.addEventListener('drop', e => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      if (!file) return;
+      handleUploadedFile(file);
+    });
 
-        selectedZipFile = null;
-        const langMap = {
-          py: 'python',
-          js: 'javascript',
-          ts: 'typescript',
-          java: 'java',
-          cpp: 'cpp',
-          cc: 'cpp',
-          cxx: 'cpp',
-          c: 'cpp',
-          h: 'cpp',
-          hpp: 'cpp',
-          kt: 'kotlin',
-          kts: 'kotlin',
-        };
-        if (langMap[ext]) setLanguage(langMap[ext]);
-        const reader = new FileReader();
-        reader.onload = ev => {
-          editor.value = ev.target.result;
-          updateEditor();
-          resetResults();
-          toast(getTranslation('toast_loaded').replace('{name}', file.name), 'success');
-        };
-        reader.readAsText(file);
+    function handleUploadedFile(file) {
+      const ext = file.name.split('.').pop().toLowerCase();
+      if (ext === 'zip') {
+        selectedZipFile = file;
+        selectedMode = 'analyze';
+        document.querySelectorAll('.mode-btn').forEach(x => {
+          x.classList.toggle('active', x.dataset.mode === 'analyze');
+          x.setAttribute('aria-pressed', x.dataset.mode === 'analyze' ? 'true' : 'false');
+        });
+        editor.value = `ZIP ready for project analysis: ${file.name}\n\nClick Analyze Code to scan up to 20 source files.`;
+        updateEditor();
+        resetResults();
+        toast(`Loaded ZIP ${file.name}`, 'success');
+        return;
       }
 
+      selectedZipFile = null;
+      const langMap = {
+        py: 'python',
+        js: 'javascript',
+        ts: 'typescript',
+        java: 'java',
+        cpp: 'cpp',
+        cc: 'cpp',
+        cxx: 'cpp',
+        c: 'cpp',
+        h: 'cpp',
+        hpp: 'cpp',
+        
+      };
+      if (langMap[ext]) setLanguage(langMap[ext]);
+      const reader = new FileReader();
+      reader.onload = ev => {
+        editor.value = ev.target.result;
+        updateEditor();
+        resetResults();
+        toast(getTranslation('toast_loaded').replace('{name}', file.name), 'success');
+      };
+      reader.readAsText(file);
+    }
+
     /* ═══════════════════════════════════════════════════════════════
        LANGUAGE TABS
     ═══════════════════════════════════════════════════════════════ */
@@ -3260,50 +3330,50 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       });
     });
 
-      /* ═══════════════════════════════════════════════════════════════
-         CLEAR / COPY
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('clearBtn').addEventListener('click', () => {
-        selectedZipFile = null;
-        editor.value = '';
-        updateEditor();
-        resetResults();
-      });
-      document.getElementById('copyBtn').addEventListener('click', () => {
-        if (!editor.value.trim()) return;
-        navigator.clipboard.writeText(editor.value).then(() => toast(getTranslation('toast_code_copied'), 'success'));
-      });
+    /* ═══════════════════════════════════════════════════════════════
+       CLEAR / COPY
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('clearBtn').addEventListener('click', () => {
+      selectedZipFile = null;
+      editor.value = '';
+      updateEditor();
+      resetResults();
+    });
+    document.getElementById('copyBtn').addEventListener('click', () => {
+      if (!editor.value.trim()) return;
+      navigator.clipboard.writeText(editor.value).then(() => toast(getTranslation('toast_code_copied'), 'success'));
+    });
 
-      /* ═══════════════════════════════════════════════════════════════
-         API PING
-      ═══════════════════════════════════════════════════════════════ */
-      async function pingApi() {
-        if (!apiUrlInput || !apiDot || !apiStatusText) return;
-        const base = getApiBase();
-        try {
-          const r = await fetch(`${base}/health`, { signal: AbortSignal.timeout(5000) });
-          if (r.ok) {
-            apiDot.classList.add('connected');
-            apiStatusText.dataset.status = 'connected';
-            delete apiStatusText.dataset.statusCode;
-            syncApiStatusText();
-            toast(getTranslation('toast_api_reachable'), 'success');
-          } else {
-            apiDot.classList.remove('connected');
-            apiStatusText.dataset.status = 'error';
-            apiStatusText.dataset.statusCode = String(r.status);
-            syncApiStatusText();
-          }
-        } catch {
-          apiDot.classList.remove('connected');
-          apiStatusText.dataset.status = 'unreachable';
+    /* ═══════════════════════════════════════════════════════════════
+       API PING
+    ═══════════════════════════════════════════════════════════════ */
+    async function pingApi() {
+      if (!apiUrlInput || !apiDot || !apiStatusText) return;
+      const base = getApiBase();
+      try {
+        const r = await fetch(`${base}/health`, { signal: AbortSignal.timeout(5000) });
+        if (r.ok) {
+          apiDot.classList.add('connected');
+          apiStatusText.dataset.status = 'connected';
           delete apiStatusText.dataset.statusCode;
           syncApiStatusText();
-          toast(getTranslation('toast_api_unreachable'), 'error');
+          toast(getTranslation('toast_api_reachable'), 'success');
+        } else {
+          apiDot.classList.remove('connected');
+          apiStatusText.dataset.status = 'error';
+          apiStatusText.dataset.statusCode = String(r.status);
+          syncApiStatusText();
         }
+      } catch {
+        apiDot.classList.remove('connected');
+        apiStatusText.dataset.status = 'unreachable';
+        delete apiStatusText.dataset.statusCode;
+        syncApiStatusText();
+        toast(getTranslation('toast_api_unreachable'), 'error');
       }
-      const pingBtn = document.getElementById('pingBtn');
-      if (pingBtn) pingBtn.addEventListener('click', pingApi);
+    }
+    const pingBtn = document.getElementById('pingBtn');
+    if (pingBtn) pingBtn.addEventListener('click', pingApi);
 
     // Auto-ping on load
     setTimeout(pingApi, 800);
@@ -3313,63 +3383,63 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
     ═══════════════════════════════════════════════════════════════ */
     analyzeBtn.addEventListener('click', doAnalyze);
 
-      async function doAnalyze() {
-        const code = editor.value.trim();
-        if (!selectedZipFile && !code) { toast(getTranslation('toast_please_paste'), 'error'); return; }
+    async function doAnalyze() {
+      const code = editor.value.trim();
+      if (!selectedZipFile && !code) { toast(getTranslation('toast_please_paste'), 'error'); return; }
 
-        const base = getApiBase();
-        const endpointMap = {
-          analyze: '/analyze/',
-          explain: '/explanation/',
-          debug: '/debugging/',
-          suggest: '/suggestions/',
-        };
-        const endpoint = endpointMap[selectedMode] || '/analyze/';
+      const base = getApiBase();
+      const endpointMap = {
+        analyze: '/analyze/',
+        explain: '/explanation/',
+        debug: '/debugging/',
+        suggest: '/suggestions/',
+      };
+      const endpoint = endpointMap[selectedMode] || '/analyze/';
 
       // Loading state
       analyzeBtn.classList.add('loading');
       analyzeBtn.disabled = true;
       showShimmers();
 
-        try {
-          if (selectedZipFile) {
-            const formData = new FormData();
-            formData.append('file', selectedZipFile);
-            const res = await fetch(`${base}/analyze/zip/`, {
-              method: 'POST',
-              body: formData,
-              signal: AbortSignal.timeout(60000),
-            });
-            if (!res.ok) {
-              const err = await res.json().catch(() => ({}));
-              throw new Error(err.detail || `HTTP ${res.status}`);
-            }
-
-            const data = await res.json();
-            currentResult = data;
-            renderZipResults(data);
-            addToHistory(`ZIP: ${selectedZipFile.name}`, data);
-            apiDot.classList.add('connected');
-            apiStatusText.textContent = 'Connected';
-            document.getElementById('engineBar').style.display = 'flex';
-            engineInfo.textContent = `${data.provider || 'rule-based'} · ${data.model || ''}`;
-            timeInfo.textContent = data.analysis_time_ms ? data.analysis_time_ms + 'ms' : '';
-            resultActions.style.display = 'flex';
-            return;
-          }
-
-          const res = await fetch(`${base}${endpoint}`, {
+      try {
+        if (selectedZipFile) {
+          const formData = new FormData();
+          formData.append('file', selectedZipFile);
+          const res = await fetch(`${base}/analyze/zip/`, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ code, language: selectedLang }),
-            signal: AbortSignal.timeout(30000),
+            body: formData,
+            signal: AbortSignal.timeout(60000),
           });
           if (!res.ok) {
             const err = await res.json().catch(() => ({}));
             throw new Error(err.detail || `HTTP ${res.status}`);
           }
+
           const data = await res.json();
-          const elapsed = res.headers.get('X-Process-Time-Ms');
+          currentResult = data;
+          renderZipResults(data);
+          addToHistory(`ZIP: ${selectedZipFile.name}`, data);
+          apiDot.classList.add('connected');
+          apiStatusText.textContent = 'Connected';
+          document.getElementById('engineBar').style.display = 'flex';
+          engineInfo.textContent = `${data.provider || 'rule-based'} · ${data.model || ''}`;
+          timeInfo.textContent = data.analysis_time_ms ? data.analysis_time_ms + 'ms' : '';
+          resultActions.style.display = 'flex';
+          return;
+        }
+
+        const res = await fetch(`${base}${endpoint}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code, language: selectedLang }),
+          signal: AbortSignal.timeout(30000),
+        });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          throw new Error(err.detail || `HTTP ${res.status}`);
+        }
+        const data = await res.json();
+        const elapsed = res.headers.get('X-Process-Time-Ms');
 
         // Normalize to full analysis shape
         let result;
@@ -3383,72 +3453,72 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           result = { explanation: null, debugging: null, suggestions: data, provider: 'rule-based', analysis_time_ms: null };
         }
 
-          currentResult = result;
-          renderResults(result, code);
-          addToHistory(code, result);
-          apiDot.classList.add('connected');
-          apiStatusText.textContent = getTranslation('api_status_connected');
-          document.getElementById('engineBar').style.display = 'flex';
-          engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
-          if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
-          else if (data.analysis_time_ms) timeInfo.textContent = data.analysis_time_ms + 'ms';
-          resultActions.style.display = 'flex';
-
-        } catch (err) {
-          toast(getTranslation('toast_analysis_failed').replace('{message}', err.message), 'error');
-          resetResults();
-        } finally {
-          analyzeBtn.classList.remove('loading');
-          analyzeBtn.disabled = false;
-        }
+        currentResult = result;
+        renderResults(result, code);
+        addToHistory(code, result);
+        apiDot.classList.add('connected');
+        apiStatusText.textContent = getTranslation('api_status_connected');
+        document.getElementById('engineBar').style.display = 'flex';
+        engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
+        if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
+        else if (data.analysis_time_ms) timeInfo.textContent = data.analysis_time_ms + 'ms';
+        resultActions.style.display = 'flex';
+
+      } catch (err) {
+        toast(getTranslation('toast_analysis_failed').replace('{message}', err.message), 'error');
+        resetResults();
+      } finally {
+        analyzeBtn.classList.remove('loading');
+        analyzeBtn.disabled = false;
       }
+    }
 
-      /* ═══════════════════════════════════════════════════════════════
-         RENDER RESULTS
-      ═══════════════════════════════════════════════════════════════ */
-      function renderResults(result, code) {
-        if (result.files) {
-          renderZipResults(result);
-          return;
-        }
-        if (result.explanation) renderExplain(result.explanation);
-        if (result.debugging) renderDebug(result.debugging);
-        if (result.suggestions) renderSuggest(result.suggestions);
-
-        // Auto-switch to relevant tab
-        const tabOrder = { analyze: 'explain', explain: 'explain', debug: 'debug', suggest: 'suggest' };
-        const targetTab = tabOrder[selectedMode] || 'explain';
-        document.querySelector(`[data-rtab="${targetTab}"]`).click();
+    /* ═══════════════════════════════════════════════════════════════
+       RENDER RESULTS
+    ═══════════════════════════════════════════════════════════════ */
+    function renderResults(result, code) {
+      if (result.files) {
+        renderZipResults(result);
+        return;
       }
+      if (result.explanation) renderExplain(result.explanation);
+      if (result.debugging) renderDebug(result.debugging);
+      if (result.suggestions) renderSuggest(result.suggestions);
 
-      function renderZipResults(project) {
-        ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
-          document.getElementById(id).style.display = 'none';
-        });
-        ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
-          document.getElementById(id).style.display = 'block';
-        });
+      // Auto-switch to relevant tab
+      const tabOrder = { analyze: 'explain', explain: 'explain', debug: 'debug', suggest: 'suggest' };
+      const targetTab = tabOrder[selectedMode] || 'explain';
+      document.querySelector(`[data-rtab="${targetTab}"]`).click();
+    }
 
-        document.getElementById('explainBadge').textContent = `${project.file_count} files`;
-        const totalIssues = project.files.reduce((sum, file) => sum + file.analysis.debugging.issues.length, 0);
-        const totalSuggestions = project.files.reduce((sum, file) => sum + file.analysis.suggestions.suggestions.length, 0);
-        const errorCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.error_count, 0);
-        const warningCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.warning_count, 0);
-        const infoCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.info_count, 0);
-        document.getElementById('debugBadge').textContent = totalIssues || '0';
-        document.getElementById('suggestBadge').textContent = project.overall_project_score;
-
-        const scoreColor = project.overall_project_score >= 80 ? 'var(--green)'
-          : project.overall_project_score >= 60 ? 'var(--yellow)'
-            : 'var(--red)';
-        const circumference = 2 * Math.PI * 30;
-        const dashOffset = circumference - (project.overall_project_score / 100) * circumference;
-        const fileList = project.files.map((file, i) => {
-          const analysis = file.analysis;
-          const issueSummary = analysis.debugging.clean
-            ? 'No issues detected'
-            : `${analysis.debugging.error_count} errors · ${analysis.debugging.warning_count} warnings · ${analysis.debugging.info_count} info`;
-          return `
+    function renderZipResults(project) {
+      ['emptyExplain', 'emptyDebug', 'emptySuggest'].forEach(id => {
+        document.getElementById(id).style.display = 'none';
+      });
+      ['explainResult', 'debugResult', 'suggestResult'].forEach(id => {
+        document.getElementById(id).style.display = 'block';
+      });
+
+      document.getElementById('explainBadge').textContent = `${project.file_count} files`;
+      const totalIssues = project.files.reduce((sum, file) => sum + file.analysis.debugging.issues.length, 0);
+      const totalSuggestions = project.files.reduce((sum, file) => sum + file.analysis.suggestions.suggestions.length, 0);
+      const errorCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.error_count, 0);
+      const warningCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.warning_count, 0);
+      const infoCount = project.files.reduce((sum, file) => sum + file.analysis.debugging.info_count, 0);
+      document.getElementById('debugBadge').textContent = totalIssues || '0';
+      document.getElementById('suggestBadge').textContent = project.overall_project_score;
+
+      const scoreColor = project.overall_project_score >= 80 ? 'var(--green)'
+        : project.overall_project_score >= 60 ? 'var(--yellow)'
+          : 'var(--red)';
+      const circumference = 2 * Math.PI * 30;
+      const dashOffset = circumference - (project.overall_project_score / 100) * circumference;
+      const fileList = project.files.map((file, i) => {
+        const analysis = file.analysis;
+        const issueSummary = analysis.debugging.clean
+          ? 'No issues detected'
+          : `${analysis.debugging.error_count} errors · ${analysis.debugging.warning_count} warnings · ${analysis.debugging.info_count} info`;
+        return `
       <details class="zip-file-card" ${i === 0 ? 'open' : ''}>
         <summary>
           <span class="zip-file-name">${escHtml(file.filename)}</span>
@@ -3469,13 +3539,13 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
             </div>`).join('')}
         </div>
       </details>`;
-        }).join('');
+      }).join('');
 
-        const skipped = project.skipped_files.length
-          ? `<div class="zip-skipped">Skipped: ${project.skipped_files.map(escHtml).join(', ')}</div>`
-          : '';
+      const skipped = project.skipped_files.length
+        ? `<div class="zip-skipped">Skipped: ${project.skipped_files.map(escHtml).join(', ')}</div>`
+        : '';
 
-        document.getElementById('explainResult').innerHTML = `
+      document.getElementById('explainResult').innerHTML = `
     <div class="zip-overview">
       <div class="score-ring-wrap">
         <div class="score-ring">
@@ -3504,7 +3574,7 @@ <h3>Project Health</h3>
       <div class="zip-file-list">${fileList}</div>
     </div>`;
 
-        document.getElementById('debugResult').innerHTML = `
+      document.getElementById('debugResult').innerHTML = `
     <div class="stat-bar">
       <div class="stat-chip error-chip"><div class="stat-chip-num">${errorCount}</div><div class="stat-chip-label">Errors</div></div>
       <div class="stat-chip warn-chip"><div class="stat-chip-num">${warningCount}</div><div class="stat-chip-label">Warnings</div></div>
@@ -3512,7 +3582,7 @@ <h3>Project Health</h3>
     </div>
     <div class="zip-file-list">${fileList}</div>`;
 
-        document.getElementById('suggestResult').innerHTML = `
+      document.getElementById('suggestResult').innerHTML = `
     <div class="score-ring-wrap">
       <div class="score-ring">
         <svg width="80" height="80" viewBox="0 0 80 80">
@@ -3532,8 +3602,8 @@ <h3>Project Health Score</h3>
     </div>
     <div class="zip-file-list">${fileList}</div>`;
 
-        document.querySelector('[data-rtab="explain"]').click();
-      }
+      document.querySelector('[data-rtab="explain"]').click();
+    }
 
     function renderExplain(exp) {
       document.getElementById('emptyExplain').style.display = 'none';
@@ -3801,9 +3871,9 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
       </div>
     </div>`;
 
-        const cards = sugg.suggestions.length === 0
-          ? `<div class="clean-state"><div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></div><h3>${getTranslation('suggest_perfect_title')}</h3><p>${getTranslation('suggest_perfect_desc')}</p></div>`
-          : sugg.suggestions.map((s, i) => {
+      const cards = sugg.suggestions.length === 0
+        ? `<div class="clean-state"><div class="clean-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></div><h3>${getTranslation('suggest_perfect_title')}</h3><p>${getTranslation('suggest_perfect_desc')}</p></div>`
+        : sugg.suggestions.map((s, i) => {
 
           let exampleHtml = '';
           if (s.example) {
@@ -3931,47 +4001,47 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
       currentResult = null;
     }
 
-      /* ═══════════════════════════════════════════════════════════════
-         HISTORY
-      ═══════════════════════════════════════════════════════════════ */
-      async function saveHistoryToBackend(code, lang, result) {
-        try {
-          const base = apiUrlInput.value.replace(/\/$/, '');
-          const score = result.suggestions?.overall_score ?? null;
-          const issue_count = result.debugging?.error_count ?? null;
-          await fetch(`${base}/history/`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ code, language: lang, score, issue_count }),
-          });
-        } catch (_) {
-          // backend unavailable — localStorage fallback is still active
-        }
+    /* ═══════════════════════════════════════════════════════════════
+       HISTORY
+    ═══════════════════════════════════════════════════════════════ */
+    async function saveHistoryToBackend(code, lang, result) {
+      try {
+        const base = apiUrlInput.value.replace(/\/$/, '');
+        const score = result.suggestions?.overall_score ?? null;
+        const issue_count = result.debugging?.error_count ?? null;
+        await fetch(`${base}/history/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code, language: lang, score, issue_count }),
+        });
+      } catch (_) {
+        // backend unavailable — localStorage fallback is still active
       }
+    }
 
-      function addToHistory(code, result) {
-        const lang = result.explanation?.language || result.debugging?.language||result.suggestions?.language||selectedLang;
-        const entry = {
-          id: Date.now(),
-          code,
-          result,
-          lang,
-          ts: new Date().toLocaleTimeString(),
-          preview: code.slice(0, 60).replace(/\n/g, ' '),
-        };
-        history.unshift(entry);
-        if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
-        localStorage.setItem('qyx_history', JSON.stringify(history));
-        renderHistory();
-        saveHistoryToBackend(code, lang, result);
-      }
+    function addToHistory(code, result) {
+      const lang = result.explanation?.language || result.debugging?.language || result.suggestions?.language || selectedLang;
+      const entry = {
+        id: Date.now(),
+        code,
+        result,
+        lang,
+        ts: new Date().toLocaleTimeString(),
+        preview: code.slice(0, 60).replace(/\n/g, ' '),
+      };
+      history.unshift(entry);
+      if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
+      localStorage.setItem('qyx_history', JSON.stringify(history));
+      renderHistory();
+      saveHistoryToBackend(code, lang, result);
+    }
 
-      function renderHistory() {
-        if (!history.length) {
-          historyList.innerHTML = `<div class="list-empty" data-i18n="empty_history">${getTranslation('empty_history')}</div>`;
-          return;
-        }
-        historyList.innerHTML = history.map(h => `
+    function renderHistory() {
+      if (!history.length) {
+        historyList.innerHTML = `<div class="list-empty" data-i18n="empty_history">${getTranslation('empty_history')}</div>`;
+        return;
+      }
+      historyList.innerHTML = history.map(h => `
     <div class="history-item" onclick="loadEntry('${h.id}')" tabindex="0" role="button" aria-label="${getTranslation('history_entry_label').replace('{lang}', h.lang || '?').replace('{time}', h.ts)}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadEntry('${h.id}'); }">
       <span class="history-lang">${h.lang || '?'}</span>
       <span class="history-thumb">${escHtml(h.preview)}…</span>
@@ -3979,62 +4049,62 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
     </div>`).join('');
     }
 
-      document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
-        if (!confirm(getTranslation('confirm_clear_history'))) return;
+    document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
+      if (!confirm(getTranslation('confirm_clear_history'))) return;
 
-        const base = apiUrlInput.value.replace(/\/$/, '');
-        const entries = await fetch(`${base}/history/?limit=100`).then(r => r.json()).catch(() => []);
-        for (const e of entries) {
-          fetch(`${base}/history/${e.id}`, { method: 'DELETE' }).catch(() => {});
-        }
-        history = [];
-        localStorage.removeItem('qyx_history');
-        renderHistory();
-        toast(getTranslation('toast_history_cleared'), 'info');
-      });
+      const base = apiUrlInput.value.replace(/\/$/, '');
+      const entries = await fetch(`${base}/history/?limit=100`).then(r => r.json()).catch(() => []);
+      for (const e of entries) {
+        fetch(`${base}/history/${e.id}`, { method: 'DELETE' }).catch(() => { });
+      }
+      history = [];
+      localStorage.removeItem('qyx_history');
+      renderHistory();
+      toast(getTranslation('toast_history_cleared'), 'info');
+    });
 
-      function loadEntry(id) {
-        const entry = history.find(h => h.id === Number (id));
-        console.log(entry);
-        if (!entry) return;
-        editor.value = entry.code;
+    function loadEntry(id) {
+      const entry = history.find(h => h.id === Number(id));
+      console.log(entry);
+      if (!entry) return;
+      editor.value = entry.code;
 
-        if(entry.lang){
-          setLanguage(entry.lang.toLowerCase());
-        }
-
-        updateEditor();
-        currentResult = entry.result;
-        renderResults(entry.result, entry.code);
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+      if (entry.lang) {
+        setLanguage(entry.lang.toLowerCase());
       }
 
-      /* ═══════════════════════════════════════════════════════════════
-         FAVORITES
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('favBtn').addEventListener('click', () => {
-        if (!currentResult || !editor.value.trim()) return;
-        const entry = {
-          id: Date.now(),
-          code: editor.value,
-          result: currentResult,
-          lang: currentResult.explanation?.language || selectedLang,
-          ts: new Date().toLocaleDateString(),
-          preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
-        };
-        favorites.unshift(entry);
-        if (favorites.length > 30) favorites = favorites.slice(0, 30);
-        localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
-        renderFavorites();
-        toast(getTranslation('toast_saved_favorites'), 'success');
-      });
+      updateEditor();
+      currentResult = entry.result;
+      renderResults(entry.result, entry.code);
+      document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+    }
 
-      function renderFavorites() {
-        if (!favorites.length) {
-          favList.innerHTML = `<div class="list-empty" data-i18n="empty_favorites">${getTranslation('empty_favorites')}</div>`;
-          return;
-        }
-        favList.innerHTML = favorites.map(f => `
+    /* ═══════════════════════════════════════════════════════════════
+       FAVORITES
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('favBtn').addEventListener('click', () => {
+      if (!currentResult || !editor.value.trim()) return;
+      const entry = {
+        id: Date.now(),
+        code: editor.value,
+        result: currentResult,
+        lang: currentResult.explanation?.language || selectedLang,
+        ts: new Date().toLocaleDateString(),
+        preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
+      };
+      favorites.unshift(entry);
+      if (favorites.length > 30) favorites = favorites.slice(0, 30);
+      localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
+      renderFavorites();
+      toast(getTranslation('toast_saved_favorites'), 'success');
+    });
+
+    function renderFavorites() {
+      if (!favorites.length) {
+        favList.innerHTML = `<div class="list-empty" data-i18n="empty_favorites">${getTranslation('empty_favorites')}</div>`;
+        return;
+      }
+      favList.innerHTML = favorites.map(f => `
     <div class="fav-item" onclick="loadFav('${f.id}')" tabindex="0" role="button" aria-label="${getTranslation('favorite_entry_label').replace('{lang}', f.lang || '?').replace('{time}', f.ts)}" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); loadFav('${f.id}'); }">
       <span class="history-lang">${f.lang || '?'}</span>
       <span class="history-thumb">${escHtml(f.preview)}…</span>
@@ -4042,69 +4112,69 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
     </div>`).join('');
     }
 
-document.getElementById('clearFavsBtn').addEventListener('click', () => {
-  if (!confirm(getTranslation('confirm_clear_favs'))) return;
-
-  favorites = [];
-  localStorage.removeItem('qyx_favorites');
-  renderFavorites();
-  toast(getTranslation('toast_favorites_cleared'), 'info');
-});
-      function loadFav(id) {
-        const entry = favorites.find(f => f.id === Number(id));
-        if (!entry) return;
-        editor.value = entry.code;
-        selectedLang = entry.lang.toLowerCase();
-        document.querySelectorAll('.lang-tab').forEach(tab =>{
-          const active = tab.dataset.lang === selectedLang;
-          tab.classList.toggle('active', active);
-          tab.setAttribute('aria-selected', active ? 'true' : 'false');
-        });
-        updateEditor();
-        currentResult = entry.result;
-        renderResults(entry.result, entry.code);
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
-      }
-      /* ═══════════════════════════════════════════════════════════════
-         DOWNLOAD
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('downloadBtn').addEventListener('click', () => {
-        if (!currentResult) return;
-        const text = buildReport(currentResult, editor.value);
-        const blob = new Blob([text], { type: 'text/plain' });
-        const a = document.createElement('a');
-        a.href = URL.createObjectURL(blob);
-        a.download = `qyverixai-report-${Date.now()}.txt`;
-        a.click();
-        URL.revokeObjectURL(a.href);
-        toast(getTranslation('toast_report_downloaded'), 'success');
+    document.getElementById('clearFavsBtn').addEventListener('click', () => {
+      if (!confirm(getTranslation('confirm_clear_favs'))) return;
+
+      favorites = [];
+      localStorage.removeItem('qyx_favorites');
+      renderFavorites();
+      toast(getTranslation('toast_favorites_cleared'), 'info');
+    });
+    function loadFav(id) {
+      const entry = favorites.find(f => f.id === Number(id));
+      if (!entry) return;
+      editor.value = entry.code;
+      selectedLang = entry.lang.toLowerCase();
+      document.querySelectorAll('.lang-tab').forEach(tab => {
+        const active = tab.dataset.lang === selectedLang;
+        tab.classList.toggle('active', active);
+        tab.setAttribute('aria-selected', active ? 'true' : 'false');
       });
+      updateEditor();
+      currentResult = entry.result;
+      renderResults(entry.result, entry.code);
+      document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+    }
+    /* ═══════════════════════════════════════════════════════════════
+       DOWNLOAD
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('downloadBtn').addEventListener('click', () => {
+      if (!currentResult) return;
+      const text = buildReport(currentResult, editor.value);
+      const blob = new Blob([text], { type: 'text/plain' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `qyverixai-report-${Date.now()}.txt`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+      toast(getTranslation('toast_report_downloaded'), 'success');
+    });
 
-      function buildReport(r, code) {
-        if (r.files) {
-          const lines = ['QyverixAI Project ZIP Analysis', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, `Files: ${r.file_count}`, `Overall Score: ${r.overall_project_score}/100 (${r.grade})`, r.summary, ''];
-          r.files.forEach(file => {
-            lines.push(`FILE: ${file.filename}`, `Language: ${file.language}`, `Score: ${file.analysis.suggestions.overall_score}/100 (${file.analysis.suggestions.grade})`, file.analysis.debugging.summary, `Summary: ${file.analysis.explanation.summary}`, '');
-            file.analysis.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
-          });
-          if (r.skipped_files?.length) lines.push('SKIPPED FILES', ...r.skipped_files, '');
-          return lines.join('\n');
-        }
-        const lines = ['═══ QyverixAI Analysis Report ═══', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, ''];
-        if (r.explanation) {
-          lines.push('── EXPLANATION ──', `Language: ${r.explanation.language}`, `Complexity: ${r.explanation.complexity}`, `Summary: ${r.explanation.summary}`, '', ...r.explanation.key_points.map(p => `• ${p}`), '');
-        }
-        if (r.debugging) {
-          lines.push('── DEBUGGING ──', r.debugging.summary, '');
-          r.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
-        }
-        if (r.suggestions) {
-          lines.push('── SUGGESTIONS ──', `Score: ${r.suggestions.overall_score}/100 (${r.suggestions.grade})`, r.suggestions.next_step, '');
-          r.suggestions.suggestions.forEach(s => lines.push(`[${s.priority.toUpperCase()}] ${s.category}: ${s.description}`, ''));
-        }
-        lines.push('── CODE ──', '', code);
+    function buildReport(r, code) {
+      if (r.files) {
+        const lines = ['QyverixAI Project ZIP Analysis', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, `Files: ${r.file_count}`, `Overall Score: ${r.overall_project_score}/100 (${r.grade})`, r.summary, ''];
+        r.files.forEach(file => {
+          lines.push(`FILE: ${file.filename}`, `Language: ${file.language}`, `Score: ${file.analysis.suggestions.overall_score}/100 (${file.analysis.suggestions.grade})`, file.analysis.debugging.summary, `Summary: ${file.analysis.explanation.summary}`, '');
+          file.analysis.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
+        });
+        if (r.skipped_files?.length) lines.push('SKIPPED FILES', ...r.skipped_files, '');
         return lines.join('\n');
       }
+      const lines = ['═══ QyverixAI Analysis Report ═══', '', `Date: ${new Date().toLocaleString()}`, `Engine: ${r.provider || 'rule-based'}`, ''];
+      if (r.explanation) {
+        lines.push('── EXPLANATION ──', `Language: ${r.explanation.language}`, `Complexity: ${r.explanation.complexity}`, `Summary: ${r.explanation.summary}`, '', ...r.explanation.key_points.map(p => `• ${p}`), '');
+      }
+      if (r.debugging) {
+        lines.push('── DEBUGGING ──', r.debugging.summary, '');
+        r.debugging.issues.forEach(i => lines.push(`[${i.severity.toUpperCase()}] ${i.type} (line ${i.line})`, `  ${i.description}`, `  Fix: ${i.suggestion}`, ''));
+      }
+      if (r.suggestions) {
+        lines.push('── SUGGESTIONS ──', `Score: ${r.suggestions.overall_score}/100 (${r.suggestions.grade})`, r.suggestions.next_step, '');
+        r.suggestions.suggestions.forEach(s => lines.push(`[${s.priority.toUpperCase()}] ${s.category}: ${s.description}`, ''));
+      }
+      lines.push('── CODE ──', '', code);
+      return lines.join('\n');
+    }
 
     /* ═══════════════════════════════════════════════════════════════
        TOAST
@@ -4145,56 +4215,56 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         const line = parseInt(card.dataset.line, 10);
         if (!line || !editor) return;
 
-          const lines = editor.value.split('\n');
+        const lines = editor.value.split('\n');
 
-            let cursorPos = 0;
+        let cursorPos = 0;
 
-            for (let i = 0; i < line - 1; i++) {
-              cursorPos += lines[i].length + 1;
-            }
+        for (let i = 0; i < line - 1; i++) {
+          cursorPos += lines[i].length + 1;
+        }
 
-            editor.focus();
+        editor.focus();
 
-            editor.setSelectionRange(cursorPos, cursorPos);
+        editor.setSelectionRange(cursorPos, cursorPos);
 
-            const lineHeight = parseFloat(getComputedStyle(editor).lineHeight) || 24;
+        const lineHeight = parseFloat(getComputedStyle(editor).lineHeight) || 24;
 
-            editor.scrollTo({
-              top: Math.max(0, (line - 3) * lineHeight),
-              behavior: 'smooth'
-            });
+        editor.scrollTo({
+          top: Math.max(0, (line - 3) * lineHeight),
+          behavior: 'smooth'
+        });
 
-            editor.classList.remove('editor-highlight');
+        editor.classList.remove('editor-highlight');
 
-            void editor.offsetWidth;
+        void editor.offsetWidth;
 
-            editor.classList.add('editor-highlight');
-          setTimeout(() => { editor.classList.remove('editor-highlight'); }, 900); };
+        editor.classList.add('editor-highlight');
+        setTimeout(() => { editor.classList.remove('editor-highlight'); }, 900);
+      };
 
-          // Click delegation 
-          debugResult.addEventListener('click', (e) => { 
-            const card = e.target.closest('.issue-card'); 
-            if (!card) return; 
-            jumpToIssueLine(card); 
-          });
+      // Click delegation 
+      debugResult.addEventListener('click', (e) => {
+        const card = e.target.closest('.issue-card');
+        if (!card) return;
+        jumpToIssueLine(card);
+      });
 
-          // Keyboard delegation
-          debugResult.addEventListener('keydown', (e) => 
-          { 
-            if (e.key !== 'Enter' && e.key !== ' ') 
-            return; 
-          const card = e.target.closest('.issue-card'); 
-          if (!card) return; 
-          e.preventDefault(); 
-          jumpToIssueLine(card); 
-        }); 
-      }
+      // Keyboard delegation
+      debugResult.addEventListener('keydown', (e) => {
+        if (e.key !== 'Enter' && e.key !== ' ')
+          return;
+        const card = e.target.closest('.issue-card');
+        if (!card) return;
+        e.preventDefault();
+        jumpToIssueLine(card);
+      });
+    }
 
-      /* ═══════════════════════════════════════════════════════════════
-         SAMPLE CODE LOADER
-      ═══════════════════════════════════════════════════════════════ */
-      const SAMPLES = {
-        python: `// Python Sample
+    /* ═══════════════════════════════════════════════════════════════
+       SAMPLE CODE LOADER
+    ═══════════════════════════════════════════════════════════════ */
+    const SAMPLES = {
+      python: `// Python Sample
   import os
 
 # [!] Hardcoded secret - security risk
@@ -4222,7 +4292,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
 x = eval("1 + 2")  # [!] Unsafe eval
 
 calculate(10, 0)`,
-        javascript: `// JavaScript Sample
+      javascript: `// JavaScript Sample
   var counter = 0;
 
 function loadUser(id) {
@@ -4239,7 +4309,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
 }
 
 loadUser(42);`,
-        typescript: `// TypeScript Sample
+      typescript: `// TypeScript Sample
 interface User {
   id: number;
   name: string;
@@ -4254,7 +4324,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
 
 const newUser: User = { id: 1, name: "Alice" };
 sendWelcomeEmail(newUser);`,
-        java: `// Java Sample
+      java: `// Java Sample
 public class Main {
     public static void main(String[] args) {
         String name1 = new String("Vaibhav");
@@ -4272,7 +4342,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         System.out.println(uninitializedString.length());
     }
 }`,
-        cpp: `// C++ Sample
+      cpp: `// C++ Sample
 #include <iostream>
 
 // Anti-pattern 1: using namespace std in global scope
@@ -4294,78 +4364,78 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
     processData();
     return 0;
 }`
-      };
+    };
 
-      function loadSample() {
-        const sample = SAMPLES[selectedLang] || SAMPLES.python;
-        editor.value = sample;
-        updateEditor();
-        document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
-        toast(getTranslation('toast_sample_loaded'), 'success');
-      }
+    function loadSample() {
+      const sample = SAMPLES[selectedLang] || SAMPLES.python;
+      editor.value = sample;
+      updateEditor();
+      document.getElementById('workspace').scrollIntoView({ behavior: 'smooth' });
+      toast(getTranslation('toast_sample_loaded'), 'success');
+    }
 
-      /* ═══════════════════════════════════════════════════════════════
-         INIT
-      ═══════════════════════════════════════════════════════════════ */
-      // Wire up language selector
-      const langSelect = document.getElementById('langSelect');
-      if (langSelect) {
-        langSelect.addEventListener('change', e => {
-          setAppLanguage(e.target.value);
-        });
-        // Also listen for input for immediate responsiveness in some browsers
-        langSelect.addEventListener('input', e => {
-          setAppLanguage(e.target.value);
-        });
-      }
+    /* ═══════════════════════════════════════════════════════════════
+       INIT
+    ═══════════════════════════════════════════════════════════════ */
+    // Wire up language selector
+    const langSelect = document.getElementById('langSelect');
+    if (langSelect) {
+      langSelect.addEventListener('change', e => {
+        setAppLanguage(e.target.value);
+      });
+      // Also listen for input for immediate responsiveness in some browsers
+      langSelect.addEventListener('input', e => {
+        setAppLanguage(e.target.value);
+      });
+    }
 
-      // Initialize language
-      setAppLanguage(appLang);
-      syncApiStatusText();
+    // Initialize language
+    setAppLanguage(appLang);
+    syncApiStatusText();
 
-      renderHistory();
-      renderFavorites();
+    renderHistory();
+    renderFavorites();
 
-      // Save API URL
-      if (apiUrlInput) {
-        apiUrlInput.addEventListener('change', () => {
-          localStorage.setItem('qyx_apiUrl', apiUrlInput.value);
-        });
-        const savedUrl = localStorage.getItem('qyx_apiUrl');
-        if (savedUrl) apiUrlInput.value = savedUrl;
-      }
+    // Save API URL
+    if (apiUrlInput) {
+      apiUrlInput.addEventListener('change', () => {
+        localStorage.setItem('qyx_apiUrl', apiUrlInput.value);
+      });
+      const savedUrl = localStorage.getItem('qyx_apiUrl');
+      if (savedUrl) apiUrlInput.value = savedUrl;
+    }
 
-      /* ═══════════════════════════════════════════════════════════════
-         DIGEST SUBSCRIBE
-      ═══════════════════════════════════════════════════════════════ */
-      document.getElementById('digestForm').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const email = document.getElementById('digestEmail').value.trim();
-        const btn = document.getElementById('digestBtn');
-        btn.disabled = true;
-        btn.textContent = 'Subscribing…';
-        const base = getApiBase();
-        try {
-          const r = await fetch(`${base}/subscribe/`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email }),
-          });
-          const data = await r.json();
-          if (r.ok) {
-            toast(data.message, 'success');
-            document.getElementById('digestEmail').value = '';
-          } else {
-            toast(data.detail || 'Subscription failed', 'error');
-          }
-        } catch {
-          toast('Could not reach the server.', 'error');
-        } finally {
-          btn.disabled = false;
-          btn.textContent = 'Subscribe';
+    /* ═══════════════════════════════════════════════════════════════
+       DIGEST SUBSCRIBE
+    ═══════════════════════════════════════════════════════════════ */
+    document.getElementById('digestForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const email = document.getElementById('digestEmail').value.trim();
+      const btn = document.getElementById('digestBtn');
+      btn.disabled = true;
+      btn.textContent = 'Subscribing…';
+      const base = getApiBase();
+      try {
+        const r = await fetch(`${base}/subscribe/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email }),
+        });
+        const data = await r.json();
+        if (r.ok) {
+          toast(data.message, 'success');
+          document.getElementById('digestEmail').value = '';
+        } else {
+          toast(data.detail || 'Subscription failed', 'error');
         }
-      });
+      } catch {
+        toast('Could not reach the server.', 'error');
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Subscribe';
+      }
+    });
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file

From b1ada42b33d241bdacf4fb4b608ef9671f2ddaec Mon Sep 17 00:00:00 2001
From: Medora <medoragomes1402@gmail.com>
Date: Thu, 28 May 2026 21:47:36 +0530
Subject: [PATCH 08/10] fix: remove duplicate HTML IDs after merge resolution

---
 frontend/index.html | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 5335c76f..13e0abf0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2315,7 +2315,7 @@ <h1 data-i18n="hero_title">Debug. Understand.<br><em>Ship faster.</em></h1>
               </svg>
             </button>
             <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip" style="display:none"
-              tabindex="-1">
+              tabindex="-1"/>
             <button class="icon-btn" id="clearBtn" title="Clear" data-i18n-title="btn_clear" data-i18n-aria-label="btn_clear" aria-label="Clear code editor">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
@@ -2386,17 +2386,6 @@ <h1 data-i18n="hero_title">Debug. Understand.<br><em>Ship faster.</em></h1>
           </button>
         </div>
 
-        <!-- API Config (input + status) -->
-        <div class="api-config-row" style="display:flex;align-items:center;gap:8px;margin-top:8px">
-          <div style="display:flex;align-items:center;gap:8px;flex:1">
-            <div id="apiDot" class="api-dot" aria-hidden="true" style="width:10px;height:10px;border-radius:50%;background:var(--text3)"></div>
-            <input id="apiUrl" placeholder="https://qyverixai.onrender.com" style="flex:1;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text)">
-          </div>
-          <div style="display:flex;align-items:center;gap:8px">
-            <div id="apiStatusText" data-status="disconnected" style="font-size:0.85rem;color:var(--text3)">Disconnected</div>
-            <button id="pingBtn" class="icon-btn" title="Ping API" style="padding:6px 10px">Ping</button>
-          </div>
-        </div>
 
         <!-- Result action buttons (hidden until results) -->
         <div id="resultActions" class="result-actions" style="display:none">
@@ -2478,11 +2467,6 @@ <h2 data-i18n="empty_suggest_title">No suggestions yet</h2>
           </div>
         </div>
 
-        <!-- Result action buttons (hidden until results) -->
-        <div id="resultActions" class="result-actions" style="display:none">
-          <button class="icon-btn" id="favBtn" title="Save to favorites">★</button>
-          <button class="icon-btn" id="downloadBtn" title="Download results">⬇</button>
-        </div>
 
         <!-- Analysis time footer -->
         <div id="engineBar"
@@ -2538,7 +2522,7 @@ <h2 data-i18n="empty_suggest_title">No suggestions yet</h2>
           <p style="margin:0 0 6px;font-size:0.8rem;font-weight:600;color:var(--accent);">Weekly Digest</p>
           <form id="digestForm" style="display:flex;gap:6px;">
             <input type="email" id="digestEmail" placeholder="your@email.com" required
-                   style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);">
+                   style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);"/>
             <button type="submit" id="digestBtn" style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
           </form>
           <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis stats.</p>

From a7a4487f1399dd36e7a8a6d432e30438dc67e290 Mon Sep 17 00:00:00 2001
From: Medora <medoragomes1402@gmail.com>
Date: Thu, 28 May 2026 22:03:08 +0530
Subject: [PATCH 09/10] fix: removed duplicate HTML IDs after merge resolution

---
 frontend/index.html | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 13e0abf0..c5589bfd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3806,18 +3806,6 @@ <h3>${getTranslation('debug_clean_title')}</h3>
       attachIssueNavigation();
     }
 
-    function attachIssueNavigation() {
-  const debugResult = document.getElementById('debugResult');
-
-  if (!debugResult) return;
-
-  debugResult.addEventListener('click', handleIssueJump);
-  debugResult.addEventListener('keydown', e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handleIssueJump(e);
-    }
-  });
-}
 
 function handleIssueJump(event) {
   const card = event.target.closest('.issue-card');

From b22041f9004df4b4ede81b8dc8294608a006b1d9 Mon Sep 17 00:00:00 2001
From: Medora <medoragomes1402@gmail.com>
Date: Sun, 31 May 2026 01:06:25 +0530
Subject: [PATCH 10/10] fix(ci): remove duplicate API IDs and invalid upload
 markup

---
 frontend/index.html | 33 +++++----------------------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index f3804ebe..4ec53689 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2374,18 +2374,15 @@ <h2 data-i18n="pill_upload_title">File Upload</h2>
               <span data-i18n="editor_title">Code Editor</span>
             </div>
           <div class="panel-actions">
-            <label class="icon-btn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload" style="cursor:pointer" tabindex="0" role="button"
-              aria-label="Upload code file"
-              onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault(); document.getElementById('fileInput').click();}">
+            <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip" style="display:none" tabindex="-1">
+            <button type="button" class="icon-btn" id="uploadBtn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload" aria-label="Upload code file" onclick="document.getElementById('fileInput').click();">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="17,8 12,3 7,8" />
                 <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
-              <input type="file" id="fileInput" accept=".py,.js,.ts,.java,.cpp,.cc,.cxx,.c,.h,.hpp,.kt,.kts,.txt,.zip" style="display:none"
-                tabindex="-1" />
-            </label>
+            </button>
             <button class="icon-btn" id="clearBtn" title="Clear" data-i18n-title="btn_clear" data-i18n-aria-label="btn_clear" aria-label="Clear code editor">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 aria-hidden="true">
@@ -2436,12 +2433,12 @@ <h2 data-i18n="pill_upload_title">File Upload</h2>
         <div class="api-config-row">
           <div class="api-status" aria-live="polite">
             <div class="api-dot" id="apiDot" aria-hidden="true"></div>
-            <span id="apiStatusText">Disconnected</span>
+            <span id="apiStatusText" data-status="disconnected">Disconnected</span>
           </div>
 
           <div class="api-config-inner">
             <input type="text" id="apiUrl" placeholder="https://qyverixai.onrender.com"
-              value="https://qyverixai.onrender.com" aria-label="Backend API URL" />
+              value="https://qyverixai.onrender.com" aria-label="Backend API URL">
 
             <button class="btn-clear" id="pingBtn" aria-label="Ping API">
               Ping
@@ -2456,18 +2453,6 @@ <h2 data-i18n="pill_upload_title">File Upload</h2>
           </button>
         </div>
 
-        <!-- API Config (input + status) -->
-        <div class="api-config-row" style="display:flex;align-items:center;gap:8px;margin-top:8px">
-          <div style="display:flex;align-items:center;gap:8px;flex:1">
-            <div id="apiDot" class="api-dot" aria-hidden="true" style="width:10px;height:10px;border-radius:50%;background:var(--text3)"></div>
-            <input id="apiUrl" placeholder="https://qyverixai.onrender.com" style="flex:1;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text)">
-          </div>
-          <div style="display:flex;align-items:center;gap:8px">
-            <div id="apiStatusText" data-status="disconnected" style="font-size:0.85rem;color:var(--text3)">Disconnected</div>
-            <button id="pingBtn" class="icon-btn" title="Ping API" style="padding:6px 10px">Ping</button>
-          </div>
-        </div>
-
         <!-- Result action buttons (hidden until results) -->
         <div id="resultActions" class="result-actions" style="display:none">
           <button class="icon-btn" id="favBtn" title="Save to favorites">★</button>
@@ -2606,14 +2591,6 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
                    style="flex:1;min-width:180px;padding:7px 10px;font-size:0.8rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);">
             <button type="submit" id="digestBtn" style="padding:7px 14px;font-size:0.8rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
           </form>
-          <!-- Hidden API status inputs used by the JS. Present to avoid missing DOM refs. -->
-          <div id="apiConfig" class="api-config-row" style="display:none;">
-            <div class="api-status" style="display:flex;align-items:center;gap:8px">
-              <span id="apiDot" class="api-dot" aria-hidden="true"></span>
-              <span id="apiStatusText" data-status="disconnected" style="color:var(--text3);font-size:0.9rem"></span>
-            </div>
-            <input id="apiUrl" placeholder="https://qyverixai.onrender.com" style="display:none;">
-          </div>
           <p style="margin:6px 0 0;font-size:0.7rem;color:var(--text3);">Get a Sunday email with your weekly analysis stats.</p>
         </div>
       </div>