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/5] 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/5] 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)

From 62b7f6e9969eef726f1cc45bd23d17e2b29730d2 Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Thu, 12 Mar 2026 20:04:34 +0000
Subject: [PATCH 3/5] fix: max available results hint fixed og search page

---
 app/pages/search.vue | 87 ++++++++++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 32 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 74a4be1c5a..9a6694942e 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -253,14 +253,15 @@ const effectiveTotal = computed(() => {
 })
 
 const resultsLimitAppliedText = computed<string>(() => {
-  const totalUnlimited = visibleResults.value?.totalUnlimited ?? 0
+  const totalUnlimited = results.value?.totalUnlimited ?? 0
+  const total = results.value?.total ?? 0
 
-  if (isRelevanceSort.value && effectiveTotal.value < totalUnlimited) {
-    const total = { total: $n(totalUnlimited) }
+  if (isRelevanceSort.value && total < totalUnlimited) {
+    const totalTrans = { total: $n(totalUnlimited) }
 
     return searchProvider.value === 'npm'
-      ? $t('search.more_results_available_npm', total)
-      : $t('search.more_results_available_algolia', total)
+      ? $t('search.more_results_available_npm', totalTrans)
+      : $t('search.more_results_available_algolia', totalTrans)
   }
   // do not show hint if results limit is not reached
   return ''
@@ -407,14 +408,16 @@ const exactMatchType = computed<'package' | 'org' | 'user' | null>(() => {
 const suggestionCount = computed(() => validatedSuggestions.value.length)
 const totalSelectableCount = computed(() => suggestionCount.value + resultCount.value)
 
+function isElementVisible(el: HTMLElement) {
+  return el.getClientRects().length > 0
+}
+
 /**
  * Get all focusable result elements in DOM order (suggestions first, then packages)
  */
 function getFocusableElements(): HTMLElement[] {
-  const isVisible = (el: HTMLElement) => el.getClientRects().length > 0
-
   const suggestions = Array.from(document.querySelectorAll<HTMLElement>('[data-suggestion-index]'))
-    .filter(isVisible)
+    .filter(isElementVisible)
     .sort((a, b) => {
       const aIdx = Number.parseInt(a.dataset.suggestionIndex ?? '0', 10)
       const bIdx = Number.parseInt(b.dataset.suggestionIndex ?? '0', 10)
@@ -422,7 +425,7 @@ function getFocusableElements(): HTMLElement[] {
     })
 
   const packages = Array.from(document.querySelectorAll<HTMLElement>('[data-result-index]'))
-    .filter(isVisible)
+    .filter(isElementVisible)
     .sort((a, b) => {
       const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
       const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
@@ -449,7 +452,7 @@ async function navigateToPackage(packageName: string) {
 const pendingEnterQuery = shallowRef<string | null>(null)
 
 // Watch for results to navigate when Enter was pressed before results arrived
-watch(displayResults, results => {
+watch(displayResults, ([firstResult]) => {
   if (!pendingEnterQuery.value) return
 
   // Check if input is still focused (user hasn't started navigating or clicked elsewhere)
@@ -459,7 +462,6 @@ watch(displayResults, results => {
   }
 
   // Navigate if first result matches the query that was entered
-  const firstResult = results[0]
   // eslint-disable-next-line no-console
   console.log('[search] watcher fired', {
     pending: pendingEnterQuery.value,
@@ -764,16 +766,29 @@ onBeforeUnmount(() => {
             />
             <p
               v-if="viewMode === 'cards' && paginationMode === 'infinite'"
-              class="text-fg-muted text-sm mt-4 font-mono"
+              class="flex items-center text-fg-muted text-sm mt-4 font-mono"
             >
               <template v-if="isRelevanceSort">
-                {{
+                <span>{{
                   $t(
                     'search.found_packages',
                     { count: $n(visibleResults.total) },
                     visibleResults.total,
                   )
-                }}
+                }}</span>
+                <ClientOnly>
+                  <TooltipApp
+                    v-if="resultsLimitAppliedText"
+                    position="top"
+                    :text="resultsLimitAppliedText"
+                    class="ms-1"
+                  >
+                    <span
+                      class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help"
+                      aria-hidden="true"
+                    />
+                  </TooltipApp>
+                </ClientOnly>
               </template>
               <template v-else>
                 {{
@@ -786,25 +801,33 @@ onBeforeUnmount(() => {
             </p>
             <p
               v-if="viewMode === 'table' || paginationMode === 'paginated'"
-              class="text-fg-muted text-sm mt-4 font-mono"
+              class="flex items-center text-fg-muted text-sm mt-4 font-mono"
             >
-              {{
-                $t(
-                  'filters.count.showing_paginated',
-                  {
-                    pageSize: Math.min(preferredPageSize, effectiveTotal),
-                    count: $n(effectiveTotal),
-                  },
-                  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>
+              <span
+                >{{
+                  $t(
+                    'filters.count.showing_paginated',
+                    {
+                      pageSize: Math.min(preferredPageSize, effectiveTotal),
+                      count: $n(effectiveTotal),
+                    },
+                    effectiveTotal,
+                  )
+                }}
+              </span>
+              <ClientOnly>
+                <TooltipApp
+                  v-if="resultsLimitAppliedText"
+                  position="top"
+                  :text="resultsLimitAppliedText"
+                  class="ms-1"
+                >
+                  <span
+                    class="i-lucide:info w-3 h-3 text-fg-subtle cursor-help"
+                    aria-hidden="true"
+                  />
+                </TooltipApp>
+              </ClientOnly>
             </p>
           </div>
 

From 640792989f217c431752fdf26a0f7f9bd185c190 Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Fri, 13 Mar 2026 07:04:25 +0000
Subject: [PATCH 4/5] fix: improve results handling for algolia search, add
 types

---
 app/composables/npm/search-utils.ts     | 12 ++---
 app/composables/npm/useAlgoliaSearch.ts | 22 ++++----
 app/composables/npm/useSearch.ts        | 67 +++++++++++++++++--------
 shared/types/npm-registry.ts            | 17 ++++++-
 4 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/app/composables/npm/search-utils.ts b/app/composables/npm/search-utils.ts
index a88a6d6422..8abeb78bed 100644
--- a/app/composables/npm/search-utils.ts
+++ b/app/composables/npm/search-utils.ts
@@ -1,4 +1,4 @@
-import type { NpmSearchResponse, NpmSearchResult, PackageMetaResponse } from '#shared/types'
+import type { NpmSearchResult, PackageMetaResponse, SearchResponse } from '#shared/types'
 
 export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
   return {
@@ -20,22 +20,16 @@ export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
   }
 }
 
-export function emptySearchResponse(): NpmSearchResponse {
+export function emptySearchResponse(): SearchResponse {
   return {
     objects: [],
-    total: 0,
     totalUnlimited: 0,
+    total: 0,
     isStale: false,
     time: new Date().toISOString(),
   }
 }
 
-export interface SearchSuggestion {
-  type: 'user' | 'org'
-  name: string
-  exists: boolean
-}
-
 export type SuggestionIntent = 'user' | 'org' | 'both' | null
 
 export function isValidNpmName(name: string): boolean {
diff --git a/app/composables/npm/useAlgoliaSearch.ts b/app/composables/npm/useAlgoliaSearch.ts
index 1fc586c152..d4475d4bb9 100644
--- a/app/composables/npm/useAlgoliaSearch.ts
+++ b/app/composables/npm/useAlgoliaSearch.ts
@@ -3,7 +3,7 @@ import {
   liteClient as algoliasearch,
   type LiteClient,
   type SearchQuery,
-  type SearchResponse,
+  type SearchResponse as AlgoliaSearchResponse,
 } from 'algoliasearch/lite'
 
 let _searchClient: LiteClient | null = null
@@ -157,7 +157,7 @@ export function useAlgoliaSearch() {
       ],
     })
 
-    const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+    const response = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
     if (!response) {
       throw new Error('Algolia returned an empty response')
     }
@@ -165,8 +165,7 @@ export function useAlgoliaSearch() {
     return {
       isStale: false,
       objects: response.hits.map(hitToSearchResult),
-      totalUnlimited: response.nbHits ?? 0,
-      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, response.nbHits ?? 0),
+      total: response.nbHits ?? 0,
       time: new Date().toISOString(),
     }
   }
@@ -203,7 +202,7 @@ export function useAlgoliaSearch() {
         ],
       })
 
-      const response = results[0] as SearchResponse<AlgoliaHit> | undefined
+      const response = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       if (!response) break
 
       serverTotal = response.nbHits ?? 0
@@ -319,7 +318,7 @@ export function useAlgoliaSearch() {
 
     const { results } = await client.search({ requests })
 
-    const mainResponse = results[0] as SearchResponse<AlgoliaHit> | undefined
+    const mainResponse = results[0] as AlgoliaSearchResponse<AlgoliaHit> | undefined
     if (!mainResponse) {
       throw new Error('Algolia returned an empty response')
     }
@@ -327,14 +326,13 @@ export function useAlgoliaSearch() {
     const searchResult: NpmSearchResponse = {
       isStale: false,
       objects: mainResponse.hits.map(hitToSearchResult),
-      total: Math.min(SEARCH_ENGINE_HITS_LIMIT.algolia, mainResponse.nbHits ?? 0),
-      totalUnlimited: mainResponse.nbHits ?? 0,
+      total: mainResponse.nbHits ?? 0,
       time: new Date().toISOString(),
     }
 
     let orgExists = false
     if (orgQueryIndex >= 0 && checks?.name) {
-      const orgResponse = results[orgQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const orgResponse = results[orgQueryIndex] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       const scopePrefix = `@${checks.name.toLowerCase()}/`
       orgExists =
         orgResponse?.hits?.some(h => h.name?.toLowerCase().startsWith(scopePrefix)) ?? false
@@ -342,13 +340,15 @@ export function useAlgoliaSearch() {
 
     let userExists = false
     if (userQueryIndex >= 0) {
-      const userResponse = results[userQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const userResponse = results[userQueryIndex] as AlgoliaSearchResponse<AlgoliaHit> | undefined
       userExists = (userResponse?.nbHits ?? 0) > 0
     }
 
     let packageExists: boolean | null = null
     if (packageQueryIndex >= 0) {
-      const pkgResponse = results[packageQueryIndex] as SearchResponse<AlgoliaHit> | undefined
+      const pkgResponse = results[packageQueryIndex] as
+        | AlgoliaSearchResponse<AlgoliaHit>
+        | undefined
       packageExists = (pkgResponse?.nbHits ?? 0) > 0
     }
 
diff --git a/app/composables/npm/useSearch.ts b/app/composables/npm/useSearch.ts
index b9214b3570..2c33685bdc 100644
--- a/app/composables/npm/useSearch.ts
+++ b/app/composables/npm/useSearch.ts
@@ -1,6 +1,13 @@
-import type { NpmSearchResponse, NpmSearchResult, SearchProvider } from '#shared/types'
+import type {
+  NpmSearchResponse,
+  NpmSearchResult,
+  SearchProvider,
+  SearchResponse,
+  SearchResult,
+  SearchSuggestion,
+} from '#shared/types'
 import type { AlgoliaMultiSearchChecks } from './useAlgoliaSearch'
-import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils'
+import { emptySearchResponse, parseSuggestionIntent } from './search-utils'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
 export const SEARCH_ENGINE_HITS_LIMIT: Record<SearchProvider, number> = {
@@ -8,13 +15,7 @@ export const SEARCH_ENGINE_HITS_LIMIT: Record<SearchProvider, number> = {
   npm: 5000,
 } as const
 
-function emptySearchPayload() {
-  return {
-    searchResponse: emptySearchResponse(),
-    suggestions: [] as SearchSuggestion[],
-    packageAvailability: null as { name: string; available: boolean } | null,
-  }
-}
+const DEFAULT_INITIAL_SEARCH_LIMIT = 25
 
 export interface SearchOptions {
   size?: number
@@ -78,6 +79,25 @@ export function useSearch(
     }
   }
 
+  function prepareSearchResponse(response: NpmSearchResponse | SearchResponse): SearchResponse {
+    const totalUnlimited: number =
+      'totalUnlimited' in response ? response.totalUnlimited : response.total
+
+    return {
+      ...response,
+      totalUnlimited,
+      total: Math.min(totalUnlimited, SEARCH_ENGINE_HITS_LIMIT[toValue(searchProvider)]),
+    }
+  }
+
+  function emptySearchPayload(): SearchResult {
+    return {
+      searchResponse: emptySearchResponse(),
+      suggestions: [],
+      packageAvailability: null,
+    }
+  }
+
   /**
    * Determine which extra checks to include in the Algolia multi-search.
    * Returns `undefined` when nothing uncached needs checking.
@@ -166,7 +186,7 @@ export function useSearch(
     suggestionsLoading.value = false
   }
 
-  const asyncData = useLazyAsyncData(
+  const asyncData = useLazyAsyncData<SearchResult>(
     () => `search:${toValue(searchProvider)}:${toValue(query)}`,
     async (_nuxtApp, { signal }) => {
       const q = toValue(query)
@@ -185,7 +205,11 @@ export function useSearch(
 
         if (config.suggestions) {
           suggestionsLoading.value = true
-          const result = await algoliaMultiSearch(q, { size: opts.size ?? 25 }, checks)
+          const result = await algoliaMultiSearch(
+            q,
+            { size: opts.size ?? DEFAULT_INITIAL_SEARCH_LIMIT },
+            checks,
+          )
 
           if (q !== toValue(query)) {
             return emptySearchPayload()
@@ -194,13 +218,13 @@ export function useSearch(
           isRateLimited.value = false
           processAlgoliaChecks(q, checks, result)
           return {
-            searchResponse: result.search,
+            searchResponse: prepareSearchResponse(result.search),
             suggestions: suggestions.value,
             packageAvailability: packageAvailability.value,
           }
         }
 
-        const response = await searchAlgolia(q, { size: opts.size ?? 25 })
+        const response = await searchAlgolia(q, { size: opts.size ?? DEFAULT_INITIAL_SEARCH_LIMIT })
 
         if (q !== toValue(query)) {
           return emptySearchPayload()
@@ -208,14 +232,18 @@ export function useSearch(
 
         isRateLimited.value = false
         return {
-          searchResponse: response,
+          searchResponse: prepareSearchResponse(response),
           suggestions: [],
           packageAvailability: null,
         }
       }
 
       try {
-        const response = await searchNpm(q, { size: opts.size ?? 25 }, signal)
+        const response = await searchNpm(
+          q,
+          { size: opts.size ?? DEFAULT_INITIAL_SEARCH_LIMIT },
+          signal,
+        )
 
         if (q !== toValue(query)) {
           return emptySearchPayload()
@@ -225,7 +253,7 @@ export function useSearch(
 
         isRateLimited.value = false
         return {
-          searchResponse: response,
+          searchResponse: prepareSearchResponse(response),
           suggestions: [],
           packageAvailability: null,
         }
@@ -261,8 +289,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
-      setCache([...searchResponse.objects], searchResponse.total)
+      setCache([...searchResponse.objects], searchResponse.totalUnlimited)
     }
 
     const currentCount = cache.value?.objects.length ?? 0
@@ -326,7 +353,7 @@ export function useSearch(
     },
   )
 
-  const data = computed<NpmSearchResponse | null>(() => {
+  const data = computed<SearchResponse | null>(() => {
     if (cache.value) {
       return {
         isStale: false,
@@ -339,7 +366,7 @@ export function useSearch(
     return asyncData.data.value?.searchResponse ?? null
   })
 
-  const hasMore = computed(() => {
+  const hasMore = computed<boolean>(() => {
     if (!cache.value) return true
     return cache.value.objects.length < cache.value.total
   })
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index f3eb429d6c..0a3aea4ceb 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -124,11 +124,26 @@ export interface NpmPerson {
 export interface NpmSearchResponse {
   isStale: boolean
   objects: NpmSearchResult[]
-  totalUnlimited?: number
   total: number
   time: string
 }
 
+export interface SearchResponse extends NpmSearchResponse {
+  totalUnlimited: number
+}
+
+export interface SearchSuggestion {
+  type: 'user' | 'org'
+  name: string
+  exists: boolean
+}
+
+export interface SearchResult {
+  searchResponse: SearchResponse
+  suggestions: SearchSuggestion[]
+  packageAvailability: { name: string; available: boolean } | null
+}
+
 export interface NpmSearchResult {
   package: NpmSearchPackage
   score: NpmSearchScore

From 65b6d307ce3dd7355e52fdb8d708a67a2709508b Mon Sep 17 00:00:00 2001
From: Alex Korytskyi <alexander.korytskyi@gmail.com>
Date: Fri, 13 Mar 2026 07:18:05 +0000
Subject: [PATCH 5/5] fix: add missing expression in search, fix empty results
 output

---
 app/composables/npm/useSearch.ts | 1 +
 app/pages/search.vue             | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/composables/npm/useSearch.ts b/app/composables/npm/useSearch.ts
index 2c33685bdc..21270fb1d5 100644
--- a/app/composables/npm/useSearch.ts
+++ b/app/composables/npm/useSearch.ts
@@ -289,6 +289,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
       setCache([...searchResponse.objects], searchResponse.totalUnlimited)
     }
 
diff --git a/app/pages/search.vue b/app/pages/search.vue
index 9a6694942e..3b76cf65de 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -630,8 +630,8 @@ const rawLiveRegionMessage = computed(() => {
   }
 
   if (status.value === 'success' || status.value === 'error') {
-    if (displayResults.value.length === 0 && query.value) {
-      return $t('search.no_results', { query: query.value })
+    if (displayResults.value.length === 0 && committedQuery.value) {
+      return $t('search.no_results', { query: committedQuery.value })
     }
   }