refactor: simplify org packages to fetch all with batched Algolia

Remove progressive loading in favor of fetching all packages upfront
using batched Algolia requests (max 1000 per batch, parallel). This
is the actual fix for the @types hang — batched parallel fetches
complete in ~1-2s vs the original sequential approach.

PackageList already handles display (pagination, infinite scroll,
virtual scrolling) so no additional visibility layer is needed.

Removes OrgPackagesResponse, totalPackages, isTruncated, hasMore,
isLoadingMore, loadAll, cache, and the showing_packages i18n key.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

.claude/skills/vite-plus

@@ -0,0 +1 @@
+../../node_modules/vite-plus/skills/vite-plus

.trae/skills/vite-plus

@@ -0,0 +1 @@
+../../node_modules/vite-plus/skills/vite-plus

CLAUDE.md

@@ -0,0 +1,76 @@
+<!--VITE PLUS START-->
+
+# Using Vite+, the Unified Toolchain for the Web
+
+This project is using Vite+, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite+ wraps runtime management, package management, and frontend tooling in a single global CLI called `vp`. Vite+ is distinct from Vite, but it invokes Vite through `vp dev` and `vp build`.
+
+## Vite+ Workflow
+
+`vp` is a global binary that handles the full development lifecycle. Run `vp help` to print a list of commands and `vp <command> --help` for information about a specific command.
+
+### Start
+
+- create - Create a new project from a template
+- migrate - Migrate an existing project to Vite+
+- config - Configure hooks and agent integration
+- staged - Run linters on staged files
+- install (`i`) - Install dependencies
+- env - Manage Node.js versions
+
+### Develop
+
+- dev - Run the development server
+- check - Run format, lint, and TypeScript type checks
+- lint - Lint code
+- fmt - Format code
+- test - Run tests
+
+### Execute
+
+- run - Run monorepo tasks
+- exec - Execute a command from local `node_modules/.bin`
+- dlx - Execute a package binary without installing it as a dependency
+- cache - Manage the task cache
+
+### Build
+
+- build - Build for production
+- pack - Build libraries
+- preview - Preview production build
+
+### Manage Dependencies
+
+Vite+ automatically detects and wraps the underlying package manager such as pnpm, npm, or Yarn through the `packageManager` field in `package.json` or package manager-specific lockfiles.
+
+- add - Add packages to dependencies
+- remove (`rm`, `un`, `uninstall`) - Remove packages from dependencies
+- update (`up`) - Update packages to latest versions
+- dedupe - Deduplicate dependencies
+- outdated - Check for outdated packages
+- list (`ls`) - List installed packages
+- why (`explain`) - Show why a package is installed
+- info (`view`, `show`) - View package information from the registry
+- link (`ln`) / unlink - Manage local package links
+- pm - Forward a command to the package manager
+
+### Maintain
+
+- upgrade - Update `vp` itself to the latest version
+
+These commands map to their corresponding tools. For example, `vp dev --port 3000` runs Vite's dev server and works the same as Vite. `vp test` runs JavaScript tests through the bundled Vitest. The version of all tools can be checked using `vp --version`. This is useful when researching documentation, features, and bugs.
+
+## Common Pitfalls
+
+- **Using the package manager directly:** Do not use pnpm, npm, or Yarn directly. Vite+ can handle all package manager operations.
+- **Always use Vite commands to run tools:** Don't attempt to run `vp vitest` or `vp oxlint`. They do not exist. Use `vp test` and `vp lint` instead.
+- **Running scripts:** Vite+ commands take precedence over `package.json` scripts. If there is a `test` script defined in `scripts` that conflicts with the built-in `vp test` command, run it using `vp run test`.
+- **Do not install Vitest, Oxlint, Oxfmt, or tsdown directly:** Vite+ wraps these tools. They must not be installed directly. You cannot upgrade these tools by installing their latest versions. Always use Vite+ commands.
+- **Use Vite+ wrappers for one-off binaries:** Use `vp dlx` instead of package-manager-specific `dlx`/`npx` commands.
+- **Import JavaScript modules from `vite-plus`:** Instead of importing from `vite` or `vitest`, all modules should be imported from the project's `vite-plus` dependency. For example, `import { defineConfig } from 'vite-plus';` or `import { expect, test, vi } from 'vite-plus/test';`. You must not install `vitest` to import test utilities.
+- **Type-Aware Linting:** There is no need to install `oxlint-tsgolint`, `vp lint --type-aware` works out of the box.
+
+## Review Checklist for Agents
+
+- [ ] Run `vp install` after pulling remote changes and before getting started.
+- [ ] Run `vp check` and `vp test` to validate changes.
+<!--VITE PLUS END-->

app/composables/npm/useOrgPackages.ts

@@ -1,34 +1,16 @@
-import type { NpmSearchResponse, NpmSearchResult, PackageMetaResponse } from '#shared/types'
+import type { NpmSearchResult, PackageMetaResponse } from '#shared/types'
 import { emptySearchResponse, metaToSearchResult } from './search-utils'
 import { mapWithConcurrency } from '#shared/utils/async'
 
-/** Number of packages to fetch metadata for in the initial load */
-const INITIAL_BATCH_SIZE = 250
-
 /** Max names per Algolia getObjects request */
 const ALGOLIA_BATCH_SIZE = 1000
 
-export interface OrgPackagesResponse extends NpmSearchResponse {
-  /** Total number of packages in the org (may exceed objects.length if not all loaded yet) */
-  totalPackages: number
-  /** Whether there are more packages that haven't been loaded yet */
-  isTruncated: boolean
-}
-
-function emptyOrgResponse(): OrgPackagesResponse {
-  return {
-    ...emptySearchResponse(),
-    totalPackages: 0,
-    isTruncated: false,
-  }
-}
-
 /**
- * Fetch packages for an npm organization with progressive loading.
+ * Fetch all packages for an npm organization.
  *
  * 1. Gets the authoritative package list from the npm registry (single request)
- * 2. Fetches metadata for the first batch immediately
- * 3. Remaining packages are loaded on-demand via `loadAll()`
+ * 2. Fetches metadata from Algolia in batches (max 1000 per request)
+ * 3. Falls back to lightweight server-side package-meta lookups
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   const route = useRoute()
@@ -40,30 +22,12 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   })
   const { getPackagesByNameSlice } = useAlgoliaSearch()
 
-  // --- Progressive loading state ---
-  const cache = shallowRef<{
-    org: string
-    allNames: string[]
-    objects: NpmSearchResult[]
-    totalPackages: number
-  } | null>(null)
-
-  const isLoadingMore = shallowRef(false)
-
-  const hasMore = computed(() => {
-    if (!cache.value) return false
-    return cache.value.objects.length < cache.value.allNames.length
-  })
-
-  // Promise lock to prevent duplicate loadAll calls
-  let loadAllPromise: Promise<void> | null = null
-
   const asyncData = useLazyAsyncData(
     () => `org-packages:${searchProviderValue.value}:${toValue(orgName)}`,
     async ({ ssrContext }, { signal }) => {
       const org = toValue(orgName)
       if (!org) {
-        return emptyOrgResponse()
+        return emptySearchResponse()
       }
 
       // Get the authoritative package list from the npm registry
@@ -90,31 +54,34 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       }
 
       if (packageNames.length === 0) {
-        cache.value = { org, allNames: [], objects: [], totalPackages: 0 }
-        return emptyOrgResponse()
+        return emptySearchResponse()
       }
 
-      const totalPackages = packageNames.length
-      const initialNames = packageNames.slice(0, INITIAL_BATCH_SIZE)
-
-      // Fetch metadata for first batch
-      let initialObjects: NpmSearchResult[] = []
+      // Fetch metadata from Algolia in batches
+      let objects: NpmSearchResult[] = []
 
       if (searchProviderValue.value === 'algolia') {
         try {
-          initialObjects = await getPackagesByNameSlice(initialNames)
+          const batches: string[][] = []
+          for (let i = 0; i < packageNames.length; i += ALGOLIA_BATCH_SIZE) {
+            batches.push(packageNames.slice(i, i + ALGOLIA_BATCH_SIZE))
+          }
+
+          const results = await Promise.all(batches.map(batch => getPackagesByNameSlice(batch)))
+
+          objects = results.flat()
         } catch {
           // Fall through to npm fallback
         }
       }
 
       // Staleness guard
-      if (toValue(orgName) !== org) return emptyOrgResponse()
+      if (toValue(orgName) !== org) return emptySearchResponse()
 
-      // npm fallback for initial batch
-      if (initialObjects.length === 0) {
+      // npm fallback
+      if (objects.length === 0) {
         const metaResults = await mapWithConcurrency(
-          initialNames,
+          packageNames,
           async name => {
             try {
               return await $fetch<PackageMetaResponse>(
@@ -128,154 +95,22 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
           10,
         )
 
-        if (toValue(orgName) !== org) return emptyOrgResponse()
+        if (toValue(orgName) !== org) return emptySearchResponse()
 
-        initialObjects = metaResults
+        objects = metaResults
           .filter((meta): meta is PackageMetaResponse => meta !== null)
           .map(metaToSearchResult)
       }
 
-      cache.value = {
-        org,
-        allNames: packageNames,
-        objects: initialObjects,
-        totalPackages,
-      }
-
       return {
         isStale: false,
-        objects: initialObjects,
-        total: initialObjects.length,
-        totalPackages,
-        isTruncated: packageNames.length > initialObjects.length,
+        objects,
+        total: objects.length,
         time: new Date().toISOString(),
-      } satisfies OrgPackagesResponse
-    },
-    { default: emptyOrgResponse },
-  )
-
-  /** Load all remaining packages that weren't fetched in the initial batch */
-  async function loadAll(): Promise<void> {
-    if (!hasMore.value) return
-
-    // Reuse existing promise if already running
-    if (loadAllPromise) {
-      await loadAllPromise
-      return
-    }
-
-    loadAllPromise = _doLoadAll()
-    try {
-      await loadAllPromise
-    } finally {
-      loadAllPromise = null
-    }
-  }
-
-  async function _doLoadAll(): Promise<void> {
-    const currentCache = cache.value
-    if (!currentCache || currentCache.objects.length >= currentCache.allNames.length) return
-
-    const org = currentCache.org
-    isLoadingMore.value = true
-
-    try {
-      const remainingNames = currentCache.allNames.slice(currentCache.objects.length)
-
-      if (searchProviderValue.value === 'algolia') {
-        // Split remaining into batches and fetch in parallel
-        const batches: string[][] = []
-        for (let i = 0; i < remainingNames.length; i += ALGOLIA_BATCH_SIZE) {
-          batches.push(remainingNames.slice(i, i + ALGOLIA_BATCH_SIZE))
-        }
-
-        const results = await Promise.allSettled(
-          batches.map(batch => getPackagesByNameSlice(batch)),
-        )
-
-        if (toValue(orgName) !== org) return
-
-        const newObjects: NpmSearchResult[] = []
-        for (const result of results) {
-          if (result.status === 'fulfilled') {
-            newObjects.push(...result.value)
-          }
-        }
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
-          }
-        }
-      } else {
-        // npm fallback: fetch with concurrency
-        const metaResults = await mapWithConcurrency(
-          remainingNames,
-          async name => {
-            try {
-              return await $fetch<PackageMetaResponse>(
-                `/api/registry/package-meta/${encodePackageName(name)}`,
-              )
-            } catch {
-              return null
-            }
-          },
-          10,
-        )
-
-        if (toValue(orgName) !== org) return
-
-        const newObjects = metaResults
-          .filter((meta): meta is PackageMetaResponse => meta !== null)
-          .map(metaToSearchResult)
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
-          }
-        }
       }
-    } finally {
-      isLoadingMore.value = false
-    }
-  }
-
-  // Reset cache when provider changes
-  watch(
-    () => searchProviderValue.value,
-    () => {
-      cache.value = null
-      loadAllPromise = null
     },
+    { default: emptySearchResponse },
   )
 
-  // Computed data that prefers cache
-  const data = computed<OrgPackagesResponse | null>(() => {
-    const org = toValue(orgName)
-    if (cache.value && cache.value.org === org) {
-      return {
-        isStale: false,
-        objects: cache.value.objects,
-        total: cache.value.objects.length,
-        totalPackages: cache.value.totalPackages,
-        isTruncated: cache.value.objects.length < cache.value.allNames.length,
-        time: new Date().toISOString(),
-      }
-    }
-    return asyncData.data.value
-  })
-
-  return {
-    ...asyncData,
-    data,
-    isLoadingMore,
-    hasMore,
-    loadAll,
-  }
+  return asyncData
 }