feat(extension): update icons, fix logo in ui, and improve content script positioning/observers

extension/_locales/ar/messages.json

@@ -8,19 +8,19 @@
     "description": "Extension description shown in Chrome Web Store"
   },
   "contextMenuCorrect": {
-    "message": "تصحيح مع بيان",
+    "message": "تصحيح النص مع بيان",
     "description": "Context menu item for correcting selected text"
   },
   "contextMenuSummarize": {
-    "message": "تلخيص مع بيان",
+    "message": "تلخيص النص مع بيان",
     "description": "Context menu item for summarizing selected text"
   },
   "contextMenuDialect": {
-    "message": "تحويل اللهجة إلى الفصحى مع بيان",
+    "message": "تحويل اللهجة إلى العربية الفصحى مع بيان",
     "description": "Context menu: dialect→MSA"
   },
   "contextMenuQuran": {
-    "message": "تدقيق الآية مع بيان",
+    "message": "تدقيق النص القرآني مع بيان",
     "description": "Context menu: Quran verify"
   }
 }

extension/background.js

@@ -51,22 +51,22 @@ function getStorage() {
 chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
     id: 'bayan-correct',
-    title: chrome.i18n.getMessage('contextMenuCorrect') || 'تصحيح مع بيان',
+    title: chrome.i18n.getMessage('contextMenuCorrect') || 'تصحيح النص مع بيان',
     contexts: ['selection'],
   });
   chrome.contextMenus.create({
     id: 'bayan-summarize',
-    title: chrome.i18n.getMessage('contextMenuSummarize') || 'تلخيص مع بيان',
+    title: chrome.i18n.getMessage('contextMenuSummarize') || 'تلخيص النص مع بيان',
     contexts: ['selection'],
   });
   chrome.contextMenus.create({
     id: 'bayan-dialect',
-    title: chrome.i18n.getMessage('contextMenuDialect') || 'تحويل اللهجة إلى الفصحى مع بيان',
+    title: chrome.i18n.getMessage('contextMenuDialect') || 'تحويل اللهجة إلى العربية الفصحى مع بيان',
     contexts: ['selection'],
   });
   chrome.contextMenus.create({
     id: 'bayan-quran',
-    title: chrome.i18n.getMessage('contextMenuQuran') || 'تدقيق الآية مع بيان',
+    title: chrome.i18n.getMessage('contextMenuQuran') || 'تدقيق النص القرآني مع بيان',
     contexts: ['selection'],
   });
 });

extension/content-inline.css

@@ -29,20 +29,20 @@
 }
 
 .bayan-il-punctuation {
-  background: rgba(59, 130, 246, 0.12) !important;
-  border-bottom: 2px solid #3b82f6 !important;
+  background: rgba(107, 201, 138, 0.14) !important;
+  border-bottom: 2px solid #6BC98A !important;
   border-radius: 2px !important;
   cursor: pointer !important;
   transition: background 150ms ease !important;
 }
 .bayan-il-punctuation:hover {
-  background: rgba(59, 130, 246, 0.25) !important;
+  background: rgba(107, 201, 138, 0.28) !important;
 }
 
 /* ── Floating Action Button (FAB) ── */
 
 .bayan-il-fab {
-  position: absolute;
+  position: fixed;
   z-index: 2147483646 !important;
   width: 34px;
   height: 34px;
@@ -176,8 +176,8 @@
   color: #f59e0b !important;
 }
 .bayan-il-badge-punctuation {
-  background: rgba(59, 130, 246, 0.15) !important;
-  color: #3b82f6 !important;
+  background: rgba(107, 201, 138, 0.15) !important;
+  color: #6BC98A !important;
 }
 
 .bayan-il-tooltip-close {
@@ -278,3 +278,11 @@
   color: rgba(120, 120, 130, 0.75) !important;
   opacity: 0.9;
 }
+
+/* ── FAB dragging state ── */
+
+.bayan-il-fab--dragging {
+  cursor: grabbing !important;
+  opacity: 0.85 !important;
+  transition: none !important;
+}

extension/content-inline.js

@@ -76,7 +76,7 @@
   const AC_MIN_CONTEXT = 3;
 
   // ══════════════════════════════════════════════════════════
-  // 1. DETECTION
+  // 1. DETECTION — universal editable field finder
   // ══════════════════════════════════════════════════════════
 
   function isEditableField(el) {
@@ -87,8 +87,8 @@
       const type = (el.type || '').toLowerCase();
       return ['text', 'search', 'url', ''].includes(type);
     }
-    // Contenteditable: allow on non-protected sites
     if (el.isContentEditable && !IS_PROTECTED) return true;
+    if (!IS_PROTECTED && (el.getAttribute('role') === 'textbox' || el.getAttribute('aria-multiline') === 'true')) return true;
     return false;
   }
 
@@ -106,30 +106,29 @@
   function onFieldInput(e) {
     if (paused || !activeField) return;
 
-    // Only a genuine user keystroke (a trusted `input` event) clears
-    // suppression and re-enables analysis. Our own write-back dispatches an
-    // untrusted event (isTrusted === false), and internal re-runs pass no
-    // 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);
 
-    // Ghost-text autocomplete (textarea/input only) runs independently of
-    // analysis. Kept active even when suppressed (separate, opt-in feature).
     scheduleGhost();
 
     if (analysisSuppressed) {
-      // Model output (summarize/dialect/quran) was just written — skip the
-      // correction pipeline and show the clean badge, not the spinner.
       clearHighlights();
       updateBadge(0);
       return;
     }
 
+    // Immediately clear stale highlights when text changes — the old overlay
+    // was rendered for a different string and its offsets are invalid now.
+    if (text !== lastAnalyzedText && overlayContainer) {
+      clearHighlights();
+    }
+
     if (!BayanController.hasArabic(text)) {
+      suggestions = [];
+      lastAnalyzedText = '';
       clearHighlights();
       updateBadge(0);
       return;
@@ -241,8 +240,8 @@
 
       ghostEl = document.createElement('div');
       ghostEl.className = 'bayan-il-ghost';
-      ghostEl.style.cssText = `position:absolute;top:${rect.top + window.scrollY}px;`
-        + `left:${rect.left + window.scrollX}px;width:${rect.width}px;height:${rect.height}px;`
+      ghostEl.style.cssText = `position:fixed;top:${rect.top}px;`
+        + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
         + `direction:${cs.direction};text-align:${cs.textAlign};overflow:hidden;`
@@ -329,14 +328,17 @@
     clearHighlights();
     if (!field || !suggs?.length) return;
 
+    const currentText = getFieldText(field);
+    if (currentText !== originalText) return;
+
     try {
       const rect = field.getBoundingClientRect();
       const cs = window.getComputedStyle(field);
 
       overlayContainer = document.createElement('div');
       overlayContainer.className = 'bayan-il-overlay';
-      overlayContainer.style.cssText = `position:absolute;top:${rect.top + window.scrollY}px;`
-        + `left:${rect.left + window.scrollX}px;width:${rect.width}px;height:${rect.height}px;`
+      overlayContainer.style.cssText = `position:fixed;top:${rect.top}px;`
+        + `left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`
         + `font-family:${cs.fontFamily};font-size:${cs.fontSize};line-height:${cs.lineHeight};`
         + `padding:${cs.padding};border:${cs.border};border-color:transparent;`
         + `direction:${cs.direction};text-align:${cs.textAlign};overflow:hidden;`
@@ -533,9 +535,32 @@
   // UI: FAB + Badge
   // ══════════════════════════════════════════════════════════
 
+  // ── Draggable FAB state ──
+  let fabDragging = false;
+  let fabDragStartX = 0;
+  let fabDragStartY = 0;
+  let fabDragOffsetX = 0;
+  let fabDragOffsetY = 0;
+  let fabCustomPos = null; // {x, y} when user has dragged to a custom position
+
+  function loadFabPosition() {
+    try {
+      const saved = localStorage.getItem('bayan_fab_pos');
+      if (saved) fabCustomPos = JSON.parse(saved);
+    } catch {}
+  }
+
+  function saveFabPosition() {
+    try {
+      if (fabCustomPos) localStorage.setItem('bayan_fab_pos', JSON.stringify(fabCustomPos));
+    } catch {}
+  }
+
   function createFloatingBtn() {
     if (floatingBtn) return;
 
+    loadFabPosition();
+
     floatingBtn = document.createElement('div');
     floatingBtn.className = 'bayan-il-fab';
     safeHTML(floatingBtn, `
@@ -556,7 +581,47 @@
     document.body.appendChild(floatingBtn);
     badgeCount = floatingBtn.querySelector('.bayan-il-badge');
 
-    floatingBtn.addEventListener('click', (e) => {
+    // ── Drag handling ──
+    floatingBtn.addEventListener('pointerdown', (e) => {
+      fabDragging = false;
+      fabDragStartX = e.clientX;
+      fabDragStartY = e.clientY;
+      const rect = floatingBtn.getBoundingClientRect();
+      fabDragOffsetX = e.clientX - rect.left;
+      fabDragOffsetY = e.clientY - rect.top;
+      floatingBtn.setPointerCapture(e.pointerId);
+    });
+
+    floatingBtn.addEventListener('pointermove', (e) => {
+      if (!floatingBtn.hasPointerCapture(e.pointerId)) return;
+      const dx = e.clientX - fabDragStartX;
+      const dy = e.clientY - fabDragStartY;
+      if (!fabDragging && (Math.abs(dx) > 4 || Math.abs(dy) > 4)) {
+        fabDragging = true;
+        floatingBtn.classList.add('bayan-il-fab--dragging');
+      }
+      if (fabDragging) {
+        const x = Math.max(0, Math.min(window.innerWidth - 40, e.clientX - fabDragOffsetX));
+        const y = Math.max(0, Math.min(window.innerHeight - 40, e.clientY - fabDragOffsetY));
+        floatingBtn.style.position = 'fixed';
+        floatingBtn.style.left = `${x}px`;
+        floatingBtn.style.top = `${y}px`;
+      }
+    });
+
+    floatingBtn.addEventListener('pointerup', (e) => {
+      floatingBtn.releasePointerCapture(e.pointerId);
+      if (fabDragging) {
+        fabDragging = false;
+        floatingBtn.classList.remove('bayan-il-fab--dragging');
+        fabCustomPos = {
+          x: parseInt(floatingBtn.style.left, 10),
+          y: parseInt(floatingBtn.style.top, 10),
+        };
+        saveFabPosition();
+        return;
+      }
+      // Click (no drag)
       e.stopPropagation();
       if (paused) {
         paused = false;
@@ -566,11 +631,7 @@
       }
       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';
           chrome.runtime.sendMessage({ type: 'OPEN_SIDEPANEL', text: lastAnalyzedText });
         } catch {}
@@ -580,9 +641,16 @@
 
   function positionFab(field) {
     if (!floatingBtn || !field) return;
-    const rect = field.getBoundingClientRect();
-    floatingBtn.style.top = `${Math.max(4, rect.top + window.scrollY + 6)}px`;
-    floatingBtn.style.left = `${Math.max(4, rect.left + window.scrollX + 6)}px`;
+    if (fabCustomPos) {
+      floatingBtn.style.position = 'fixed';
+      floatingBtn.style.left = `${fabCustomPos.x}px`;
+      floatingBtn.style.top = `${fabCustomPos.y}px`;
+    } else {
+      const rect = field.getBoundingClientRect();
+      floatingBtn.style.position = 'fixed';
+      floatingBtn.style.top = `${Math.max(4, rect.top + 6)}px`;
+      floatingBtn.style.left = `${Math.max(4, rect.left + 6)}px`;
+    }
     floatingBtn.classList.add('bayan-il-fab--visible');
   }
 
@@ -933,13 +1001,13 @@
     if (activeField && floatingBtn) positionFab(activeField);
     if (overlayContainer && activeField) {
       const rect = activeField.getBoundingClientRect();
-      overlayContainer.style.top = `${rect.top + window.scrollY}px`;
-      overlayContainer.style.left = `${rect.left + window.scrollX}px`;
+      overlayContainer.style.top = `${rect.top}px`;
+      overlayContainer.style.left = `${rect.left}px`;
     }
     if (ghostEl && activeField) {
       const rect = activeField.getBoundingClientRect();
-      ghostEl.style.top = `${rect.top + window.scrollY}px`;
-      ghostEl.style.left = `${rect.left + window.scrollX}px`;
+      ghostEl.style.top = `${rect.top}px`;
+      ghostEl.style.left = `${rect.left}px`;
     }
   }, { passive: true });
 
@@ -953,9 +1021,28 @@
     }
   }, { passive: true });
 
-  // ── MutationObserver ──
-  observer = new MutationObserver(() => {
+  // ── MutationObserver — detect removed fields AND newly added editable areas ──
+  observer = new MutationObserver((mutations) => {
     if (activeField && !document.body.contains(activeField)) detachField();
+    for (const m of mutations) {
+      if (m.type !== 'childList') continue;
+      for (const node of m.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (isEditableField(node) && document.activeElement === node) {
+          attachField(node);
+          return;
+        }
+        const nested = node.querySelectorAll?.('textarea, input, [contenteditable="true"], [role="textbox"]');
+        if (nested) {
+          for (const el of nested) {
+            if (isEditableField(el) && document.activeElement === el) {
+              attachField(el);
+              return;
+            }
+          }
+        }
+      }
+    }
   });
   observer.observe(document.body, { childList: true, subtree: true });
 

extension/manifest.json

@@ -8,6 +8,7 @@
 
   "icons": {
     "16": "assets/icons/icon16.png",
+    "32": "assets/icons/icon32.png",
     "48": "assets/icons/icon48.png",
     "128": "assets/icons/icon128.png"
   },
@@ -16,6 +17,7 @@
     "default_popup": "popup.html",
     "default_icon": {
       "16": "assets/icons/icon16.png",
+      "32": "assets/icons/icon32.png",
       "48": "assets/icons/icon48.png"
     },
     "default_title": "__MSG_extName__"

extension/popup.html

@@ -12,17 +12,7 @@
   <!-- ══════════════════════════════════════════════ -->
   <header class="bayan-header">
     <div class="bayan-header-brand">
-      <svg class="bayan-logo" width="28" height="28" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="50" cy="50" r="46" fill="url(#logoGrad)" />
-        <path d="M30 55 Q35 35, 50 30 Q65 35, 70 55 Q65 65, 50 70 Q35 65, 30 55Z" fill="rgba(255,255,255,0.9)" />
-        <circle cx="50" cy="42" r="4" fill="url(#logoGrad)" />
-        <defs>
-          <linearGradient id="logoGrad" x1="0" y1="0" x2="100" y2="100">
-            <stop offset="0%" stop-color="#6366f1"/>
-            <stop offset="100%" stop-color="#8b5cf6"/>
-          </linearGradient>
-        </defs>
-      </svg>
+      <img src="assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;">
       <span class="bayan-header-title">بيان</span>
     </div>
     <div class="bayan-header-status" id="status-indicator">
@@ -49,7 +39,7 @@
     </button>
     <button class="bayan-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran">
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
-      قرآن
+      تدقيق النص القرآني
     </button>
     <button class="bayan-tab" role="tab" aria-selected="false" data-tab="autocomplete" id="tab-autocomplete">
       <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>

extension/sidepanel/sidepanel.html

@@ -12,17 +12,7 @@
   <!-- ══════════════════════════════════════════════ -->
   <header class="sp-header">
     <div class="sp-header-brand">
-      <svg class="sp-logo" width="24" height="24" viewBox="0 0 100 100" fill="none">
-        <circle cx="50" cy="50" r="46" fill="url(#spGrad)" />
-        <path d="M30 55 Q35 35, 50 30 Q65 35, 70 55 Q65 65, 50 70 Q35 65, 30 55Z" fill="rgba(255,255,255,0.9)" />
-        <circle cx="50" cy="42" r="4" fill="url(#spGrad)" />
-        <defs>
-          <linearGradient id="spGrad" x1="0" y1="0" x2="100" y2="100">
-            <stop offset="0%" stop-color="#6366f1"/>
-            <stop offset="100%" stop-color="#8b5cf6"/>
-          </linearGradient>
-        </defs>
-      </svg>
+      <img src="../assets/icons/icon48.png" alt="بيان" width="24" height="24" style="border-radius:5px;">
       <span class="sp-header-title">بيان</span>
     </div>
     <div class="sp-header-status" id="status-indicator">
@@ -49,7 +39,7 @@
     </button>
     <button class="sp-tab" role="tab" aria-selected="false" data-tab="quran" id="tab-quran">
       <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
-      قرآن
+      تدقيق النص القرآني
     </button>
     <button class="sp-tab" role="tab" aria-selected="false" data-tab="autocomplete" id="tab-autocomplete">
       <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>

src/index.html

@@ -7,7 +7,12 @@
   <meta name="supabase-anon-key" content="">
   <title>بيان - مساعد الكتابة العربية الذكي</title>
    <meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي وتدقيق القرآن الكريم وتحويل اللهجات — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
-   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+   <meta property="og:image" content="/LOGOS/3.png">
+   <meta property="og:title" content="بيان — مساعدك الذكي للكتابة بالعربية">
+   <meta property="og:description" content="تدقيق إملائي ونحوي وترقيم، تلخيص ذكي، إكمال تلقائي، تدقيق القرآن الكريم، وتحويل اللهجات">
+   <meta name="twitter:card" content="summary_large_image">
+   <meta name="twitter:image" content="/LOGOS/3.png">
+   <link rel="icon" type="image/png" href="/LOGOS/1.png">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -59,7 +64,7 @@
        <button id="mobile-menu-btn" class="mobile-menu-btn md:hidden" aria-label="فتح القائمة" aria-expanded="false" aria-controls="mobile-drawer">
         <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
-       <button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><svg width="22" height="22" fill="none" stroke="url(#navGrad)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="navGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
+       <button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><img src="/LOGOS/2.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
       </div>
       <div class="hidden md:flex items-center gap-8">
        <button onclick="showPage('home')" class="nav-link active text-base font-medium" data-page="home">الرئيسية</button>
@@ -1154,7 +1159,7 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12" dir="rtl">
        <div>
         <div class="flex items-center gap-3 mb-4">
-         <svg width="24" height="24" fill="none" stroke="url(#grad1)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
+         <img src="/LOGOS/2.png" alt="بيان" width="28" height="28" style="flex-shrink:0;"><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
         </div>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، إكمال تلقائي، تدقيق القرآن، وتحويل اللهجات.</p>
        </div>

src/js/editor.js

@@ -82,13 +82,13 @@ function initEditor() {
   // Debounced undo push — saves state after 500ms of no typing
   let _undoInputTimer = null;
   editor.addEventListener('input', () => {
-    // Pipeline Hardening v3.3: Skip re-analysis when programmatically applying suggestions
     if (_isApplyingSuggestion) return;
     _lastInputTime = Date.now();
+    clearOverlays(editor);
+    window.currentSuggestions = [];
     updateEditorStats();
     updatePlaceholder();
     analyzeTextDelayed();
-    // Push undo state after typing pauses
     clearTimeout(_undoInputTimer);
     _undoInputTimer = setTimeout(pushUndoState, 500);
     try {