From ec549f9c52b81ca73ed4c84f595d0f646f9b3a08 Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Sun, 8 Mar 2026 19:32:52 +0000
Subject: [PATCH 1/2] fix: apply limits to algolia and npm search output, fix
 visual issues

---
 app/components/Package/Card.vue         |  1 -
 app/components/PaginationControls.vue   | 14 ++++-
 app/composables/npm/search-utils.ts     |  1 +
 app/composables/npm/useAlgoliaSearch.ts |  6 +-
 app/composables/npm/useSearch.ts        | 81 ++++++++++++++-----------
 app/composables/npm/useUserPackages.ts  |  4 +-
 app/composables/useGlobalSearch.ts      |  2 +-
 app/composables/useSettings.ts          |  4 +-
 app/pages/search.vue                    | 22 ++++++-
 i18n/locales/en.json                    |  4 +-
 i18n/schema.json                        |  6 ++
 shared/types/npm-registry.ts            |  3 +
 shared/types/preferences.ts             |  4 +-
 13 files changed, 100 insertions(+), 52 deletions(-)

diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 6c601cde1f..1f9b916b61 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -161,7 +161,6 @@ const numberFormatter = useNumberFormatter()
     </div>
 
     <ul
-      role="list"
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
index 9c34b0c9f8..75e32dd9e2 100644
--- a/app/components/PaginationControls.vue
+++ b/app/components/PaginationControls.vue
@@ -2,6 +2,8 @@
 import type { PageSize, PaginationMode, ViewMode } from '#shared/types/preferences'
 import { PAGE_SIZE_OPTIONS } from '#shared/types/preferences'
 
+const ALL_PAGES_VISIBLE_TRESHOLD = 7
+
 const props = defineProps<{
   totalItems: number
   /** When in table view, force pagination mode (no infinite scroll for tables) */
@@ -63,7 +65,7 @@ const visiblePages = computed(() => {
   const current = currentPage.value
   const pages: (number | 'ellipsis')[] = []
 
-  if (total <= 7) {
+  if (total <= ALL_PAGES_VISIBLE_TRESHOLD) {
     // Show all pages
     for (let i = 1; i <= total; i++) {
       pages.push(i)
@@ -97,6 +99,11 @@ const visiblePages = computed(() => {
   return pages
 })
 
+// disable last page button to prevent TOO MANY REQUESTS error
+function isPageButtonDisabled(page: number): boolean {
+  return totalPages.value > ALL_PAGES_VISIBLE_TRESHOLD && page > currentPage.value + 2
+}
+
 function handlePageSizeChange(event: Event) {
   const target = event.target as HTMLSelectElement
   const value = target.value
@@ -167,8 +174,8 @@ function handlePageSizeChange(event: Event) {
       <span class="text-sm font-mono text-fg-muted">
         {{
           $t('filters.pagination.showing', {
-            start: startItem,
-            end: endItem,
+            start: $n(startItem),
+            end: $n(endItem),
             total: $n(totalItems),
           })
         }}
@@ -197,6 +204,7 @@ function handlePageSizeChange(event: Event) {
           <button
             v-else
             type="button"
+            :disabled="isPageButtonDisabled(page)"
             class="min-w-[32px] h-8 px-2 font-mono text-sm rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
             :class="
               page === currentPage
diff --git a/app/composables/npm/search-utils.ts b/app/composables/npm/search-utils.ts
index f5dbc298c0..a88a6d6422 100644
--- a/app/composables/npm/search-utils.ts
+++ b/app/composables/npm/search-utils.ts
@@ -24,6 +24,7 @@ export function emptySearchResponse(): NpmSearchResponse {
   return {
     objects: [],
     total: 0,
+    totalUnlimited: 0,
     isStale: false,
     time: new Date().toISOString(),
   }
diff --git a/app/composables/npm/useAlgoliaSearch.ts b/app/composables/npm/useAlgoliaSearch.ts
index eb10a2e7ae..1fc586c152 100644
--- a/app/composables/npm/useAlgoliaSearch.ts
+++ b/app/composables/npm/useAlgoliaSearch.ts
@@ -165,7 +165,8 @@ export function useAlgoliaSearch() {
     return {
       isStale: false,
       objects: response.hits.map(hitToSearchResult),
-      total: response.nbHits ?? 0,
+      totalUnlimited: response.nbHits ?? 0,
+      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, response.nbHits ?? 0),
       time: new Date().toISOString(),
     }
   }
@@ -326,7 +327,8 @@ export function useAlgoliaSearch() {
     const searchResult: NpmSearchResponse = {
       isStale: false,
       objects: mainResponse.hits.map(hitToSearchResult),
-      total: mainResponse.nbHits ?? 0,
+      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, mainResponse.nbHits ?? 0),
+      totalUnlimited: mainResponse.nbHits ?? 0,
       time: new Date().toISOString(),
     }
 
diff --git a/app/composables/npm/useSearch.ts b/app/composables/npm/useSearch.ts
index d07f31e8b7..b9214b3570 100644
--- a/app/composables/npm/useSearch.ts
+++ b/app/composables/npm/useSearch.ts
@@ -1,9 +1,13 @@
-import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
-import type { SearchProvider } from '~/composables/useSettings'
+import type { NpmSearchResponse, NpmSearchResult, SearchProvider } from '#shared/types'
 import type { AlgoliaMultiSearchChecks } from './useAlgoliaSearch'
 import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
+export const SEARCH_ENGINE_HITS_LIMIT: Record<SearchProvider, number> = {
+  algolia: 1000,
+  npm: 5000,
+} as const
+
 function emptySearchPayload() {
   return {
     searchResponse: emptySearchResponse(),
@@ -25,6 +29,14 @@ export interface UseSearchConfig {
   suggestions?: boolean
 }
 
+interface SearchResponseCache {
+  query: string
+  provider: SearchProvider
+  objects: NpmSearchResult[]
+  totalUnlimited: number
+  total: number
+}
+
 export function useSearch(
   query: MaybeRefOrGetter<string>,
   searchProvider: MaybeRefOrGetter<SearchProvider>,
@@ -38,12 +50,7 @@ export function useSearch(
     checkUserExists: checkUserNpm,
   } = useNpmSearch()
 
-  const cache = shallowRef<{
-    query: string
-    provider: SearchProvider
-    objects: NpmSearchResult[]
-    total: number
-  } | null>(null)
+  const cache = shallowRef<SearchResponseCache | null>(null)
 
   const isLoadingMore = shallowRef(false)
   const isRateLimited = shallowRef(false)
@@ -54,6 +61,23 @@ export function useSearch(
   const existenceCache = shallowRef<Record<string, boolean>>({})
   const suggestionRequestId = shallowRef(0)
 
+  function setCache(objects: NpmSearchResult[] | null, total: number = 0): void {
+    if (objects === null) {
+      cache.value = null
+      return
+    }
+
+    const provider = toValue(searchProvider)
+
+    cache.value = {
+      query: toValue(query),
+      provider,
+      objects,
+      totalUnlimited: total,
+      total: Math.min(total, SEARCH_ENGINE_HITS_LIMIT[provider]),
+    }
+  }
+
   /**
    * Determine which extra checks to include in the Algolia multi-search.
    * Returns `undefined` when nothing uncached needs checking.
@@ -154,7 +178,7 @@ export function useSearch(
       }
 
       const opts = toValue(options)
-      cache.value = null
+      setCache(null)
 
       if (provider === 'algolia') {
         const checks = config.suggestions ? buildAlgoliaChecks(q) : undefined
@@ -197,12 +221,7 @@ export function useSearch(
           return emptySearchPayload()
         }
 
-        cache.value = {
-          query: q,
-          provider,
-          objects: response.objects,
-          total: response.total,
-        }
+        setCache(response.objects, response.total)
 
         isRateLimited.value = false
         return {
@@ -230,12 +249,12 @@ export function useSearch(
     const provider = toValue(searchProvider)
 
     if (!q) {
-      cache.value = null
+      setCache(null)
       return
     }
 
     if (cache.value && (cache.value.query !== q || cache.value.provider !== provider)) {
-      cache.value = null
+      setCache(null)
       await asyncData.refresh()
       return
     }
@@ -243,12 +262,7 @@ export function useSearch(
     // Seed cache from asyncData for Algolia (which skips cache on initial fetch)
     if (!cache.value && asyncData.data.value) {
       const { searchResponse } = asyncData.data.value
-      cache.value = {
-        query: q,
-        provider,
-        objects: [...searchResponse.objects],
-        total: searchResponse.total,
-      }
+      setCache([...searchResponse.objects], searchResponse.total)
     }
 
     const currentCount = cache.value?.objects.length ?? 0
@@ -270,25 +284,17 @@ export function useSearch(
       if (cache.value && cache.value.query === q && cache.value.provider === provider) {
         const existingNames = new Set(cache.value.objects.map(obj => obj.package.name))
         const newObjects = response.objects.filter(obj => !existingNames.has(obj.package.name))
-        cache.value = {
-          query: q,
-          provider,
-          objects: [...cache.value.objects, ...newObjects],
-          total: response.total,
-        }
+
+        setCache([...cache.value.objects, ...newObjects], response.total)
       } else {
-        cache.value = {
-          query: q,
-          provider,
-          objects: response.objects,
-          total: response.total,
-        }
+        setCache(response.objects, response.total)
       }
 
       if (
         cache.value &&
         cache.value.objects.length < targetSize &&
-        cache.value.objects.length < cache.value.total
+        cache.value.objects.length < cache.value.total &&
+        cache.value.objects.length < SEARCH_ENGINE_HITS_LIMIT[provider] // additional protection from infinite loop
       ) {
         await fetchMore(targetSize)
       }
@@ -310,7 +316,7 @@ export function useSearch(
   watch(
     () => toValue(searchProvider),
     async () => {
-      cache.value = null
+      setCache(null)
       existenceCache.value = {}
       await asyncData.refresh()
       const targetSize = toValue(options).size
@@ -326,6 +332,7 @@ export function useSearch(
         isStale: false,
         objects: cache.value.objects,
         total: cache.value.total,
+        totalUnlimited: cache.value.totalUnlimited,
         time: new Date().toISOString(),
       }
     }
diff --git a/app/composables/npm/useUserPackages.ts b/app/composables/npm/useUserPackages.ts
index dc9ab0ffa8..fe25a6dd05 100644
--- a/app/composables/npm/useUserPackages.ts
+++ b/app/composables/npm/useUserPackages.ts
@@ -1,4 +1,4 @@
-import type { NpmSearchResponse, NpmSearchResult } from '#shared/types'
+import type { NpmSearchResponse, NpmSearchResult, SearchProvider } from '#shared/types'
 import { emptySearchResponse } from './search-utils'
 
 /** Default page size for incremental loading (npm registry path) */
@@ -38,7 +38,7 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
 
   /** Tracks which provider actually served the current data (may differ from
    *  searchProvider when Algolia returns empty and we fall through to npm) */
-  const activeProvider = shallowRef<'npm' | 'algolia'>(searchProviderValue.value)
+  const activeProvider = shallowRef<SearchProvider>(searchProviderValue.value)
 
   const cache = shallowRef<{
     username: string
diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index 77367a049a..d4a02cb87b 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -45,7 +45,7 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   )
 
   // Updates URL when search query changes (immediately for instantSearch or after Enter hit otherwise)
-  const updateUrlQueryImpl = (value: string, provider: 'npm' | 'algolia') => {
+  const updateUrlQueryImpl = (value: string, provider: SearchProvider) => {
     const isSameQuery = route.query.q === value && route.query.p === provider
     // Don't navigate away from pages that use ?q for local filtering
     if ((pagesWithLocalFilter.has(route.name as string) && place === 'content') || isSameQuery) {
diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts
index 8a17f4b430..51fbdeaa16 100644
--- a/app/composables/useSettings.ts
+++ b/app/composables/useSettings.ts
@@ -2,15 +2,13 @@ import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
+import type { SearchProvider } from '#shared/types'
 import { BACKGROUND_THEMES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
 
 type AccentColorId = keyof typeof ACCENT_COLORS.light
 
-/** Available search providers */
-export type SearchProvider = 'npm' | 'algolia'
-
 /**
  * Application settings stored in localStorage
  */
diff --git a/app/pages/search.vue b/app/pages/search.vue
index ce503b995b..a81c4c8835 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -252,6 +252,19 @@ const effectiveTotal = computed(() => {
   return displayResults.value.length
 })
 
+const resultsLimitAppliedText = computed<string>(() => {
+  console.log(effectiveTotal.value, visibleResults.value?.totalUnlimited)
+  if (isRelevanceSort.value && effectiveTotal.value < visibleResults.value?.totalUnlimited) {
+    const total = { total: $n(visibleResults.value?.totalUnlimited) }
+
+    return searchProvider.value === 'npm'
+      ? $t('search.more_results_available_npm', total)
+      : $t('search.more_results_available_algolia', total)
+  }
+  // do not show hint if results limit is not reached
+  return ''
+})
+
 // Handle filter chip removal
 function handleClearFilter(chip: FilterChip) {
   clearFilter(chip)
@@ -784,12 +797,19 @@ onBeforeUnmount(() => {
                   effectiveTotal,
                 )
               }}
+              <TooltipApp
+                v-if="resultsLimitAppliedText"
+                position="top"
+                :text="resultsLimitAppliedText"
+              >
+                <span class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help" aria-hidden="true" />
+              </TooltipApp>
             </p>
           </div>
 
           <div v-else-if="status === 'success' || status === 'error'" class="py-12">
             <p class="text-fg-muted font-mono mb-6 text-center">
-              {{ $t('search.no_results', { query }) }}
+              {{ $t('search.no_results', { query: committedQuery }) }}
             </p>
 
             <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5bc57ea17e..3f158967c4 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -71,7 +71,9 @@
     "instant_search_off": "off",
     "instant_search_turn_on": "turn on",
     "instant_search_turn_off": "turn off",
-    "instant_search_advisory": "{label} {state} — {action}"
+    "instant_search_advisory": "{label} {state} — {action}",
+    "more_results_available_npm": "There are {total} results for this search, but npm registry limits search output. Refine your query to narrow results.",
+    "more_results_available_algolia": "There are {total} results for this search. Algolia search is capped at 1,000 — switch to npm Registry for up to 5,000 results, or refine your query."
   },
   "nav": {
     "main_navigation": "Main",
diff --git a/i18n/schema.json b/i18n/schema.json
index 4ed08a60b2..bdf2603b1f 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -219,6 +219,12 @@
         },
         "instant_search_advisory": {
           "type": "string"
+        },
+        "more_results_available_npm": {
+          "type": "string"
+        },
+        "more_results_available_algolia": {
+          "type": "string"
         }
       },
       "additionalProperties": false
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 250a9218e6..f3eb429d6c 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -103,6 +103,8 @@ export interface PackageVersionInfo {
   deprecated?: string
 }
 
+export type SearchProvider = 'npm' | 'algolia'
+
 /**
  * Person/contact type extracted from @npm/types Contact interface
  * Used for maintainers, authors, publishers
@@ -122,6 +124,7 @@ export interface NpmPerson {
 export interface NpmSearchResponse {
   isStale: boolean
   objects: NpmSearchResult[]
+  totalUnlimited?: number
   total: number
   time: string
 }
diff --git a/shared/types/preferences.ts b/shared/types/preferences.ts
index 1714c404d3..96ef6073fe 100644
--- a/shared/types/preferences.ts
+++ b/shared/types/preferences.ts
@@ -3,6 +3,8 @@
  * Used for configurable columns, filtering, sorting, and pagination
  */
 
+import type { SearchProvider } from './npm-registry'
+
 // View modes
 export type ViewMode = 'cards' | 'table'
 
@@ -163,7 +165,7 @@ export const SORT_KEYS: SortKeyConfig[] = [
  * - npm returns 1 for all detail scores, and score.final === searchScore (= relevance)
  * - Algolia returns synthetic values (quality: 0|1, maintenance: 0, score: 0)
  */
-export const PROVIDER_SORT_KEYS: Record<'algolia' | 'npm', Set<SortKey>> = {
+export const PROVIDER_SORT_KEYS: Record<SearchProvider, Set<SortKey>> = {
   algolia: new Set<SortKey>(['relevance', 'downloads-week', 'updated', 'name']),
   npm: new Set<SortKey>(['relevance', 'downloads-week', 'updated', 'name']),
 }

From 4c453dd53760a3f02c71b05efff84f7ec0d6405e Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Tue, 10 Mar 2026 23:33:59 +0000
Subject: [PATCH 2/2] fix: remove log, add typesafe condition in search

---
 app/pages/search.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index a81c4c8835..74a4be1c5a 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -253,9 +253,10 @@ const effectiveTotal = computed(() => {
 })
 
 const resultsLimitAppliedText = computed<string>(() => {
-  console.log(effectiveTotal.value, visibleResults.value?.totalUnlimited)
-  if (isRelevanceSort.value && effectiveTotal.value < visibleResults.value?.totalUnlimited) {
-    const total = { total: $n(visibleResults.value?.totalUnlimited) }
+  const totalUnlimited = visibleResults.value?.totalUnlimited ?? 0
+
+  if (isRelevanceSort.value && effectiveTotal.value < totalUnlimited) {
+    const total = { total: $n(totalUnlimited) }
 
     return searchProvider.value === 'npm'
       ? $t('search.more_results_available_npm', total)