From 4ba71232007ff63ae3ab077daff1a502afe57575 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 23 Feb 2026 20:37:35 -0500
Subject: [PATCH 1/3] feat: replace framework pkgs with random "n p m x" picks

Show 4 randomly-selected packages whose names contain the letters n, p, m, X, with the matching
letter highlighted in bold + accent colour (one distinct colour per letter when no user accent is
set).

Selection algorithm:
1. Fetch top 500 popular packages from the Algolia search index (empty query, default popularity
   ranking). Algolia doesn't support filtering by name substring (and doesn't know about our social
   likes), so we filter these results down after the fact (not deprecated, >=10k downloads/30d,
   modified <2yrs).
2. For each letter (n, p, m, x)
  1. Take 30 random candidates whose name contains that letter and check their social like count.
  2. If there are candidates with >=5 community likes, keep only those; otherwise, keep all.
  3. Randomly pick one remaining candidate.
  4. If there are no remaining candidates, pick the hardcoded default for this letter (nuxt, pnpm,
     module-replacements, oxfmt).

Results are cached for 1 hour via with SWR, so all users see the same picks for about an hour, and
no user ever experiences a cache miss (and Algolia/constellation slowness).
---
 app/pages/index.vue                  |  38 +++++----
 i18n/locales/ar.json                 |   1 -
 i18n/locales/az-AZ.json              |   1 -
 i18n/locales/bg-BG.json              |   1 -
 i18n/locales/bn-IN.json              |   1 -
 i18n/locales/cs-CZ.json              |   1 -
 i18n/locales/de-DE.json              |   1 -
 i18n/locales/en.json                 |   2 +-
 i18n/locales/es.json                 |   1 -
 i18n/locales/fr-FR.json              |   2 +-
 i18n/locales/hi-IN.json              |   1 -
 i18n/locales/hu-HU.json              |   1 -
 i18n/locales/id-ID.json              |   1 -
 i18n/locales/it-IT.json              |   1 -
 i18n/locales/ja-JP.json              |   1 -
 i18n/locales/mr-IN.json              |   1 -
 i18n/locales/nb-NO.json              |   1 -
 i18n/locales/ne-NP.json              |   1 -
 i18n/locales/pl-PL.json              |   1 -
 i18n/locales/pt-BR.json              |   1 -
 i18n/locales/ru-RU.json              |   1 -
 i18n/locales/ta-IN.json              |   1 -
 i18n/locales/te-IN.json              |   1 -
 i18n/locales/uk-UA.json              |   1 -
 i18n/locales/zh-CN.json              |   1 -
 i18n/locales/zh-TW.json              |   1 -
 i18n/schema.json                     |   2 +-
 lunaria/files/ar-EG.json             |   1 -
 lunaria/files/az-AZ.json             |   1 -
 lunaria/files/bg-BG.json             |   1 -
 lunaria/files/bn-IN.json             |   1 -
 lunaria/files/cs-CZ.json             |   1 -
 lunaria/files/de-DE.json             |   1 -
 lunaria/files/en-GB.json             |   2 +-
 lunaria/files/en-US.json             |   2 +-
 lunaria/files/es-419.json            |   1 -
 lunaria/files/es-ES.json             |   1 -
 lunaria/files/fr-FR.json             |   2 +-
 lunaria/files/hi-IN.json             |   1 -
 lunaria/files/hu-HU.json             |   1 -
 lunaria/files/id-ID.json             |   1 -
 lunaria/files/it-IT.json             |   1 -
 lunaria/files/ja-JP.json             |   1 -
 lunaria/files/mr-IN.json             |   1 -
 lunaria/files/nb-NO.json             |   1 -
 lunaria/files/ne-NP.json             |   1 -
 lunaria/files/pl-PL.json             |   1 -
 lunaria/files/pt-BR.json             |   1 -
 lunaria/files/ru-RU.json             |   1 -
 lunaria/files/ta-IN.json             |   1 -
 lunaria/files/te-IN.json             |   1 -
 lunaria/files/uk-UA.json             |   1 -
 lunaria/files/zh-CN.json             |   1 -
 lunaria/files/zh-TW.json             |   1 -
 nuxt.config.ts                       |   2 +-
 server/api/picks.get.ts              | 113 +++++++++++++++++++++++++++
 server/utils/atproto/utils/likes.ts  |   2 +-
 server/utils/picks.ts                |  53 +++++++++++++
 shared/types/index.ts                |   1 +
 shared/types/picks.ts                |   9 +++
 test/unit/server/utils/picks.spec.ts | 102 ++++++++++++++++++++++++
 61 files changed, 307 insertions(+), 72 deletions(-)
 create mode 100644 server/api/picks.get.ts
 create mode 100644 server/utils/picks.ts
 create mode 100644 shared/types/picks.ts
 create mode 100644 test/unit/server/utils/picks.spec.ts

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 74d38d65d..7ce3472dc 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
+import type { NpmxPicksResponse } from '#shared/types/picks'
+
+const { data: picksData } = useFetch<NpmxPicksResponse>('/api/picks')
+const { selectedAccentColor } = useAccentColor()
+
+const PICK_COLORS = ['coral', 'amber', 'emerald', 'sky'] as const
+function pickLetterColor(index: number): string | undefined {
+  if (selectedAccentColor.value) return undefined
+  return `var(--swatch-${PICK_COLORS[index]})`
+}
 
 const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch()
 const isSearchFocused = shallowRef(false)
@@ -108,17 +117,22 @@ defineOgImageComponent('Default', {
       </header>
 
       <nav
-        :aria-label="$t('nav.popular_packages')"
+        v-if="picksData?.picks?.length"
+        :aria-label="$t('nav.npmx_picks')"
         class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both max-w-xl mx-auto"
         style="animation-delay: 0.3s"
       >
         <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
-          <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
-            <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
+          <li v-for="(pick, i) in picksData?.picks" :key="pick.letter">
+            <LinkBase :to="packageRoute(pick.name)" class="text-sm">
               <span
-                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-              />
-              {{ framework.name }}
+                >{{ pick.name.slice(0, pick.letterIndex)
+                }}<span
+                  class="font-bold text-accent"
+                  :style="pickLetterColor(i) ? { color: pickLetterColor(i) } : undefined"
+                  >{{ pick.name[pick.letterIndex] }}</span
+                >{{ pick.name.slice(pick.letterIndex + 1) }}</span
+              >
             </LinkBase>
           </li>
         </ul>
@@ -132,13 +146,3 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
-
-<style scoped>
-/* Windows High Contrast Mode support */
-@media (forced-colors: active) {
-  .home-tag-dot {
-    forced-color-adjust: none;
-    background-color: CanvasText;
-  }
-}
-</style>
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index fac959bf7..1c149ba38 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index deacfb964..c411c30ec 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index 0ce376ef1..0992b2c21 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 14c5668b2..31c13ec4e 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 9f9a08546..ed7c602d6 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index 3d4ae8d26..629905664 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 0b838dfe8..f060ca3ad 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 6b11e188f..509c127d1 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 7b4733204..74bc79855 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -66,7 +66,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 4ef77c57b..b5d28c82b 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index 85b2ac792..cdb56b1d7 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 244377411..0c5e0eaed 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index ef2e106cb..bf29e1608 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -50,7 +50,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index 39a4d20e1..057939419 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index 7215660b7..a965110e3 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index cad981bb8..e9079f08d 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index aa847e97e..2ae77c2eb 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 460a1f7ba..010e6c6e4 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 423d72b12..7057fde7f 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -45,7 +45,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 45d6410b1..3ae9b1907 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -42,7 +42,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 99db87a1c..fd940da17 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index e1c1f23a8..622ca640d 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index fb598a8aa..1fb0f43a8 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 14593b04a..f56e54615 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 2f387a8e3..286f9a7d8 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -66,7 +66,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",
diff --git a/i18n/schema.json b/i18n/schema.json
index 2550271cb..7ec90e0ba 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -202,7 +202,7 @@
         "main_navigation": {
           "type": "string"
         },
-        "popular_packages": {
+        "npmx_picks": {
           "type": "string"
         },
         "settings": {
diff --git a/lunaria/files/ar-EG.json b/lunaria/files/ar-EG.json
index 8e4705272..8be5afd44 100644
--- a/lunaria/files/ar-EG.json
+++ b/lunaria/files/ar-EG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
-    "popular_packages": "الحزم الشائعة",
     "settings": "الإعدادات",
     "compare": "مقارنة",
     "back": "عودة",
diff --git a/lunaria/files/az-AZ.json b/lunaria/files/az-AZ.json
index e2124d258..05836f81c 100644
--- a/lunaria/files/az-AZ.json
+++ b/lunaria/files/az-AZ.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Əsas",
-    "popular_packages": "Populyar paketlər",
     "settings": "tənzimləmələr",
     "back": "geri"
   },
diff --git a/lunaria/files/bg-BG.json b/lunaria/files/bg-BG.json
index 9dc4ba935..8a966c74c 100644
--- a/lunaria/files/bg-BG.json
+++ b/lunaria/files/bg-BG.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Главна",
-    "popular_packages": "Популярни пакети",
     "settings": "настройки",
     "compare": "сравняване",
     "back": "назад",
diff --git a/lunaria/files/bn-IN.json b/lunaria/files/bn-IN.json
index 14c5668b2..31c13ec4e 100644
--- a/lunaria/files/bn-IN.json
+++ b/lunaria/files/bn-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "প্রধান",
-    "popular_packages": "জনপ্রিয় প্যাকেজগুলি",
     "settings": "সেটিংস",
     "compare": "তুলনা করুন",
     "back": "পিছনে",
diff --git a/lunaria/files/cs-CZ.json b/lunaria/files/cs-CZ.json
index f9b3de54f..ed511f7c0 100644
--- a/lunaria/files/cs-CZ.json
+++ b/lunaria/files/cs-CZ.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hlavní",
-    "popular_packages": "Populární balíčky",
     "settings": "nastavení",
     "compare": "porovnat",
     "back": "zpět",
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
index d2a9302c6..9aad0aafa 100644
--- a/lunaria/files/de-DE.json
+++ b/lunaria/files/de-DE.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hauptnavigation",
-    "popular_packages": "Beliebte Pakete",
     "settings": "Einstellungen",
     "compare": "Vergleichen",
     "back": "Zurück",
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index 26dbb4205..9e42f3f9a 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index 1cd4294cb..82ddf1c76 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Main",
-    "popular_packages": "Popular packages",
+    "npmx_picks": "npmx picks",
     "settings": "settings",
     "compare": "compare",
     "back": "back",
diff --git a/lunaria/files/es-419.json b/lunaria/files/es-419.json
index 1b021e09c..cab72b060 100644
--- a/lunaria/files/es-419.json
+++ b/lunaria/files/es-419.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/lunaria/files/es-ES.json b/lunaria/files/es-ES.json
index f89e2799d..75ce4830e 100644
--- a/lunaria/files/es-ES.json
+++ b/lunaria/files/es-ES.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Paquetes populares",
     "settings": "configuración",
     "compare": "comparar",
     "back": "atrás",
diff --git a/lunaria/files/fr-FR.json b/lunaria/files/fr-FR.json
index 945b6cb6d..363cc255f 100644
--- a/lunaria/files/fr-FR.json
+++ b/lunaria/files/fr-FR.json
@@ -65,7 +65,7 @@
   },
   "nav": {
     "main_navigation": "Barre de navigation",
-    "popular_packages": "Paquets populaires",
+    "npmx_picks": "Suggestions npmx",
     "settings": "paramètres",
     "compare": "comparer",
     "back": "Retour",
diff --git a/lunaria/files/hi-IN.json b/lunaria/files/hi-IN.json
index 076430b9a..89776bcdb 100644
--- a/lunaria/files/hi-IN.json
+++ b/lunaria/files/hi-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पैकेज",
     "settings": "सेटिंग्स",
     "compare": "तुलना करें",
     "back": "वापस",
diff --git a/lunaria/files/hu-HU.json b/lunaria/files/hu-HU.json
index 2e0479030..68a75cb6b 100644
--- a/lunaria/files/hu-HU.json
+++ b/lunaria/files/hu-HU.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Főmenü",
-    "popular_packages": "Népszerű csomagok",
     "settings": "beállítások",
     "back": "vissza"
   },
diff --git a/lunaria/files/id-ID.json b/lunaria/files/id-ID.json
index 1b8f9004f..8e854d3e5 100644
--- a/lunaria/files/id-ID.json
+++ b/lunaria/files/id-ID.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "Utama",
-    "popular_packages": "Paket populer",
     "settings": "pengaturan",
     "compare": "bandingkan",
     "back": "kembali",
diff --git a/lunaria/files/it-IT.json b/lunaria/files/it-IT.json
index c21c11f1d..5c65a6c05 100644
--- a/lunaria/files/it-IT.json
+++ b/lunaria/files/it-IT.json
@@ -49,7 +49,6 @@
   },
   "nav": {
     "main_navigation": "Principale",
-    "popular_packages": "Pacchetti popolari",
     "settings": "impostazioni",
     "compare": "confronta",
     "back": "indietro",
diff --git a/lunaria/files/ja-JP.json b/lunaria/files/ja-JP.json
index 3cfc377d6..d1e67863e 100644
--- a/lunaria/files/ja-JP.json
+++ b/lunaria/files/ja-JP.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "メイン",
-    "popular_packages": "人気のパッケージ",
     "settings": "設定",
     "compare": "比較",
     "back": "戻る",
diff --git a/lunaria/files/mr-IN.json b/lunaria/files/mr-IN.json
index 0833f9655..99632b252 100644
--- a/lunaria/files/mr-IN.json
+++ b/lunaria/files/mr-IN.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय पॅकेजेस",
     "settings": "सेटिंग्ज",
     "compare": "तुलना करा",
     "back": "मागे",
diff --git a/lunaria/files/nb-NO.json b/lunaria/files/nb-NO.json
index 2eea40ce3..a3bbe0a50 100644
--- a/lunaria/files/nb-NO.json
+++ b/lunaria/files/nb-NO.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Hovedmeny",
-    "popular_packages": "Populære pakker",
     "settings": "innstillinger",
     "compare": "sammenlign",
     "back": "tilbake",
diff --git a/lunaria/files/ne-NP.json b/lunaria/files/ne-NP.json
index 9306002bb..8665a7350 100644
--- a/lunaria/files/ne-NP.json
+++ b/lunaria/files/ne-NP.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "मुख्य",
-    "popular_packages": "लोकप्रिय प्याकेजहरू",
     "settings": "सेटिङ्स",
     "compare": "तुलना",
     "back": "पछाडि",
diff --git a/lunaria/files/pl-PL.json b/lunaria/files/pl-PL.json
index a30acc07f..05d4b72dc 100644
--- a/lunaria/files/pl-PL.json
+++ b/lunaria/files/pl-PL.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Główne",
-    "popular_packages": "Popularne pakiety",
     "settings": "ustawienia",
     "compare": "porównaj",
     "back": "wstecz",
diff --git a/lunaria/files/pt-BR.json b/lunaria/files/pt-BR.json
index 005c0be7f..4de42622b 100644
--- a/lunaria/files/pt-BR.json
+++ b/lunaria/files/pt-BR.json
@@ -44,7 +44,6 @@
   },
   "nav": {
     "main_navigation": "Principal",
-    "popular_packages": "Pacotes populares",
     "settings": "configurações",
     "compare": "comparar",
     "back": "voltar",
diff --git a/lunaria/files/ru-RU.json b/lunaria/files/ru-RU.json
index 4710678fd..2b556d6e8 100644
--- a/lunaria/files/ru-RU.json
+++ b/lunaria/files/ru-RU.json
@@ -41,7 +41,6 @@
   },
   "nav": {
     "main_navigation": "Главное",
-    "popular_packages": "Популярные пакеты",
     "settings": "настройки",
     "back": "назад"
   },
diff --git a/lunaria/files/ta-IN.json b/lunaria/files/ta-IN.json
index 9ec3b6b21..5a5f2d795 100644
--- a/lunaria/files/ta-IN.json
+++ b/lunaria/files/ta-IN.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "முதன்மை",
-    "popular_packages": "பிரபலமான தொகுப்புகள்",
     "settings": "அமைப்புகள்",
     "compare": "ஒப்பிடு",
     "back": "பின்செல்",
diff --git a/lunaria/files/te-IN.json b/lunaria/files/te-IN.json
index ae195617f..e024672d2 100644
--- a/lunaria/files/te-IN.json
+++ b/lunaria/files/te-IN.json
@@ -43,7 +43,6 @@
   },
   "nav": {
     "main_navigation": "ప్రధాన",
-    "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
     "settings": "సెట్టింగ్‌లు",
     "compare": "పోల్చండి",
     "back": "వెనక్కి",
diff --git a/lunaria/files/uk-UA.json b/lunaria/files/uk-UA.json
index b763eff42..e6eefa301 100644
--- a/lunaria/files/uk-UA.json
+++ b/lunaria/files/uk-UA.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "Головна",
-    "popular_packages": "Популярні пакети",
     "settings": "параметри",
     "compare": "порівняти",
     "back": "назад",
diff --git a/lunaria/files/zh-CN.json b/lunaria/files/zh-CN.json
index eb86181ec..8c865b1bb 100644
--- a/lunaria/files/zh-CN.json
+++ b/lunaria/files/zh-CN.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "主页",
-    "popular_packages": "热门软件包",
     "settings": "设置",
     "compare": "比较包",
     "back": "返回",
diff --git a/lunaria/files/zh-TW.json b/lunaria/files/zh-TW.json
index 75bc90277..e93a7c431 100644
--- a/lunaria/files/zh-TW.json
+++ b/lunaria/files/zh-TW.json
@@ -65,7 +65,6 @@
   },
   "nav": {
     "main_navigation": "首頁",
-    "popular_packages": "熱門套件",
     "settings": "設定",
     "compare": "比較",
     "back": "返回",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 78d76019c..f39aa40f2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -147,7 +147,7 @@ export default defineNuxtConfig({
     '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/package-docs/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     // static pages
-    '/': { prerender: true },
+    '/': { isr: 3600 },
     '/200.html': { prerender: true },
     '/about': { prerender: true },
     '/accessibility': { prerender: true },
diff --git a/server/api/picks.get.ts b/server/api/picks.get.ts
new file mode 100644
index 000000000..fa3fb6fbb
--- /dev/null
+++ b/server/api/picks.get.ts
@@ -0,0 +1,113 @@
+import type { NpmxPicksResponse } from '#shared/types/picks'
+import {
+  NPMX_LETTERS,
+  ALGOLIA_POOL_SIZE,
+  MIN_DOWNLOADS_LAST_30_DAYS,
+  MAX_MODIFIED_AGE_MS,
+  LIKES_SAMPLE_SIZE,
+  selectPicks,
+  type NpmxLetter,
+  type PickCandidate,
+} from '../utils/picks'
+
+const PICKS_MAX_AGE_MS = 60 * 60 * 1000
+
+/** Pick `n` random items from `arr` (Fisher-Yates on a copy, sliced). */
+function randomSample<T>(arr: T[], n: number): T[] {
+  const copy = [...arr]
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    const tmp = copy[i]!
+    copy[i] = copy[j]!
+    copy[j] = tmp
+  }
+  return copy.slice(0, n)
+}
+
+interface AlgoliaHit {
+  name: string
+  downloadsLast30Days: number
+  modified: string
+  deprecated?: string
+  isDeprecated?: boolean
+}
+
+interface AlgoliaResponse {
+  hits: AlgoliaHit[]
+}
+
+export default defineCachedEventHandler(
+  async (): Promise<NpmxPicksResponse> => {
+    const { appId, apiKey, indexName } = useRuntimeConfig().public.algolia
+
+    // 1. Fetch popular packages from Algolia
+    const algoliaResponse = await $fetch<AlgoliaResponse>(
+      `https://${appId}-dsn.algolia.net/1/indexes/${indexName}/query`,
+      {
+        method: 'POST',
+        headers: {
+          'X-Algolia-Application-Id': appId,
+          'X-Algolia-API-Key': apiKey,
+        },
+        body: {
+          query: '',
+          hitsPerPage: ALGOLIA_POOL_SIZE,
+          attributesToRetrieve: [
+            'name',
+            'downloadsLast30Days',
+            'modified',
+            'deprecated',
+            'isDeprecated',
+          ],
+          attributesToHighlight: [],
+        },
+      },
+    )
+
+    // 2. Post-filter pool
+    const now = Date.now()
+    const pool = algoliaResponse.hits.filter(hit => {
+      if (hit.deprecated || hit.isDeprecated) return false
+      if (hit.downloadsLast30Days < MIN_DOWNLOADS_LAST_30_DAYS) return false
+      if (now - new Date(hit.modified).getTime() > MAX_MODIFIED_AGE_MS) return false
+      return true
+    })
+
+    // 3. For each letter, find candidates and sample for likes checking
+    const likesUtil = new PackageLikesUtils()
+
+    const candidatesByLetter = {} as Record<NpmxLetter, PickCandidate[]>
+
+    await Promise.all(
+      NPMX_LETTERS.map(async letter => {
+        const matching = pool.filter(hit => hit.name.toLowerCase().includes(letter))
+        const sampled = randomSample(matching, LIKES_SAMPLE_SIZE)
+
+        // Check likes in parallel
+        const enriched: PickCandidate[] = await Promise.all(
+          sampled.map(async hit => {
+            try {
+              const { totalLikes } = await likesUtil.getLikes(hit.name)
+              return { name: hit.name, totalLikes }
+            } catch {
+              return { name: hit.name, totalLikes: 0 }
+            }
+          }),
+        )
+
+        candidatesByLetter[letter] = enriched
+      }),
+    )
+
+    // 4. Select picks
+    const picks = selectPicks(candidatesByLetter)
+
+    return { picks }
+  },
+  {
+    maxAge: PICKS_MAX_AGE_MS / 1000,
+    swr: true,
+    name: 'npmx-picks',
+    getKey: () => 'picks',
+  },
+)
diff --git a/server/utils/atproto/utils/likes.ts b/server/utils/atproto/utils/likes.ts
index ac042d707..24b4f3686 100644
--- a/server/utils/atproto/utils/likes.ts
+++ b/server/utils/atproto/utils/likes.ts
@@ -104,7 +104,7 @@ export class PackageLikesUtils {
   }
 
   /**
-   * Gets the likes for a npm package on npmx. Tries a local cahce first, if not found uses constellation
+   * Gets the likes for a npm package on npmx. Tries a local cache first, if not found uses constellation
    * @param packageName
    * @param usersDid
    * @returns
diff --git a/server/utils/picks.ts b/server/utils/picks.ts
new file mode 100644
index 000000000..69d601b30
--- /dev/null
+++ b/server/utils/picks.ts
@@ -0,0 +1,53 @@
+import type { NpmxPick } from '#shared/types/picks'
+
+export const NPMX_LETTERS = ['n', 'p', 'm', 'x'] as const
+export type NpmxLetter = (typeof NPMX_LETTERS)[number]
+
+export const MIN_LIKES = 5
+export const MIN_DOWNLOADS_LAST_30_DAYS = 10_000
+export const MAX_MODIFIED_AGE_MS = 730 * 24 * 60 * 60 * 1000
+export const ALGOLIA_POOL_SIZE = 500
+export const LIKES_SAMPLE_SIZE = 30
+
+/** Hardcoded last-resort fallbacks in case we fail to find any candidates for a letter. */
+export const FALLBACKS: Record<NpmxLetter, string> = {
+  n: 'nuxt',
+  p: 'pnpm',
+  m: 'module-replacements',
+  x: 'oxfmt',
+}
+
+export interface PickCandidate {
+  name: string
+  totalLikes?: number
+}
+
+/**
+ * Select one pick per NPMX letter from pre-filtered candidates.
+ * Prefers candidates with `totalLikes >= MIN_LIKES`; falls back to any
+ * candidate; falls back to hardcoded fallback.
+ */
+export function selectPicks(candidatesByLetter: Record<NpmxLetter, PickCandidate[]>): NpmxPick[] {
+  const used = new Set<string>()
+  const picks: NpmxPick[] = []
+
+  for (const letter of NPMX_LETTERS) {
+    const candidates = candidatesByLetter[letter] ?? []
+
+    const liked = candidates.filter(c => (c.totalLikes ?? 0) >= MIN_LIKES && !used.has(c.name))
+    const nonLiked = candidates.filter(c => (c.totalLikes ?? 0) < MIN_LIKES && !used.has(c.name))
+
+    const pool = liked.length > 0 ? liked : nonLiked
+    const pick = pool[Math.floor(Math.random() * pool.length)]
+    const name = pick?.name ?? FALLBACKS[letter]
+
+    used.add(name)
+    picks.push({
+      letter,
+      name,
+      letterIndex: name.toLowerCase().indexOf(letter),
+    })
+  }
+
+  return picks
+}
diff --git a/shared/types/index.ts b/shared/types/index.ts
index 88e28afe0..76678da06 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -9,3 +9,4 @@ export * from './i18n-status'
 export * from './comparison'
 export * from './skills'
 export * from './version-downloads'
+export * from './picks'
diff --git a/shared/types/picks.ts b/shared/types/picks.ts
new file mode 100644
index 000000000..ba8079f91
--- /dev/null
+++ b/shared/types/picks.ts
@@ -0,0 +1,9 @@
+export interface NpmxPick {
+  letter: 'n' | 'p' | 'm' | 'x'
+  name: string
+  letterIndex: number
+}
+
+export interface NpmxPicksResponse {
+  picks: NpmxPick[]
+}
diff --git a/test/unit/server/utils/picks.spec.ts b/test/unit/server/utils/picks.spec.ts
new file mode 100644
index 000000000..7d95f372a
--- /dev/null
+++ b/test/unit/server/utils/picks.spec.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import {
+  selectPicks,
+  FALLBACKS,
+  MIN_LIKES,
+  type PickCandidate,
+  type NpmxLetter,
+} from '../../../../server/utils/picks'
+
+describe('selectPicks', () => {
+  it('returns 4 picks, one per letter', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'next', totalLikes: 10 }],
+      p: [{ name: 'pnpm', totalLikes: 10 }],
+      m: [{ name: 'mocha', totalLikes: 10 }],
+      x: [{ name: 'oxfmt', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks).toHaveLength(4)
+    expect(picks.map(p => p.letter)).toEqual(['n', 'p', 'm', 'x'])
+  })
+
+  it('sets letterIndex correctly', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'next', totalLikes: 10 }],
+      p: [{ name: 'webpack', totalLikes: 10 }],
+      m: [{ name: 'commander', totalLikes: 10 }],
+      x: [{ name: 'luxon', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+
+    expect(picks[0]!.letterIndex).toBe('next'.indexOf('n'))
+    expect(picks[1]!.letterIndex).toBe('webpack'.indexOf('p'))
+    expect(picks[2]!.letterIndex).toBe('commander'.indexOf('m'))
+    expect(picks[3]!.letterIndex).toBe('luxon'.indexOf('x'))
+  })
+
+  it('prefers liked candidates over non-liked', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [
+        { name: 'non-liked-n', totalLikes: 0 },
+        { name: 'liked-n', totalLikes: MIN_LIKES },
+      ],
+      p: [{ name: 'pkg-p', totalLikes: 0 }],
+      m: [{ name: 'pkg-m', totalLikes: 0 }],
+      x: [{ name: 'pkg-x', totalLikes: 0 }],
+    }
+
+    // Run multiple times — liked should always win for 'n'
+    for (let i = 0; i < 20; i++) {
+      const picks = selectPicks(candidates)
+      expect(picks[0]!.name).toBe('liked-n')
+    }
+  })
+
+  it('falls back to non-liked when no liked candidates exist', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'nodemon', totalLikes: 2 }],
+      p: [{ name: 'prettier', totalLikes: 0 }],
+      m: [{ name: 'mocha', totalLikes: 1 }],
+      x: [{ name: 'luxon', totalLikes: 0 }],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks[0]!.name).toBe('nodemon')
+    expect(picks[1]!.name).toBe('prettier')
+    expect(picks[2]!.name).toBe('mocha')
+    expect(picks[3]!.name).toBe('luxon')
+  })
+
+  it('falls back to hardcoded when no candidates at all', () => {
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [],
+      p: [],
+      m: [],
+      x: [],
+    }
+    const picks = selectPicks(candidates)
+    expect(picks[0]!.name).toBe(FALLBACKS.n)
+    expect(picks[1]!.name).toBe(FALLBACKS.p)
+    expect(picks[2]!.name).toBe(FALLBACKS.m)
+    expect(picks[3]!.name).toBe(FALLBACKS.x)
+  })
+
+  it('does not duplicate packages across picks', () => {
+    // 'npm' contains n, p, and m — should only be used once
+    const candidates: Record<NpmxLetter, PickCandidate[]> = {
+      n: [{ name: 'npm', totalLikes: 10 }],
+      p: [
+        { name: 'npm', totalLikes: 10 },
+        { name: 'prettier', totalLikes: 10 },
+      ],
+      m: [
+        { name: 'npm', totalLikes: 10 },
+        { name: 'mocha', totalLikes: 10 },
+      ],
+      x: [{ name: 'luxon', totalLikes: 10 }],
+    }
+    const picks = selectPicks(candidates)
+    const names = picks.map(p => p.name)
+    expect(new Set(names).size).toBe(names.length)
+  })
+})

From ceedfef67b76df6eba760a0c754c9983d7f710f5 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 23 Feb 2026 21:15:57 -0500
Subject: [PATCH 2/3] refactor: remove unnecessary 'deprecated' field from
 query

---
 server/api/picks.get.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/server/api/picks.get.ts b/server/api/picks.get.ts
index fa3fb6fbb..6d45c3291 100644
--- a/server/api/picks.get.ts
+++ b/server/api/picks.get.ts
@@ -28,7 +28,6 @@ interface AlgoliaHit {
   name: string
   downloadsLast30Days: number
   modified: string
-  deprecated?: string
   isDeprecated?: boolean
 }
 
@@ -52,13 +51,7 @@ export default defineCachedEventHandler(
         body: {
           query: '',
           hitsPerPage: ALGOLIA_POOL_SIZE,
-          attributesToRetrieve: [
-            'name',
-            'downloadsLast30Days',
-            'modified',
-            'deprecated',
-            'isDeprecated',
-          ],
+          attributesToRetrieve: ['name', 'downloadsLast30Days', 'modified', 'isDeprecated'],
           attributesToHighlight: [],
         },
       },
@@ -67,7 +60,7 @@ export default defineCachedEventHandler(
     // 2. Post-filter pool
     const now = Date.now()
     const pool = algoliaResponse.hits.filter(hit => {
-      if (hit.deprecated || hit.isDeprecated) return false
+      if (hit.isDeprecated) return false
       if (hit.downloadsLast30Days < MIN_DOWNLOADS_LAST_30_DAYS) return false
       if (now - new Date(hit.modified).getTime() > MAX_MODIFIED_AGE_MS) return false
       return true

From 155b91ed2a243b6e437f5c33f6640806362461bd Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Mon, 23 Feb 2026 21:28:23 -0500
Subject: [PATCH 3/3] test: add an e2e test

---
 modules/runtime/server/cache.ts | 18 ++++++++++++++++
 test/e2e/homepage-picks.spec.ts | 38 +++++++++++++++++++++++++++++++++
 test/fixtures/mock-routes.cjs   | 20 +++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 test/e2e/homepage-picks.spec.ts

diff --git a/modules/runtime/server/cache.ts b/modules/runtime/server/cache.ts
index 9e35b46b1..05a04a362 100644
--- a/modules/runtime/server/cache.ts
+++ b/modules/runtime/server/cache.ts
@@ -240,6 +240,24 @@ function getMockForUrl(url: string): MockResult | null {
     return null
   }
 
+  // Algolia npm-search API - return mock popular packages
+  if (host.endsWith('-dsn.algolia.net') && pathname.endsWith('/query')) {
+    return {
+      data: {
+        hits: [
+          { name: 'nuxt', downloadsLast30Days: 500_000, modified: new Date().toISOString() },
+          { name: 'pnpm', downloadsLast30Days: 800_000, modified: new Date().toISOString() },
+          { name: 'express', downloadsLast30Days: 1_000_000, modified: new Date().toISOString() },
+          { name: 'minimatch', downloadsLast30Days: 600_000, modified: new Date().toISOString() },
+          { name: 'next', downloadsLast30Days: 700_000, modified: new Date().toISOString() },
+          { name: 'axios', downloadsLast30Days: 900_000, modified: new Date().toISOString() },
+          { name: 'remix', downloadsLast30Days: 400_000, modified: new Date().toISOString() },
+          { name: 'webpack', downloadsLast30Days: 750_000, modified: new Date().toISOString() },
+        ],
+      },
+    }
+  }
+
   // esm.sh is handled specially via $fetch.raw override, not here
   // Return null to indicate no mock available at the cachedFetch level
 
diff --git a/test/e2e/homepage-picks.spec.ts b/test/e2e/homepage-picks.spec.ts
new file mode 100644
index 000000000..fbe256b04
--- /dev/null
+++ b/test/e2e/homepage-picks.spec.ts
@@ -0,0 +1,38 @@
+import { expect, test } from './test-utils'
+
+test.describe('Homepage Picks', () => {
+  test('displays 4 picks with highlighted letters', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    // Use aria-label to target the picks nav specifically (not the header nav)
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const pickItems = picksNav.locator('ul > li')
+    await expect(pickItems).toHaveCount(4)
+
+    // Each pick should contain a bold highlighted letter
+    for (let i = 0; i < 4; i++) {
+      const highlightedLetter = pickItems.nth(i).locator('span.font-bold')
+      await expect(highlightedLetter).toBeVisible()
+    }
+
+    // Each pick should be a link to a package page
+    for (let i = 0; i < 4; i++) {
+      const link = pickItems.nth(i).locator('a')
+      const href = await link.getAttribute('href')
+      expect(href).toMatch(/^\/package\//)
+    }
+  })
+
+  test('pick links navigate to package pages', async ({ page, goto }) => {
+    await goto('/', { waitUntil: 'hydration' })
+
+    const picksNav = page.getByRole('navigation', { name: /npmx picks/i })
+    await expect(picksNav).toBeVisible({ timeout: 15000 })
+
+    const firstLink = picksNav.locator('ul > li a').first()
+    await firstLink.click()
+    await expect(page).toHaveURL(/\/package\//)
+  })
+})
diff --git a/test/fixtures/mock-routes.cjs b/test/fixtures/mock-routes.cjs
index bd5527246..e49968190 100644
--- a/test/fixtures/mock-routes.cjs
+++ b/test/fixtures/mock-routes.cjs
@@ -520,6 +520,25 @@ function matchGitHubApi(urlString) {
   return null
 }
 
+/**
+ * @param {string} _urlString
+ * @returns {MockResponse | null}
+ */
+function matchAlgoliaApi(_urlString) {
+  return json({
+    hits: [
+      { name: 'nuxt', downloadsLast30Days: 500000, modified: new Date().toISOString() },
+      { name: 'pnpm', downloadsLast30Days: 800000, modified: new Date().toISOString() },
+      { name: 'express', downloadsLast30Days: 1000000, modified: new Date().toISOString() },
+      { name: 'minimatch', downloadsLast30Days: 600000, modified: new Date().toISOString() },
+      { name: 'next', downloadsLast30Days: 700000, modified: new Date().toISOString() },
+      { name: 'axios', downloadsLast30Days: 900000, modified: new Date().toISOString() },
+      { name: 'remix', downloadsLast30Days: 400000, modified: new Date().toISOString() },
+      { name: 'webpack', downloadsLast30Days: 750000, modified: new Date().toISOString() },
+    ],
+  })
+}
+
 /**
  * Route definitions mapping URL patterns to their matchers.
  * Each entry has a pattern (for Playwright's page.route) and a match function
@@ -549,6 +568,7 @@ const routes = [
     pattern: 'https://constellation.microcosm.blue/**',
     match: matchConstellationApi,
   },
+  { name: 'Algolia API', pattern: 'https://*-dsn.algolia.net/**', match: matchAlgoliaApi },
 ]
 
 /**