fix: search hydration errors (#1358)

app/components/Compare/PackageSelector.vue

···
 const isInputFocused = shallowRef(false)
 
 // Use the shared search composable (supports both npm and Algolia providers)
-const { data: searchData, status } = useSearch(inputValue, { size: 15 })
+const { searchProvider } = useSearchProvider()
+const { data: searchData, status } = useSearch(inputValue, searchProvider, { size: 15 })
 
 const isSearching = computed(() => status.value === 'pending')
 

app/components/Header/SearchBox.vue

···
 
 const router = useRouter()
 const route = useRoute()
-const { isAlgolia } = useSearchProvider()
+const { searchProvider } = useSearchProvider()
+const searchProviderValue = computed(() => {
+  const p = normalizeSearchParam(route.query.p)
+  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+  return 'algolia'
+})
 
 const isSearchFocused = shallowRef(false)
 
···
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-function updateUrlQueryImpl(value: string) {
+function updateUrlQueryImpl(value: string, provider: 'npm' | 'algolia') {
   // Don't navigate away from pages that use ?q for local filtering
   if (pagesWithLocalFilter.has(route.name as string)) {
     return
   }
   if (route.name === 'search') {
-    router.replace({ query: { q: value || undefined } })
+    router.replace({ query: { q: value || undefined, p: provider === 'npm' ? 'npm' : undefined } })
     return
   }
   if (!value) {
···
     name: 'search',
     query: {
       q: value,
+      p: provider === 'npm' ? 'npm' : undefined,
     },
   })
 }
···
 const updateUrlQueryAlgolia = debounce(updateUrlQueryImpl, 80)
 
 const updateUrlQuery = Object.assign(
-  (value: string) => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm)(value),
+  (value: string) =>
+    (searchProviderValue.value === 'algolia' ? updateUrlQueryAlgolia : updateUrlQueryNpm)(
+      value,
+      searchProviderValue.value,
+    ),
   {
-    flush: () => (isAlgolia.value ? updateUrlQueryAlgolia : updateUrlQueryNpm).flush(),
+    flush: () =>
+      (searchProviderValue.value === 'algolia' ? updateUrlQueryAlgolia : updateUrlQueryNpm).flush(),
   },
 )
 
···
       name: 'search',
       query: {
         q: searchQuery.value,
+        p: searchProviderValue.value === 'npm' ? 'npm' : undefined,
       },
     })
   } else {

app/components/SearchProviderToggle.client.vue

···
 <script setup lang="ts">
-const { searchProvider, isAlgolia } = useSearchProvider()
+const route = useRoute()
+const router = useRouter()
+const { searchProvider } = useSearchProvider()
+const searchProviderValue = computed(() => {
+  const p = normalizeSearchParam(route.query.p)
+  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+  return 'algolia'
+})
 
 const isOpen = shallowRef(false)
 const toggleRef = useTemplateRef('toggleRef')
···
             type="button"
             role="menuitem"
             class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted"
-            :class="[!isAlgolia ? 'bg-bg-muted' : '']"
+            :class="[searchProviderValue !== 'algolia' ? 'bg-bg-muted' : '']"
             @click="
               () => {
                 searchProvider = 'npm'
+                router.push({ query: { ...route.query, p: 'npm' } })
                 isOpen = false
               }
             "
           >
             <span
               class="i-carbon:catalog w-4 h-4 mt-0.5 shrink-0"
-              :class="!isAlgolia ? 'text-accent' : 'text-fg-muted'"
+              :class="searchProviderValue !== 'algolia' ? 'text-accent' : 'text-fg-muted'"
               aria-hidden="true"
             />
             <div class="min-w-0 flex-1">
-              <div class="text-sm font-medium" :class="!isAlgolia ? 'text-fg' : 'text-fg-muted'">
+              <div
+                class="text-sm font-medium"
+                :class="searchProviderValue !== 'algolia' ? 'text-fg' : 'text-fg-muted'"
+              >
                 {{ $t('settings.data_source.npm') }}
               </div>
               <p class="text-xs text-fg-subtle mt-0.5">
···
             type="button"
             role="menuitem"
             class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted mt-1"
-            :class="[isAlgolia ? 'bg-bg-muted' : '']"
+            :class="[searchProviderValue === 'algolia' ? 'bg-bg-muted' : '']"
             @click="
               () => {
                 searchProvider = 'algolia'
+                router.push({ query: { ...route.query, p: undefined } })
                 isOpen = false
               }
             "
           >
             <span
               class="i-carbon:search w-4 h-4 mt-0.5 shrink-0"
-              :class="isAlgolia ? 'text-accent' : 'text-fg-muted'"
+              :class="searchProviderValue === 'algolia' ? 'text-accent' : 'text-fg-muted'"
               aria-hidden="true"
             />
             <div class="min-w-0 flex-1">
-              <div class="text-sm font-medium" :class="isAlgolia ? 'text-fg' : 'text-fg-muted'">
+              <div
+                class="text-sm font-medium"
+                :class="searchProviderValue === 'algolia' ? 'text-fg' : 'text-fg-muted'"
+              >
                 {{ $t('settings.data_source.algolia') }}
               </div>
               <p class="text-xs text-fg-subtle mt-0.5">
···
           </button>
 
           <!-- Algolia attribution -->
-          <div v-if="isAlgolia" class="border-t border-border mx-1 mt-1 pt-2 pb-1">
+          <div
+            v-if="searchProviderValue === 'algolia'"
+            class="border-t border-border mx-1 mt-1 pt-2 pb-1"
+          >
             <a
               href="https://www.algolia.com/developers"
               target="_blank"

app/composables/npm/useOrgPackages.ts

···
  * 3. Falls back to lightweight server-side package-meta lookups
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
+  const route = useRoute()
   const { searchProvider } = useSearchProvider()
+  const searchProviderValue = computed(() => {
+    const p = normalizeSearchParam(route.query.p)
+    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+    return 'algolia'
+  })
   const { getPackagesByName } = useAlgoliaSearch()
 
   const asyncData = useLazyAsyncData(
-    () => `org-packages:${searchProvider.value}:${toValue(orgName)}`,
+    () => `org-packages:${searchProviderValue.value}:${toValue(orgName)}`,
     async ({ ssrContext }, { signal }) => {
       const org = toValue(orgName)
       if (!org) {
···
       }
 
       // Fetch metadata + downloads from Algolia (single request via getObjects)
-      if (searchProvider.value === 'algolia') {
+      if (searchProviderValue.value === 'algolia') {
         try {
           const response = await getPackagesByName(packageNames)
           if (response.objects.length > 0) {

app/composables/npm/useSearch.ts

···
 import { type SearchSuggestion, emptySearchResponse, parseSuggestionIntent } from './search-utils'
 import { isValidNewPackageName, checkPackageExists } from '~/utils/package-name'
 
+function emptySearchPayload() {
+  return {
+    searchResponse: emptySearchResponse(),
+    suggestions: [] as SearchSuggestion[],
+    packageAvailability: null as { name: string; available: boolean } | null,
+  }
+}
+
 export interface SearchOptions {
   size?: number
 }
···
 
 export function useSearch(
   query: MaybeRefOrGetter<string>,
+  searchProvider: MaybeRefOrGetter<SearchProvider>,
   options: MaybeRefOrGetter<SearchOptions> = {},
   config: UseSearchConfig = {},
 ) {
-  const { searchProvider } = useSearchProvider()
   const { search: searchAlgolia, searchWithSuggestions: algoliaMultiSearch } = useAlgoliaSearch()
   const {
     search: searchNpm,
···
   const suggestionsLoading = shallowRef(false)
   const packageAvailability = shallowRef<{ name: string; available: boolean } | null>(null)
   const existenceCache = shallowRef<Record<string, boolean>>({})
-  let suggestionRequestId = 0
+  const suggestionRequestId = shallowRef(0)
 
   /**
    * Determine which extra checks to include in the Algolia multi-search.
···
   }
 
   const asyncData = useLazyAsyncData(
-    () => `search:${searchProvider.value}:${toValue(query)}`,
+    () => `search:${toValue(searchProvider)}:${toValue(query)}`,
     async (_nuxtApp, { signal }) => {
       const q = toValue(query)
-      const provider = searchProvider.value
+      const provider = toValue(searchProvider)
 
       if (!q.trim()) {
         isRateLimited.value = false
-        return emptySearchResponse()
+        return emptySearchPayload()
       }
 
       const opts = toValue(options)
···
           const result = await algoliaMultiSearch(q, { size: opts.size ?? 25 }, checks)
 
           if (q !== toValue(query)) {
-            return emptySearchResponse()
+            return emptySearchPayload()
           }
 
           isRateLimited.value = false
           processAlgoliaChecks(q, checks, result)
-          return result.search
+          return {
+            searchResponse: result.search,
+            suggestions: suggestions.value,
+            packageAvailability: packageAvailability.value,
+          }
         }
 
         const response = await searchAlgolia(q, { size: opts.size ?? 25 })
 
         if (q !== toValue(query)) {
-          return emptySearchResponse()
+          return emptySearchPayload()
         }
 
         isRateLimited.value = false
-        return response
+        return {
+          searchResponse: response,
+          suggestions: [],
+          packageAvailability: null,
+        }
       }
 
       try {
         const response = await searchNpm(q, { size: opts.size ?? 25 }, signal)
 
         if (q !== toValue(query)) {
-          return emptySearchResponse()
+          return emptySearchPayload()
         }
 
         cache.value = {
···
         }
 
         isRateLimited.value = false
-        return response
+        return {
+          searchResponse: response,
+          suggestions: [],
+          packageAvailability: null,
+        }
       } catch (error: unknown) {
         const errorMessage = (error as { message?: string })?.message || String(error)
         const isRateLimitError =
···
 
         if (isRateLimitError) {
           isRateLimited.value = true
-          return emptySearchResponse()
+          return emptySearchPayload()
         }
         throw error
       }
     },
-    { default: emptySearchResponse },
+    { default: emptySearchPayload },
   )
 
   async function fetchMore(targetSize: number): Promise<void> {
     const q = toValue(query).trim()
-    const provider = searchProvider.value
+    const provider = toValue(searchProvider)
 
     if (!q) {
       cache.value = null
···
 
     // Seed cache from asyncData for Algolia (which skips cache on initial fetch)
     if (!cache.value && asyncData.data.value) {
-      const d = asyncData.data.value
+      const { searchResponse } = asyncData.data.value
       cache.value = {
         query: q,
         provider,
-        objects: [...d.objects],
-        total: d.total,
+        objects: [...searchResponse.objects],
+        total: searchResponse.total,
       }
     }
 
···
     },
   )
 
-  watch(searchProvider, async () => {
-    cache.value = null
-    existenceCache.value = {}
-    await asyncData.refresh()
-    const targetSize = toValue(options).size
-    if (targetSize) {
-      await fetchMore(targetSize)
-    }
-  })
+  watch(
+    () => toValue(searchProvider),
+    async () => {
+      cache.value = null
+      existenceCache.value = {}
+      await asyncData.refresh()
+      const targetSize = toValue(options).size
+      if (targetSize) {
+        await fetchMore(targetSize)
+      }
+    },
+  )
 
   const data = computed<NpmSearchResponse | null>(() => {
     if (cache.value) {
···
         time: new Date().toISOString(),
       }
     }
-    return asyncData.data.value
+    return asyncData.data.value?.searchResponse ?? null
   })
 
-  if (import.meta.client && asyncData.data.value?.isStale) {
-    onMounted(() => {
-      asyncData.refresh()
-    })
-  }
-
   const hasMore = computed(() => {
     if (!cache.value) return true
     return cache.value.objects.length < cache.value.total
   })
 
-  // npm suggestion checking (Algolia handles suggestions inside the search handler above)
-  if (config.suggestions) {
-    async function validateSuggestionsNpm(q: string) {
-      const requestId = ++suggestionRequestId
-      const { intent, name } = parseSuggestionIntent(q)
+  async function validateSuggestionsNpm(q: string) {
+    const requestId = ++suggestionRequestId.value
+    const { intent, name } = parseSuggestionIntent(q)
+    let availability: { name: string; available: boolean } | null = null
+
+    const promises: Promise<void>[] = []
 
-      const trimmed = q.trim()
-      if (isValidNewPackageName(trimmed)) {
+    const trimmed = q.trim()
+    if (isValidNewPackageName(trimmed)) {
+      promises.push(
         checkPackageExists(trimmed)
           .then(exists => {
             if (trimmed === toValue(query).trim()) {
-              packageAvailability.value = { name: trimmed, available: !exists }
+              availability = { name: trimmed, available: !exists }
+              packageAvailability.value = availability
             }
           })
           .catch(() => {
-            packageAvailability.value = null
-          })
-      } else {
-        packageAvailability.value = null
-      }
-
-      if (!intent || !name) {
-        suggestions.value = []
-        suggestionsLoading.value = false
-        return
-      }
+            availability = null
+          }),
+      )
+    } else {
+      availability = null
+    }
 
-      suggestionsLoading.value = true
-      const result: SearchSuggestion[] = []
-      const lowerName = name.toLowerCase()
+    if (!intent || !name) {
+      suggestionsLoading.value = false
+      await Promise.all(promises)
+      return { suggestions: [], packageAvailability: availability }
+    }
 
-      try {
-        const wantOrg = intent === 'org' || intent === 'both'
-        const wantUser = intent === 'user' || intent === 'both'
+    suggestionsLoading.value = true
+    const result: SearchSuggestion[] = []
+    const lowerName = name.toLowerCase()
 
-        const promises: Promise<void>[] = []
+    try {
+      const wantOrg = intent === 'org' || intent === 'both'
+      const wantUser = intent === 'user' || intent === 'both'
 
-        if (wantOrg && existenceCache.value[`org:${lowerName}`] === undefined) {
-          promises.push(
-            checkOrgNpm(name)
-              .then(exists => {
-                existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: exists }
-              })
-              .catch(() => {
-                existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: false }
-              }),
-          )
-        }
+      if (wantOrg && existenceCache.value[`org:${lowerName}`] === undefined) {
+        promises.push(
+          checkOrgNpm(name)
+            .then(exists => {
+              existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: exists }
+            })
+            .catch(() => {
+              existenceCache.value = { ...existenceCache.value, [`org:${lowerName}`]: false }
+            }),
+        )
+      }
 
-        if (wantUser && existenceCache.value[`user:${lowerName}`] === undefined) {
-          promises.push(
-            checkUserNpm(name)
-              .then(exists => {
-                existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: exists }
-              })
-              .catch(() => {
-                existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: false }
-              }),
-          )
-        }
+      if (wantUser && existenceCache.value[`user:${lowerName}`] === undefined) {
+        promises.push(
+          checkUserNpm(name)
+            .then(exists => {
+              existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: exists }
+            })
+            .catch(() => {
+              existenceCache.value = { ...existenceCache.value, [`user:${lowerName}`]: false }
+            }),
+        )
+      }
 
-        if (promises.length > 0) {
-          await Promise.all(promises)
-        }
+      if (promises.length > 0) {
+        await Promise.all(promises)
+      }
 
-        if (requestId !== suggestionRequestId) return
+      if (requestId !== suggestionRequestId.value)
+        return { suggestions: [], packageAvailability: availability }
 
-        const isOrg = wantOrg && existenceCache.value[`org:${lowerName}`]
-        const isUser = wantUser && existenceCache.value[`user:${lowerName}`]
+      const isOrg = wantOrg && existenceCache.value[`org:${lowerName}`]
+      const isUser = wantUser && existenceCache.value[`user:${lowerName}`]
 
-        if (isOrg) {
-          result.push({ type: 'org', name, exists: true })
-        }
-        if (isUser && !isOrg) {
-          result.push({ type: 'user', name, exists: true })
-        }
-      } finally {
-        if (requestId === suggestionRequestId) {
-          suggestionsLoading.value = false
-        }
+      if (isOrg) {
+        result.push({ type: 'org', name, exists: true })
+      }
+      if (isUser && !isOrg) {
+        result.push({ type: 'user', name, exists: true })
       }
-
-      if (requestId === suggestionRequestId) {
-        suggestions.value = result
+    } finally {
+      if (requestId === suggestionRequestId.value) {
+        suggestionsLoading.value = false
       }
     }
 
-    watch(
-      () => toValue(query),
-      q => {
-        if (searchProvider.value !== 'algolia') {
-          validateSuggestionsNpm(q)
-        }
-      },
-      { immediate: true },
-    )
+    if (requestId === suggestionRequestId.value) {
+      suggestions.value = result
+      return { suggestions: result, packageAvailability: availability }
+    }
+
+    return { suggestions: [], packageAvailability: availability }
+  }
 
-    watch(searchProvider, () => {
-      if (searchProvider.value !== 'algolia') {
-        validateSuggestionsNpm(toValue(query))
+  const npmSuggestions = useLazyAsyncData(
+    () => `npm-suggestions:${toValue(searchProvider)}:${toValue(query)}`,
+    async () => {
+      const q = toValue(query).trim()
+      if (toValue(searchProvider) === 'algolia' || !q)
+        return { suggestions: [], packageAvailability: null }
+      const { intent, name } = parseSuggestionIntent(q)
+      if (!intent || !name) return { suggestions: [], packageAvailability: null }
+      return validateSuggestionsNpm(q)
+    },
+    { default: () => ({ suggestions: [], packageAvailability: null }) },
+  )
+
+  watch(
+    [() => asyncData.data.value.suggestions, () => npmSuggestions.data.value.suggestions],
+    ([algoliaSuggestions, npmSuggestionsValue]) => {
+      if (algoliaSuggestions.length || npmSuggestionsValue.length) {
+        suggestions.value = algoliaSuggestions.length ? algoliaSuggestions : npmSuggestionsValue
       }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    [
+      () => asyncData.data.value?.packageAvailability,
+      () => npmSuggestions.data.value.packageAvailability,
+    ],
+    ([algoliaPackageAvailability, npmPackageAvailability]) => {
+      if (algoliaPackageAvailability || npmPackageAvailability) {
+        packageAvailability.value = algoliaPackageAvailability || npmPackageAvailability
+      }
+    },
+    { immediate: true },
+  )
+
+  if (import.meta.client && asyncData.data.value?.searchResponse.isStale) {
+    onMounted(() => {
+      asyncData.refresh()
     })
   }
 

app/composables/npm/useUserPackages.ts

···
  * ```
  */
 export function useUserPackages(username: MaybeRefOrGetter<string>) {
+  const route = useRoute()
   const { searchProvider } = useSearchProvider()
+  const searchProviderValue = computed(() => {
+    const p = normalizeSearchParam(route.query.p)
+    if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+    return 'algolia'
+  })
   // this is only used in npm path, but we need to extract it when the composable runs
   const { $npmRegistry } = useNuxtApp()
   const { searchByOwner } = useAlgoliaSearch()
···
 
   /** 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'>(searchProvider.value)
+  const activeProvider = shallowRef<'npm' | 'algolia'>(searchProviderValue.value)
 
   const cache = shallowRef<{
     username: string
···
   const isLoadingMore = shallowRef(false)
 
   const asyncData = useLazyAsyncData(
-    () => `user-packages:${searchProvider.value}:${toValue(username)}`,
+    () => `user-packages:${searchProviderValue.value}:${toValue(username)}`,
     async ({ $npmRegistry }, { signal }) => {
       const user = toValue(username)
       if (!user) {
         return emptySearchResponse()
       }
 
-      const provider = searchProvider.value
+      const provider = searchProviderValue.value
 
       // --- Algolia: fetch all at once ---
       if (provider === 'algolia') {
···
           const response = await searchByOwner(user)
 
           // Guard against stale response (user/provider changed during await)
-          if (user !== toValue(username) || provider !== searchProvider.value) {
+          if (user !== toValue(username) || provider !== searchProviderValue.value) {
             return emptySearchResponse()
           }
 
···
       )
 
       // Guard against stale response (user/provider changed during await)
-      if (user !== toValue(username) || provider !== searchProvider.value) {
+      if (user !== toValue(username) || provider !== searchProviderValue.value) {
         return emptySearchResponse()
       }
 
···
 
   // asyncdata will automatically rerun due to key, but we need to reset cache/page
   // when provider changes
-  watch(searchProvider, newProvider => {
-    cache.value = null
-    currentPage.value = 1
-    activeProvider.value = newProvider
-  })
+  watch(
+    () => searchProviderValue.value,
+    newProvider => {
+      cache.value = null
+      currentPage.value = 1
+      activeProvider.value = newProvider
+    },
+  )
 
   // Computed data that uses cache (only if it belongs to the current username)
   const data = computed<NpmSearchResponse | null>(() => {

app/pages/index.vue

···
 import { debounce } from 'perfect-debounce'
 import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks'
 
-const { isAlgolia } = useSearchProvider()
+const { searchProvider } = useSearchProvider()
 
 const searchQuery = shallowRef('')
 const isSearchFocused = shallowRef(false)
···
   if (!query) return
   await navigateTo({
     path: '/search',
-    query: query ? { q: query } : undefined,
+    query: query ? { q: query, p: searchProvider.value === 'npm' ? 'npm' : undefined } : undefined,
   })
   const newQuery = searchQuery.value.trim()
   if (newQuery !== query) {
···
 function handleInput() {
   if (isTouchDevice()) {
     search()
-  } else if (isAlgolia.value) {
+  } else if (searchProvider.value === 'algolia') {
     handleInputAlgolia()
   } else {
     handleInputNpm()

app/pages/search.vue

···
 const route = useRoute()
 const router = useRouter()
 
-// Search provider
-const { isAlgolia } = useSearchProvider()
+const { searchProvider } = useSearchProvider()
+const searchProviderValue = computed(() => {
+  const p = normalizeSearchParam(route.query.p)
+  if (p === 'npm' || searchProvider.value === 'npm') return 'npm'
+  return 'algolia'
+})
 
 // Preferences (persisted to localStorage)
 const {
···
     query: {
       ...route.query,
       page: page > 1 ? page : undefined,
+      p: searchProviderValue.value === 'npm' ? 'npm' : undefined,
     },
   })
 }, 500)
···
 
 // Disable sort keys the current provider can't meaningfully sort by
 const disabledSortKeys = computed<SortKey[]>(() => {
-  const supported = PROVIDER_SORT_KEYS[isAlgolia.value ? 'algolia' : 'npm']
+  const supported = PROVIDER_SORT_KEYS[searchProviderValue.value]
   return ALL_SORT_KEYS.filter(k => !supported.has(k))
 })
 
···
   // When sorting by something other than relevance, fetch a large batch
   // so client-side sorting operates on a meaningful pool of matching results
   if (!isRelevanceSort.value) {
-    const cap = isAlgolia.value ? EAGER_LOAD_SIZE.algolia : EAGER_LOAD_SIZE.npm
+    const cap = EAGER_LOAD_SIZE[searchProviderValue.value]
     return Math.max(base, cap)
   }
   return base
 })
 
 // Reset to relevance sort when switching to a provider that doesn't support the current sort key
-watch(isAlgolia, algolia => {
+watch(searchProviderValue, provider => {
   const { key } = parseSortOption(sortOption.value)
-  const supported = PROVIDER_SORT_KEYS[algolia ? 'algolia' : 'npm']
+  const supported = PROVIDER_SORT_KEYS[provider]
   if (!supported.has(key)) {
     sortOption.value = 'relevance-desc'
   }
···
   packageAvailability,
 } = useSearch(
   query,
+  searchProviderValue,
   () => ({
     size: requestedSize.value,
   }),

test/e2e/interactions.spec.ts

···
     await page.keyboard.press('ArrowUp')
 
     // Enter navigates to the selected result
-    // URL is /package/vue not /vue
+    // URL is /package/vue or /org/vue or /user/vue. Not /vue
     await page.keyboard.press('Enter')
-    await expect(page).toHaveURL(/\/package\/vue/)
+    await expect(page).toHaveURL(/\/(package|org|user)\/vue/)
   })
 
   test('/search?q=vue → "/" focuses the search input from results', async ({ page, goto }) => {