From a94cd307ba4f854fa25fc722b6058e256f9b851c Mon Sep 17 00:00:00 2001
From: Barack Sokullu <esokullu@gmail.com>
Date: Wed, 26 Aug 2026 23:58:44 +0300
Subject: [PATCH 1/2] Refine selected-text chat shortcut

---
 src/chrome/src/content/selection-shortcut.js  | 30 +++++++-----
 src/chrome/src/selection-shortcut-i18n.js     | 46 +++++++++----------
 src/firefox/src/content/selection-shortcut.js | 30 +++++++-----
 src/firefox/src/selection-shortcut-i18n.js    | 46 +++++++++----------
 test/fixtures/run.mjs                         |  9 ++++
 test/run.js                                   |  8 +++-
 6 files changed, 97 insertions(+), 72 deletions(-)

diff --git a/src/chrome/src/content/selection-shortcut.js b/src/chrome/src/content/selection-shortcut.js
index e27c63483..e67685088 100644
--- a/src/chrome/src/content/selection-shortcut.js
+++ b/src/chrome/src/content/selection-shortcut.js
@@ -161,13 +161,13 @@ host.lang = localization.locale;
     if (ancestor?.closest?.('input, textarea')) return null;
 
     const rects = Array.from(range.getClientRects()).filter((rect) => rect.width > 0 && rect.height > 0);
-    const rect = rects.at(-1) || range.getBoundingClientRect();
+    const visibleRects = collectVisibleHighlightRects(rects);
+    const rect = visibleRects[0] || rects[0] || range.getBoundingClientRect();
     if (!rect || (!rect.width && !rect.height)) return null;
-    const highlightRects = collectVisibleHighlightRects(rects);
     return {
       text,
       rect: serializeRect(rect),
-      rects: (highlightRects.length ? highlightRects : [rect]).map(serializeRect),
+      rects: (visibleRects.length ? visibleRects : [rect]).map(serializeRect),
     };
   }
 
@@ -194,12 +194,12 @@ host.lang = localization.locale;
         }
         .shortcut {
           position:fixed; width:${BUTTON_SIZE}px; height:${BUTTON_SIZE}px; display:grid;
-          place-items:center; padding:0; border:1px solid rgba(108,99,255,.34);
-          border-radius:14px; background:var(--bg); color:var(--accent);
-          box-shadow:0 10px 26px rgba(35,30,95,.22),0 2px 7px rgba(35,30,95,.12);
+          place-items:center; padding:0; border:1px solid rgba(23,23,34,.14);
+          border-radius:14px; background:#fff; color:#171722;
+          box-shadow:0 9px 20px rgba(23,23,34,.16),0 2px 5px rgba(23,23,34,.1);
           cursor:pointer; pointer-events:auto; transition:transform 130ms ease,box-shadow 130ms ease;
         }
-        .shortcut:hover { transform:translateY(-1px) scale(1.03); box-shadow:0 13px 30px rgba(35,30,95,.27),0 3px 8px rgba(35,30,95,.14); }
+        .shortcut:hover { transform:translateY(-1px) scale(1.03); box-shadow:0 12px 25px rgba(23,23,34,.2),0 3px 7px rgba(23,23,34,.12); }
         .shortcut-icon {
           display:block; font:700 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
           transform:translateY(-1px);
@@ -256,7 +256,8 @@ host.lang = localization.locale;
           width:auto; margin-left:auto; padding:5px 8px;
           color:var(--muted); font-size:12px; line-height:1.25;
         }
-        .shortcut:focus-visible,.action:focus-visible,.hide:focus-visible,.send:focus-visible,textarea:focus-visible,.context-option input:focus-visible {
+        .shortcut:focus-visible { outline:3px solid rgba(23,23,34,.24); outline-offset:2px; }
+        .action:focus-visible,.hide:focus-visible,.send:focus-visible,textarea:focus-visible,.context-option input:focus-visible {
           outline:3px solid rgba(108,99,255,.34); outline-offset:2px;
         }
         .toast {
@@ -275,10 +276,10 @@ host.lang = localization.locale;
         @media (prefers-reduced-motion:reduce) { .shortcut { transition:none; } }
       </style>
       <div class="selection-highlights" aria-hidden="true"></div>
-      <button class="shortcut" type="button" aria-label="Ask WebBrain about selected text" title="Ask WebBrain" hidden>
+      <button class="shortcut" type="button" aria-label="Add to chat" title="Add to chat" hidden>
         <span class="shortcut-icon" aria-hidden="true">?</span>
       </button>
-      <div class="popup" role="dialog" aria-label="Ask WebBrain about selected text" hidden>
+      <div class="popup" role="dialog" aria-label="Add to chat" hidden>
         <div class="main-view">
           <div class="actions">
             <button class="action" type="button" data-action="summarize">
@@ -377,8 +378,8 @@ host.lang = localization.locale;
     if (!snapshot || !shortcut) return;
     const rect = snapshot.rect;
     let left = rect.left + rect.width / 2 - BUTTON_SIZE / 2;
-    let top = rect.bottom + 8;
-    if (top + BUTTON_SIZE > window.innerHeight - GAP) top = rect.top - BUTTON_SIZE - 8;
+    let top = rect.top - BUTTON_SIZE - GAP;
+    if (top < GAP) top = rect.bottom + GAP;
     left = clamp(left, GAP, Math.max(GAP, window.innerWidth - BUTTON_SIZE - GAP));
     top = clamp(top, GAP, Math.max(GAP, window.innerHeight - BUTTON_SIZE - GAP));
     shortcut.style.left = `${Math.round(left)}px`;
@@ -605,6 +606,11 @@ host.lang = localization.locale;
       highlightRectCount: highlightLayer?.childElementCount || 0,
       toastVisible: !!toast && !toast.hidden,
       shortcutRect: shortcut && !shortcut.hidden ? shortcut.getBoundingClientRect().toJSON() : null,
+      selectionRect: snapshot?.rect || null,
+      shortcutLabel: shortcut?.getAttribute('aria-label') || '',
+      shortcutBackground: shortcut ? getComputedStyle(shortcut).backgroundColor : '',
+      shortcutColor: shortcut ? getComputedStyle(shortcut).color : '',
+      shortcutBoxShadow: shortcut ? getComputedStyle(shortcut).boxShadow : '',
       summarizeRect: popup && !popup.hidden
         ? shadow.querySelector('[data-action="summarize"]')?.getBoundingClientRect().toJSON() || null
         : null,
diff --git a/src/chrome/src/selection-shortcut-i18n.js b/src/chrome/src/selection-shortcut-i18n.js
index 0a5922711..1ab11a2db 100644
--- a/src/chrome/src/selection-shortcut-i18n.js
+++ b/src/chrome/src/selection-shortcut-i18n.js
@@ -5,7 +5,7 @@
 
 const STRINGS = Object.freeze({
   en: {
-    askSelection: 'Ask WebBrain about this',
+    askSelection: 'Add to chat',
     openChat: 'Open WebBrain to chat',
     summarize: 'Summarize',
     explain: 'Explain',
@@ -23,7 +23,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Could not send to WebBrain. Try the right-click menu instead.',
   },
   zh: {
-    askSelection: '向 WebBrain 询问此内容',
+    askSelection: '添加到聊天',
     openChat: '打开 WebBrain 进行对话',
     summarize: '总结',
     explain: '解释',
@@ -41,7 +41,7 @@ const STRINGS = Object.freeze({
     sendFailed: '无法发送至 WebBrain。请尝试使用右键菜单。',
   },
   ar: {
-    askSelection: 'اسأل WebBrain عن هذا',
+    askSelection: 'إضافة إلى الدردشة',
     openChat: 'افتح WebBrain للدردشة',
     summarize: 'تلخيص',
     explain: 'شرح',
@@ -59,7 +59,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'تعذر الإرسال إلى WebBrain. جرّب قائمة النقر بزر الماوس الأيمن.',
   },
   bn: {
-    askSelection: 'এটি সম্পর্কে WebBrain-কে জিজ্ঞাসা করুন',
+    askSelection: 'চ্যাটে যোগ করুন',
     openChat: 'চ্যাট করতে WebBrain খুলুন',
     summarize: 'সারসংক্ষেপ করুন',
     explain: 'ব্যাখ্যা করুন',
@@ -77,7 +77,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain-এ পাঠানো যায়নি। ডান-ক্লিক মেনু ব্যবহার করে দেখুন।',
   },
   de: {
-    askSelection: 'WebBrain hierzu fragen',
+    askSelection: 'Zum Chat hinzufügen',
     openChat: 'WebBrain zum Chatten öffnen',
     summarize: 'Zusammenfassen',
     explain: 'Erklären',
@@ -95,7 +95,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Senden an WebBrain fehlgeschlagen. Versuche stattdessen das Kontextmenü.',
   },
   es: {
-    askSelection: 'Preguntar a WebBrain sobre esto',
+    askSelection: 'Añadir al chat',
     openChat: 'Abrir WebBrain para chatear',
     summarize: 'Resumir',
     explain: 'Explicar',
@@ -113,7 +113,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'No se pudo enviar a WebBrain. Prueba el menú contextual.',
   },
   fa: {
-    askSelection: 'درباره این از WebBrain بپرسید',
+    askSelection: 'افزودن به چت',
     openChat: 'WebBrain را برای گفتگو باز کنید',
     summarize: 'خلاصه‌سازی',
     explain: 'توضیح',
@@ -131,7 +131,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'ارسال به WebBrain ممکن نشد. از منوی کلیک راست استفاده کنید.',
   },
   fr: {
-    askSelection: 'Interroger WebBrain à ce sujet',
+    askSelection: 'Ajouter au chat',
     openChat: 'Ouvrir WebBrain pour discuter',
     summarize: 'Résumer',
     explain: 'Expliquer',
@@ -149,7 +149,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Impossible d’envoyer à WebBrain. Essayez le menu contextuel.',
   },
   he: {
-    askSelection: 'לשאול את WebBrain על זה',
+    askSelection: 'הוספה לצ׳אט',
     openChat: 'פתיחת WebBrain לצ׳אט',
     summarize: 'סיכום',
     explain: 'הסבר',
@@ -167,7 +167,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'לא ניתן לשלוח אל WebBrain. נסו את תפריט הלחיצה הימנית.',
   },
   hi: {
-    askSelection: 'इसके बारे में WebBrain से पूछें',
+    askSelection: 'चैट में जोड़ें',
     openChat: 'चैट के लिए WebBrain खोलें',
     summarize: 'सारांश बनाएँ',
     explain: 'समझाएँ',
@@ -185,7 +185,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain को भेजा नहीं जा सका। राइट-क्लिक मेनू आज़माएँ।',
   },
   id: {
-    askSelection: 'Tanyakan ini kepada WebBrain',
+    askSelection: 'Tambahkan ke chat',
     openChat: 'Buka WebBrain untuk mengobrol',
     summarize: 'Ringkas',
     explain: 'Jelaskan',
@@ -203,7 +203,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Tidak dapat mengirim ke WebBrain. Coba menu klik kanan.',
   },
   ja: {
-    askSelection: 'この内容について WebBrain に質問',
+    askSelection: 'チャットに追加',
     openChat: 'WebBrain を開いてチャット',
     summarize: '要約',
     explain: '説明',
@@ -221,7 +221,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain に送信できませんでした。右クリックメニューをお試しください。',
   },
   ko: {
-    askSelection: '이 내용에 대해 WebBrain에 질문',
+    askSelection: '채팅에 추가',
     openChat: 'WebBrain을 열어 채팅',
     summarize: '요약',
     explain: '설명',
@@ -239,7 +239,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain으로 보낼 수 없습니다. 오른쪽 클릭 메뉴를 사용해 보세요.',
   },
   ms: {
-    askSelection: 'Tanya WebBrain tentang ini',
+    askSelection: 'Tambahkan pada sembang',
     openChat: 'Buka WebBrain untuk berbual',
     summarize: 'Ringkaskan',
     explain: 'Terangkan',
@@ -257,7 +257,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Tidak dapat menghantar ke WebBrain. Cuba menu klik kanan.',
   },
   nl: {
-    askSelection: 'WebBrain hierover vragen',
+    askSelection: 'Toevoegen aan chat',
     openChat: 'WebBrain openen om te chatten',
     summarize: 'Samenvatten',
     explain: 'Uitleggen',
@@ -275,7 +275,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Verzenden naar WebBrain is mislukt. Probeer het rechtermuisknopmenu.',
   },
   pl: {
-    askSelection: 'Zapytaj WebBrain o to',
+    askSelection: 'Dodaj do czatu',
     openChat: 'Otwórz WebBrain, aby porozmawiać',
     summarize: 'Podsumuj',
     explain: 'Wyjaśnij',
@@ -293,7 +293,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Nie udało się wysłać do WebBrain. Użyj menu pod prawym przyciskiem myszy.',
   },
   pt: {
-    askSelection: 'Perguntar ao WebBrain sobre isto',
+    askSelection: 'Adicionar ao chat',
     openChat: 'Abrir o WebBrain para conversar',
     summarize: 'Resumir',
     explain: 'Explicar',
@@ -311,7 +311,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Não foi possível enviar ao WebBrain. Tente o menu do botão direito.',
   },
   ru: {
-    askSelection: 'Спросить WebBrain об этом',
+    askSelection: 'Добавить в чат',
     openChat: 'Открыть WebBrain для чата',
     summarize: 'Кратко изложить',
     explain: 'Объяснить',
@@ -329,7 +329,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Не удалось отправить в WebBrain. Попробуйте контекстное меню.',
   },
   th: {
-    askSelection: 'ถาม WebBrain เกี่ยวกับสิ่งนี้',
+    askSelection: 'เพิ่มไปยังแชท',
     openChat: 'เปิด WebBrain เพื่อแชต',
     summarize: 'สรุป',
     explain: 'อธิบาย',
@@ -347,7 +347,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'ส่งไปยัง WebBrain ไม่ได้ โปรดลองใช้เมนูคลิกขวา',
   },
   tl: {
-    askSelection: 'Itanong ito sa WebBrain',
+    askSelection: 'Idagdag sa chat',
     openChat: 'Buksan ang WebBrain para makipag-chat',
     summarize: 'Ibuod',
     explain: 'Ipaliwanag',
@@ -365,7 +365,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Hindi maipadala sa WebBrain. Subukan ang right-click menu.',
   },
   tr: {
-    askSelection: 'Bunu WebBrain’e sor',
+    askSelection: 'Sohbete ekle',
     openChat: 'Sohbet için WebBrain’i aç',
     summarize: 'Özetle',
     explain: 'Açıkla',
@@ -383,7 +383,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain’e gönderilemedi. Sağ tık menüsünü deneyin.',
   },
   uk: {
-    askSelection: 'Запитати WebBrain про це',
+    askSelection: 'Додати до чату',
     openChat: 'Відкрити WebBrain для чату',
     summarize: 'Підсумувати',
     explain: 'Пояснити',
@@ -401,7 +401,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Не вдалося надіслати до WebBrain. Спробуйте контекстне меню.',
   },
   vi: {
-    askSelection: 'Hỏi WebBrain về nội dung này',
+    askSelection: 'Thêm vào cuộc trò chuyện',
     openChat: 'Mở WebBrain để trò chuyện',
     summarize: 'Tóm tắt',
     explain: 'Giải thích',
diff --git a/src/firefox/src/content/selection-shortcut.js b/src/firefox/src/content/selection-shortcut.js
index e27c63483..e67685088 100644
--- a/src/firefox/src/content/selection-shortcut.js
+++ b/src/firefox/src/content/selection-shortcut.js
@@ -161,13 +161,13 @@ host.lang = localization.locale;
     if (ancestor?.closest?.('input, textarea')) return null;
 
     const rects = Array.from(range.getClientRects()).filter((rect) => rect.width > 0 && rect.height > 0);
-    const rect = rects.at(-1) || range.getBoundingClientRect();
+    const visibleRects = collectVisibleHighlightRects(rects);
+    const rect = visibleRects[0] || rects[0] || range.getBoundingClientRect();
     if (!rect || (!rect.width && !rect.height)) return null;
-    const highlightRects = collectVisibleHighlightRects(rects);
     return {
       text,
       rect: serializeRect(rect),
-      rects: (highlightRects.length ? highlightRects : [rect]).map(serializeRect),
+      rects: (visibleRects.length ? visibleRects : [rect]).map(serializeRect),
     };
   }
 
@@ -194,12 +194,12 @@ host.lang = localization.locale;
         }
         .shortcut {
           position:fixed; width:${BUTTON_SIZE}px; height:${BUTTON_SIZE}px; display:grid;
-          place-items:center; padding:0; border:1px solid rgba(108,99,255,.34);
-          border-radius:14px; background:var(--bg); color:var(--accent);
-          box-shadow:0 10px 26px rgba(35,30,95,.22),0 2px 7px rgba(35,30,95,.12);
+          place-items:center; padding:0; border:1px solid rgba(23,23,34,.14);
+          border-radius:14px; background:#fff; color:#171722;
+          box-shadow:0 9px 20px rgba(23,23,34,.16),0 2px 5px rgba(23,23,34,.1);
           cursor:pointer; pointer-events:auto; transition:transform 130ms ease,box-shadow 130ms ease;
         }
-        .shortcut:hover { transform:translateY(-1px) scale(1.03); box-shadow:0 13px 30px rgba(35,30,95,.27),0 3px 8px rgba(35,30,95,.14); }
+        .shortcut:hover { transform:translateY(-1px) scale(1.03); box-shadow:0 12px 25px rgba(23,23,34,.2),0 3px 7px rgba(23,23,34,.12); }
         .shortcut-icon {
           display:block; font:700 25px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
           transform:translateY(-1px);
@@ -256,7 +256,8 @@ host.lang = localization.locale;
           width:auto; margin-left:auto; padding:5px 8px;
           color:var(--muted); font-size:12px; line-height:1.25;
         }
-        .shortcut:focus-visible,.action:focus-visible,.hide:focus-visible,.send:focus-visible,textarea:focus-visible,.context-option input:focus-visible {
+        .shortcut:focus-visible { outline:3px solid rgba(23,23,34,.24); outline-offset:2px; }
+        .action:focus-visible,.hide:focus-visible,.send:focus-visible,textarea:focus-visible,.context-option input:focus-visible {
           outline:3px solid rgba(108,99,255,.34); outline-offset:2px;
         }
         .toast {
@@ -275,10 +276,10 @@ host.lang = localization.locale;
         @media (prefers-reduced-motion:reduce) { .shortcut { transition:none; } }
       </style>
       <div class="selection-highlights" aria-hidden="true"></div>
-      <button class="shortcut" type="button" aria-label="Ask WebBrain about selected text" title="Ask WebBrain" hidden>
+      <button class="shortcut" type="button" aria-label="Add to chat" title="Add to chat" hidden>
         <span class="shortcut-icon" aria-hidden="true">?</span>
       </button>
-      <div class="popup" role="dialog" aria-label="Ask WebBrain about selected text" hidden>
+      <div class="popup" role="dialog" aria-label="Add to chat" hidden>
         <div class="main-view">
           <div class="actions">
             <button class="action" type="button" data-action="summarize">
@@ -377,8 +378,8 @@ host.lang = localization.locale;
     if (!snapshot || !shortcut) return;
     const rect = snapshot.rect;
     let left = rect.left + rect.width / 2 - BUTTON_SIZE / 2;
-    let top = rect.bottom + 8;
-    if (top + BUTTON_SIZE > window.innerHeight - GAP) top = rect.top - BUTTON_SIZE - 8;
+    let top = rect.top - BUTTON_SIZE - GAP;
+    if (top < GAP) top = rect.bottom + GAP;
     left = clamp(left, GAP, Math.max(GAP, window.innerWidth - BUTTON_SIZE - GAP));
     top = clamp(top, GAP, Math.max(GAP, window.innerHeight - BUTTON_SIZE - GAP));
     shortcut.style.left = `${Math.round(left)}px`;
@@ -605,6 +606,11 @@ host.lang = localization.locale;
       highlightRectCount: highlightLayer?.childElementCount || 0,
       toastVisible: !!toast && !toast.hidden,
       shortcutRect: shortcut && !shortcut.hidden ? shortcut.getBoundingClientRect().toJSON() : null,
+      selectionRect: snapshot?.rect || null,
+      shortcutLabel: shortcut?.getAttribute('aria-label') || '',
+      shortcutBackground: shortcut ? getComputedStyle(shortcut).backgroundColor : '',
+      shortcutColor: shortcut ? getComputedStyle(shortcut).color : '',
+      shortcutBoxShadow: shortcut ? getComputedStyle(shortcut).boxShadow : '',
       summarizeRect: popup && !popup.hidden
         ? shadow.querySelector('[data-action="summarize"]')?.getBoundingClientRect().toJSON() || null
         : null,
diff --git a/src/firefox/src/selection-shortcut-i18n.js b/src/firefox/src/selection-shortcut-i18n.js
index 0a5922711..1ab11a2db 100644
--- a/src/firefox/src/selection-shortcut-i18n.js
+++ b/src/firefox/src/selection-shortcut-i18n.js
@@ -5,7 +5,7 @@
 
 const STRINGS = Object.freeze({
   en: {
-    askSelection: 'Ask WebBrain about this',
+    askSelection: 'Add to chat',
     openChat: 'Open WebBrain to chat',
     summarize: 'Summarize',
     explain: 'Explain',
@@ -23,7 +23,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Could not send to WebBrain. Try the right-click menu instead.',
   },
   zh: {
-    askSelection: '向 WebBrain 询问此内容',
+    askSelection: '添加到聊天',
     openChat: '打开 WebBrain 进行对话',
     summarize: '总结',
     explain: '解释',
@@ -41,7 +41,7 @@ const STRINGS = Object.freeze({
     sendFailed: '无法发送至 WebBrain。请尝试使用右键菜单。',
   },
   ar: {
-    askSelection: 'اسأل WebBrain عن هذا',
+    askSelection: 'إضافة إلى الدردشة',
     openChat: 'افتح WebBrain للدردشة',
     summarize: 'تلخيص',
     explain: 'شرح',
@@ -59,7 +59,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'تعذر الإرسال إلى WebBrain. جرّب قائمة النقر بزر الماوس الأيمن.',
   },
   bn: {
-    askSelection: 'এটি সম্পর্কে WebBrain-কে জিজ্ঞাসা করুন',
+    askSelection: 'চ্যাটে যোগ করুন',
     openChat: 'চ্যাট করতে WebBrain খুলুন',
     summarize: 'সারসংক্ষেপ করুন',
     explain: 'ব্যাখ্যা করুন',
@@ -77,7 +77,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain-এ পাঠানো যায়নি। ডান-ক্লিক মেনু ব্যবহার করে দেখুন।',
   },
   de: {
-    askSelection: 'WebBrain hierzu fragen',
+    askSelection: 'Zum Chat hinzufügen',
     openChat: 'WebBrain zum Chatten öffnen',
     summarize: 'Zusammenfassen',
     explain: 'Erklären',
@@ -95,7 +95,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Senden an WebBrain fehlgeschlagen. Versuche stattdessen das Kontextmenü.',
   },
   es: {
-    askSelection: 'Preguntar a WebBrain sobre esto',
+    askSelection: 'Añadir al chat',
     openChat: 'Abrir WebBrain para chatear',
     summarize: 'Resumir',
     explain: 'Explicar',
@@ -113,7 +113,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'No se pudo enviar a WebBrain. Prueba el menú contextual.',
   },
   fa: {
-    askSelection: 'درباره این از WebBrain بپرسید',
+    askSelection: 'افزودن به چت',
     openChat: 'WebBrain را برای گفتگو باز کنید',
     summarize: 'خلاصه‌سازی',
     explain: 'توضیح',
@@ -131,7 +131,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'ارسال به WebBrain ممکن نشد. از منوی کلیک راست استفاده کنید.',
   },
   fr: {
-    askSelection: 'Interroger WebBrain à ce sujet',
+    askSelection: 'Ajouter au chat',
     openChat: 'Ouvrir WebBrain pour discuter',
     summarize: 'Résumer',
     explain: 'Expliquer',
@@ -149,7 +149,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Impossible d’envoyer à WebBrain. Essayez le menu contextuel.',
   },
   he: {
-    askSelection: 'לשאול את WebBrain על זה',
+    askSelection: 'הוספה לצ׳אט',
     openChat: 'פתיחת WebBrain לצ׳אט',
     summarize: 'סיכום',
     explain: 'הסבר',
@@ -167,7 +167,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'לא ניתן לשלוח אל WebBrain. נסו את תפריט הלחיצה הימנית.',
   },
   hi: {
-    askSelection: 'इसके बारे में WebBrain से पूछें',
+    askSelection: 'चैट में जोड़ें',
     openChat: 'चैट के लिए WebBrain खोलें',
     summarize: 'सारांश बनाएँ',
     explain: 'समझाएँ',
@@ -185,7 +185,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain को भेजा नहीं जा सका। राइट-क्लिक मेनू आज़माएँ।',
   },
   id: {
-    askSelection: 'Tanyakan ini kepada WebBrain',
+    askSelection: 'Tambahkan ke chat',
     openChat: 'Buka WebBrain untuk mengobrol',
     summarize: 'Ringkas',
     explain: 'Jelaskan',
@@ -203,7 +203,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Tidak dapat mengirim ke WebBrain. Coba menu klik kanan.',
   },
   ja: {
-    askSelection: 'この内容について WebBrain に質問',
+    askSelection: 'チャットに追加',
     openChat: 'WebBrain を開いてチャット',
     summarize: '要約',
     explain: '説明',
@@ -221,7 +221,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain に送信できませんでした。右クリックメニューをお試しください。',
   },
   ko: {
-    askSelection: '이 내용에 대해 WebBrain에 질문',
+    askSelection: '채팅에 추가',
     openChat: 'WebBrain을 열어 채팅',
     summarize: '요약',
     explain: '설명',
@@ -239,7 +239,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain으로 보낼 수 없습니다. 오른쪽 클릭 메뉴를 사용해 보세요.',
   },
   ms: {
-    askSelection: 'Tanya WebBrain tentang ini',
+    askSelection: 'Tambahkan pada sembang',
     openChat: 'Buka WebBrain untuk berbual',
     summarize: 'Ringkaskan',
     explain: 'Terangkan',
@@ -257,7 +257,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Tidak dapat menghantar ke WebBrain. Cuba menu klik kanan.',
   },
   nl: {
-    askSelection: 'WebBrain hierover vragen',
+    askSelection: 'Toevoegen aan chat',
     openChat: 'WebBrain openen om te chatten',
     summarize: 'Samenvatten',
     explain: 'Uitleggen',
@@ -275,7 +275,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Verzenden naar WebBrain is mislukt. Probeer het rechtermuisknopmenu.',
   },
   pl: {
-    askSelection: 'Zapytaj WebBrain o to',
+    askSelection: 'Dodaj do czatu',
     openChat: 'Otwórz WebBrain, aby porozmawiać',
     summarize: 'Podsumuj',
     explain: 'Wyjaśnij',
@@ -293,7 +293,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Nie udało się wysłać do WebBrain. Użyj menu pod prawym przyciskiem myszy.',
   },
   pt: {
-    askSelection: 'Perguntar ao WebBrain sobre isto',
+    askSelection: 'Adicionar ao chat',
     openChat: 'Abrir o WebBrain para conversar',
     summarize: 'Resumir',
     explain: 'Explicar',
@@ -311,7 +311,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Não foi possível enviar ao WebBrain. Tente o menu do botão direito.',
   },
   ru: {
-    askSelection: 'Спросить WebBrain об этом',
+    askSelection: 'Добавить в чат',
     openChat: 'Открыть WebBrain для чата',
     summarize: 'Кратко изложить',
     explain: 'Объяснить',
@@ -329,7 +329,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Не удалось отправить в WebBrain. Попробуйте контекстное меню.',
   },
   th: {
-    askSelection: 'ถาม WebBrain เกี่ยวกับสิ่งนี้',
+    askSelection: 'เพิ่มไปยังแชท',
     openChat: 'เปิด WebBrain เพื่อแชต',
     summarize: 'สรุป',
     explain: 'อธิบาย',
@@ -347,7 +347,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'ส่งไปยัง WebBrain ไม่ได้ โปรดลองใช้เมนูคลิกขวา',
   },
   tl: {
-    askSelection: 'Itanong ito sa WebBrain',
+    askSelection: 'Idagdag sa chat',
     openChat: 'Buksan ang WebBrain para makipag-chat',
     summarize: 'Ibuod',
     explain: 'Ipaliwanag',
@@ -365,7 +365,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Hindi maipadala sa WebBrain. Subukan ang right-click menu.',
   },
   tr: {
-    askSelection: 'Bunu WebBrain’e sor',
+    askSelection: 'Sohbete ekle',
     openChat: 'Sohbet için WebBrain’i aç',
     summarize: 'Özetle',
     explain: 'Açıkla',
@@ -383,7 +383,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'WebBrain’e gönderilemedi. Sağ tık menüsünü deneyin.',
   },
   uk: {
-    askSelection: 'Запитати WebBrain про це',
+    askSelection: 'Додати до чату',
     openChat: 'Відкрити WebBrain для чату',
     summarize: 'Підсумувати',
     explain: 'Пояснити',
@@ -401,7 +401,7 @@ const STRINGS = Object.freeze({
     sendFailed: 'Не вдалося надіслати до WebBrain. Спробуйте контекстне меню.',
   },
   vi: {
-    askSelection: 'Hỏi WebBrain về nội dung này',
+    askSelection: 'Thêm vào cuộc trò chuyện',
     openChat: 'Mở WebBrain để trò chuyện',
     summarize: 'Tóm tắt',
     explain: 'Giải thích',
diff --git a/test/fixtures/run.mjs b/test/fixtures/run.mjs
index 210e562aa..049fed847 100644
--- a/test/fixtures/run.mjs
+++ b/test/fixtures/run.mjs
@@ -706,6 +706,15 @@ for (const [label, sourcePath, manualOpen] of [
     if (!rect || rect.left < 8 || rect.top < 8 || rect.right > 352 || rect.bottom > 272) {
       throw new Error(`shortcut was not clamped to the viewport: ${JSON.stringify(rect)}`);
     }
+    if (!state.selectionRect || rect.bottom > state.selectionRect.top) {
+      throw new Error(`shortcut should prefer the top of the selected text: ${JSON.stringify(state)}`);
+    }
+    if (state.shortcutLabel !== 'Add to chat'
+        || state.shortcutBackground !== 'rgb(255, 255, 255)'
+        || state.shortcutColor !== 'rgb(23, 23, 34)'
+        || state.shortcutBoxShadow === 'none') {
+      throw new Error(`shortcut should use the neutral Add to chat treatment: ${JSON.stringify(state)}`);
+    }
     await page.mouse.click(rect.left + rect.width / 2, rect.top + rect.height / 2);
     let popupState = await page.evaluate(() => window.__webbrainSelectionShortcut.getState());
     if (!popupState.popupVisible) throw new Error('popup did not open for the selected text');
diff --git a/test/run.js b/test/run.js
index e6923d96a..041b3ed74 100644
--- a/test/run.js
+++ b/test/run.js
@@ -43492,6 +43492,7 @@ test('selection shortcut localizations cover every interface locale with browser
     assert.equal(chinese.strings.quiz, '测验我', `${label}: the Chinese shortcut should localize Quiz me`);
     assert.equal(chinese.strings.includePageContext, '包含页面和对话上下文', `${label}: the Chinese shortcut should localize the full-context choice`);
     assert.equal(chinese.strings.hideShortcut, '隐藏此项', `${label}: the Chinese shortcut should use the compact Hide this label`);
+    assert.equal(getLocalization('en').strings.askSelection, 'Add to chat', `${label}: the English shortcut should use the concise chat action label`);
     assert.equal(getLocalization('en').strings.hideShortcut, 'Hide this', `${label}: the English shortcut should use the compact footer label`);
     assert.equal(chinese.dir, 'ltr', `${label}: Chinese should retain left-to-right layout`);
     assert.equal(getLocalization('ar').dir, 'rtl', `${label}: Arabic should use right-to-left layout`);
@@ -44899,13 +44900,16 @@ test('selection shortcut is shipped, enabled by default, and keeps browser-speci
     assert.match(content, /\.\.\.\(action === 'custom' \? \{ includePageContext: includePageContext\?\.checked === true \} : \{\}\)/, `${label}: only custom questions should submit the full-context choice`);
     assert.match(content, /function applyLocalization\(\)[\s\S]*?host\.dir = localization\.dir;[\s\S]*?\.action-label`\);[\s\S]*?label\.textContent = strings\[action\];/, `${label}: localization should update action labels without replacing their icons`);
     assert.match(content, /class="shortcut-icon" aria-hidden="true">\?<\/span>/, `${label}: shortcut should use the compact question-mark icon`);
-    assert.match(content, /border:1px solid rgba\(108,99,255,\.34\);[\s\S]*?color:var\(--accent\);/, `${label}: shortcut should use the WebBrain purple treatment`);
+    assert.match(content, /<button class="shortcut" type="button" aria-label="Add to chat" title="Add to chat" hidden>/, `${label}: shortcut fallback copy should use Add to chat before localization loads`);
+    assert.match(content, /\.shortcut \{[\s\S]*?border:1px solid rgba\(23,23,34,\.14\);[\s\S]*?background:#fff; color:#171722;[\s\S]*?box-shadow:0 9px 20px rgba\(23,23,34,\.16\)/, `${label}: shortcut should use a solid white neutral treatment with a lower shadow`);
     assert.match(content, /\.popup \{[\s\S]*?max-height:calc\(100vh - 16px\); overflow-y:auto; overscroll-behavior:contain;/, `${label}: expanded popup should remain scrollable inside short viewports`);
     assert.doesNotMatch(content, /M6\.8 8\.5 9\.2 14l2\.8-3\.4 2\.8 3\.4 2\.4-5\.5/, `${label}: discarded WebBrain W outline should be removed`);
     assert.doesNotMatch(content, /M12 2\.8c\.65 3\.78/, `${label}: Claude-like sparkle icon should be removed`);
     assert.match(content, /const MAX_SELECTION_HIGHLIGHT_RECTS = 200;/, `${label}: selection highlights should have a hard DOM-node limit`);
     assert.match(content, /function collectVisibleHighlightRects\(rects\)[\s\S]*?rect\.top < window\.innerHeight[\s\S]*?visibleRects\.length >= MAX_SELECTION_HIGHLIGHT_RECTS/, `${label}: selection snapshots should retain only a bounded set of visible lines`);
-    assert.match(content, /rects: \(highlightRects\.length \? highlightRects : \[rect\]\)\.map\(serializeRect\)/, `${label}: selection snapshots should use the bounded highlight rectangles`);
+    assert.match(content, /const rect = visibleRects\[0\] \|\| rects\[0\] \|\| range\.getBoundingClientRect\(\);/, `${label}: the shortcut should anchor to the first visible selected line`);
+    assert.match(content, /let top = rect\.top - BUTTON_SIZE - GAP;\s*if \(top < GAP\) top = rect\.bottom \+ GAP;/, `${label}: the shortcut should prefer above the selected text and fall below only near the viewport top`);
+    assert.match(content, /rects: \(visibleRects\.length \? visibleRects : \[rect\]\)\.map\(serializeRect\)/, `${label}: selection snapshots should use the bounded highlight rectangles`);
     assert.match(content, /function showSelectionHighlight\(\)[\s\S]*?highlightLayer\.appendChild\(highlight\);/, `${label}: opening the dialog should render a sticky selection highlight`);
     assert.match(content, /function containSurfaceKeyboardEvent\(event\)[\s\S]*?event\.stopImmediatePropagation\(\);/, `${label}: selection dialog keyboard events should stop page capture listeners`);
     assert.match(content, /window\.addEventListener\('keydown', containSurfaceKeyboardEvent, true\);\s*window\.addEventListener\('keypress', containSurfaceKeyboardEvent, true\);\s*window\.addEventListener\('keyup', containSurfaceKeyboardEvent, true\);/, `${label}: keyboard containment should run during window capture`);

From 2fd7e4ae80149d1ef3893a3df2a3a2b360e2e812 Mon Sep 17 00:00:00 2001
From: Barack Sokullu <esokullu@gmail.com>
Date: Thu, 27 Aug 2026 00:12:51 +0300
Subject: [PATCH 2/2] Fix top-edge selection shortcut fallback

---
 src/chrome/src/content/selection-shortcut.js  | 11 ++++++++++-
 src/firefox/src/content/selection-shortcut.js | 11 ++++++++++-
 test/fixtures/run.mjs                         | 15 +++++++++++++++
 test/run.js                                   |  3 ++-
 4 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/chrome/src/content/selection-shortcut.js b/src/chrome/src/content/selection-shortcut.js
index e67685088..d27a10241 100644
--- a/src/chrome/src/content/selection-shortcut.js
+++ b/src/chrome/src/content/selection-shortcut.js
@@ -374,12 +374,20 @@ host.lang = localization.locale;
     (document.documentElement || document.body).appendChild(host);
   }
 
+  function getVisibleSelectionBottom() {
+    if (!snapshot) return 0;
+    return (snapshot.rects || []).reduce(
+      (bottom, selectionRect) => Math.max(bottom, selectionRect.bottom),
+      snapshot.rect.bottom,
+    );
+  }
+
   function positionShortcut() {
     if (!snapshot || !shortcut) return;
     const rect = snapshot.rect;
     let left = rect.left + rect.width / 2 - BUTTON_SIZE / 2;
     let top = rect.top - BUTTON_SIZE - GAP;
-    if (top < GAP) top = rect.bottom + GAP;
+    if (top < GAP) top = getVisibleSelectionBottom() + GAP;
     left = clamp(left, GAP, Math.max(GAP, window.innerWidth - BUTTON_SIZE - GAP));
     top = clamp(top, GAP, Math.max(GAP, window.innerHeight - BUTTON_SIZE - GAP));
     shortcut.style.left = `${Math.round(left)}px`;
@@ -607,6 +615,7 @@ host.lang = localization.locale;
       toastVisible: !!toast && !toast.hidden,
       shortcutRect: shortcut && !shortcut.hidden ? shortcut.getBoundingClientRect().toJSON() : null,
       selectionRect: snapshot?.rect || null,
+      selectionBottom: snapshot ? getVisibleSelectionBottom() : null,
       shortcutLabel: shortcut?.getAttribute('aria-label') || '',
       shortcutBackground: shortcut ? getComputedStyle(shortcut).backgroundColor : '',
       shortcutColor: shortcut ? getComputedStyle(shortcut).color : '',
diff --git a/src/firefox/src/content/selection-shortcut.js b/src/firefox/src/content/selection-shortcut.js
index e67685088..d27a10241 100644
--- a/src/firefox/src/content/selection-shortcut.js
+++ b/src/firefox/src/content/selection-shortcut.js
@@ -374,12 +374,20 @@ host.lang = localization.locale;
     (document.documentElement || document.body).appendChild(host);
   }
 
+  function getVisibleSelectionBottom() {
+    if (!snapshot) return 0;
+    return (snapshot.rects || []).reduce(
+      (bottom, selectionRect) => Math.max(bottom, selectionRect.bottom),
+      snapshot.rect.bottom,
+    );
+  }
+
   function positionShortcut() {
     if (!snapshot || !shortcut) return;
     const rect = snapshot.rect;
     let left = rect.left + rect.width / 2 - BUTTON_SIZE / 2;
     let top = rect.top - BUTTON_SIZE - GAP;
-    if (top < GAP) top = rect.bottom + GAP;
+    if (top < GAP) top = getVisibleSelectionBottom() + GAP;
     left = clamp(left, GAP, Math.max(GAP, window.innerWidth - BUTTON_SIZE - GAP));
     top = clamp(top, GAP, Math.max(GAP, window.innerHeight - BUTTON_SIZE - GAP));
     shortcut.style.left = `${Math.round(left)}px`;
@@ -607,6 +615,7 @@ host.lang = localization.locale;
       toastVisible: !!toast && !toast.hidden,
       shortcutRect: shortcut && !shortcut.hidden ? shortcut.getBoundingClientRect().toJSON() : null,
       selectionRect: snapshot?.rect || null,
+      selectionBottom: snapshot ? getVisibleSelectionBottom() : null,
       shortcutLabel: shortcut?.getAttribute('aria-label') || '',
       shortcutBackground: shortcut ? getComputedStyle(shortcut).backgroundColor : '',
       shortcutColor: shortcut ? getComputedStyle(shortcut).color : '',
diff --git a/test/fixtures/run.mjs b/test/fixtures/run.mjs
index 049fed847..d02d073db 100644
--- a/test/fixtures/run.mjs
+++ b/test/fixtures/run.mjs
@@ -723,6 +723,21 @@ for (const [label, sourcePath, manualOpen] of [
     if (popupState.popupVisible || !popupState.shortcutVisible) {
       throw new Error(`Escape should close the popup and retain the shortcut: ${JSON.stringify(popupState)}`);
     }
+
+    await page.evaluate(() => {
+      const topCopy = document.createElement('p');
+      topCopy.id = 'top-copy';
+      topCopy.style.cssText = 'position:absolute;left:74px;top:2px;width:210px;margin:0';
+      topCopy.textContent = 'A multiline selection near the top edge must keep the shortcut below every selected line.';
+      document.body.appendChild(topCopy);
+    });
+    const topState = await selectFixtureText(page, '#top-copy');
+    if (!topState.selectionRect
+        || topState.selectionRect.top >= 52
+        || !topState.selectionBottom
+        || topState.shortcutRect.top < topState.selectionBottom + 7) {
+      throw new Error(`top-edge fallback should clear the full visible selection: ${JSON.stringify(topState)}`);
+    }
   });
 
   test(`${label}: selection dialog contains page shortcuts and keeps the selected text highlighted`, async (page) => {
diff --git a/test/run.js b/test/run.js
index 041b3ed74..897263960 100644
--- a/test/run.js
+++ b/test/run.js
@@ -44908,7 +44908,8 @@ test('selection shortcut is shipped, enabled by default, and keeps browser-speci
     assert.match(content, /const MAX_SELECTION_HIGHLIGHT_RECTS = 200;/, `${label}: selection highlights should have a hard DOM-node limit`);
     assert.match(content, /function collectVisibleHighlightRects\(rects\)[\s\S]*?rect\.top < window\.innerHeight[\s\S]*?visibleRects\.length >= MAX_SELECTION_HIGHLIGHT_RECTS/, `${label}: selection snapshots should retain only a bounded set of visible lines`);
     assert.match(content, /const rect = visibleRects\[0\] \|\| rects\[0\] \|\| range\.getBoundingClientRect\(\);/, `${label}: the shortcut should anchor to the first visible selected line`);
-    assert.match(content, /let top = rect\.top - BUTTON_SIZE - GAP;\s*if \(top < GAP\) top = rect\.bottom \+ GAP;/, `${label}: the shortcut should prefer above the selected text and fall below only near the viewport top`);
+    assert.match(content, /function getVisibleSelectionBottom\(\)[\s\S]*?\(snapshot\.rects \|\| \[\]\)\.reduce\([\s\S]*?Math\.max\(bottom, selectionRect\.bottom\)[\s\S]*?snapshot\.rect\.bottom,/, `${label}: top-edge fallback should measure the complete visible selection`);
+    assert.match(content, /let top = rect\.top - BUTTON_SIZE - GAP;\s*if \(top < GAP\) top = getVisibleSelectionBottom\(\) \+ GAP;/, `${label}: the shortcut should prefer above the selected text and fall below the complete visible selection near the viewport top`);
     assert.match(content, /rects: \(visibleRects\.length \? visibleRects : \[rect\]\)\.map\(serializeRect\)/, `${label}: selection snapshots should use the bounded highlight rectangles`);
     assert.match(content, /function showSelectionHighlight\(\)[\s\S]*?highlightLayer\.appendChild\(highlight\);/, `${label}: opening the dialog should render a sticky selection highlight`);
     assert.match(content, /function containSurfaceKeyboardEvent\(event\)[\s\S]*?event\.stopImmediatePropagation\(\);/, `${label}: selection dialog keyboard events should stop page capture listeners`);