diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 4580671cd3..67590100ee 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -79,6 +79,10 @@ const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>((
         name: t('shortcuts.compare'),
         href: '/compare',
       },
+      {
+        name: t('footer.tools'),
+        href: '/tools',
+      },
       {
         name: t('shortcuts.settings'),
         href: '/settings',
diff --git a/app/components/DepsStats/DependencyList.vue b/app/components/DepsStats/DependencyList.vue
new file mode 100644
index 0000000000..eb6251721a
--- /dev/null
+++ b/app/components/DepsStats/DependencyList.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
+import type {
+  DirectDeprecatedDependency,
+  DirectVulnerableDependency,
+} from '#shared/types/dependency-analysis'
+import type { DependencyCategory, PackageJsonDependency } from '~/utils/parse-package-json-deps'
+import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import { packageRoute } from '~/utils/router'
+
+const props = defineProps<{
+  dependencies: PackageJsonDependency[]
+  selectedName: string | null
+}>()
+
+const emit = defineEmits<{
+  select: [dep: PackageJsonDependency]
+}>()
+
+const { t } = useI18n()
+const filter = shallowRef('')
+const listScrollRef = useTemplateRef<HTMLElement>('listScrollRef')
+const dependencyRows = useTemplateRef<HTMLElement[]>('dependencyRows')
+const observedRows = computed(() => dependencyRows.value ?? [])
+
+const categoryOrder: DependencyCategory[] = [
+  'dependencies',
+  'devDependencies',
+  'peerDependencies',
+  'optionalDependencies',
+]
+
+const categoryLabels = computed<Record<DependencyCategory, string>>(() => ({
+  dependencies: t('compare.dependencies'),
+  devDependencies: t('compare.dev_dependencies'),
+  peerDependencies: t('compare.peer_dependencies'),
+  optionalDependencies: t('compare.optional_dependencies'),
+}))
+
+const registryDeps = computed(() => {
+  const map: Record<string, string> = {}
+  for (const dep of props.dependencies) {
+    if (dep.nonRegistry) continue
+    map[dep.packageName] = dep.range
+  }
+  return map
+})
+
+const orderedRegistryNames = computed(() => {
+  const seen = new Set<string>()
+  const names: string[] = []
+  for (const dep of props.dependencies) {
+    if (dep.nonRegistry || seen.has(dep.packageName)) continue
+    seen.add(dep.packageName)
+    names.push(dep.packageName)
+  }
+  return names
+})
+
+const outdatedDeps = useOutdatedDependencies(registryDeps)
+const replacementDeps = useReplacementDependencies(registryDeps)
+const { health, requestHealth } = useDirectDependencyHealth(registryDeps, orderedRegistryNames)
+
+const grouped = computed(() => {
+  const query = filter.value.trim().toLowerCase()
+  const groups = categoryOrder
+    .map(category => {
+      const items = props.dependencies.filter(dep => {
+        if (dep.category !== category) return false
+        if (!query) return true
+        return (
+          dep.name.toLowerCase().includes(query) ||
+          dep.packageName.toLowerCase().includes(query) ||
+          dep.range.toLowerCase().includes(query)
+        )
+      })
+      return { category, items, label: categoryLabels.value[category] }
+    })
+    .filter(group => group.items.length > 0)
+
+  return groups
+})
+
+const totalCount = computed(() => props.dependencies.length)
+
+function getVulnerableInfo(dep: PackageJsonDependency): DirectVulnerableDependency | null {
+  return health.value.vulnerable[dep.packageName] ?? null
+}
+
+function getDeprecatedInfo(dep: PackageJsonDependency): DirectDeprecatedDependency | null {
+  return health.value.deprecated[dep.packageName] ?? null
+}
+
+function getDepVersionTooltip(dep: PackageJsonDependency) {
+  const outdated = outdatedDeps.value[dep.packageName]
+  if (outdated) return getOutdatedTooltip(outdated, t)
+  if (replacementDeps.value[dep.packageName]) return t('package.dependencies.has_replacement')
+  return dep.range
+}
+
+function getDepVersionClass(dep: PackageJsonDependency) {
+  const outdated = outdatedDeps.value[dep.packageName]
+  if (outdated) return getVersionClass(outdated)
+  if (replacementDeps.value[dep.packageName]) return 'text-amber-700 dark:text-amber-500'
+  return getVersionClass(undefined)
+}
+
+useIntersectionObserver(
+  observedRows,
+  entries => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue
+      const packageName = (entry.target as HTMLElement).dataset.packageName
+      if (packageName) requestHealth(packageName)
+    }
+  },
+  {
+    root: listScrollRef,
+    rootMargin: '160px 0px',
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col min-h-0 h-full border border-border rounded-lg overflow-hidden bg-bg">
+    <div class="shrink-0 border-b border-border px-3 py-2 space-y-2">
+      <div class="flex items-center justify-between gap-2">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
+          {{ $t('deps_stats.dependencies.title') }}
+        </h2>
+        <span class="font-mono text-3xs text-fg-muted">
+          {{ $t('deps_stats.dependencies.count', { count: totalCount }, totalCount) }}
+        </span>
+      </div>
+      <label class="block">
+        <span class="sr-only">{{ $t('deps_stats.dependencies.filter_label') }}</span>
+        <InputBase
+          v-model="filter"
+          type="search"
+          :placeholder="$t('deps_stats.dependencies.filter_placeholder')"
+          class="w-full"
+        />
+      </label>
+    </div>
+
+    <div ref="listScrollRef" class="relative flex-1 overflow-y-auto">
+      <p v-if="grouped.length === 0" class="px-3 py-6 text-sm text-fg-subtle text-center">
+        {{
+          filter.trim()
+            ? $t('deps_stats.dependencies.no_matches')
+            : $t('deps_stats.dependencies.empty')
+        }}
+      </p>
+
+      <section
+        v-for="group in grouped"
+        :key="group.category"
+        class="border-b border-border last:border-b-0"
+      >
+        <h3
+          class="sticky top-0 z-1 px-3 py-1.5 text-3xs uppercase tracking-wider text-fg-subtle bg-bg-subtle border-b border-border"
+        >
+          {{ group.label }}
+          <span class="font-mono ms-1">({{ group.items.length }})</span>
+        </h3>
+        <ul class="list-none m-0 p-0" :aria-label="group.label">
+          <li
+            v-for="dep in group.items"
+            :key="dep.name"
+            ref="dependencyRows"
+            :data-package-name="dep.nonRegistry ? undefined : dep.packageName"
+          >
+            <div
+              class="flex items-start gap-2 px-3 py-2 transition-colors duration-100"
+              :class="
+                selectedName === dep.name ? 'bg-bg-muted text-fg' : 'hover:bg-bg-subtle text-fg'
+              "
+            >
+              <button
+                type="button"
+                class="flex-1 min-w-0 text-start border-none bg-transparent cursor-pointer p-0 focus-visible:outline-accent/70 focus-visible:outline-2 focus-visible:outline-offset-2 rounded-sm"
+                :aria-current="selectedName === dep.name ? 'true' : undefined"
+                @click="emit('select', dep)"
+              >
+                <span class="font-mono text-sm truncate block">{{ dep.name }}</span>
+                <p
+                  v-if="dep.name !== dep.packageName"
+                  class="mt-0.5 font-mono text-3xs text-fg-muted truncate"
+                >
+                  → {{ dep.packageName }}
+                </p>
+                <p
+                  v-if="dep.nonRegistry"
+                  class="mt-0.5 text-3xs text-amber-700 dark:text-amber-400"
+                >
+                  {{ $t('deps_stats.dependencies.non_registry') }}
+                </p>
+              </button>
+
+              <span
+                v-if="!dep.nonRegistry"
+                class="flex items-center gap-1 shrink-0 max-w-[45%] pt-0.5"
+                dir="ltr"
+                @click.stop
+              >
+                <TooltipApp
+                  v-if="outdatedDeps[dep.packageName]"
+                  class="shrink-0"
+                  :class="getVersionClass(outdatedDeps[dep.packageName]!)"
+                  :text="getOutdatedTooltip(outdatedDeps[dep.packageName]!, $t)"
+                >
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center p-1 -m-1"
+                    :aria-label="getOutdatedTooltip(outdatedDeps[dep.packageName]!, $t)"
+                  >
+                    <span class="i-lucide:arrow-up w-3 h-3" aria-hidden="true" />
+                  </button>
+                </TooltipApp>
+                <TooltipApp
+                  v-if="replacementDeps[dep.packageName]"
+                  class="shrink-0 text-amber-700 dark:text-amber-500"
+                  :text="$t('package.dependencies.has_replacement')"
+                >
+                  <button
+                    type="button"
+                    class="inline-flex items-center justify-center p-1 -m-1"
+                    :aria-label="$t('package.dependencies.has_replacement')"
+                  >
+                    <span class="i-lucide:lightbulb w-3 h-3" aria-hidden="true" />
+                  </button>
+                </TooltipApp>
+                <LinkBase
+                  v-if="getVulnerableInfo(dep)"
+                  :to="packageRoute(dep.packageName, getVulnerableInfo(dep)!.version)"
+                  class="shrink-0"
+                  :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableInfo(dep)!.counts)]"
+                  :aria-label="$t('package.dependencies.view_vulnerabilities')"
+                  :title="
+                    $t('package.dependencies.vulnerabilities_count', {
+                      count: getVulnerableInfo(dep)!.counts.total,
+                    })
+                  "
+                  classicon="i-lucide:shield-check"
+                />
+                <LinkBase
+                  v-if="getDeprecatedInfo(dep)"
+                  :to="packageRoute(dep.packageName, getDeprecatedInfo(dep)!.version)"
+                  class="shrink-0 text-purple-700 dark:text-purple-500"
+                  :aria-label="$t('package.deprecated.label')"
+                  :title="getDeprecatedInfo(dep)!.message"
+                  classicon="i-lucide:octagon-alert"
+                />
+                <span
+                  class="font-mono text-3xs truncate"
+                  :class="getDepVersionClass(dep)"
+                  :title="getDepVersionTooltip(dep)"
+                >
+                  {{ dep.range }}
+                </span>
+                <span v-if="outdatedDeps[dep.packageName]" class="sr-only">
+                  ({{ getOutdatedTooltip(outdatedDeps[dep.packageName]!, $t) }})
+                </span>
+                <span v-if="getVulnerableInfo(dep)" class="sr-only">
+                  ({{
+                    $t('package.dependencies.vulnerabilities_count', {
+                      count: getVulnerableInfo(dep)!.counts.total,
+                    })
+                  }})
+                </span>
+              </span>
+              <span
+                v-else
+                class="font-mono text-3xs text-fg-subtle shrink-0 truncate max-w-[40%] pt-0.5"
+              >
+                {{ dep.range }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/components/DepsStats/DependencyStats.vue b/app/components/DepsStats/DependencyStats.vue
new file mode 100644
index 0000000000..afa3491437
--- /dev/null
+++ b/app/components/DepsStats/DependencyStats.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PackageJsonDependency } from '~/utils/parse-package-json-deps'
+
+defineProps<{
+  dependency: PackageJsonDependency | null
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col min-h-0 h-full border border-border rounded-lg overflow-hidden bg-bg">
+    <div
+      v-if="!dependency"
+      class="flex-1 flex flex-col items-center justify-center px-6 py-16 text-center"
+    >
+      <div class="i-lucide:package-search w-10 h-10 text-fg-subtle mb-3" aria-hidden="true" />
+      <h2 class="font-mono text-lg text-fg-muted mb-2">
+        {{ $t('deps_stats.stats.empty_title') }}
+      </h2>
+      <p class="text-sm text-fg-subtle max-w-sm">
+        {{ $t('deps_stats.stats.empty_description') }}
+      </p>
+    </div>
+
+    <div
+      v-else-if="dependency.nonRegistry"
+      class="flex-1 flex flex-col items-center justify-center px-6 py-16 text-center"
+    >
+      <div class="i-lucide:unplug w-10 h-10 text-fg-subtle mb-3" aria-hidden="true" />
+      <h2 class="font-mono text-lg text-fg-muted mb-2">
+        {{ $t('deps_stats.stats.non_registry_title') }}
+      </h2>
+      <p class="text-sm text-fg-subtle max-w-sm">
+        {{ $t('deps_stats.stats.non_registry_description') }}
+      </p>
+    </div>
+
+    <DepsStatsDependencyStatsPanel
+      v-else
+      :key="dependency.packageName"
+      :package-name="dependency.packageName"
+      :declared-range="dependency.range"
+    />
+  </div>
+</template>
diff --git a/app/components/DepsStats/DependencyStatsPanel.vue b/app/components/DepsStats/DependencyStatsPanel.vue
new file mode 100644
index 0000000000..b99aac3a7e
--- /dev/null
+++ b/app/components/DepsStats/DependencyStatsPanel.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import type { InstallSizeResult } from '#shared/types/install-size'
+import { packageRoute, packageStatsRoute } from '~/utils/router'
+
+const props = defineProps<{
+  packageName: string
+  declaredRange: string
+}>()
+
+const { locale } = useI18n()
+
+const comparisonSpecs = computed(() => [props.packageName])
+
+const { data: pkg } = usePackage(() => props.packageName)
+const { getFacetValues, isFacetLoading, isColumnLoading, status } =
+  usePackageComparison(comparisonSpecs)
+const { facetLabels } = useFacetSelection()
+
+const resolvedVersion = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
+
+const { data: moduleReplacement } = useModuleReplacement(() => props.packageName)
+const { data: licenseChangeData } = useLicenseChanges(() => props.packageName, resolvedVersion)
+
+const { data: installSize, execute: fetchInstallSize } = useLazyFetch<InstallSizeResult | null>(
+  () => {
+    const version = resolvedVersion.value
+    if (!version) return ''
+    return `/api/registry/install-size/${props.packageName}/v/${version}`
+  },
+  {
+    server: false,
+    immediate: false,
+  },
+)
+
+watch(
+  resolvedVersion,
+  version => {
+    if (version) fetchInstallSize()
+  },
+  { immediate: true },
+)
+
+const { diff: sizeDiff } = useInstallSizeDiff(
+  () => props.packageName,
+  resolvedVersion,
+  pkg,
+  installSize,
+)
+
+const statsLink = computed((): RouteLocationRaw | null => {
+  if (!resolvedVersion.value) return null
+  return packageStatsRoute(props.packageName, resolvedVersion.value)
+})
+
+const facetRows = computed(() =>
+  ALL_FACETS.map(facet => ({
+    id: facet,
+    label: facetLabels.value[facet].label,
+    value: getFacetValues(facet)[0] ?? null,
+    loading: isFacetLoading(facet) || isColumnLoading(0),
+  })),
+)
+
+function formatFacetValue(value: FacetValue): string {
+  if (value.type === 'date') {
+    return new Date(value.display).toLocaleDateString(locale.value, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+  return value.display
+}
+</script>
+
+<template>
+  <header class="shrink-0 border-b border-border px-4 py-3 flex flex-wrap gap-3">
+    <div class="flex-1">
+      <h2 class="font-mono text-lg font-medium truncate">
+        <NuxtLink
+          :to="packageRoute(packageName, resolvedVersion)"
+          class="text-fg hover:text-accent transition-colors"
+        >
+          {{ packageName }}
+        </NuxtLink>
+      </h2>
+      <p class="text-xs text-fg-muted font-mono mt-0.5">
+        <span>{{ $t('deps_stats.stats.declared_range') }}: {{ declaredRange }}</span>
+        <span v-if="resolvedVersion" class="ms-2">
+          · {{ $t('deps_stats.stats.resolved_version') }}: {{ resolvedVersion }}
+        </span>
+      </p>
+    </div>
+    <NuxtLink
+      :to="statsLink"
+      class="block font-mono text-xs text-fg-muted hover:text-fg underline-offset-2 hover:underline py-2 -my-2"
+      v-if="statsLink"
+    >
+      {{ $t('deps_stats.stats.open_full_stats') }}
+    </NuxtLink>
+  </header>
+
+  <div class="relative flex-1 overflow-y-auto">
+    <div class="px-4 pt-4 space-y-3">
+      <LicenseChangeWarning :change="licenseChangeData?.change ?? null" />
+      <PackageReplacement
+        v-if="moduleReplacement"
+        :mapping="moduleReplacement.mapping"
+        :replacement="moduleReplacement.replacement"
+      />
+      <PackageSizeIncrease v-if="sizeDiff?.direction === 'increase'" :diff="sizeDiff" />
+      <PackageSizeDecrease v-else-if="sizeDiff?.direction === 'decrease'" :diff="sizeDiff" />
+      <ClientOnly>
+        <PackageVulnerabilityTree
+          v-if="resolvedVersion"
+          :package-name="packageName"
+          :version="resolvedVersion"
+        />
+        <PackageDeprecatedTree
+          v-if="resolvedVersion"
+          :package-name="packageName"
+          :version="resolvedVersion"
+        />
+      </ClientOnly>
+    </div>
+
+    <section class="px-4 py-6">
+      <h3 class="text-fg-muted mb-2 uppercase text-sm">
+        {{ $t('package.stats.main_information') }}
+      </h3>
+      <dl
+        class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-2 gap-x-4 border-y-border border-y py-2"
+      >
+        <div v-for="row in facetRows" :key="row.id" class="py-1">
+          <dt class="text-sm text-fg-muted lowercase">{{ row.label }}</dt>
+          <dd class="text-sm font-mono mt-1">
+            <span
+              v-if="
+                row.loading || status === 'pending' || (status === 'idle' && row.value === null)
+              "
+              aria-hidden="true"
+              class="block w-4 h-4 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
+            />
+            <span v-else-if="!row.value" class="text-fg-subtle">–</span>
+            <span v-else :title="formatFacetValue(row.value)" class="block truncate">{{
+              formatFacetValue(row.value)
+            }}</span>
+          </dd>
+        </div>
+      </dl>
+    </section>
+
+    <div class="px-4 pb-10 space-y-10">
+      <section>
+        <h3 class="text-fg-muted mb-4 uppercase text-sm">
+          {{ $t('package.stats.trends') }}
+        </h3>
+        <PackageTrendsChart
+          class="font-mono"
+          :package-names="[packageName]"
+          :package-name="packageName"
+          :version="resolvedVersion ?? undefined"
+          show-facet-selector
+          default-range="52-weeks"
+        />
+      </section>
+
+      <section>
+        <h3 class="text-fg-muted mb-4 uppercase text-sm">
+          {{ $t('package.stats.version_distribution') }}
+        </h3>
+        <PackageVersionDistribution class="font-mono" :package-name="packageName" />
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/components/DepsStats/PackageJsonUpload.vue b/app/components/DepsStats/PackageJsonUpload.vue
new file mode 100644
index 0000000000..04fb649980
--- /dev/null
+++ b/app/components/DepsStats/PackageJsonUpload.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  parsed: [file: File, text: string]
+  clear: []
+}>()
+
+const props = defineProps<{
+  fileName?: string | null
+  error?: string | null
+}>()
+
+const inputRef = useTemplateRef<HTMLInputElement>('inputRef')
+const inputId = useId()
+const isDragging = shallowRef(false)
+
+async function readFile(file: File) {
+  const text = await file.text()
+  emit('parsed', file, text)
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  void readFile(file)
+}
+
+function onDrop(event: DragEvent) {
+  isDragging.value = false
+  const file = event.dataTransfer?.files?.[0]
+  if (!file) return
+  void readFile(file)
+}
+
+function clearSelection() {
+  if (inputRef.value) inputRef.value.value = ''
+  emit('clear')
+}
+</script>
+
+<template>
+  <div
+    class="relative rounded-lg border border-dashed px-4 py-2 transition-colors h-20 flex items-center justify-center"
+    :class="
+      isDragging
+        ? 'border-accent bg-accent/5'
+        : error
+          ? 'border-red-500/50 bg-red-500/5'
+          : 'border-border hover:border-border-hover'
+    "
+    @dragenter.prevent="isDragging = true"
+    @dragover.prevent="isDragging = true"
+    @dragleave.prevent="isDragging = false"
+    @drop.prevent="onDrop"
+  >
+    <input
+      :id="inputId"
+      ref="inputRef"
+      type="file"
+      accept=".json,application/json"
+      class="sr-only"
+      @change="onFileChange"
+    />
+    <label :for="inputId" class="absolute inset-0 cursor-pointer">
+      <span class="sr-only">{{ $t('deps_stats.upload.label') }}</span>
+    </label>
+    <div
+      v-if="fileName"
+      class="relative z-10 flex-1 flex flex-col sm:flex-row sm:items-center justify-between gap-2 pointer-events-none"
+    >
+      <p class="text-sm font-mono text-fg-muted">{{ fileName }}</p>
+      <ButtonBase
+        size="md"
+        class="pointer-events-auto"
+        :aria-label="$t('deps_stats.upload.clear')"
+        @click="clearSelection"
+      >
+        {{ $t('deps_stats.upload.clear') }}
+      </ButtonBase>
+    </div>
+    <div v-else class="relative z-10 pointer-events-none text-center">
+      <p class="text-sm text-fg-subtle">
+        {{ $t('deps_stats.upload.hint') }}
+      </p>
+      <p v-if="error" class="mt-2 text-sm text-red-700 dark:text-red-400" role="alert">
+        {{ error }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/composables/npm/useDirectDependencyHealth.ts b/app/composables/npm/useDirectDependencyHealth.ts
new file mode 100644
index 0000000000..a35b49e9e5
--- /dev/null
+++ b/app/composables/npm/useDirectDependencyHealth.ts
@@ -0,0 +1,74 @@
+import type { DirectDependencyHealthResult } from '#shared/types/dependency-analysis'
+import { DIRECT_DEPS_HEALTH_MAX } from '#shared/utils/constants'
+
+const EMPTY_HEALTH: DirectDependencyHealthResult = {
+  vulnerable: {},
+  deprecated: {},
+}
+
+/** Lazily fetch direct dependency health in display-order batches. */
+export function useDirectDependencyHealth(
+  dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
+  orderedNames: MaybeRefOrGetter<readonly string[]>,
+) {
+  const health = shallowRef<DirectDependencyHealthResult>(EMPTY_HEALTH)
+
+  const settled = new Set<string>()
+  let generation = 0
+
+  watch(
+    () => toValue(dependencies),
+    () => {
+      generation++
+      settled.clear()
+      health.value = EMPTY_HEALTH
+    },
+    { immediate: true },
+  )
+
+  async function requestHealth(name: string) {
+    if (!import.meta.client || settled.has(name)) return
+
+    const deps = toValue(dependencies)
+    if (!deps?.[name]) return
+
+    const ordered = toValue(orderedNames)
+    const startIndex = ordered.indexOf(name)
+    if (startIndex === -1) return
+
+    const batchNames: string[] = []
+    for (let i = startIndex; i < ordered.length; i++) {
+      const candidate = ordered[i]!
+      if (settled.has(candidate) || !deps[candidate]) continue
+      settled.add(candidate)
+      batchNames.push(candidate)
+      if (batchNames.length === DIRECT_DEPS_HEALTH_MAX) break
+    }
+
+    const batch = Object.fromEntries(batchNames.map(candidate => [candidate, deps[candidate]!]))
+    const currentGeneration = generation
+
+    try {
+      const result = await $fetch<DirectDependencyHealthResult>(
+        '/api/registry/direct-deps-health',
+        {
+          method: 'POST',
+          body: { dependencies: batch },
+        },
+      )
+
+      if (currentGeneration !== generation) return
+
+      health.value = {
+        vulnerable: { ...health.value.vulnerable, ...result.vulnerable },
+        deprecated: { ...health.value.deprecated, ...result.deprecated },
+      }
+    } catch {
+      if (currentGeneration === generation) {
+        for (const candidate of batchNames) settled.delete(candidate)
+      }
+    }
+  }
+
+  return { health, requestHealth }
+}
diff --git a/app/composables/useCommandPaletteGlobalCommands.ts b/app/composables/useCommandPaletteGlobalCommands.ts
index 0ba7af3c6e..65096752b5 100644
--- a/app/composables/useCommandPaletteGlobalCommands.ts
+++ b/app/composables/useCommandPaletteGlobalCommands.ts
@@ -314,6 +314,29 @@ export function useCommandPaletteGlobalCommands() {
         activeLabel: activeLabel(route.name === 'compare', t('command_palette.here')),
         to: { name: 'compare' },
       },
+      {
+        id: 'tools',
+        group: 'navigation',
+        label: t('nav.tools'),
+        keywords: [t('footer.tools'), t('shortcuts.deps_stats')],
+        iconClass: 'i-lucide:wrench',
+        active: route.name === 'tools' || route.name === 'tools-deps-stats',
+        activeLabel: activeLabel(
+          route.name === 'tools' || route.name === 'tools-deps-stats',
+          t('command_palette.here'),
+        ),
+        to: { name: 'tools' },
+      },
+      {
+        id: 'deps-stats',
+        group: 'navigation',
+        label: t('tools.deps_stats.name'),
+        keywords: [t('shortcuts.deps_stats'), 'package.json', 'deps'],
+        iconClass: 'i-lucide:file-json',
+        active: route.name === 'tools-deps-stats',
+        activeLabel: activeLabel(route.name === 'tools-deps-stats', t('command_palette.here')),
+        to: { name: 'tools-deps-stats' },
+      },
       {
         id: 'settings',
         group: 'navigation',
diff --git a/app/pages/tools/deps-stats.vue b/app/pages/tools/deps-stats.vue
new file mode 100644
index 0000000000..35883fd9af
--- /dev/null
+++ b/app/pages/tools/deps-stats.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { PackageJsonDependency } from '~/utils/parse-package-json-deps'
+import { parsePackageJsonText } from '~/utils/parse-package-json-deps'
+import { useRouteQuery } from '@vueuse/router'
+
+definePageMeta({
+  name: 'tools-deps-stats',
+})
+
+const { t } = useI18n()
+
+const fileName = shallowRef<string | null>(null)
+const parseError = shallowRef<string | null>(null)
+const dependencies = shallowRef<PackageJsonDependency[]>([])
+
+const selectedName = useRouteQuery<string>('pkg', '', { mode: 'replace' })
+
+const selectedDependency = computed(
+  () => dependencies.value.find(dep => dep.name === selectedName.value) ?? null,
+)
+
+function handleParsed(file: File, text: string) {
+  try {
+    const parsed = parsePackageJsonText(text)
+    fileName.value = file.name
+    parseError.value = null
+    dependencies.value = parsed.dependencies
+
+    const stillSelected = parsed.dependencies.some(dep => dep.name === selectedName.value)
+    if (!stillSelected) {
+      const firstRegistry = parsed.dependencies.find(dep => !dep.nonRegistry)
+      selectedName.value = (firstRegistry ?? parsed.dependencies[0])?.name ?? ''
+    }
+  } catch (error) {
+    handleClear()
+    fileName.value = file.name
+    parseError.value =
+      error instanceof Error ? error.message : t('deps_stats.upload.invalid_package_json')
+  }
+}
+
+function handleClear() {
+  fileName.value = null
+  dependencies.value = []
+  parseError.value = null
+  selectedName.value = ''
+}
+
+function selectDependency(dep: PackageJsonDependency) {
+  selectedName.value = dep.name
+}
+
+const hasParsedFile = computed(() => fileName.value !== null && !parseError.value)
+
+useSeoMeta({
+  title: () => t('deps_stats.meta_title'),
+  ogTitle: () => t('deps_stats.meta_title'),
+  twitterTitle: () => t('deps_stats.meta_title'),
+  description: () => t('deps_stats.meta_description'),
+  ogDescription: () => t('deps_stats.meta_description'),
+  twitterDescription: () => t('deps_stats.meta_description'),
+})
+
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => t('deps_stats.title'),
+    description: () => t('deps_stats.meta_description'),
+  },
+  { alt: () => t('deps_stats.title') },
+)
+</script>
+
+<template>
+  <main class="container w-full pt-6">
+    <div class="flex items-center gap-2 min-w-0">
+      <NuxtLink
+        :to="{ name: 'tools' }"
+        class="text-lg font-medium hover:text-fg-muted transition-colors shrink-0"
+      >
+        {{ $t('tools.title') }}
+      </NuxtLink>
+      <span class="text-fg-subtle shrink-0">/</span>
+      <h1 class="text-sm text-fg-muted shrink-0">{{ $t('deps_stats.title') }}</h1>
+    </div>
+
+    <section class="mt-4" aria-labelledby="upload-heading">
+      <h2 id="upload-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3 sr-only">
+        {{ $t('deps_stats.upload.section') }}
+      </h2>
+      <DepsStatsPackageJsonUpload
+        :file-name="fileName"
+        :error="parseError"
+        @parsed="handleParsed"
+        @clear="handleClear"
+      />
+    </section>
+
+    <section v-if="hasParsedFile" class="flex-1 min-h-0 flex flex-col mt-4">
+      <div
+        class="flex-1 min-h-[28rem] lg:min-h-[36rem] grid grid-cols-1 lg:grid-cols-[minmax(16rem,20rem)_minmax(0,1fr)] gap-4"
+      >
+        <DepsStatsDependencyList
+          class="max-lg:max-h-80 lg:h-[calc(100vh-15rem)]"
+          :dependencies="dependencies"
+          :selected-name="selectedName"
+          @select="selectDependency"
+        />
+        <DepsStatsDependencyStats
+          :dependency="selectedDependency"
+          class="lg:h-[calc(100vh-15rem)]"
+        />
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/app/pages/tools/index.vue b/app/pages/tools/index.vue
new file mode 100644
index 0000000000..405e625794
--- /dev/null
+++ b/app/pages/tools/index.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'tools',
+})
+
+const { t } = useI18n()
+
+const tools = computed(() => [
+  {
+    id: 'deps-stats',
+    name: t('tools.deps_stats.name'),
+    description: t('tools.deps_stats.description'),
+    to: { name: 'tools-deps-stats' } as const,
+  },
+])
+
+useSeoMeta({
+  title: () => t('tools.meta_title'),
+  ogTitle: () => t('tools.meta_title'),
+  twitterTitle: () => t('tools.meta_title'),
+  description: () => t('tools.meta_description'),
+  ogDescription: () => t('tools.meta_description'),
+  twitterDescription: () => t('tools.meta_description'),
+})
+
+defineOgImage(
+  'Page.takumi',
+  {
+    title: () => t('tools.title'),
+    description: () => t('tools.tagline'),
+  },
+  { alt: () => t('tools.title') },
+)
+</script>
+
+<template>
+  <main class="container flex-1 py-8 sm:py-12 w-full">
+    <header class="mb-8 sm:mb-10">
+      <div class="flex items-baseline justify-between gap-4 mb-3">
+        <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+          {{ $t('tools.title') }}
+        </h1>
+        <BackButton />
+      </div>
+      <p class="text-fg-muted text-lg max-w-2xl">
+        {{ $t('tools.tagline') }}
+      </p>
+    </header>
+
+    <ul class="list-none m-0 p-0 grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-3xl">
+      <li v-for="tool in tools" :key="tool.id">
+        <NuxtLink
+          :to="tool.to"
+          class="block p-4 rounded-lg border border-border hover:border-border-hover hover:bg-bg-subtle transition-colors duration-200 h-full"
+        >
+          <span class="block font-mono text-lg text-fg">{{ tool.name }}</span>
+          <span class="block text-sm text-fg-muted leading-relaxed mt-2">{{
+            tool.description
+          }}</span>
+        </NuxtLink>
+      </li>
+    </ul>
+  </main>
+</template>
diff --git a/app/utils/parse-package-json-deps.ts b/app/utils/parse-package-json-deps.ts
new file mode 100644
index 0000000000..68fdb0a978
--- /dev/null
+++ b/app/utils/parse-package-json-deps.ts
@@ -0,0 +1,137 @@
+import { parsePackageSpec } from '#shared/utils/parse-package-param'
+
+export type DependencyCategory =
+  | 'dependencies'
+  | 'devDependencies'
+  | 'peerDependencies'
+  | 'optionalDependencies'
+
+export interface PackageJsonDependency {
+  name: string
+  /** Version range from package.json */
+  range: string
+  packageName: string
+  category: DependencyCategory
+  /** True when the range is not a registry package (file:, workspace:, git, etc.) */
+  nonRegistry: boolean
+}
+
+export interface ParsedPackageJson {
+  name?: string
+  version?: string
+  dependencies: PackageJsonDependency[]
+}
+
+const DEPENDENCY_CATEGORIES: DependencyCategory[] = [
+  'dependencies',
+  'devDependencies',
+  'peerDependencies',
+  'optionalDependencies',
+]
+
+const NON_REGISTRY_PREFIXES = [
+  'file:',
+  'link:',
+  'workspace:',
+  'portal:',
+  'git+',
+  'git:',
+  'github:',
+  'gist:',
+  'bitbucket:',
+  'gitlab:',
+  'jsr:',
+  'http:',
+  'https:',
+]
+
+export function isNonRegistryRange(range: string): boolean {
+  const trimmed = range.trim()
+  if (!trimmed) return true
+  if (trimmed.startsWith('.') || trimmed.startsWith('/')) return true
+  return NON_REGISTRY_PREFIXES.some(prefix => trimmed.toLowerCase().startsWith(prefix))
+}
+
+/**
+ * Resolve `npm:pkg@range` / `npm:@scope/pkg@range` aliases to a registry package name.
+ * Returns `null` when the alias cannot be parsed.
+ */
+export function resolveNpmAlias(range: string): { packageName: string; range: string } | null {
+  if (!range.startsWith('npm:')) return null
+
+  const spec = range.slice('npm:'.length)
+  if (!spec) return null
+
+  const { name, version } = parsePackageSpec(spec)
+  return {
+    packageName: name,
+    range: version || '*',
+  }
+}
+
+function toDependency(
+  name: string,
+  range: string,
+  category: DependencyCategory,
+): PackageJsonDependency {
+  const alias = resolveNpmAlias(range)
+  if (alias) {
+    return {
+      name,
+      range: alias.range,
+      packageName: alias.packageName,
+      category,
+      nonRegistry: isNonRegistryRange(alias.range),
+    }
+  }
+
+  return {
+    name,
+    range,
+    packageName: name,
+    category,
+    nonRegistry: isNonRegistryRange(range),
+  }
+}
+
+export function parsePackageJsonDependencies(raw: unknown): ParsedPackageJson {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    throw new Error('Invalid package.json: expected a JSON object')
+  }
+
+  const pkg = raw as Record<string, unknown>
+  const dependencies: PackageJsonDependency[] = []
+
+  for (const category of DEPENDENCY_CATEGORIES) {
+    const section = pkg[category]
+    if (!section || typeof section !== 'object' || Array.isArray(section)) continue
+
+    for (const [name, range] of Object.entries(section as Record<string, unknown>)) {
+      if (typeof range !== 'string') continue
+      dependencies.push(toDependency(name, range, category))
+    }
+  }
+
+  dependencies.sort((a, b) => {
+    const categoryOrder =
+      DEPENDENCY_CATEGORIES.indexOf(a.category) - DEPENDENCY_CATEGORIES.indexOf(b.category)
+    if (categoryOrder !== 0) return categoryOrder
+    return a.name.localeCompare(b.name)
+  })
+
+  return {
+    name: typeof pkg.name === 'string' ? pkg.name : undefined,
+    version: typeof pkg.version === 'string' ? pkg.version : undefined,
+    dependencies,
+  }
+}
+
+export function parsePackageJsonText(text: string): ParsedPackageJson {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch {
+    throw new Error('Invalid package.json: could not parse JSON')
+  }
+  return parsePackageJsonDependencies(parsed)
+}
diff --git a/docs/content/2.guide/3.url-structure.md b/docs/content/2.guide/3.url-structure.md
index 9e0df4bbfe..d7ebfdc614 100644
--- a/docs/content/2.guide/3.url-structure.md
+++ b/docs/content/2.guide/3.url-structure.md
@@ -44,6 +44,8 @@ npmx.dev keeps package exploration views in routes or query parameters so you ca
 | ------------------- | --------------------------------- |
 | Search results      | `/search?q=vue`                   |
 | Package comparison  | `/compare?packages=react,preact`  |
+| Tools               | `/tools`                          |
+| Dependency stats    | `/tools/deps-stats`               |
 | Source file or line | `/package-code/vue/v/3.5.27/...`  |
 | Generated docs      | `/package-docs/ufo/v/1.6.3`       |
 | Version diff        | `/diff/vue/v/3.5.26...3.5.27`     |
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index a09e22b59f..4731c3b1b8 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -24,6 +24,7 @@
     "brand": "brand",
     "resources": "Resources",
     "features": "Features",
+    "tools": "tools",
     "other": "Other",
     "sponsored_by": "Sponsored by {list}"
   },
@@ -40,6 +41,7 @@
     "show_kbd_hints": "Highlight keyboard hints",
     "settings": "Open settings",
     "compare": "Open compare",
+    "deps_stats": "Open dependency stats tool",
     "compare_from_package": "Open compare (prefilled with current package)",
     "changelog": "Open changelog",
     "navigate_results": "Navigate results",
@@ -207,6 +209,7 @@
     "popular_packages": "Popular packages",
     "settings": "settings",
     "compare": "compare",
+    "tools": "tools",
     "back": "back",
     "menu": "Menu",
     "mobile_menu": "Navigation menu",
@@ -214,6 +217,46 @@
     "links": "Links",
     "tap_to_search": "Tap to search"
   },
+  "tools": {
+    "title": "tools",
+    "tagline": "utilities for exploring packages and project dependencies",
+    "meta_title": "Tools - npmx",
+    "meta_description": "Browse npmx tools for exploring packages and project dependencies",
+    "deps_stats": {
+      "name": "deps stats",
+      "description": "Upload a package.json and inspect stats for each dependency"
+    }
+  },
+  "deps_stats": {
+    "title": "deps stats",
+    "meta_title": "Deps stats - npmx",
+    "meta_description": "Upload a package.json and explore stats for each dependency",
+    "upload": {
+      "section": "Package.json",
+      "label": "Upload package.json",
+      "hint": "Drop a package.json here, or choose a file. Only the dependency fields are read — nothing is uploaded to a server",
+      "clear": "Clear",
+      "invalid_package_json": "Invalid package.json"
+    },
+    "dependencies": {
+      "title": "Dependencies",
+      "count": "No deps | 1 dep | {count} deps",
+      "filter_label": "Filter dependencies",
+      "filter_placeholder": "Filter dependencies...",
+      "empty": "No dependencies found in this package.json",
+      "no_matches": "No dependencies match your filter",
+      "non_registry": "Not an npm registry package"
+    },
+    "stats": {
+      "empty_title": "Select a dependency",
+      "empty_description": "Pick a package from the list to see downloads, size, vulnerabilities, trends, and more",
+      "non_registry_title": "Local or remote dependency",
+      "non_registry_description": "This entry points to a file, workspace, git, or URL dependency, so registry stats are unavailable",
+      "declared_range": "Declared",
+      "resolved_version": "Latest",
+      "open_full_stats": "Open full stats"
+    }
+  },
   "blog": {
     "title": "Blog",
     "heading": "blog",
diff --git a/i18n/schema.json b/i18n/schema.json
index b7793e498c..b579451edb 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -76,6 +76,9 @@
         "features": {
           "type": "string"
         },
+        "tools": {
+          "type": "string"
+        },
         "other": {
           "type": "string"
         },
@@ -124,6 +127,9 @@
         "compare": {
           "type": "string"
         },
+        "deps_stats": {
+          "type": "string"
+        },
         "compare_from_package": {
           "type": "string"
         },
@@ -625,6 +631,9 @@
         "compare": {
           "type": "string"
         },
+        "tools": {
+          "type": "string"
+        },
         "back": {
           "type": "string"
         },
@@ -646,6 +655,126 @@
       },
       "additionalProperties": false
     },
+    "tools": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "tagline": {
+          "type": "string"
+        },
+        "meta_title": {
+          "type": "string"
+        },
+        "meta_description": {
+          "type": "string"
+        },
+        "deps_stats": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string"
+            },
+            "description": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
+    "deps_stats": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "meta_title": {
+          "type": "string"
+        },
+        "meta_description": {
+          "type": "string"
+        },
+        "upload": {
+          "type": "object",
+          "properties": {
+            "section": {
+              "type": "string"
+            },
+            "label": {
+              "type": "string"
+            },
+            "hint": {
+              "type": "string"
+            },
+            "clear": {
+              "type": "string"
+            },
+            "invalid_package_json": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "dependencies": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string"
+            },
+            "count": {
+              "type": "string"
+            },
+            "filter_label": {
+              "type": "string"
+            },
+            "filter_placeholder": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "no_matches": {
+              "type": "string"
+            },
+            "non_registry": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "stats": {
+          "type": "object",
+          "properties": {
+            "empty_title": {
+              "type": "string"
+            },
+            "empty_description": {
+              "type": "string"
+            },
+            "non_registry_title": {
+              "type": "string"
+            },
+            "non_registry_description": {
+              "type": "string"
+            },
+            "declared_range": {
+              "type": "string"
+            },
+            "resolved_version": {
+              "type": "string"
+            },
+            "open_full_stats": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
     "blog": {
       "type": "object",
       "properties": {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 43b55b19cf..fe4095063f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -221,6 +221,8 @@ export default defineNuxtConfig({
     '/blog/**': { prerender: true },
     '/noodles/**': { prerender: true },
     '/sponsors': { prerender: true },
+    '/tools': { prerender: true },
+    '/tools/deps-stats': { prerender: true },
     // proxy for insights
     '/_v/script.js': {
       proxy: 'https://npmx.dev/_vercel/insights/script.js',
diff --git a/server/api/registry/direct-deps-health.post.ts b/server/api/registry/direct-deps-health.post.ts
new file mode 100644
index 0000000000..ec00a9f772
--- /dev/null
+++ b/server/api/registry/direct-deps-health.post.ts
@@ -0,0 +1,15 @@
+import * as v from 'valibot'
+import type { DirectDependencyHealthResult } from '#shared/types/dependency-analysis'
+import { DirectDepsHealthBodySchema } from '#shared/schemas/dependency-analysis'
+import { analyzeDirectDependencyHealth } from '#server/utils/dependency-analysis'
+
+/**
+ * POST /api/registry/direct-deps-health
+ *
+ * Resolve declared dependency ranges and report which packages are vulnerable
+ * or deprecated at the resolved version (direct packages only — no tree walk).
+ */
+export default defineEventHandler(async (event): Promise<DirectDependencyHealthResult> => {
+  const body = v.parse(DirectDepsHealthBodySchema, await readBody(event))
+  return await analyzeDirectDependencyHealth(body.dependencies)
+})
diff --git a/server/middleware/canonical-redirects.global.ts b/server/middleware/canonical-redirects.global.ts
index 738612c2a7..0f3c1bf915 100644
--- a/server/middleware/canonical-redirects.global.ts
+++ b/server/middleware/canonical-redirects.global.ts
@@ -31,6 +31,7 @@ const pages = [
   '/privacy',
   '/search',
   '/settings',
+  '/tools',
   '/translation-status',
   '/recharging',
 ]
diff --git a/server/utils/dependency-analysis.ts b/server/utils/dependency-analysis.ts
index 0b42ee636e..8d6d142d9e 100644
--- a/server/utils/dependency-analysis.ts
+++ b/server/utils/dependency-analysis.ts
@@ -8,11 +8,12 @@ import type {
   PackageVulnerabilityInfo,
   VulnerabilityTreeResult,
   DeprecatedPackageInfo,
+  DirectDependencyHealthResult,
   OsvAffected,
   OsvRange,
 } from '#shared/types/dependency-analysis'
 import { mapWithConcurrency } from '#shared/utils/async'
-import { resolveDependencyTree } from './dependency-resolver'
+import { resolveDependencyTree, resolveVersion } from './dependency-resolver'
 import { compare, isGreaterOrEqual, isLess } from 'verkit'
 
 /** Maximum concurrent requests for fetching vulnerability details */
@@ -359,3 +360,82 @@ export const analyzeDependencyTree = defineCachedFunction(
     getKey: (name: string, version: string) => `v2:${name}@${version}`,
   },
 )
+
+const DIRECT_DEPS_RESOLVE_CONCURRENCY = 20
+
+export async function analyzeDirectDependencyHealth(
+  dependencies: Record<string, string>,
+): Promise<DirectDependencyHealthResult> {
+  const entries = Object.entries(dependencies)
+  const resolved = await mapWithConcurrency(
+    entries,
+    async ([name, range]) => {
+      try {
+        const packument = await fetchNpmPackage(name)
+        const versions = Object.keys(packument.versions)
+        const version = packument['dist-tags']?.[range] ?? resolveVersion(range, versions)
+        if (!version) return null
+
+        const versionData = packument.versions[version]
+        if (!versionData) return null
+
+        return {
+          name,
+          version,
+          deprecated: versionData?.deprecated,
+        }
+      } catch {
+        return null
+      }
+    },
+    DIRECT_DEPS_RESOLVE_CONCURRENCY,
+  )
+
+  const packages: PackageQueryInfo[] = []
+  const deprecated: DirectDependencyHealthResult['deprecated'] = {}
+
+  for (const pkg of resolved) {
+    if (!pkg) continue
+    packages.push({
+      name: pkg.name,
+      version: pkg.version,
+      depth: 'direct',
+      path: [],
+    })
+    if (pkg.deprecated) {
+      deprecated[pkg.name] = {
+        name: pkg.name,
+        version: pkg.version,
+        message: pkg.deprecated,
+      }
+    }
+  }
+
+  const vulnerable: DirectDependencyHealthResult['vulnerable'] = {}
+
+  if (packages.length === 0) {
+    return { vulnerable, deprecated }
+  }
+
+  const { vulnerableIndices, failed: batchFailed } = await queryOsvBatch(packages)
+  if (batchFailed || vulnerableIndices.length === 0) {
+    return { vulnerable, deprecated }
+  }
+
+  const detailResults = await mapWithConcurrency(
+    vulnerableIndices,
+    i => queryOsvDetails(packages[i]!),
+    OSV_DETAIL_CONCURRENCY,
+  )
+
+  for (const result of detailResults) {
+    if (!result) continue
+    vulnerable[result.name] = {
+      name: result.name,
+      version: result.version,
+      counts: result.counts,
+    }
+  }
+
+  return { vulnerable, deprecated }
+}
diff --git a/shared/schemas/dependency-analysis.ts b/shared/schemas/dependency-analysis.ts
new file mode 100644
index 0000000000..1a65d86197
--- /dev/null
+++ b/shared/schemas/dependency-analysis.ts
@@ -0,0 +1,13 @@
+import * as v from 'valibot'
+import { PackageNameSchema } from './package'
+import { DIRECT_DEPS_HEALTH_MAX } from '#shared/utils/constants'
+
+export const DirectDepsHealthBodySchema = v.object({
+  dependencies: v.pipe(
+    v.record(PackageNameSchema, v.string()),
+    v.check(
+      deps => Object.keys(deps).length <= DIRECT_DEPS_HEALTH_MAX,
+      `Too many dependencies (max ${DIRECT_DEPS_HEALTH_MAX})`,
+    ),
+  ),
+})
diff --git a/shared/types/dependency-analysis.ts b/shared/types/dependency-analysis.ts
index a733c302e5..31adbe065b 100644
--- a/shared/types/dependency-analysis.ts
+++ b/shared/types/dependency-analysis.ts
@@ -19,6 +19,7 @@ export type OsvSeverityLevel = (typeof SEVERITY_LEVELS)[number] | 'unknown'
  * Counts by severity level
  */
 export type SeverityCounts = Record<(typeof SEVERITY_LEVELS)[number], number>
+export type VulnerabilityCounts = SeverityCounts & { total: number }
 
 /**
  * CVSS severity information from OSV
@@ -140,7 +141,7 @@ export interface PackageVulnerabilities {
   package: string
   version: string
   vulnerabilities: VulnerabilitySummary[]
-  counts: SeverityCounts & { total: number }
+  counts: VulnerabilityCounts
 }
 
 /** Depth in dependency tree */
@@ -157,13 +158,7 @@ export interface PackageVulnerabilityInfo {
   /** Dependency path from root package */
   path: string[]
   vulnerabilities: VulnerabilitySummary[]
-  counts: {
-    total: number
-    critical: number
-    high: number
-    moderate: number
-    low: number
-  }
+  counts: VulnerabilityCounts
 }
 
 /**
@@ -197,11 +192,31 @@ export interface VulnerabilityTreeResult {
   /** Number of packages that could not be checked (OSV query failed) */
   failedQueries: number
   /** Aggregated counts across all packages */
-  totalCounts: {
-    total: number
-    critical: number
-    high: number
-    moderate: number
-    low: number
-  }
+  totalCounts: VulnerabilityCounts
+}
+
+/**
+ * Vulnerability info for a direct dependency (no tree depth/path)
+ */
+export interface DirectVulnerableDependency {
+  name: string
+  version: string
+  counts: VulnerabilityCounts
+}
+
+/**
+ * Deprecated info for a direct dependency
+ */
+export interface DirectDeprecatedDependency {
+  name: string
+  version: string
+  message: string
+}
+
+/**
+ * Health check result for a set of direct dependencies (resolved ranges only)
+ */
+export interface DirectDependencyHealthResult {
+  vulnerable: Record<string, DirectVulnerableDependency>
+  deprecated: Record<string, DirectDeprecatedDependency>
 }
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index bf8030c9ef..f362bbdb4b 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -7,6 +7,9 @@ export const CACHE_MAX_AGE_ONE_HOUR = 60 * 60
 export const CACHE_MAX_AGE_ONE_DAY = 60 * 60 * 24
 export const CACHE_MAX_AGE_ONE_YEAR = 60 * 60 * 24 * 365
 
+/** Max packages per direct-deps-health API request (client batches to this size) */
+export const DIRECT_DEPS_HEALTH_MAX = 50
+
 // API Strings
 export const NPMX_SITE = 'https://npmx.dev'
 export const NPMX_DOCS_SITE = 'https://docs.npmx.dev'
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index e1b79d1656..ec296a28a3 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -196,6 +196,10 @@ import {
   CompareReplacementSuggestion,
   DateTime,
   DependencyPathPopup,
+  DepsStatsDependencyList,
+  DepsStatsDependencyStats,
+  DepsStatsDependencyStatsPanel,
+  DepsStatsPackageJsonUpload,
   FilterChips,
   FilterPanel,
   HeaderAccountMenu,
@@ -2536,6 +2540,132 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('DepsStatsPackageJsonUpload', () => {
+    it('should have no accessibility violations in empty state', async () => {
+      const component = await mountSuspended(DepsStatsPackageJsonUpload)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with an error', async () => {
+      const component = await mountSuspended(DepsStatsPackageJsonUpload, {
+        props: { error: 'Invalid package.json' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with a selected file', async () => {
+      const component = await mountSuspended(DepsStatsPackageJsonUpload, {
+        props: { fileName: 'package.json' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DepsStatsDependencyList', () => {
+    it('should have no accessibility violations when empty', async () => {
+      const component = await mountSuspended(DepsStatsDependencyList, {
+        props: {
+          dependencies: [],
+          selectedName: null,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with dependencies', async () => {
+      const component = await mountSuspended(DepsStatsDependencyList, {
+        props: {
+          dependencies: [
+            {
+              name: 'vue',
+              range: '^3.5.0',
+              packageName: 'vue',
+              category: 'dependencies',
+              nonRegistry: false,
+            },
+            {
+              name: 'vitest',
+              range: '^3.0.0',
+              packageName: 'vitest',
+              category: 'devDependencies',
+              nonRegistry: false,
+            },
+            {
+              name: 'local-pkg',
+              range: 'workspace:*',
+              packageName: 'local-pkg',
+              category: 'dependencies',
+              nonRegistry: true,
+            },
+            {
+              name: 'alias-pkg',
+              range: '^1.0.0',
+              packageName: 'real-pkg',
+              category: 'dependencies',
+              nonRegistry: false,
+            },
+          ],
+          selectedName: 'vue',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DepsStatsDependencyStats', () => {
+    it('should have no accessibility violations when empty', async () => {
+      const component = await mountSuspended(DepsStatsDependencyStats, {
+        props: { dependency: null },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations for a non-registry dependency', async () => {
+      const component = await mountSuspended(DepsStatsDependencyStats, {
+        props: {
+          dependency: {
+            name: 'local-pkg',
+            range: 'workspace:*',
+            packageName: 'local-pkg',
+            category: 'dependencies',
+            nonRegistry: true,
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DepsStatsDependencyStatsPanel', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DepsStatsDependencyStatsPanel, {
+        props: {
+          packageName: 'vue',
+          declaredRange: '^3.5.0',
+        },
+        global: {
+          stubs: {
+            PackageTrendsChart: {
+              template: '<div data-test-id="package-trends-chart-stub"></div>',
+            },
+            PackageVersionDistribution: {
+              template: '<div data-test-id="package-version-distribution-stub"></div>',
+            },
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   // Compare feature components
   describe('CompareFacetSelector', () => {
     it('should have no accessibility violations', async () => {
diff --git a/test/nuxt/composables/use-direct-dependency-health.spec.ts b/test/nuxt/composables/use-direct-dependency-health.spec.ts
new file mode 100644
index 0000000000..2e59a9b626
--- /dev/null
+++ b/test/nuxt/composables/use-direct-dependency-health.spec.ts
@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope, nextTick, ref, type EffectScope } from 'vue'
+import type { DirectDependencyHealthResult } from '#shared/types/dependency-analysis'
+import { DIRECT_DEPS_HEALTH_MAX } from '#shared/utils/constants'
+import { useDirectDependencyHealth } from '~/composables/npm/useDirectDependencyHealth'
+
+const EMPTY_HEALTH: DirectDependencyHealthResult = {
+  vulnerable: {},
+  deprecated: {},
+}
+
+describe('useDirectDependencyHealth', () => {
+  let scope: EffectScope
+  let fetchMock: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    scope = effectScope()
+    fetchMock = vi.fn().mockResolvedValue(EMPTY_HEALTH)
+    vi.stubGlobal('$fetch', fetchMock)
+  })
+
+  afterEach(() => {
+    scope.stop()
+    vi.unstubAllGlobals()
+  })
+
+  it('loads dependencies in display-order batches', async () => {
+    const names = Array.from({ length: DIRECT_DEPS_HEALTH_MAX + 10 }, (_, index) => `pkg-${index}`)
+    const dependencies = Object.fromEntries(names.map(name => [name, '^1.0.0']))
+    const result = scope.run(() => useDirectDependencyHealth(dependencies, names))!
+
+    await result.requestHealth(names[0]!)
+
+    const firstBatch = fetchMock.mock.calls[0]?.[1]?.body.dependencies
+    expect(Object.keys(firstBatch)).toEqual(names.slice(0, DIRECT_DEPS_HEALTH_MAX))
+
+    await result.requestHealth(names[1]!)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+
+    await result.requestHealth(names[DIRECT_DEPS_HEALTH_MAX]!)
+    const secondBatch = fetchMock.mock.calls[1]?.[1]?.body.dependencies
+    expect(Object.keys(secondBatch)).toEqual(names.slice(DIRECT_DEPS_HEALTH_MAX))
+  })
+
+  it('does not let a stale failed request clear current settled state', async () => {
+    let rejectStaleRequest!: (reason: Error) => void
+    fetchMock
+      .mockImplementationOnce(
+        () =>
+          new Promise((_, reject) => {
+            rejectStaleRequest = reject
+          }),
+      )
+      .mockResolvedValueOnce(EMPTY_HEALTH)
+
+    const dependencies = ref({ pkg: '^1.0.0' })
+    const result = scope.run(() => useDirectDependencyHealth(dependencies, ['pkg']))!
+    const staleRequest = result.requestHealth('pkg')
+
+    dependencies.value = { pkg: '^2.0.0' }
+    await nextTick()
+    await result.requestHealth('pkg')
+
+    rejectStaleRequest(new Error('stale request failed'))
+    await staleRequest
+    await result.requestHealth('pkg')
+
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/test/unit/app/utils/parse-package-json-deps.spec.ts b/test/unit/app/utils/parse-package-json-deps.spec.ts
new file mode 100644
index 0000000000..84f33a9dc2
--- /dev/null
+++ b/test/unit/app/utils/parse-package-json-deps.spec.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import {
+  isNonRegistryRange,
+  parsePackageJsonDependencies,
+  parsePackageJsonText,
+  resolveNpmAlias,
+} from '~/utils/parse-package-json-deps'
+
+describe('parse-package-json-deps', () => {
+  describe('isNonRegistryRange', () => {
+    it('detects local and remote protocols', () => {
+      expect(isNonRegistryRange('file:../local')).toBe(true)
+      expect(isNonRegistryRange('workspace:*')).toBe(true)
+      expect(isNonRegistryRange('link:./pkg')).toBe(true)
+      expect(isNonRegistryRange('git+https://github.com/org/repo.git')).toBe(true)
+      expect(isNonRegistryRange('https://example.com/pkg.tgz')).toBe(true)
+      expect(isNonRegistryRange('^1.2.3')).toBe(false)
+      expect(isNonRegistryRange('*')).toBe(false)
+    })
+  })
+
+  describe('resolveNpmAlias', () => {
+    it('resolves unscoped and scoped npm aliases', () => {
+      expect(resolveNpmAlias('npm:lodash@4.17.21')).toEqual({
+        packageName: 'lodash',
+        range: '4.17.21',
+      })
+      expect(resolveNpmAlias('npm:@scope/pkg@^1.0.0')).toEqual({
+        packageName: '@scope/pkg',
+        range: '^1.0.0',
+      })
+      expect(resolveNpmAlias('^1.0.0')).toBeNull()
+    })
+  })
+
+  describe('parsePackageJsonDependencies', () => {
+    it('parses dependency groups in order', () => {
+      const result = parsePackageJsonDependencies({
+        name: 'demo',
+        version: '1.0.0',
+        dependencies: { vue: '^3.5.0', react: '^19.0.0' },
+        devDependencies: { vitest: '^3.0.0' },
+        peerDependencies: { typescript: '>=5' },
+        optionalDependencies: { fsevents: '^2.3.0' },
+      })
+
+      expect(result.name).toBe('demo')
+      expect(result.dependencies.map(d => `${d.category}:${d.name}`)).toEqual([
+        'dependencies:react',
+        'dependencies:vue',
+        'devDependencies:vitest',
+        'peerDependencies:typescript',
+        'optionalDependencies:fsevents',
+      ])
+    })
+
+    it('resolves npm aliases and marks non-registry ranges', () => {
+      const result = parsePackageJsonDependencies({
+        dependencies: {
+          alias: 'npm:lodash@^4.17.21',
+          local: 'file:../pkg',
+        },
+      })
+
+      expect(result.dependencies).toEqual([
+        {
+          name: 'alias',
+          range: '^4.17.21',
+          packageName: 'lodash',
+          category: 'dependencies',
+          nonRegistry: false,
+        },
+        {
+          name: 'local',
+          range: 'file:../pkg',
+          packageName: 'local',
+          category: 'dependencies',
+          nonRegistry: true,
+        },
+      ])
+    })
+
+    it('throws for non-object JSON roots', () => {
+      expect(() => parsePackageJsonDependencies([])).toThrow(/expected a JSON object/)
+      expect(() => parsePackageJsonText('{')).toThrow(/could not parse JSON/)
+    })
+  })
+})