feat: Show 3 spelling alternatives + keep-as-is option - Backend: Generate alternatives via EditDistanceCorrector - Tooltip: Multiple clickable correction buttons - Sidebar cards: Alt chips for each suggestion - Dismiss button removes error highlight (keep original word)

src/app.py

@@ -692,6 +692,29 @@ def analyze_text():
                 curr_end = mapper.map_offset(curr_end)
             return curr_start, curr_end
 
+        def _get_spelling_alternatives(original_word, best_correction, spell_checker, max_alts=3):
+            """Generate alternative spelling suggestions for a word."""
+            alts = []
+            seen = {best_correction, original_word}
+
+            # 1. Try edit distance 1 candidates from the spell checker's vocabulary
+            try:
+                clean_w = re.sub(r'[^\w]', '', original_word)
+                edit_cands = spell_checker.edit_corrector.known(spell_checker.edit_corrector.edits1(clean_w))
+                if edit_cands:
+                    ranked = sorted(list(edit_cands), key=lambda x: spell_checker.vocab_manager.get_frequency_rank(x))
+                    for c in ranked:
+                        if c not in seen and len(alts) < max_alts - 1:
+                            alts.append(c)
+                            seen.add(c)
+            except Exception:
+                pass
+
+            # 2. Always include 'keep as-is' as the last alternative
+            # Return: [best_correction, alt1, alt2, ..., original_word(keep)]
+            result = [best_correction] + alts + [original_word]
+            return result[:max_alts + 1]  # cap at max_alts + keep-as-is
+
         # 1. Spelling (with conservative post-filtering to avoid over-editing)
         has_spelling = True  # Always available via lazy-loaded araspell_service
         if has_spelling:
@@ -737,6 +760,7 @@ def analyze_text():
                                         'original': o_word,
                                         'correction': c_word,
                                         'type': 'spelling',
+                                        'alternatives': _get_spelling_alternatives(o_word, c_word, spell_checker),
                                     })
                                 else:
                                     new_words.append(current_text[start_idx:end_idx])
@@ -752,6 +776,7 @@ def analyze_text():
                                         'original': o_word,
                                         'correction': corr_str,
                                         'type': 'spelling',
+                                        'alternatives': [corr_str, o_word],
                                     })
                                 else:
                                     new_words.append(current_text[start_idx:end_idx])
@@ -776,6 +801,7 @@ def analyze_text():
                                                 'original': o_word,
                                                 'correction': c_word,
                                                 'type': 'spelling',
+                                                'alternatives': _get_spelling_alternatives(o_word, c_word, spell_checker),
                                             })
                                             ci += 1
                                         # Check if this is a 1→N word split
@@ -800,6 +826,7 @@ def analyze_text():
                                                     'original': o_word,
                                                     'correction': corr_str,
                                                     'type': 'spelling',
+                                                    'alternatives': [corr_str, o_word],
                                                 })
                                                 ci = temp_ci
                                             else:

src/css/components.css

@@ -486,30 +486,74 @@
 .popover-type--grammar { color: var(--color-warning); }
 .popover-type--punctuation { color: var(--color-success); }
 
-.popover-correction {
-  font-size: var(--font-size-h3);
+.popover-original-word {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-sm);
+  text-align: right;
+}
+
+.popover-original-word .popover-label {
   font-weight: var(--font-weight-bold);
+}
+
+#tooltip-original {
+  text-decoration: line-through;
+  color: var(--color-error);
+}
+
+.popover-alternatives {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   margin-bottom: var(--spacing-sm);
-  text-align: center;
-  color: var(--color-text-primary);
 }
 
-.popover-apply {
+.popover-alt-btn {
   width: 100%;
-  padding: var(--spacing-sm);
-  border: none;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  text-align: right;
+  transition: all var(--transition-base);
+  min-height: 40px;
+}
+
+.popover-alt-btn:hover {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-primary);
+  transform: translateX(-2px);
+}
+
+.popover-alt-main {
   background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   color: var(--color-text-inverse);
+  border-color: transparent;
   font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  font-family: inherit;
-  min-height: 44px;
-  transition: opacity var(--transition-base);
 }
 
-.popover-apply:hover {
+.popover-alt-main:hover {
   opacity: 0.92;
+  transform: translateX(-2px);
+  border-color: transparent;
+}
+
+.popover-alt-keep {
+  background: transparent;
+  border-style: dashed;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.popover-alt-keep:hover {
+  color: var(--color-text-primary);
+  border-color: var(--color-text-secondary);
 }
 
 .popover-hint {
@@ -519,6 +563,54 @@
   margin-top: var(--spacing-sm);
 }
 
+/* ── Alt chips in suggestion cards ── */
+.suggestion-card-alts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.alt-chip {
+  padding: 4px 10px;
+  border-radius: 100px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-label);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all var(--transition-base);
+}
+
+.alt-chip:hover {
+  border-color: var(--color-primary);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.alt-chip--main {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  color: var(--color-text-inverse);
+  border-color: transparent;
+  font-weight: var(--font-weight-bold);
+}
+
+.alt-chip--main:hover {
+  opacity: 0.9;
+  border-color: transparent;
+}
+
+.alt-chip--keep {
+  border-style: dashed;
+  color: var(--color-text-muted);
+  font-size: 0.7rem;
+}
+
+.alt-chip--keep:hover {
+  color: var(--color-text-primary);
+}
+
 /* ── Suggestion cards ── */
 .suggestion-card {
   padding: var(--spacing-md);

src/index.html

@@ -490,9 +490,9 @@
           <p id="editor-hint" class="sr-only">اكتب نصاً عربياً. ستظهر الاقتراحات تلقائياً.</p>
           <div id="editor-tooltip" class="suggestion-popover" role="dialog" aria-label="اقتراح تصحيح">
            <div id="tooltip-type" class="popover-type">خطأ</div>
-           <div id="tooltip-suggestion" class="popover-correction"></div>
-           <button class="popover-apply" onclick="applyCorrection()" type="button">تطبيق التصحيح</button>
-           <p class="popover-hint">Enter للتطبيق · Escape للإغلاق</p>
+           <div class="popover-original-word"><span class="popover-label">الكلمة:</span> <span id="tooltip-original"></span></div>
+           <div id="tooltip-alternatives" class="popover-alternatives"></div>
+           <p class="popover-hint">اختر التصحيح المناسب · Escape للإغلاق</p>
           </div>
          </div>
          <div id="summarize-area" class="summarize-panel is-hidden">

src/js/editor.js

@@ -214,7 +214,8 @@ function showTooltip(element) {
   if (!tooltip) return;
 
   const typeEl = document.getElementById('tooltip-type');
-  const suggestionEl = document.getElementById('tooltip-suggestion');
+  const originalEl = document.getElementById('tooltip-original');
+  const alternativesEl = document.getElementById('tooltip-alternatives');
 
   const typeMap = {
     spelling: 'خطأ إملائي',
@@ -227,8 +228,36 @@ function showTooltip(element) {
     typeEl.className = `popover-type popover-type--${suggestion.type}`;
   }
 
-  if (suggestionEl) {
-    suggestionEl.textContent = suggestion.correction;
+  if (originalEl) {
+    originalEl.textContent = suggestion.original;
+  }
+
+  // Render alternatives
+  if (alternativesEl) {
+    const alts = suggestion.alternatives || [suggestion.correction, suggestion.original];
+    let html = '';
+    alts.forEach((alt, i) => {
+      const isKeep = alt === suggestion.original;
+      const isMain = i === 0;
+      const btnClass = isKeep ? 'popover-alt-btn popover-alt-keep' : (isMain ? 'popover-alt-btn popover-alt-main' : 'popover-alt-btn');
+      const label = isKeep ? `${escapeHtml(alt)} ✓ إبقاء` : escapeHtml(alt);
+      html += `<button class="${btnClass}" data-alt-correction="${escapeHtml(alt)}" type="button">${label}</button>`;
+    });
+    alternativesEl.innerHTML = html;
+
+    // Bind click events
+    alternativesEl.querySelectorAll('.popover-alt-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const correctionText = btn.dataset.altCorrection;
+        if (correctionText === suggestion.original) {
+          // "Keep as-is" — just dismiss the suggestion
+          dismissSuggestion(suggestion);
+        } else {
+          // Apply this alternative correction
+          applyAlternativeCorrection(suggestion, correctionText);
+        }
+      });
+    });
   }
 
   const rect = element.getBoundingClientRect();
@@ -275,6 +304,40 @@ function applyCorrection() {
   applySuggestionAtOffsets(window.currentApplySuggestion);
 }
 
+function applyAlternativeCorrection(suggestion, correctionText) {
+  const text = getEditorText();
+  const before = text.substring(0, suggestion.start);
+  const after = text.substring(suggestion.end);
+  const newText = before + correctionText + after;
+  setEditorHTML(escapeHtml(newText));
+  hideTooltip();
+  analyzeTextDelayed();
+}
+
+function dismissSuggestion(suggestion) {
+  // Remove this suggestion from the list (keep the word as-is)
+  if (window.currentSuggestions) {
+    window.currentSuggestions = window.currentSuggestions.filter(
+      s => !(s.start === suggestion.start && s.end === suggestion.end)
+    );
+    // Re-render without this suggestion
+    const text = getEditorText();
+    const highlightedHtml = render({
+      text: text,
+      suggestions: window.currentSuggestions
+    });
+    setEditorHTML(highlightedHtml);
+    
+    const spellingCount = window.currentSuggestions.filter(s => s.type === 'spelling').length;
+    const grammarCount = window.currentSuggestions.filter(s => s.type === 'grammar').length;
+    const punctuationCount = window.currentSuggestions.filter(s => s.type === 'punctuation').length;
+    updateSuggestionCounts(spellingCount, grammarCount, punctuationCount);
+    updateWritingScore(spellingCount, grammarCount, punctuationCount);
+    updateSuggestionsList(window.currentSuggestions);
+  }
+  hideTooltip();
+}
+
 function applySuggestionByIndex(index) {
   const suggestions = window.currentSuggestions || [];
   const suggestion = suggestions[index];

src/js/ui.js

@@ -62,18 +62,27 @@ function updateWritingScore(spelling, grammar, punctuation) {
 function buildSuggestionCardHTML(suggestion, index) {
   const badgeClass = `badge-${suggestion.type}`;
   const label = TYPE_LABELS[suggestion.type] || suggestion.type;
+  const alts = suggestion.alternatives || [suggestion.correction, suggestion.original];
+
+  let altsHTML = '';
+  alts.forEach((alt, i) => {
+    const isKeep = alt === suggestion.original;
+    const isMain = i === 0;
+    const cls = isKeep ? 'alt-chip alt-chip--keep' : (isMain ? 'alt-chip alt-chip--main' : 'alt-chip');
+    const chipLabel = isKeep ? `${escapeHtml(alt)} ✓` : escapeHtml(alt);
+    altsHTML += `<button class="${cls}" data-card-alt="${escapeHtml(alt)}" data-card-index="${index}" type="button">${chipLabel}</button>`;
+  });
 
   return `
     <div class="suggestion-card" role="listitem" tabindex="0"
       data-suggestion-index="${index}"
       aria-label="${label}: ${suggestion.original} إلى ${suggestion.correction}">
-      <button class="suggestion-card-apply" data-apply-index="${index}" aria-label="تطبيق التصحيح">✓</button>
       <span class="suggestion-card-badge ${badgeClass}">${label}</span>
       <div class="suggestion-card-change">
         <span class="suggestion-card-original">${escapeHtml(suggestion.original)}</span>
         <span class="suggestion-card-arrow">←</span>
-        <span class="suggestion-card-fix">${escapeHtml(suggestion.correction)}</span>
       </div>
+      <div class="suggestion-card-alts">${altsHTML}</div>
     </div>`;
 }
 
@@ -121,7 +130,7 @@ function updateSuggestionsList(suggestions) {
 function bindSuggestionCardEvents(container) {
   container.querySelectorAll('.suggestion-card').forEach((card) => {
     card.addEventListener('click', (e) => {
-      if (e.target.closest('.suggestion-card-apply')) return;
+      if (e.target.closest('.alt-chip') || e.target.closest('.suggestion-card-apply')) return;
       const idx = parseInt(card.dataset.suggestionIndex, 10);
       scrollToSuggestion(idx);
       focusSuggestionInEditor(idx);
@@ -135,6 +144,24 @@ function bindSuggestionCardEvents(container) {
     });
   });
 
+  // Alt chip clicks
+  container.querySelectorAll('.alt-chip').forEach((chip) => {
+    chip.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const idx = parseInt(chip.dataset.cardIndex, 10);
+      const altText = chip.dataset.cardAlt;
+      const suggestions = window.currentSuggestions || [];
+      const suggestion = suggestions[idx];
+      if (!suggestion) return;
+
+      if (altText === suggestion.original) {
+        dismissSuggestion(suggestion);
+      } else {
+        applyAlternativeCorrection(suggestion, altText);
+      }
+    });
+  });
+
   container.querySelectorAll('.suggestion-card-apply').forEach((btn) => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation();