fix 3 bugs : Bug 1 — No "apply to page" button in the correct tab

Bug 2 — Apply replaces the whole field instead of the selected text
Bug 3 — Quran translation (14 languages)

extension/content-inline.js

@@ -56,6 +56,7 @@
 
   let activeField = null;
   let lastInteractedField = null; // persists after focus moves to side panel (Change 1)
+  let pendingSelection = null;    // selection captured on right-click, for selection-only write-back
   let analysisSuppressed = false; // true after a non-correction model write-back (Change 3)
   let lastAnalyzedText = '';
   let suggestions = [];
@@ -111,6 +112,8 @@
     // event at all — neither should count as a manual edit (Change 3).
     const isUserKeystroke = !!e && e.isTrusted === true;
     if (isUserKeystroke && analysisSuppressed) analysisSuppressed = false;
+    // A real edit invalidates any selection captured at right-click time.
+    if (isUserKeystroke) pendingSelection = null;
 
     const text = getFieldText(activeField);
 
@@ -563,6 +566,9 @@
       }
       if (suggestions.length > 0) {
         try {
+          // FAB = whole-field intent. Drop any selection captured by an earlier
+          // right-click so write-back replaces the entire field, not a range.
+          pendingSelection = null;
           // Tag the source field so write-back can re-find it after focus
           // moves to the side panel (Change 1).
           if (lastInteractedField) lastInteractedField.dataset.bayanSource = '1';
@@ -663,16 +669,81 @@
 
   const NON_CORRECTION_SOURCES = ['summarize', 'dialect', 'quran'];
 
+  // Capture the field + selection range at right-click time. The context menu
+  // flow always acts on the selected text, so we remember exactly what was
+  // selected and splice the result into THAT range on write-back (Bug 2).
+  function captureSelection(target) {
+    const winSel = window.getSelection();
+
+    // Prefer the already-tracked editable field (it's what write-back resolves
+    // via lastInteractedField); fall back to the right-clicked target. For
+    // contenteditable this avoids latching onto a child node of the root.
+    let field = null;
+    const tracked = lastInteractedField
+      || (isEditableField(document.activeElement) ? document.activeElement : null);
+    if (tracked) {
+      const ttag = tracked.tagName.toLowerCase();
+      if (ttag === 'textarea' || ttag === 'input') field = tracked;
+      else if (tracked.isContentEditable && winSel && winSel.rangeCount > 0
+        && tracked.contains(winSel.anchorNode)) field = tracked;
+    }
+    if (!field && isEditableField(target)) field = target;
+    if (!field) { pendingSelection = null; return; }
+
+    const tag = field.tagName.toLowerCase();
+    if (tag === 'textarea' || tag === 'input') {
+      const start = field.selectionStart;
+      const end = field.selectionEnd;
+      if (typeof start === 'number' && typeof end === 'number' && start !== end) {
+        pendingSelection = { field, type: 'input', start, end };
+      } else {
+        pendingSelection = null;
+      }
+    } else if (field.isContentEditable) {
+      if (winSel && winSel.rangeCount > 0 && !winSel.isCollapsed && field.contains(winSel.anchorNode)) {
+        pendingSelection = { field, type: 'ce', range: winSel.getRangeAt(0).cloneRange() };
+      } else {
+        pendingSelection = null;
+      }
+    } else {
+      pendingSelection = null;
+    }
+
+    // Persist a link to the field so write-back can re-find it after focus
+    // moves to the side panel, even when this was a plain right-click.
+    if (pendingSelection) {
+      lastInteractedField = field;
+      try { field.dataset.bayanSource = '1'; } catch {}
+    }
+  }
+
+  document.addEventListener('contextmenu', (e) => {
+    try { captureSelection(e.target); } catch { pendingSelection = null; }
+  }, true);
+
   function writeTextToField(field, text, mode, source) {
     if (!field || typeof text !== 'string') return;
 
     const tag = field.tagName.toLowerCase();
     const suppress = NON_CORRECTION_SOURCES.includes(source);
 
+    // Resolve the effective mode. 'auto' = replace the captured selection if we
+    // have one for THIS field, otherwise replace the whole field.
+    const sel = (pendingSelection && pendingSelection.field === field) ? pendingSelection : null;
+    let effectiveMode = mode;
+    if (mode === 'auto') effectiveMode = sel ? 'replaceSelection' : 'replaceAll';
+
     if (tag === 'textarea' || tag === 'input') {
-      if (mode === 'replaceSelection'
+      if (effectiveMode === 'replaceSelection' && sel && sel.type === 'input') {
+        const before = field.value.slice(0, sel.start);
+        const after = field.value.slice(sel.end);
+        field.value = before + text + after;
+        const caret = sel.start + text.length;
+        try { field.setSelectionRange(caret, caret); } catch {}
+      } else if (effectiveMode === 'replaceSelection'
         && typeof field.selectionStart === 'number'
         && field.selectionStart !== field.selectionEnd) {
+        // Live selection still present (no captured range) — splice into it.
         const start = field.selectionStart;
         const end = field.selectionEnd;
         field.value = field.value.slice(0, start) + text + field.value.slice(end);
@@ -689,14 +760,31 @@
     } else {
       // contenteditable — mirror the overlay-safe approach used by applyFix.
       field.focus();
-      const sel = window.getSelection();
-      const hasLiveSelection = sel && sel.rangeCount > 0 && field.contains(sel.anchorNode);
-      // NOTE: execCommand('insertText') fires a TRUSTED input event, which
-      // onFieldInput would treat as a user keystroke and clear suppression.
-      // So only take that path when NOT suppressing; suppressed writes use the
-      // textContent path, whose dispatched event is untrusted (Change 3-safe).
-      if (mode === 'replaceSelection' && hasLiveSelection && !sel.isCollapsed && !suppress) {
-        document.execCommand('insertText', false, text);
+      if (effectiveMode === 'replaceSelection' && sel && sel.type === 'ce') {
+        // Restore the captured range, then replace its contents with the text.
+        try {
+          const winSel = window.getSelection();
+          winSel.removeAllRanges();
+          winSel.addRange(sel.range);
+          sel.range.deleteContents();
+          sel.range.insertNode(document.createTextNode(text));
+          winSel.collapseToEnd();
+        } catch {
+          field.textContent = text;
+        }
+        if (suppress) analysisSuppressed = true;
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+      } else if (effectiveMode === 'replaceSelection') {
+        const winSel = window.getSelection();
+        const hasLive = winSel && winSel.rangeCount > 0 && !winSel.isCollapsed && field.contains(winSel.anchorNode);
+        if (hasLive) {
+          winSel.getRangeAt(0).deleteContents();
+          winSel.getRangeAt(0).insertNode(document.createTextNode(text));
+        } else {
+          field.textContent = text;
+        }
+        if (suppress) analysisSuppressed = true;
+        field.dispatchEvent(new Event('input', { bubbles: true }));
       } else {
         field.textContent = text;
         if (suppress) analysisSuppressed = true;
@@ -704,7 +792,8 @@
       }
     }
 
-    // Clear the source tag now that the write succeeded.
+    // Consume the captured selection + source tag now that the write succeeded.
+    pendingSelection = null;
     try { delete field.dataset.bayanSource; } catch {}
   }
 

extension/sidepanel/sidepanel.css

@@ -378,6 +378,49 @@ body {
   color: var(--sp-text-muted);
 }
 
+/* ══════════════════════════════════════════════
+   Quran verse translation
+   ══════════════════════════════════════════════ */
+.sp-quran-translate {
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--sp-border);
+}
+
+.sp-quran-translate-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.sp-quran-translate-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sp-text-secondary);
+}
+
+.sp-select {
+  flex: 1;
+  min-width: 140px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--sp-text);
+  background: var(--sp-surface);
+  border: 1px solid var(--sp-border);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sp-select:focus {
+  outline: none;
+  border-color: var(--sp-primary);
+}
+
+.sp-select option {
+  background: var(--sp-surface);
+  color: var(--sp-text);
+}
+
 /* ══════════════════════════════════════════════
    Highlighted text (from bayan-renderer.js)
    ══════════════════════════════════════════════ */

extension/sidepanel/sidepanel.html

@@ -112,6 +112,9 @@
       <div class="sp-result-header">
         <span>النص المصحح</span>
         <div class="sp-result-actions">
+          <button class="sp-btn-icon" id="btn-apply-page" title="تطبيق في الصفحة">
+            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </button>
           <button class="sp-btn-icon" id="btn-apply-all" title="تطبيق الكل">
             <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
           </button>
@@ -246,6 +249,39 @@
       </div>
       <div class="sp-result-text" id="quran-text" dir="rtl"></div>
       <div class="sp-summary-meta" id="quran-meta"></div>
+
+      <!-- Verse translation (14 languages) -->
+      <div class="sp-quran-translate is-hidden" id="quran-translate-section">
+        <div class="sp-quran-translate-row">
+          <span class="sp-quran-translate-label">ترجمة الآية</span>
+          <select id="quran-lang-select" class="sp-select" dir="ltr">
+            <option value="">— اختر لغة —</option>
+            <option value="english">🇬🇧 English</option>
+            <option value="french">🇫🇷 Français</option>
+            <option value="turkish">🇹🇷 Türkçe</option>
+            <option value="persian">🇮🇷 فارسی</option>
+            <option value="russian">🇷🇺 Русский</option>
+            <option value="spanish">🇪🇸 Español</option>
+            <option value="german">🇩🇪 Deutsch</option>
+            <option value="indonesian">🇮🇩 Indonesia</option>
+            <option value="malay">🇲🇾 Melayu</option>
+            <option value="bengali">🇧🇩 বাংলা</option>
+            <option value="bosnian">🇧🇦 Bosanski</option>
+            <option value="portuguese">🇵🇹 Português</option>
+            <option value="uzbek">🇺🇿 O'zbek</option>
+          </select>
+        </div>
+        <div class="sp-result is-hidden" id="quran-translation-result" style="margin-top:8px;">
+          <div class="sp-result-header">
+            <span>الترجمة</span>
+            <button class="sp-btn-icon" id="btn-copy-quran-translation" title="نسخ الترجمة">
+              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+            </button>
+          </div>
+          <div class="sp-result-text" id="quran-translation-text" dir="auto"></div>
+          <div class="sp-summary-meta" id="quran-translation-ref"></div>
+        </div>
+      </div>
     </div>
   </section>
 

extension/sidepanel/sidepanel.js

@@ -27,6 +27,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnCorrect = document.getElementById('btn-correct');
   const btnClear = document.getElementById('btn-clear');
   const btnApplyAll = document.getElementById('btn-apply-all');
+  const btnApplyPage = document.getElementById('btn-apply-page');
   const btnCopyResult = document.getElementById('btn-copy-result');
   const scoreSection = document.getElementById('score-section');
   const resultSection = document.getElementById('result-section');
@@ -155,7 +156,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // directly; it relays through background.js. `source` lets the content
   // script decide whether to re-analyze (correct) or suppress (Change 3).
   // ══════════════════════════════════════════════════════════
-  function writeBackToPage(text, mode = 'replaceAll', source = 'correct') {
+  function writeBackToPage(text, mode = 'auto', source = 'correct') {
     try {
       chrome.runtime.sendMessage(
         { type: 'WRITE_BACK_TO_PAGE', text, mode, source },
@@ -234,7 +235,6 @@ document.addEventListener('DOMContentLoaded', () => {
         renderSuggestions(currentSuggestions);
         resultText.innerHTML = renderHighlightedText(analyzedText, currentSuggestions);
         saveState();
-        writeBackToPage(analyzedText, 'replaceAll', 'correct');
         showToast('✓ تم التصحيح');
       });
     });
@@ -379,10 +379,24 @@ document.addEventListener('DOMContentLoaded', () => {
     updateScore(0, 0, 0);
     renderSuggestions([]);
     saveState();
-    writeBackToPage(analyzedText, 'replaceAll', 'correct');
+    writeBackToPage(analyzedText, 'auto', 'correct');
     showToast('✓ تم تطبيق جميع التصحيحات');
   });
 
+  // Explicit "apply corrected text to the page field" button (Bug 1).
+  // Writes the current corrected text — with any still-pending suggestions
+  // applied — back into the source field, honouring selection vs whole-field.
+  if (btnApplyPage) {
+    btnApplyPage.addEventListener('click', () => {
+      if (!analyzedText) { showToast('لا يوجد نص للتطبيق'); return; }
+      if (isStale) { showToast('⚠ أعد التحليل أولاً — النص تغيّر'); return; }
+      const finalText = currentSuggestions.length > 0
+        ? applyAllPatches(analyzedText, currentSuggestions)
+        : analyzedText;
+      writeBackToPage(finalText, 'auto', 'correct');
+    });
+  }
+
   btnCopyResult.addEventListener('click', () => {
     const text = resultText.textContent || '';
     navigator.clipboard.writeText(text)
@@ -478,6 +492,22 @@ document.addEventListener('DOMContentLoaded', () => {
   const quranText = document.getElementById('quran-text');
   const quranMeta = document.getElementById('quran-meta');
   const btnCopyQuran = document.getElementById('btn-copy-quran');
+  // Translation sub-UI
+  const quranTranslateSection = document.getElementById('quran-translate-section');
+  const quranLangSelect = document.getElementById('quran-lang-select');
+  const quranTranslationResult = document.getElementById('quran-translation-result');
+  const quranTranslationText = document.getElementById('quran-translation-text');
+  const quranTranslationRef = document.getElementById('quran-translation-ref');
+  const btnCopyQuranTranslation = document.getElementById('btn-copy-quran-translation');
+  let lastQuranQuery = '';
+
+  // Parse the API's "(verse text) 【surah:ayah】" segment into {text, ref}.
+  function parseQuranSegment(seg) {
+    seg = seg || '';
+    const refMatch = seg.match(/【([^】]+)】/);
+    const text = seg.replace(/\s*【[^】]+】\s*$/, '').replace(/^\(/, '').replace(/\)$/, '');
+    return { text, ref: refMatch ? refMatch[1] : '' };
+  }
 
   if (quranInput) {
     quranInput.addEventListener('input', () => updateCounts(quranInput, quranCharCount, null));
@@ -490,6 +520,10 @@ document.addEventListener('DOMContentLoaded', () => {
       try {
         const data = await bayanQuran(text);
         quranResultSection.classList.remove('is-hidden');
+        // Reset translation UI for the new query.
+        if (quranTranslateSection) quranTranslateSection.classList.add('is-hidden');
+        if (quranTranslationResult) quranTranslationResult.classList.add('is-hidden');
+        if (quranLangSelect) quranLangSelect.value = '';
         if (data.error) {
           quranText.textContent = data.error;
           quranMeta.textContent = '';
@@ -498,6 +532,9 @@ document.addEventListener('DOMContentLoaded', () => {
           quranMeta.textContent = data.matched_segment && data.full_verse
             ? `المقطع المطابق: ${data.matched_segment}`
             : '';
+          // Enable translation now that we have a verified verse.
+          lastQuranQuery = text;
+          if (quranTranslateSection) quranTranslateSection.classList.remove('is-hidden');
           showToast('✓ تم التدقيق');
         }
       } catch (error) {
@@ -508,6 +545,42 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
 
+    // Translate the verified verse into the chosen language.
+    if (quranLangSelect) {
+      quranLangSelect.addEventListener('change', async () => {
+        const lang = quranLangSelect.value;
+        if (!lang || !lastQuranQuery) return;
+
+        setLoading(true, 'جارٍ الترجمة...');
+        try {
+          const data = await bayanQuran(lastQuranQuery, lang);
+          quranTranslationResult.classList.remove('is-hidden');
+          if (data.error) {
+            quranTranslationText.textContent = data.error;
+            quranTranslationRef.textContent = '';
+          } else {
+            const parsed = parseQuranSegment(data.matched_segment || data.full_verse || '');
+            quranTranslationText.textContent = parsed.text || data.full_verse || '';
+            quranTranslationRef.textContent = parsed.ref ? `[${parsed.ref}]` : '';
+            showToast('✓ تمت الترجمة');
+          }
+        } catch (error) {
+          console.error('[Bayan SP] Quran translation error:', error);
+          showToast('خطأ في الاتصال — تحقق من الإنترنت');
+        } finally {
+          setLoading(false);
+        }
+      });
+    }
+
+    if (btnCopyQuranTranslation) {
+      btnCopyQuranTranslation.addEventListener('click', () => {
+        navigator.clipboard.writeText(quranTranslationText.textContent || '')
+          .then(() => showToast('✓ تم نسخ الترجمة'))
+          .catch(() => showToast('تعذّر النسخ'));
+      });
+    }
+
     btnCopyQuran.addEventListener('click', () => {
       navigator.clipboard.writeText(quranText.textContent || '')
         .then(() => showToast('✓ تم النسخ'))
@@ -622,7 +695,7 @@ document.addEventListener('DOMContentLoaded', () => {
     btn.addEventListener('click', () => {
       const text = (getText() || '').trim();
       if (!text) { showToast('لا يوجد نص للتطبيق'); return; }
-      writeBackToPage(text, 'replaceAll', source);
+      writeBackToPage(text, 'auto', source);
     });
     anchorBtn.parentElement.appendChild(btn);
   }