Group developer links under a Developers menu and drop the MCP banner

test/run.js

@@ -45042,10 +45042,23 @@ test('homepage leads with the browser extension and offers WebBrain for websites
   assert.ok(nav, 'web home: nav links missing');
   assert.deepEqual(
     [...nav[1].matchAll(/<a [^>]*>([^<]+)<\/a>/g)].map((m) => m[1]),
-    [...(WEBSITES_LAUNCHED ? ['For websites'] : []), 'Research', 'Docs', 'Blog', 'Download'],
-    'web home: the nav keeps For websites (while launched), research, docs, blog and the install shortcut',
+    ['Docs', 'Blog', 'Download'],
+    'web home: next to the Developers menu, the nav keeps docs, blog and the install shortcut',
   );
-  assert.match(template, /<!-- if websites --><a href="\{\{websites_path\}\}">\{\{t:nav\.for_websites\}\}<\/a><!-- end websites -->/, 'web home: the For websites link follows the launch switch');
+  // Developers: For websites (while launched), Research, WebBrain Cloud and MCP.
+  const devMenu = nav[1].match(/<details class="nav-dev" id="nav-dev">\s*<summary>Developers<svg[\s\S]*?<\/details>/);
+  assert.ok(devMenu, 'web home: the nav opens with a Developers menu');
+  assert.deepEqual(
+    [...devMenu[0].matchAll(/<a href="([^"]+)"><strong>([^<]+)<\/strong>/g)].map((m) => [m[1], m[2]]),
+    [...(WEBSITES_LAUNCHED ? [['/websites/', 'For websites']] : []), ['/research/', 'Research'], ['https://webbrain.cloud', 'WebBrain Cloud'], ['/docs/mcp/', 'MCP server']],
+    'web home: the Developers menu lists For websites, Research, WebBrain Cloud and MCP',
+  );
+  assert.match(template, /<!-- if websites --><a href="\{\{websites_path\}\}"><strong>\{\{t:nav\.for_websites\}\}<\/strong>/, 'web home: the For websites item follows the launch switch');
+  assert.doesNotMatch(template, /top-announcement/, 'web home: the MCP banner is gone');
+  for (const rel of ['web/websites/index.html', 'web/research/index.html']) {
+    const page = fs.readFileSync(path.join(ROOT, rel), 'utf8');
+    assert.match(page, /<details class="nav-dev is-current" id="nav-dev">\s*<summary>Developers/, `${rel}: the header has the same Developers menu`);
+  }
   if (WEBSITES_LAUNCHED) assert.match(turkish, /href="\/websites\/"/, 'web home: localized homepages link to the English websites page');
   else assert.doesNotMatch(turkish, /href="\/websites\/"/, 'web home: no page links to the websites page before launch');
   assert.match(english, /<link rel="canonical" href="https:\/\/webbrain\.one\/">/);
@@ -45147,7 +45160,7 @@ test('research section renders a mosaic and one page per research line', () => {
 
   assert.ok(data.projects.length >= 8, 'research: several research lines');
   assert.match(index, /<link rel="canonical" href="https:\/\/webbrain\.one\/research\/">/);
-  assert.match(index, /<a href="\/research\/" aria-current="page">Research<\/a>/);
+  assert.match(index, /<a href="\/research\/" aria-current="page"><strong>Research<\/strong>/, 'research: the Developers menu marks Research as the current page');
   for (const source of ['/research', '/research/', '/research/:slug', '/research/:slug/']) {
     assert.ok(sources.includes(source), `vercel: ${source} rewrite missing`);
   }

web/ar/index.html

@@ -505,53 +505,6 @@
       filter: blur(60px);
     }
 
-    /* ================================================================
-       TOP ANNOUNCEMENT BANNER
-       ================================================================ */
-    .top-announcement-banner {
-      background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(240, 167, 47, 0.14));
-      border-bottom: 1px solid var(--border);
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      padding: 7px 16px;
-      position: relative;
-      z-index: 101;
-    }
-    .top-announcement-link {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 9px;
-      color: var(--text);
-      text-decoration: none;
-      font-weight: 500;
-      transition: color 0.15s ease;
-    }
-    .top-announcement-link:hover {
-      color: var(--accent2);
-      text-decoration: none;
-    }
-    .top-announcement-pill {
-      display: inline-flex;
-      align-items: center;
-      padding: 1px 7px;
-      font-size: 10px;
-      font-weight: 750;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      background: var(--accent);
-      color: #fff;
-      border-radius: 999px;
-    }
-    .top-announcement-arrow {
-      display: inline-block;
-      transition: transform 0.15s ease;
-    }
-    .top-announcement-link:hover .top-announcement-arrow {
-      transform: translateX(3px);
-    }
-
     /* ================================================================
        NAV
        ================================================================ */
@@ -600,6 +553,19 @@
     @media (max-width: 1080px) {
       .nav-links .nav-secondary { display: none; }
     }
+    /* Developers: For websites, Research, WebBrain Cloud and MCP in one menu. */
+    .nav-dev { position: relative; }
+    .nav-dev summary { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; transition: color 0.2s; }
+    .nav-dev summary::-webkit-details-marker { display: none; }
+    .nav-dev summary:hover, .nav-dev[open] summary { color: var(--text); }
+    .nav-dev summary:focus-visible { outline: 2px solid var(--accent2); outline-offset: 4px; border-radius: 4px; }
+    .nav-dev summary svg { width: 14px; height: 14px; transition: transform 0.2s; }
+    .nav-dev[open] summary svg { transform: rotate(180deg); }
+    .nav-dev-menu { position: absolute; z-index: 110; top: calc(100% + 12px); inset-inline-start: -12px; width: 300px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 45px var(--shadow-strong); }
+    .nav-links .nav-dev-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 7px; color: var(--text); }
+    .nav-links .nav-dev-menu a:hover { background: var(--tint-soft); color: var(--text); }
+    .nav-dev-menu strong { font-size: 14px; font-weight: 650; }
+    .nav-dev-menu span { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
     .language-picker {
       position: relative;
       display: flex;
@@ -3503,7 +3469,7 @@
       .nav-inner { width: 100%; padding: 12px 10px; gap: 8px; }
       .nav-brand { min-width: 0; font-size: 17px; gap: 6px; }
       .nav-links { gap: 8px; flex-shrink: 0; }
-      .nav-links a:not(.nav-cta) { display: none; }
+      .nav-links a:not(.nav-cta), .nav-links .nav-dev { display: none; }
       .nav-cta { padding: 8px 14px; font-size: 12px; }
       .language-picker-menu { max-width: calc(100vw - 20px); }
       .gh-stars { display: none; }
@@ -4187,24 +4153,22 @@
 
 <div class="glow-bg"></div>
 
-<!-- TOP ANNOUNCEMENT BANNER -->
-<aside class="top-announcement-banner">
-  <a href="#mcp" class="top-announcement-link">
-    <span class="top-announcement-pill">New</span>
-    <span class="top-announcement-text">خادم MCP لـ Claude Code وCodex وCursor</span>
-    <span class="top-announcement-arrow" aria-hidden="true">→</span>
-  </a>
-</aside>
-
 <!-- NAV -->
 <nav>
   <div class="nav-inner">
     <a href="https://webbrain.one/ar/" class="nav-brand" style="text-decoration:none;">
       <img class="brand-logo" src="/logo-github.png" alt="" aria-hidden="true"> WebBrain<span style="opacity:0.5; font-weight:400; -webkit-text-fill-color:currentColor;">.one</span>
     </a>
     <div class="nav-links">
-      <a href="/websites/">للمواقع الإلكترونية</a>
-      <a href="/research/" class="nav-secondary">الأبحاث</a>
+      <details class="nav-dev" id="nav-dev">
+        <summary>للمطورين<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
+        <div class="nav-dev-menu">
+          <a href="/websites/"><strong>للمواقع الإلكترونية</strong><span>مساعد ذكاء اصطناعي لموقعك بوسم script واحد</span></a>
+          <a href="/research/"><strong>الأبحاث</strong><span>نماذجنا ومجموعات بياناتنا ومعاييرنا</span></a>
+          <a href="https://webbrain.cloud"><strong>WebBrain Cloud</strong><span>شغّل مهام المتصفح عبر واجهة برمجية</span></a>
+          <a href="/docs/mcp/"><strong>خادم MCP</strong><span>استخدم WebBrain من Claude Code أو Codex أو Cursor</span></a>
+        </div>
+      </details>
       <a href="/docs/" class="nav-secondary">المستندات</a>
       <a href="/blog/" class="nav-secondary">المدونة</a>
       <a href="#download" class="nav-cta">التنزيل</a>
@@ -6015,5 +5979,22 @@ <h3>انشر الكلمة، شارك الحبّ</h3>
   })();
 </script>
 
+<script>
+  // The Developers menu is a <details>: it works without script. This closes
+  // it on a click elsewhere or Escape, like the language picker.
+  (function () {
+    var menu = document.getElementById('nav-dev');
+    if (!menu) return;
+    document.addEventListener('click', function (event) {
+      if (menu.open && !menu.contains(event.target)) menu.open = false;
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && menu.open) {
+        menu.open = false;
+        menu.querySelector('summary').focus();
+      }
+    });
+  })();
+</script>
 </body>
 </html>

web/bn/index.html

@@ -505,53 +505,6 @@
       filter: blur(60px);
     }
 
-    /* ================================================================
-       TOP ANNOUNCEMENT BANNER
-       ================================================================ */
-    .top-announcement-banner {
-      background: linear-gradient(90deg, rgba(167, 139, 250, 0.14), rgba(240, 167, 47, 0.14));
-      border-bottom: 1px solid var(--border);
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      padding: 7px 16px;
-      position: relative;
-      z-index: 101;
-    }
-    .top-announcement-link {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 9px;
-      color: var(--text);
-      text-decoration: none;
-      font-weight: 500;
-      transition: color 0.15s ease;
-    }
-    .top-announcement-link:hover {
-      color: var(--accent2);
-      text-decoration: none;
-    }
-    .top-announcement-pill {
-      display: inline-flex;
-      align-items: center;
-      padding: 1px 7px;
-      font-size: 10px;
-      font-weight: 750;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      background: var(--accent);
-      color: #fff;
-      border-radius: 999px;
-    }
-    .top-announcement-arrow {
-      display: inline-block;
-      transition: transform 0.15s ease;
-    }
-    .top-announcement-link:hover .top-announcement-arrow {
-      transform: translateX(3px);
-    }
-
     /* ================================================================
        NAV
        ================================================================ */
@@ -600,6 +553,19 @@
     @media (max-width: 1080px) {
       .nav-links .nav-secondary { display: none; }
     }
+    /* Developers: For websites, Research, WebBrain Cloud and MCP in one menu. */
+    .nav-dev { position: relative; }
+    .nav-dev summary { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; transition: color 0.2s; }
+    .nav-dev summary::-webkit-details-marker { display: none; }
+    .nav-dev summary:hover, .nav-dev[open] summary { color: var(--text); }
+    .nav-dev summary:focus-visible { outline: 2px solid var(--accent2); outline-offset: 4px; border-radius: 4px; }
+    .nav-dev summary svg { width: 14px; height: 14px; transition: transform 0.2s; }
+    .nav-dev[open] summary svg { transform: rotate(180deg); }
+    .nav-dev-menu { position: absolute; z-index: 110; top: calc(100% + 12px); inset-inline-start: -12px; width: 300px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 45px var(--shadow-strong); }
+    .nav-links .nav-dev-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 7px; color: var(--text); }
+    .nav-links .nav-dev-menu a:hover { background: var(--tint-soft); color: var(--text); }
+    .nav-dev-menu strong { font-size: 14px; font-weight: 650; }
+    .nav-dev-menu span { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }
     .language-picker {
       position: relative;
       display: flex;
@@ -3503,7 +3469,7 @@
       .nav-inner { width: 100%; padding: 12px 10px; gap: 8px; }
       .nav-brand { min-width: 0; font-size: 17px; gap: 6px; }
       .nav-links { gap: 8px; flex-shrink: 0; }
-      .nav-links a:not(.nav-cta) { display: none; }
+      .nav-links a:not(.nav-cta), .nav-links .nav-dev { display: none; }
       .nav-cta { padding: 8px 14px; font-size: 12px; }
       .language-picker-menu { max-width: calc(100vw - 20px); }
       .gh-stars { display: none; }
@@ -4187,24 +4153,22 @@
 
 <div class="glow-bg"></div>
 
-<!-- TOP ANNOUNCEMENT BANNER -->
-<aside class="top-announcement-banner">
-  <a href="#mcp" class="top-announcement-link">
-    <span class="top-announcement-pill">New</span>
-    <span class="top-announcement-text">Claude Code, Codex এবং Cursor-এর জন্য MCP সার্ভার</span>
-    <span class="top-announcement-arrow" aria-hidden="true">→</span>
-  </a>
-</aside>
-
 <!-- NAV -->
 <nav>
   <div class="nav-inner">
     <a href="https://webbrain.one/bn/" class="nav-brand" style="text-decoration:none;">
       <img class="brand-logo" src="/logo-github.png" alt="" aria-hidden="true"> WebBrain<span style="opacity:0.5; font-weight:400; -webkit-text-fill-color:currentColor;">.one</span>
     </a>
     <div class="nav-links">
-      <a href="/websites/">ওয়েবসাইটের জন্য</a>
-      <a href="/research/" class="nav-secondary">গবেষণা</a>
+      <details class="nav-dev" id="nav-dev">
+        <summary>ডেভেলপারদের জন্য<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
+        <div class="nav-dev-menu">
+          <a href="/websites/"><strong>ওয়েবসাইটের জন্য</strong><span>একটি script ট্যাগে আপনার সাইটের জন্য AI সহকারী</span></a>
+          <a href="/research/"><strong>গবেষণা</strong><span>আমাদের মডেল, ডেটাসেট ও বেঞ্চমার্ক</span></a>
+          <a href="https://webbrain.cloud"><strong>WebBrain Cloud</strong><span>API দিয়ে ব্রাউজারের কাজ চালান</span></a>
+          <a href="/docs/mcp/"><strong>MCP সার্ভার</strong><span>Claude Code, Codex বা Cursor থেকে WebBrain ব্যবহার করুন</span></a>
+        </div>
+      </details>
       <a href="/docs/" class="nav-secondary">ডক্স</a>
       <a href="/blog/" class="nav-secondary">ব্লগ</a>
       <a href="#download" class="nav-cta">ডাউনলোড করুন</a>
@@ -6015,5 +5979,22 @@ <h3>কথাটি ছড়িয়ে দিন, ভালবাসা ভ
   })();
 </script>
 
+<script>
+  // The Developers menu is a <details>: it works without script. This closes
+  // it on a click elsewhere or Escape, like the language picker.
+  (function () {
+    var menu = document.getElementById('nav-dev');
+    if (!menu) return;
+    document.addEventListener('click', function (event) {
+      if (menu.open && !menu.contains(event.target)) menu.open = false;
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape' && menu.open) {
+        menu.open = false;
+        menu.querySelector('summary').focus();
+      }
+    });
+  })();
+</script>
 </body>
 </html>

web/build/locales/ar.json

@@ -17,14 +17,19 @@
   "nav.blog": "المدونة",
   "nav.docs": "المستندات",
   "nav.security": "الأمان",
-  "banner.top_mcp": "خادم MCP لـ Claude Code وCodex وCursor",
   "nav.language_aria": "اختر اللغة",
   "nav.github": "GitHub",
   "nav.github_stars_aria": "ضع نجمة لـ WebBrain على GitHub",
   "nav.theme_toggle_aria": "تبديل المظهر الفاتح / الداكن",
   "nav.browser_extension": "إضافة المتصفح",
   "nav.for_websites": "للمواقع الإلكترونية",
   "nav.research": "الأبحاث",
+  "nav.developers": "للمطورين",
+  "nav.dev.websites_desc": "مساعد ذكاء اصطناعي لموقعك بوسم script واحد",
+  "nav.dev.research_desc": "نماذجنا ومجموعات بياناتنا ومعاييرنا",
+  "nav.dev.cloud_desc": "شغّل مهام المتصفح عبر واجهة برمجية",
+  "nav.dev.mcp": "خادم MCP",
+  "nav.dev.mcp_desc": "استخدم WebBrain من Claude Code أو Codex أو Cursor",
   "home.nav_aria": "التنقل الرئيسي",
   "home.meta.title": "WebBrain — وكيل ذكاء اصطناعي لمتصفحك وموقعك",
   "home.meta.description": "WebBrain وكيل ذكاء اصطناعي مجاني يقرأ صفحات الويب ويشرحها وينفّذ المهام عليها. أضِف الإضافة مفتوحة المصدر إلى Chrome أو Edge أو Firefox، أو أضِف WebBrain إلى موقعك لخدمة زوّارك.",

web/build/locales/bn.json

@@ -17,14 +17,19 @@
   "nav.blog": "ব্লগ",
   "nav.docs": "ডক্স",
   "nav.security": "নিরাপত্তা",
-  "banner.top_mcp": "Claude Code, Codex এবং Cursor-এর জন্য MCP সার্ভার",
   "nav.language_aria": "ভাষা নির্বাচন করুন",
   "nav.github": "GitHub",
   "nav.github_stars_aria": "GitHub-এ স্টার WebBrain",
   "nav.theme_toggle_aria": "আলো / অন্ধকার থিম টগল করুন",
   "nav.browser_extension": "ব্রাউজার এক্সটেনশন",
   "nav.for_websites": "ওয়েবসাইটের জন্য",
   "nav.research": "গবেষণা",
+  "nav.developers": "ডেভেলপারদের জন্য",
+  "nav.dev.websites_desc": "একটি script ট্যাগে আপনার সাইটের জন্য AI সহকারী",
+  "nav.dev.research_desc": "আমাদের মডেল, ডেটাসেট ও বেঞ্চমার্ক",
+  "nav.dev.cloud_desc": "API দিয়ে ব্রাউজারের কাজ চালান",
+  "nav.dev.mcp": "MCP সার্ভার",
+  "nav.dev.mcp_desc": "Claude Code, Codex বা Cursor থেকে WebBrain ব্যবহার করুন",
   "home.nav_aria": "প্রধান নেভিগেশন",
   "home.meta.title": "WebBrain — আপনার ব্রাউজার ও ওয়েবসাইটের জন্য AI এজেন্ট",
   "home.meta.description": "WebBrain একটি বিনামূল্যের AI এজেন্ট, যা ওয়েব পেজ পড়ে, ব্যাখ্যা করে এবং পেজে কাজ করে। ওপেন-সোর্স এক্সটেনশনটি Chrome, Edge বা Firefox-এ যোগ করুন, অথবা আপনার ভিজিটরদের জন্য WebBrain আপনার ওয়েবসাইটে যোগ করুন।",