diff --git a/frontend/index.html b/frontend/index.html
index 7fb8f97..4ec5368 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,15 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
+﻿<!DOCTYPE html>
+<html lang="en" data-theme="dark">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>QyverixAI — AI Developer Assistant</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="icon" type="image/svg+xml" href="../assets/icon.svg">
   <link
     href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap"
-    rel="stylesheet" />
+    rel="stylesheet">
   <script>
     (function() {
       const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -18,9 +18,7 @@
     })();
   </script>
   <style>
-    /* ═══════════════════════════════════════════════════════════════
-   DESIGN TOKENS
-═══════════════════════════════════════════════════════════════ */
+    /* DESIGN TOKENS */
     :root {
       --bg: #0a0c10;
       --bg2: #0f1117;
@@ -45,6 +43,7 @@
       --font-mono: 'JetBrains Mono', monospace;
       --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
     }
+    
 
     [data-theme="light"] {
       --bg: #f4f6fb;
@@ -59,9 +58,7 @@
       --shadow2: 0 2px 8px rgba(0, 0, 0, 0.08);
     }
 
-    /* ═══════════════════════════════════════════════════════════════
-   RESET & BASE
-═══════════════════════════════════════════════════════════════ */
+    /* RESET & BASE */
     *,
     *::before,
     *::after {
@@ -327,7 +324,8 @@
 ═══════════════════════════════════════════════════════════════ */
     .hero {
       text-align: center;
-      padding: 64px 0 48px;
+      padding: 48px 0 32px;
+      padding: 52px 0 36px;
       animation: heroEnter 0.7s ease both;
     }
 
@@ -394,11 +392,16 @@
 
     .hero h1 {
       font-family: var(--font-disp);
-      font-size: clamp(2.8rem, 6vw, 5rem);
+      font-size: clamp(2rem, 4.8vw, 3.4rem);
       font-weight: 800;
       letter-spacing: -0.04em;
-      line-height: 1.16;
-      margin-bottom: 20px;
+      line-height: 1.12;
+      margin-bottom: 12px;
+      font-size: clamp(2.6rem, 5.4vw, 4.4rem);
+      font-weight: 800;
+      letter-spacing: -0.05em;
+      line-height: 1.08;
+      margin-bottom: 16px;
     }
 
     .hero h1 em {
@@ -411,10 +414,10 @@
     }
 
     .hero-sub {
-      font-size: 1.1rem;
+      font-size: 1.05rem;
       color: var(--text2);
-      max-width: 520px;
-      margin: 0 auto 36px;
+      max-width: 580px;
+      margin: 0 auto 30px;
       line-height: 1.7;
     }
 
@@ -466,14 +469,25 @@
    FEATURE PILLS ROW
 ═══════════════════════════════════════════════════════════════ */
     .features-row {
-      display: flex;
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
       gap: 12px;
-      justify-content: center;
-      flex-wrap: wrap;
       padding: 16px 0 48px;
       animation: fadeUp 0.6s 0.3s ease both;
     }
 
+    @media(max-width: 1200px) {
+      .features-row {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+    }
+
+    @media(max-width: 720px) {
+      .features-row {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
     @keyframes fadeUp {
       from {
         opacity: 0;
@@ -490,12 +504,14 @@
       display: flex;
       align-items: center;
       gap: 10px;
-      padding: 12px 20px;
+      padding: 14px 16px;
       border-radius: var(--r);
       background: var(--bg2);
       border: 1px solid var(--border);
       transition: all var(--transition);
       cursor: default;
+      color: var(--text2);
+      min-height: 72px;
     }
 
     .feat-pill:hover {
@@ -514,7 +530,7 @@
       font-size: 15px;
     }
 
-    .feat-pill-info h4 {
+    .feat-pill-info h2 {
       font-size: 0.82rem;
       font-weight: 600;
       margin-bottom: 1px
@@ -530,9 +546,13 @@
 ═══════════════════════════════════════════════════════════════ */
     .workspace {
       display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
+      /* Constrain right-hand results column to a comfortable width while
+         letting the editor take remaining space. Prevents large vertical
+         stretching when the right panel is empty. */
+      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
+      gap: 18px;
       margin-bottom: 16px;
+      align-items: start;
       animation: fadeUp 0.6s 0.4s ease both;
     }
 
@@ -548,6 +568,7 @@
       border-radius: var(--r);
       overflow: hidden;
       transition: border-color var(--transition);
+      min-width: 0;
     }
 
     .panel:focus-within {
@@ -575,14 +596,6 @@
       gap: 8px;
     }
 
-    .panel-title span {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--green);
-      animation: blink 2s infinite;
-    }
-
     .panel-actions {
       display: flex;
       gap: 6px
@@ -743,6 +756,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
@@ -963,12 +1025,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;
@@ -981,6 +1055,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)
     }
@@ -1084,7 +1176,7 @@
       border: 1px solid var(--border);
       margin-bottom: 16px;
       font-size: 0.88rem;
-      color: var(--text2);
+      color: var(--text);
       line-height: 1.6;
     }
 
@@ -1105,6 +1197,7 @@
       display: flex;
       align-items: center;
       gap: 6px;
+      color: var(--text2);
     }
 
     .meta-chip .dot {
@@ -1186,6 +1279,7 @@
       margin-bottom: 6px;
       border-radius: var(--r2);
       background: var(--bg3);
+      color: var(--text2);
       font-size: 0.83rem;
       line-height: 1.5;
       display: flex;
@@ -1492,8 +1586,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;
@@ -1505,6 +1604,7 @@
       .diff-view {
         grid-template-columns: 1fr;
       }
+
       .diff-col:first-child {
         border-right: none;
         border-bottom: 1px solid var(--border);
@@ -1662,8 +1762,8 @@
 ═══════════════════════════════════════════════════════════════ */
     .bottom-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 16px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 18px;
       animation: fadeUp 0.6s 0.5s ease both;
     }
 
@@ -1937,61 +2037,186 @@
     /* ═══════════════════════════════════════════════════════════════
    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>
@@ -2001,14 +2226,15 @@
 
     <!-- ── NAV ──────────────────────────────────────────────────── -->
     <nav>
-      <a href="#" class="nav-logo">
+      <a href="#top" 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">
-        <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>
@@ -2028,8 +2254,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" />
@@ -2052,7 +2278,7 @@
         <div class="badge-dot"></div>
         <span data-i18n="hero_badge">Open Source · AI-Powered · Free</span>
       </div>
-      <h1 data-i18n="hero_title">Debug. Understand.<br /><em>Ship faster.</em></h1>
+      <h1 data-i18n="hero_title">Debug. Understand.<br><em>Ship faster.</em></h1>
       <p class="hero-sub" data-i18n="hero_subtitle">
         Paste your code and get instant bug detection, plain-English explanations, and actionable improvement
         suggestions — no account needed.
@@ -2091,7 +2317,7 @@ <h1 data-i18n="hero_title">Debug. Understand.<br /><em>Ship faster.</em></h1>
             <line x1="21" y1="21" x2="16.65" y2="16.65" />
           </svg></div>
         <div class="feat-pill-info">
-          <h4 data-i18n="pill_patterns_title">40+ Bug Patterns</h4>
+          <h2 data-i18n="pill_patterns_title">40+ Bug Patterns</h2>
           <p data-i18n="pill_patterns_desc">Python, JS, TS, Java, C++</p>
         </div>
       </div>
@@ -2102,7 +2328,7 @@ <h4 data-i18n="pill_patterns_title">40+ Bug Patterns</h4>
             <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 data-i18n="mode_explain">Code Explanation</h4>
+          <h2 data-i18n="mode_explain">Code Explanation</h2>
           <p data-i18n="pill_explain_desc">Plain English breakdowns</p>
         </div>
       </div>
@@ -2112,7 +2338,7 @@ <h4 data-i18n="mode_explain">Code Explanation</h4>
             <polygon points="13,2 3,14 12,14 11,22 21,10 12,10" />
           </svg></div>
         <div class="feat-pill-info">
-          <h4 data-i18n="mode_improve">Smart Suggestions</h4>
+          <h2 data-i18n="mode_improve">Smart Suggestions</h2>
           <p data-i18n="pill_improve_desc">Quality score + grade</p>
         </div>
       </div>
@@ -2122,7 +2348,7 @@ <h4 data-i18n="mode_improve">Smart Suggestions</h4>
             <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 data-i18n="pill_theme_title">Dark / Light Mode</h4>
+          <h2 data-i18n="pill_theme_title">Dark / Light Mode</h2>
           <p data-i18n="pill_theme_desc">Persisted preference</p>
         </div>
       </div>
@@ -2132,7 +2358,7 @@ <h4 data-i18n="pill_theme_title">Dark / Light Mode</h4>
             <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 data-i18n="pill_upload_title">File Upload</h4>
+          <h2 data-i18n="pill_upload_title">File Upload</h2>
           <p data-i18n="pill_upload_desc">.py .js .ts .java .cpp .kt .zip</p>
         </div>
       </div>
@@ -2144,10 +2370,12 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
       <!-- Editor Panel -->
       <div class="panel" style="grid-column:1">
         <div class="panel-header">
-          <div class="panel-title"></div>
+            <div class="panel-title">
+              <span data-i18n="editor_title">Code Editor</span>
+            </div>
           <div class="panel-actions">
-            <button type="button" class="icon-btn" title="Upload file" data-i18n-title="btn_upload" data-i18n-aria-label="btn_upload" style="cursor:pointer"
-              aria-label="Upload code file" onclick="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" />
@@ -2155,8 +2383,6 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
                 <line x1="12" y1="3" x2="12" y2="15" />
               </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" />
             <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">
@@ -2166,7 +2392,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" />
@@ -2177,17 +2404,18 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
         </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" 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 class="lang-tabs" role="group" aria-label="Select Programming Language">
+          <button class="lang-tab active" data-lang="python" data-i18n="lang_tab_python">Python</button>
+          <button class="lang-tab" data-lang="javascript" data-i18n="lang_tab_javascript">JavaScript</button>
+          <button class="lang-tab" data-lang="typescript" data-i18n="lang_tab_typescript">TypeScript</button>
+          <button class="lang-tab" data-lang="java" data-i18n="lang_tab_java">Java</button>
+          <button class="lang-tab" data-lang="cpp" 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">
@@ -2201,6 +2429,22 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
             </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" 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">
+
+            <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">
@@ -2225,17 +2469,17 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
         </div>
 
         <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">
+          <button class="result-tab active" id="tab-explain" data-rtab="explain" role="tab" aria-selected="true" aria-controls="pane-explain">
             <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">
+          <button class="result-tab" id="tab-debug" data-rtab="debug" role="tab" aria-selected="false" aria-controls="pane-debug">
             <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">
+          <button class="result-tab" id="tab-suggest" data-rtab="suggest" role="tab" aria-selected="false" aria-controls="pane-suggest">
             <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>
@@ -2243,7 +2487,7 @@ <h4 data-i18n="pill_upload_title">File Upload</h4>
         </div>
         <div class="result-content">
           <!-- Explain Pane -->
-          <div class="result-pane active" id="pane-explain" role="tabpanel" tabindex="0" aria-label="Explanation Panel">
+          <div class="result-pane active" id="pane-explain" role="tabpanel" tabindex="0" aria-label="Explanation Panel" aria-labelledby="tab-explain">
             <div class="empty-state" id="emptyExplain">
               <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="1.5">
@@ -2256,7 +2500,7 @@ <h3 data-i18n="empty_explain_title">No analysis yet</h3>
             <div id="explainResult" style="display:none"></div>
           </div>
           <!-- Debug Pane -->
-          <div class="result-pane" id="pane-debug" role="tabpanel" tabindex="0" aria-label="Debugging Panel">
+          <div class="result-pane" id="pane-debug" role="tabpanel" tabindex="0" aria-label="Debugging Panel" aria-labelledby="tab-debug">
             <div class="empty-state" id="emptyDebug">
               <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="1.5">
@@ -2276,7 +2520,7 @@ <h3 data-i18n="empty_debug_title">No bugs scanned</h3>
             <div id="debugResult" style="display:none"></div>
           </div>
           <!-- Suggest Pane -->
-          <div class="result-pane" id="pane-suggest" role="tabpanel" tabindex="0" aria-label="Suggestions Panel">
+          <div class="result-pane" id="pane-suggest" role="tabpanel" tabindex="0" aria-label="Suggestions Panel" aria-labelledby="tab-suggest">
             <div class="empty-state" id="emptySuggest">
               <div class="empty-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" stroke-width="1.5">
@@ -2289,6 +2533,7 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           </div>
         </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">
@@ -2314,7 +2559,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>
@@ -2345,18 +2591,17 @@ <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>
-          <p style="margin:6px 0 0;font-size:0.7rem;color:var(--muted);">Get a Sunday email with your weekly analysis stats.</p>
+          <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>
     </footer>
 
-    <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
-    <div id="toastContainer"></div>
+  <!-- ── TOAST CONTAINER ─────────────────────────────────────────── -->
+  <div id="toastContainer"></div>
 
+    <script src="security-utils.js"></script>
     <script>
-      /* ═══════════════════════════════════════════════════════════════
-         STATE & TRANSLATIONS
-      ═══════════════════════════════════════════════════════════════ */
+      /* STATE & TRANSLATIONS */
       const TRANSLATIONS = {
         en: {
           lang_select_label: "Select language",
@@ -2372,7 +2617,7 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           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_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",
@@ -2469,7 +2714,7 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           nav_github: "கிட்ஹப் (GitHub)",
           nav_api_docs: "ஏபிஐ ஆவணங்கள் (API Docs)",
           hero_badge: "திறந்த மூல · ஏஐ-ஆற்றல் · இலவசம்",
-          hero_title: "பிழையறி. புரிந்துகொள்.<br /><em>வேகமாக அனுப்பு.</em>",
+          hero_title: "பிழையறி. புரிந்துகொள்.<br><em>வேகமாக அனுப்பு.</em>",
           hero_subtitle: "உங்கள் குறியீட்டை ஒட்டி, உடனடி பிழை கண்டறிதல், எளிய ஆங்கில விளக்கங்கள் மற்றும் பயனுள்ள மேம்பாட்டு பரிந்துரைகளைப் பெறுங்கள் — கணக்கு தேவையில்லை.",
           btn_start_analyzing: "பகுப்பாய்வைத் தொடங்கு",
           btn_try_sample: "மாதிரிக் குறியீட்டை முயல்க",
@@ -2566,10 +2811,10 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           nav_github: "गिटहब (GitHub)",
           nav_api_docs: "एपीआई दस्तावेज़ (API Docs)",
           hero_badge: "ओपन सोर्स · एआई-संचालित · मुफ्त",
-          hero_title: "डीबग करें। समझें।<br /><em>तेज़ी से शिप करें।</em>",
+          hero_title: "डीबग करें। समझें।<br><em>तेज़ी से शिप करें।</em>",
           hero_subtitle: "अपना कोड पेस्ट करें और तुरंत बग डिटेक्शन, सरल हिंदी में स्पष्टीकरण और व्यावहारिक सुधार सुझाव प्राप्त करें — किसी खाते की आवश्यकता नहीं है।",
           btn_start_analyzing: "विश्लेषण शुरू करें",
-          btn_try_sample: "सैंपल कोड आज़माएं",
+          btn_try_sample: "सैंपल कोड आज़माएं",
           btn_star_github: "गिटहब पर स्टार करें",
           pill_patterns_title: "40+ बग पैटर्न",
           pill_patterns_desc: "Python, JS, TS, Java, C++",
@@ -2582,7 +2827,7 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           pill_upload_title: "फ़ाइल अपलोड",
           pill_upload_desc: ".py .js .ts .java .cpp .kt .zip",
           editor_title: "कोड एडिटर",
-          editor_placeholder: "# अपना कोड यहाँ पेस्ट करें या ऊपर 'सैंपल कोड आज़माएं' पर क्लिक करें…",
+          editor_placeholder: "# अपना कोड यहाँ पेस्ट करें या ऊपर 'सैंपल कोड आज़माएं' पर क्लिक करें…",
           char_count_initial: "शुरू करने के लिए कोड पेस्ट करें या टाइप करें",
           char_count_format: "{chars} वर्ण · {lines} पंक्तियाँ · {nonBlank} गैर-रिक्त",
           ctrl_enter_hint: "विश्लेषण करने के लिए Ctrl+Enter दबाएं",
@@ -2663,7 +2908,7 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           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_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",
@@ -2749,15 +2994,27 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       };
 
       const MAX_HISTORY = 50;
-      let history = JSON.parse(localStorage.getItem('qyx_history') || '[]');
-      let favorites = JSON.parse(localStorage.getItem('qyx_favorites') || '[]');
+      const {
+        escHtml,
+        sanitizeClientCode,
+        safePriorityClass,
+        safeSeverityClass,
+        safeCssToken,
+        loadStoredHistory,
+        saveStoredHistory,
+        createStoredEntry,
+        renderMarkdown,
+        buildStoredListItemHtml,
+        bindStoredListNavigation,
+      } = window.QyverixSecurity;
+
+      let history = loadStoredHistory('qyx_history');
+      let favorites = loadStoredHistory('qyx_favorites');
       let currentResult = null;
       let selectedLang = 'python';
       let selectedMode = 'analyze';
       let selectedZipFile = null;
       let appLang = localStorage.getItem('qyx_lang') || 'en';
-      const LOCAL_API_BASE = 'http://localhost:8000';
-      const REMOTE_API_BASE = 'https://qyverixai.onrender.com';
 
       /* ═══════════════════════════════════════════════════════════════
          DOM REFS
@@ -2776,6 +3033,9 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       const engineInfo = document.getElementById('engineInfo');
       const timeInfo = document.getElementById('timeInfo');
 
+      bindStoredListNavigation(historyList, loadEntry);
+      bindStoredListNavigation(favList, loadFav);
+
       /* ═══════════════════════════════════════════════════════════════
          THEME
       ═══════════════════════════════════════════════════════════════ */
@@ -2795,70 +3055,69 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
 
       const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       const initialTheme = localStorage.getItem('qyx_theme') || (systemDark ? 'dark' : 'light');
-
       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);
-      });
-
-      /* ═══════════════════════════════════════════════════════════════
-         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);
+    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);
+    });
 
-        // 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;
-        });
+    /* ═══════════════════════════════════════════════════════════════
+       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);
+
+      // 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 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 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 titles
+      document.querySelectorAll('[data-i18n-title]').forEach(el => {
+        const key = el.getAttribute('data-i18n-title');
+        const trans = getTranslation(key);
+        if (trans) el.title = 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);
-        });
+      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);
+      });
 
-        syncApiStatusText();
+      syncApiStatusText();
 
-        updateEditor();
-        renderHistory();
-        renderFavorites();
-        if (currentResult) {
-          renderResults(currentResult, editor.value);
-        }
+      updateEditor();
+      renderHistory();
+      renderFavorites();
+      if (currentResult) {
+        renderResults(currentResult, editor.value);
       }
+    }
 
       /* ═══════════════════════════════════════════════════════════════
          EDITOR
@@ -2880,194 +3139,258 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           : '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 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() {
-        const configuredBase = ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || '').trim();
-        if (configuredBase) return configuredBase.replace(/\/$/, '');
-        return window.location.protocol === 'file:' ? REMOTE_API_BASE : LOCAL_API_BASE;
-      }
+      const DEFAULT_API_BASE = 'https://qyverixai.onrender.com';
+      const LOCAL_API_BASE = 'http://localhost:8000';
 
-      function getApiFallbackBase(base) {
-        const normalized = String(base || '').replace(/\/$/, '');
-        return /localhost:8000|127\.0\.0\.1:8000/i.test(normalized) ? REMOTE_API_BASE : null;
+      function normalizeApiBase(url) {
+        return String(url || '').replace(/\/$/, '');
       }
 
       function persistApiBase(base) {
-        const normalized = String(base || '').replace(/\/$/, '');
+        const normalized = normalizeApiBase(base);
         if (!normalized) return;
         localStorage.setItem('qyx_apiUrl', normalized);
         if (apiUrlInput) apiUrlInput.value = normalized;
       }
 
-      async function fetchWithApiFallback(base, path, options) {
-        const normalizedBase = String(base || '').replace(/\/$/, '');
-        try {
-          const response = await fetch(`${normalizedBase}${path}`, options);
-          return { response, baseUsed: normalizedBase, fallbackUsed: false };
-        } catch (err) {
-          const fallbackBase = getApiFallbackBase(normalizedBase);
-          if (!fallbackBase) throw err;
-          const response = await fetch(`${fallbackBase}${path}`, options);
-          return { response, baseUsed: fallbackBase, fallbackUsed: true };
-        }
+      function getConfiguredApiBase() {
+        return normalizeApiBase(
+          (apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || DEFAULT_API_BASE
+        );
       }
 
-      function normalizeEditorOnLoad() {
-        if (looksLikeRestoredPageSource(editor.value || '')) {
-          editor.value = '';
-          updateEditor();
-        }
+      function getApiBase() {
+        const configuredBase = ((apiUrlInput && apiUrlInput.value) || localStorage.getItem('qyx_apiUrl') || '').trim();
+        if (configuredBase) return normalizeApiBase(configuredBase);
+        return window.location.protocol === 'file:' ? DEFAULT_API_BASE : LOCAL_API_BASE;
       }
 
-      normalizeEditorOnLoad();
-      window.addEventListener('pageshow', normalizeEditorOnLoad);
-      setTimeout(normalizeEditorOnLoad, 0);
+      function getApiFallbackBase(base) {
+        const normalized = normalizeApiBase(base);
+        return /localhost:8000|127\.0\.0\.1:8000/i.test(normalized) ? DEFAULT_API_BASE : null;
+      }
 
-      editor.addEventListener('input', () => {
-        selectedZipFile = null;
-        updateEditor();
-      });
-      editor.addEventListener('scroll', () => {
-        lineNumbers.scrollTop = editor.scrollTop;
-      });
+      function getApiBaseCandidates() {
+        const lastWorking = sessionStorage.getItem('qyx_lastWorkingApiBase') || '';
+        const candidates = [
+          lastWorking,
+          LOCAL_API_BASE,
+          'http://127.0.0.1:8000',
+          getConfiguredApiBase(),
+          DEFAULT_API_BASE,
+        ];
+        return [...new Set(candidates.map(normalizeApiBase).filter(Boolean))];
+      }
 
-      // Tab key support
-      editor.addEventListener('keydown', e => {
+      async function fetchWithApiFallback(path, init = {}, { primaryTimeoutMs = 10000, fallbackTimeoutMs = 60000 } = {}) {
+        let lastError = null;
 
-        // TAB SUPPORT
-        if (e.key === 'Tab' && !e.shiftKey) {
+        for (let i = 0; i < getApiBaseCandidates().length; i += 1) {
+          const base = getApiBaseCandidates()[i];
+          const timeoutMs = i === 0 ? primaryTimeoutMs : fallbackTimeoutMs;
 
-          e.preventDefault();
+          try {
+            const response = await fetch(`${base}${path}`, {
+              ...init,
+              signal: AbortSignal.timeout(timeoutMs),
+            });
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+            if (response.ok || ![429, 500, 502, 503, 504].includes(response.status)) {
+              sessionStorage.setItem('qyx_lastWorkingApiBase', base);
+              persistApiBase(base);
+              return { response, base };
+            }
+
+            lastError = new Error(`HTTP ${response.status}`);
+          } catch (err) {
+            lastError = err;
+            const fallbackBase = getApiFallbackBase(base);
+            if (fallbackBase && fallbackBase !== base) {
+              try {
+                const response = await fetch(`${fallbackBase}${path}`, {
+                  ...init,
+                  signal: AbortSignal.timeout(fallbackTimeoutMs),
+                });
+                if (response.ok || ![429, 500, 502, 503, 504].includes(response.status)) {
+                  sessionStorage.setItem('qyx_lastWorkingApiBase', fallbackBase);
+                  persistApiBase(fallbackBase);
+                  return { response, base: fallbackBase };
+                }
+              } catch (fallbackErr) {
+                lastError = fallbackErr;
+              }
+            }
+            if (!isNetworkFetchFailure(err) && err?.name !== 'AbortError' && err?.name !== 'TimeoutError') {
+              throw err;
+            }
+          }
+        }
 
-          editor.value =
-            editor.value.substring(0, start) +
-            '    ' +
-            editor.value.substring(end);
+        throw lastError || new Error('Unable to reach API');
+      }
 
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 4;
+      function isNetworkFetchFailure(err) {
+        const message = String(err?.message || err || '');
+        return err?.name === 'TypeError' && /fetch/i.test(message);
+      }
 
-          updateEditor();
-        }
+    function normalizeEditorOnLoad() {
+      if (looksLikeRestoredPageSource(editor.value || '')) {
+        editor.value = '';
+        updateEditor();
+      }
+    }
 
-        // AUTO INDENT ON ENTER
-        else if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
+    normalizeEditorOnLoad();
+    window.addEventListener('pageshow', normalizeEditorOnLoad);
+    setTimeout(normalizeEditorOnLoad, 0);
 
-          e.preventDefault();
+    editor.addEventListener('input', () => {
+      selectedZipFile = null;
+      updateEditor();
+    });
+    editor.addEventListener('scroll', () => {
+      lineNumbers.scrollTop = editor.scrollTop;
+    });
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+    // Tab key support
+    editor.addEventListener('keydown', e => {
 
-          const value = editor.value;
+      // TAB SUPPORT
+      if (e.key === 'Tab' && !e.shiftKey) {
 
-          // Find current line
-          const lineStart =
-            value.lastIndexOf('\n', start - 1) + 1;
+        e.preventDefault();
 
-          const currentLine =
-            value.substring(lineStart, start);
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-          // Preserve existing indentation
-          const indentMatch = currentLine.match(/^\s*/);
+        editor.value =
+          editor.value.substring(0, start) +
+          '    ' +
+          editor.value.substring(end);
 
-          let indent = indentMatch
-            ? indentMatch[0]
-            : '';
+        editor.selectionStart =
+          editor.selectionEnd =
+          start + 4;
 
-          const trimmed = currentLine.trim();
+        updateEditor();
+      }
 
-          // Python indentation
-          if (
-            selectedLang === 'python' &&
-            trimmed.endsWith(':')
-          ) {
-            indent += '    ';
-          }
+      // AUTO INDENT ON ENTER
+      else if (e.key === 'Enter' && !e.ctrlKey && !e.metaKey) {
 
-          // JavaScript / TypeScript / Java / C++
-          else if (
-            ['javascript', 'typescript', 'java', 'cpp']
-              .includes(selectedLang) &&
-            trimmed.endsWith('{')
-          ) {
-            indent += '    ';
-          }
+        e.preventDefault();
 
-          editor.value =
-            value.substring(0, start) +
-            '\n' + indent +
-            value.substring(end);
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-          editor.selectionStart =
-            editor.selectionEnd =
-            start + 1 + indent.length;
+        const value = editor.value;
 
-          updateEditor();
+        // Find current line
+        const lineStart =
+          value.lastIndexOf('\n', start - 1) + 1;
+
+        const currentLine =
+          value.substring(lineStart, start);
+
+        // Preserve existing indentation
+        const indentMatch = currentLine.match(/^\s*/);
+
+        let indent = indentMatch
+          ? indentMatch[0]
+          : '';
+
+        const trimmed = currentLine.trim();
+
+        // Python indentation
+        if (
+          selectedLang === 'python' &&
+          trimmed.endsWith(':')
+        ) {
+          indent += '    ';
         }
 
-        // SMART BACKSPACE
-        else if (e.key === 'Backspace') {
+        // JavaScript / TypeScript / Java / C++
+        else if (
+          ['javascript', 'typescript', 'java', 'cpp']
+            .includes(selectedLang) &&
+          trimmed.endsWith('{')
+        ) {
+          indent += '    ';
+        }
 
-          const start = editor.selectionStart;
-          const end = editor.selectionEnd;
+        editor.value =
+          value.substring(0, start) +
+          '\n' + indent +
+          value.substring(end);
 
-          // Only if no text selected
-          if (start === end) {
+        editor.selectionStart =
+          editor.selectionEnd =
+          start + 1 + indent.length;
 
-            const value = editor.value;
+        updateEditor();
+      }
+
+      // SMART BACKSPACE
+      else if (e.key === 'Backspace') {
+
+        const start = editor.selectionStart;
+        const end = editor.selectionEnd;
 
-            // Text before cursor
-            const beforeCursor =
-              value.substring(0, start);
+        // Only if no text selected
+        if (start === end) {
 
-            // Current line
-            const lineStart =
-              beforeCursor.lastIndexOf('\n') + 1;
+          const value = editor.value;
 
-            const currentLine =
-              beforeCursor.substring(lineStart);
+          // Text before cursor
+          const beforeCursor =
+            value.substring(0, start);
 
-            // Remove full indentation level
-            if (currentLine.endsWith('    ')) {
+          // Current line
+          const lineStart =
+            beforeCursor.lastIndexOf('\n') + 1;
 
-              e.preventDefault();
+          const currentLine =
+            beforeCursor.substring(lineStart);
 
-              editor.value =
-                value.substring(0, start - 4) +
-                value.substring(end);
+          // Remove full indentation level
+          if (currentLine.endsWith('    ')) {
 
-              editor.selectionStart =
-                editor.selectionEnd =
-                start - 4;
+            e.preventDefault();
 
-              updateEditor();
-            }
+            editor.value =
+              value.substring(0, start - 4) +
+              value.substring(end);
+
+            editor.selectionStart =
+              editor.selectionEnd =
+              start - 4;
+
+            updateEditor();
           }
         }
-      });
+      }
+    });
 
       /* ═══════════════════════════════════════════════════════════════
          FILE UPLOAD
@@ -3075,34 +3398,44 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
       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 = sanitizeClientCode(ev.target.result);
+          updateEditor();
+          toast(`Loaded ${file.name}`, 'success');
+        };
+        reader.readAsText(file);
         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);
-      });
-
-      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);
+    });
+
+    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 = {
@@ -3130,48 +3463,47 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
         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');
         });
 
-        // 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
@@ -3191,35 +3523,36 @@ <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({ notify = false } = {}) {
         if (!apiUrlInput || !apiStatusText) return;
-        const base = getApiBase();
         try {
-          const { response: r, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, '/health', { signal: AbortSignal.timeout(5000) });
-          if (fallbackUsed) persistApiBase(baseUsed);
+          const { response: r, base } = await fetchWithApiFallback('/health', { method: 'GET' }, { primaryTimeoutMs: 2000, fallbackTimeoutMs: 5000 });
           if (r.ok) {
+            apiUrlInput.value = base;
             apiDot?.classList.add('connected');
             apiStatusText.dataset.status = 'connected';
             delete apiStatusText.dataset.statusCode;
             syncApiStatusText();
-            if (notify) { toast(getTranslation('toast_api_reachable'), 'success'); }
+            if (notify) {
+              toast(getTranslation('toast_api_reachable'), 'success');
+            }
           } else {
             apiDot?.classList.remove('connected');
             apiStatusText.dataset.status = 'error';
@@ -3231,25 +3564,30 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           apiStatusText.dataset.status = 'unreachable';
           delete apiStatusText.dataset.statusCode;
           syncApiStatusText();
-          if (notify) { toast(getTranslation('toast_api_unreachable'), 'error'); }
+          if (notify) {
+            toast(getTranslation('toast_api_unreachable'), 'error');
+          }
         }
       }
+
       const pingBtn = document.getElementById('pingBtn');
       if (pingBtn) pingBtn.addEventListener('click', () => pingApi({ notify: true }));
 
       // Auto-ping on load
       setTimeout(pingApi, 800);
 
-      /* ═══════════════════════════════════════════════════════════════
-         ANALYZE
-      ═══════════════════════════════════════════════════════════════ */
-      analyzeBtn.addEventListener('click', doAnalyze);
+    /* ═══════════════════════════════════════════════════════════════
+       ANALYZE
+    ═══════════════════════════════════════════════════════════════ */
+    analyzeBtn.addEventListener('click', doAnalyze);
 
       async function doAnalyze() {
-        const code = editor.value.trim();
-        if (!selectedZipFile && !code) { toast(getTranslation('toast_please_paste'), 'error'); return; }
+        const code = sanitizeClientCode(editor.value.trim());
+        if (!selectedZipFile && !code) {
+          toast(getTranslation('toast_please_paste'), 'error');
+          return;
+        }
 
-        const base = getApiBase();
         const endpointMap = {
           analyze: '/analyze/',
           explain: '/explanation/',
@@ -3258,7 +3596,6 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
         };
         const endpoint = endpointMap[selectedMode] || '/analyze/';
 
-        // Loading state
         analyzeBtn.classList.add('loading');
         analyzeBtn.disabled = true;
         showShimmers();
@@ -3267,12 +3604,10 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           if (selectedZipFile) {
             const formData = new FormData();
             formData.append('file', selectedZipFile);
-            const { response: res, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, '/analyze/zip/', {
+            const { response: res, base: resolvedBase } = await fetchWithApiFallback('/analyze/zip/', {
               method: 'POST',
               body: formData,
-              signal: AbortSignal.timeout(60000),
-            });
-            if (fallbackUsed) persistApiBase(baseUsed);
+            }, { primaryTimeoutMs: 3000, fallbackTimeoutMs: 60000 });
             if (!res.ok) {
               const err = await res.json().catch(() => ({}));
               throw new Error(err.detail || `HTTP ${res.status}`);
@@ -3282,8 +3617,12 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
             currentResult = data;
             renderZipResults(data);
             addToHistory(`ZIP: ${selectedZipFile.name}`, data);
+            apiUrlInput.value = resolvedBase;
             apiDot?.classList.add('connected');
-            if (apiStatusText) apiStatusText.textContent = 'Connected';
+            if (apiStatusText) {
+              apiStatusText.dataset.status = 'connected';
+              syncApiStatusText();
+            }
             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' : '';
@@ -3291,13 +3630,11 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
             return;
           }
 
-          const { response: res, baseUsed, fallbackUsed } = await fetchWithApiFallback(base, endpoint, {
+          const { response: res, base: resolvedBase } = await fetchWithApiFallback(endpoint, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ code, language: selectedLang }),
-            signal: AbortSignal.timeout(30000),
-          });
-          if (fallbackUsed) persistApiBase(baseUsed);
+          }, { primaryTimeoutMs: 3000, fallbackTimeoutMs: 60000 });
           if (!res.ok) {
             const err = await res.json().catch(() => ({}));
             throw new Error(err.detail || `HTTP ${res.status}`);
@@ -3305,7 +3642,6 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           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;
@@ -3320,8 +3656,12 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           currentResult = result;
           renderResults(result, code);
           addToHistory(code, result);
+          apiUrlInput.value = resolvedBase;
           apiDot?.classList.add('connected');
-          if (apiStatusText) apiStatusText.textContent = getTranslation('api_status_connected');
+          if (apiStatusText) {
+            apiStatusText.dataset.status = 'connected';
+            syncApiStatusText();
+          }
           document.getElementById('engineBar').style.display = 'flex';
           engineInfo.textContent = (data.provider || 'rule-based') + ' · ' + (data.model || '');
           if (elapsed) timeInfo.textContent = parseFloat(elapsed).toFixed(0) + 'ms';
@@ -3329,7 +3669,15 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
           resultActions.style.display = 'flex';
 
         } catch (err) {
-          toast(getTranslation('toast_analysis_failed').replace('{message}', err.message), 'error');
+          if (isNetworkFetchFailure(err)) {
+            apiDot?.classList.remove('connected');
+            apiStatusText.dataset.status = 'unreachable';
+            delete apiStatusText.dataset.statusCode;
+            syncApiStatusText();
+            toast(getTranslation('toast_api_unreachable'), 'error');
+          } else {
+            toast(getTranslation('toast_analysis_failed').replace('{message}', err.message), 'error');
+          }
           resetResults();
         } finally {
           analyzeBtn.classList.remove('loading');
@@ -3337,52 +3685,52 @@ <h3 data-i18n="empty_suggest_title">No suggestions yet</h3>
         }
       }
 
-      /* ═══════════════════════════════════════════════════════════════
-         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>
@@ -3403,13 +3751,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">
@@ -3438,7 +3786,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>
@@ -3446,7 +3794,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">
@@ -3466,32 +3814,37 @@ <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';
         const el = document.getElementById('explainResult');
         el.style.display = 'block';
-        document.getElementById('explainBadge').textContent = exp.complexity;
+        document.getElementById('explainBadge').textContent = escHtml(exp.complexity);
+
+        const cleanComplexity = sanitizeClassToken(exp.complexity);
+        const cleanRisk = sanitizeClassToken((exp.complexity_risk || 'Simple').replace(/\s+/g, '-'));
+        const lineCountInt = parseInt(exp.line_count, 10) || 0;
+        const funcCountInt = parseInt(exp.function_count, 10) || 0;
+        const classCountInt = parseInt(exp.class_count, 10) || 0;
+        const cyclomaticComplexityInt = exp.cyclomatic_complexity != null ? parseInt(exp.cyclomatic_complexity, 10) : null;
+        const escapedRisk = escHtml(exp.complexity_risk || 'Simple');
 
         el.innerHTML = `
-    <div class="explain-summary" tabindex="0">${exp.summary}</div>
+    <div class="explain-summary" tabindex="0">${renderMarkdown(exp.summary)}</div>
     <div class="explain-meta">
-      <div class="meta-chip complexity-${exp.complexity}">
-        <div class="dot"></div>${exp.complexity}
+      <div class="meta-chip complexity-${cleanComplexity}">
+        <div class="dot"></div>${escHtml(exp.complexity)}
       </div>
       <div class="meta-chip">
         <svg width="12" height="12" 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>
-        ${exp.language}
+        ${escHtml(exp.language)}
       </div>
-      <div class="meta-chip"><svg width="12" height="12" 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> ${getTranslation('meta_lines').replace('{count}', exp.line_count)}</div>
-      <div class="meta-chip"><svg width="12" height="12" 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> ${getTranslation('meta_functions').replace('{count}', exp.function_count)}</div>
-      ${exp.class_count > 0 ? '<div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> ' + getTranslation('meta_classes').replace('{count}', exp.class_count) + '</div>' : ''}
-      <div class="meta-chip"><svg width="12" height="12" 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> ${exp.line_count} lines</div>
-      <div class="meta-chip"><svg width="12" height="12" 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> ${exp.function_count} fn${exp.function_count !== 1 ? 's' : ''}</div>
-      ${exp.class_count > 0 ? '<div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> ' + exp.class_count + ' class' + (exp.class_count !== 1 ? 'es' : '') + '</div>' : ''}
-      ${exp.cyclomatic_complexity != null ? `<div class="meta-chip risk-${(exp.complexity_risk || 'Simple').replace(/\s+/g, '-')}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg> M=${exp.cyclomatic_complexity} &middot; ${exp.complexity_risk}</div>` : ''}
+      <div class="meta-chip"><svg width="12" height="12" 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> ${getTranslation('meta_lines').replace('{count}', lineCountInt)}</div>
+      <div class="meta-chip"><svg width="12" height="12" 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> ${getTranslation('meta_functions').replace('{count}', funcCountInt)}</div>
+      ${classCountInt > 0 ? '<div class="meta-chip"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg> ' + getTranslation('meta_classes').replace('{count}', classCountInt) + '</div>' : ''}
+      ${cyclomaticComplexityInt != null ? `<div class="meta-chip risk-${cleanRisk}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg> M=${cyclomaticComplexityInt} &middot; ${escapedRisk}</div>` : ''}
     </div>
     <ul class="key-points">
       ${exp.key_points.map((p, i) => `<li style="animation-delay:${i * 0.05}s">${renderMarkdown(p)}</li>`).join('')}
@@ -3499,166 +3852,176 @@ <h3>Project Health Score</h3>
   `;
       }
 
-      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>${getTranslation('debug_clean_title')}</h3>
         <p>${getTranslation('debug_clean_desc')}</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>
+        <div class="stat-chip-num">${parseInt(dbg.error_count, 10) || 0}</div>
         <div class="stat-chip-label">${getTranslation('debug_errors')}</div>
       </div>
       <div class="stat-chip warn-chip">
-        <div class="stat-chip-num">${dbg.warning_count}</div>
+        <div class="stat-chip-num">${parseInt(dbg.warning_count, 10) || 0}</div>
         <div class="stat-chip-label">${getTranslation('debug_warnings')}</div>
       </div>
       <div class="stat-chip info-chip">
-        <div class="stat-chip-num">${dbg.info_count}</div>
+        <div class="stat-chip-num">${parseInt(dbg.info_count, 10) || 0}</div>
         <div class="stat-chip-label">${getTranslation('debug_info')}</div>
       </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) => {
+          const lineNum = parseInt(issue.line, 10) || 1;
+          const escapedLine = issue.line ? escHtml(String(issue.line)) : '';
+          return `
+    <div class="issue-card ${safeSeverityClass(issue.severity)}"
+      data-line="${lineNum}"
+      tabindex="0"
+      role="button"
+      aria-label="Jump to line ${lineNum}"
+      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>
-        ${issue.line ? `<span class="issue-line">${getTranslation('debug_line').replace('{line}', issue.line)}</span>` : ''}
+        <span class="issue-badge">${escHtml(issue.severity)}</span>
+        <span class="issue-type">${escHtml(issue.type)}</span>
+        ${issue.line ? `<span class="issue-line">${getTranslation('debug_line').replace('{line}', escapedLine)}</span>` : ''}
       </div>
-      <div class="issue-desc">${issue.description}</div>
+      <div class="issue-desc">${escHtml(issue.description)}</div>
       ${issue.code_snippet ? `<div class="issue-snippet">${escHtml(issue.code_snippet)}</div>` : ''}
-      <div class="issue-fix">${issue.suggestion}</div>
-    </div>`).join('');
-
-        el.innerHTML = statBar + cards;
-      }
+      <div class="issue-fix">${escHtml(issue.suggestion)}</div>
+    </div>`;
+        }).join('');
 
-      /* ═══════════════════════════════════════════════════════════════
-         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">
@@ -3671,8 +4034,8 @@ <h3>${getTranslation('debug_clean_title')}</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">
@@ -3689,25 +4052,25 @@ <h3>${getTranslation('debug_clean_title')}</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">
@@ -3719,39 +4082,39 @@ <h3>${getTranslation('debug_clean_title')}</h3>
             style="transition:stroke-dashoffset 1s ease"/>
         </svg>
         <div class="score-ring-text">
-          <div class="score-num" style="color:${scoreColor}">${sugg.overall_score}</div>
-          <div class="score-grade">${sugg.grade}</div>
+          <div class="score-num" style="color:${scoreColor}">${parseInt(sugg.overall_score, 10) || 0}</div>
+          <div class="score-grade">${escHtml(sugg.grade)}</div>
         </div>
       </div>
       <div class="score-info">
         <h3>${getTranslation('suggest_quality_score')}</h3>
-        <p>${sugg.next_step}</p>
+        <p>${escHtml(sugg.next_step)}</p>
       </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) {
-              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"
@@ -3780,102 +4143,125 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
               }
             }
 
+            const escapedCat = escHtml(s.category);
+            const escapedPriority = escHtml(s.priority);
+            const escapedDesc = escHtml(s.description);
+
             return `
-      <div class="suggest-card priority-${s.priority}" style="animation-delay:${i * 0.05}s" tabindex="0">
+      <div class="suggest-card priority-${safePriorityClass(s.priority)}" style="animation-delay:${i * 0.05}s" tabindex="0">
         <div class="suggest-header">
-          <span class="suggest-cat">${s.category}</span>
-          <span style="font-size:0.7rem;color:var(--text3);margin-left:auto">${getTranslation('suggest_priority').replace('{priority}', s.priority)}</span>
+          <span class="suggest-cat">${escapedCat}</span>
+          <span style="font-size:0.7rem;color:var(--text3);margin-left:auto">${getTranslation('suggest_priority').replace('{priority}', escapedPriority)}</span>
         </div>
-        <div class="suggest-desc">${s.description}</div>
+        <div class="suggest-desc">${escapedDesc}</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;
-      }
+      });
+    }
+
+    /* ═══════════════════════════════════════════════════════════════
+       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
       ═══════════════════════════════════════════════════════════════ */
+      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(),
+        const lang =
+          result.explanation?.language ||
+          result.debugging?.language ||
+          result.suggestions?.language ||
+          selectedLang;
+        const entry = createStoredEntry({
           code,
           result,
           lang,
           ts: new Date().toLocaleTimeString(),
-          preview: code.slice(0, 60).replace(/\n/g, ' '),
-        };
+          preview: code,
+        });
         history.unshift(entry);
         if (history.length > MAX_HISTORY) history = history.slice(0, MAX_HISTORY);
-        localStorage.setItem('qyx_history', JSON.stringify(history));
+        saveStoredHistory('qyx_history', history);
         renderHistory();
+        saveHistoryToBackend(code, lang, result);
       }
 
       function renderHistory() {
@@ -3883,23 +4269,28 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
           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>
-      <span class="history-meta">${h.ts}</span>
-    </div>`).join('');
+        historyList.innerHTML = history.map(h => buildStoredListItemHtml(h)).join('');
       }
 
-      document.getElementById('clearHistoryBtn').addEventListener('click', () => {
+      document.getElementById('clearHistoryBtn').addEventListener('click', async () => {
         if (!confirm(getTranslation('confirm_clear_history'))) return;
 
+        const base = getApiBase();
+        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');
+        saveStoredHistory('qyx_history', history);
         renderHistory();
         toast(getTranslation('toast_history_cleared'), 'info');
       });
 
+      function normalizeSavedEntryId(id) {
+        const normalizedId = Number(id);
+        return Number.isNaN(normalizedId) ? null : normalizedId;
+      }
+
       document.getElementById('downloadJsonBtn').addEventListener('click', () => {
         if (!history || history.length === 0) {
           toast('No history to download', 'info');
@@ -3943,14 +4334,11 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         dlNode.remove();
         toast('Downloaded history.csv', 'success');
       });
-      function normalizeSavedEntryId(id) {
-        const normalizedId = Number(id);
-        return Number.isNaN(normalizedId) ? null : normalizedId;
-      }
 
       function restoreSavedEntry(entry) {
         if (!entry) return;
-        editor.value = entry.code;
+
+        editor.value = sanitizeClientCode(entry.code);
         if (entry.lang) {
           setLanguage(entry.lang.toLowerCase());
         }
@@ -3974,17 +4362,16 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
       ═══════════════════════════════════════════════════════════════ */
       document.getElementById('favBtn').addEventListener('click', () => {
         if (!currentResult || !editor.value.trim()) return;
-        const entry = {
-          id: Date.now(),
+        const entry = createStoredEntry({
           code: editor.value,
           result: currentResult,
           lang: currentResult.explanation?.language || selectedLang,
           ts: new Date().toLocaleDateString(),
-          preview: editor.value.slice(0, 60).replace(/\n/g, ' '),
-        };
+          preview: editor.value,
+        });
         favorites.unshift(entry);
         if (favorites.length > 30) favorites = favorites.slice(0, 30);
-        localStorage.setItem('qyx_favorites', JSON.stringify(favorites));
+        saveStoredHistory('qyx_favorites', favorites);
         renderFavorites();
         toast(getTranslation('toast_saved_favorites'), 'success');
       });
@@ -3994,22 +4381,17 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
           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>
-      <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('');
+        favList.innerHTML = favorites.map(f => buildStoredListItemHtml(f, { favorite: true })).join('');
       }
 
-document.getElementById('clearFavsBtn').addEventListener('click', () => {
-  if (!confirm(getTranslation('confirm_clear_favs'))) return;
+      document.getElementById('clearFavsBtn').addEventListener('click', () => {
+        if (!confirm(getTranslation('confirm_clear_favs'))) return;
+        favorites = [];
+        saveStoredHistory('qyx_favorites', favorites);
+        renderFavorites();
+        toast(getTranslation('toast_favorites_cleared'), 'info');
+      });
 
-  favorites = [];
-  localStorage.removeItem('qyx_favorites');
-  renderFavorites();
-  toast(getTranslation('toast_favorites_cleared'), 'info');
-});
       function loadFav(id) {
         const normalizedId = normalizeSavedEntryId(id);
         if (normalizedId === null) return;
@@ -4033,31 +4415,31 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         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
@@ -4067,7 +4449,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         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>';
+        el.innerHTML = '<span class="toast-icon">' + (icons[type] || icons.info) + '</span><span>' + escHtml(msg) + '</span>';
         container.appendChild(el);
         setTimeout(() => {
           el.classList.add('fadeout');
@@ -4078,12 +4460,67 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
       /* ═══════════════════════════════════════════════════════════════
          HELPERS
       ═══════════════════════════════════════════════════════════════ */
-      function escHtml(s) {
-        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      function sanitizeClassToken(token) {
+        return String(token || '').replace(/[^a-zA-Z0-9\-]/g, '');
       }
-      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>');
+
+      let lineHighlightTimer = null;
+
+      function highlightLine() {
+        if (!editor) return;
+        editor.classList.remove('editor-highlight');
+        void editor.offsetWidth;
+        editor.classList.add('editor-highlight');
+        clearTimeout(lineHighlightTimer);
+        lineHighlightTimer = setTimeout(() => {
+          editor.classList.remove('editor-highlight');
+        }, 900);
+      }
+
+      function navigateToLine(line) {
+        if (!line || !editor) return;
+        const lines = editor.value.split('\n');
+        const safeLine = Math.min(Math.max(1, line), Math.max(lines.length, 1));
+        let cursorPos = 0;
+        for (let i = 0; i < safeLine - 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, (safeLine - 3) * lineHeight),
+          behavior: 'smooth'
+        });
+        highlightLine();
+      }
+
+      function attachIssueNavigation() {
+        const debugResult = document.getElementById('debugResult');
+        if (!debugResult) return;
+        if (debugResult.dataset.navBound === 'true') return;
+        debugResult.dataset.navBound = 'true';
+
+        const activateIssueCard = (card) => {
+          if (!card) return;
+          document.querySelectorAll('.issue-card').forEach(c => c.classList.remove('active'));
+          card.classList.add('active');
+          navigateToLine(parseInt(card.dataset.line, 10));
+        };
+
+        debugResult.addEventListener('click', (e) => {
+          const card = e.target.closest('.issue-card');
+          if (!card) return;
+          activateIssueCard(card);
+        });
+
+        debugResult.addEventListener('keydown', (e) => {
+          if (e.key !== 'Enter' && e.key !== ' ') return;
+          const card = e.target.closest('.issue-card');
+          if (!card) return;
+          e.preventDefault();
+          activateIssueCard(card);
+        });
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -4118,7 +4555,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) {
@@ -4135,7 +4572,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
 }
 
 loadUser(42);`,
-        typescript: `// TypeScript Sample
+      typescript: `// TypeScript Sample
 interface User {
   id: number;
   name: string;
@@ -4150,7 +4587,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");
@@ -4168,7 +4605,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
@@ -4190,7 +4627,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
     processData();
     return 0;
 }`
-      };
+    };
 
       function loadSample() {
         const sample = SAMPLES[selectedLang] || SAMPLES.python;
@@ -4217,12 +4654,13 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         });
       }
 
-      // Initialize language
-      setAppLanguage(appLang);
-      syncApiStatusText();
+    // Initialize language
+    setAppLanguage(appLang);
+    syncApiStatusText();
 
-      renderHistory();
-      renderFavorites();
+    renderHistory();
+    renderFavorites();
+    attachIssueNavigation();
 
       // Save API URL
       if (apiUrlInput) {
@@ -4231,6 +4669,7 @@ <h3>${getTranslation('suggest_quality_score')}</h3>
         });
         const savedUrl = localStorage.getItem('qyx_apiUrl');
         if (savedUrl) apiUrlInput.value = savedUrl;
+        else apiUrlInput.value = DEFAULT_API_BASE;
       }
 
       /* ═══════════════════════════════════════════════════════════════
