diff --git a/app/components/BaseCard.vue b/app/components/BaseCard.vue
index 2eb7f348bd..8bb4e95b7c 100644
--- a/app/components/BaseCard.vue
+++ b/app/components/BaseCard.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <article
-    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
+    class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
     :class="{
       'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
       'bg-fg-subtle/15!': selected,
diff --git a/app/components/DateTime.vue b/app/components/DateTime.vue
index e2fc331bb3..3cfbda4b43 100644
--- a/app/components/DateTime.vue
+++ b/app/components/DateTime.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * DateTime component that wraps NuxtTime with settings-aware relative date support.
- * Uses the global settings to determine whether to show relative or absolute dates.
+ * Uses global settings to determine whether to show relative or absolute dates.
  *
  * Note: When relativeDates setting is enabled, the component switches between
  * relative and absolute display based on user preference. The title attribute
@@ -33,19 +33,26 @@ const { locale } = useI18n()
 
 const relativeDates = useRelativeDates()
 
-const dateFormatter = new Intl.DateTimeFormat(locale.value, {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit',
-  timeZoneName: 'short',
-})
+const isMounted = useMounted()
 
-// Compute the title - always show full date for accessibility
 const titleValue = computed(() => {
   if (props.title) return props.title
+
   const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
+
+  if (!isMounted.value) {
+    return date.toISOString()
+  }
+
+  const dateFormatter = new Intl.DateTimeFormat(locale.value, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  })
+
   return dateFormatter.format(date)
 })
 </script>
diff --git a/app/components/Dependencies/Card.vue b/app/components/Dependencies/Card.vue
new file mode 100644
index 0000000000..52c495bc25
--- /dev/null
+++ b/app/components/Dependencies/Card.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { PackageDependencyItem } from '#shared/types/package-dependencies'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+import type { StructuredFilters } from '#shared/types/preferences'
+import { DEFAULT_FILTERS } from '#shared/types/preferences'
+
+const props = defineProps<{
+  insights?: PackageDependencyInsights
+  item: PackageDependencyItem
+  showSkeleton: boolean
+  index?: number
+  filters?: StructuredFilters
+}>()
+
+const { model: globalSearchQuery } = useGlobalSearch()
+
+const activeFilters = computed<StructuredFilters>(() => {
+  if (props.filters) return props.filters
+  const parsed = parseSearchOperators(globalSearchQuery.value)
+  return {
+    ...DEFAULT_FILTERS,
+    keywords: parsed.keywords ?? [],
+    text: parsed.text ?? '',
+  }
+})
+
+const targetName = computed(() => props.item.packageName || props.item.name)
+
+// Fetch rich package metadata from API (with hydrated useState caching)
+const { data: meta } = usePackageMeta(targetName)
+
+const searchResult = computed(() => {
+  if (!meta.value) return null
+  const result = metaToSearchResult(meta.value)
+  result.package.name = props.item.name
+  result.package.version = props.item.range
+  return result
+})
+
+const minVersion = computed(() => resolveMinVersion(props.item.range))
+
+const packageUrl = computed(() => packageRoute(targetName.value, minVersion.value))
+
+const isLoadingData = computed(() => {
+  if (props.insights) {
+    const vStatus = unref(props.insights.vulnStatus)
+    const rStatus = unref(props.insights.replacementStatus)
+    return (
+      vStatus === 'pending' || vStatus === 'idle' || rStatus === 'pending' || rStatus === 'idle'
+    )
+  }
+  return false
+})
+
+const emit = defineEmits<{
+  clickKeyword: [keyword: string]
+}>()
+</script>
+
+<template>
+  <BaseCard v-if="!searchResult || showSkeleton">
+    <header class="mb-4 flex items-baseline justify-between gap-2">
+      <div class="flex items-baseline justify-start gap-2">
+        <h2
+          class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all inline-flex items-center gap-2"
+        >
+          <NuxtLink
+            :to="packageUrl"
+            class="decoration-none hover:text-accent-fallback after:content-[''] after:absolute after:inset-0 inline-flex items-center gap-2 min-w-0"
+            :data-result-index="index"
+          >
+            <span class="i-simple-icons:npm w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+            <span class="truncate" dir="ltr">{{ item.name }}</span>
+          </NuxtLink>
+        </h2>
+        <DependenciesStatusIndicators
+          :name="targetName"
+          :flags="item.flags"
+          :deprecated="searchResult?.package.deprecated"
+          :is-loading="isLoadingData"
+          class="z-10"
+        />
+      </div>
+    </header>
+    <SkeletonBlock class="h-5 w-full mb-2 sm:mb-3" />
+    <div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-muted">
+      <div class="flex items-center gap-1.5 min-w-0 relative z-10">
+        <dl>
+          <dt class="sr-only">{{ $t('package.card.version') }}</dt>
+          <dd class="font-mono truncate max-w-32">{{ item.range }}</dd>
+        </dl>
+      </div>
+      <SkeletonBlock class="h-4 w-8ch" />
+      <SkeletonBlock class="h-4 w-3ch" />
+      <SkeletonBlock class="h-4 w-20ch sm:ms-auto" />
+    </div>
+  </BaseCard>
+
+  <PackageCard
+    v-else
+    heading-level="h2"
+    :result="searchResult"
+    :index="index"
+    :insights="insights || undefined"
+    :filters="activeFilters"
+    :to="packageUrl"
+    version-is-range
+    @click-keyword="emit('clickKeyword', $event)"
+  >
+    <template #status-indicators="{ insights }">
+      <DependenciesStatusIndicators
+        :name="targetName"
+        :flags="item.flags"
+        :deprecated="searchResult?.package.deprecated"
+        v-bind="{ insights }"
+        :is-loading="isLoadingData"
+      />
+    </template>
+  </PackageCard>
+</template>
diff --git a/app/components/Dependencies/InsightsSummary.vue b/app/components/Dependencies/InsightsSummary.vue
new file mode 100644
index 0000000000..e74ae0f0f0
--- /dev/null
+++ b/app/components/Dependencies/InsightsSummary.vue
@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import type { PackageDependencySection } from '#shared/types/package-dependencies'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+import { getVulnerableDepInfo, getDeprecatedDepInfo } from '~/utils/npm/problematic-dependencies'
+
+const selectedInsights = defineModel<string[]>('selectedInsights', { default: () => [] })
+
+function toggleInsight(id: string) {
+  if (selectedInsights.value.includes(id)) {
+    selectedInsights.value = selectedInsights.value.filter(i => i !== id)
+  } else {
+    selectedInsights.value = [...selectedInsights.value, id]
+  }
+}
+
+const props = withDefaults(
+  defineProps<{
+    insights?: PackageDependencyInsights
+    sections: PackageDependencySection[]
+    activeSections?: string[]
+    showSkeleton: boolean
+    packageName?: string
+    interactive?: boolean
+  }>(),
+  {
+    interactive: true,
+  },
+)
+
+const stats = computed(() => {
+  const urgent = { major: 0, minor: 0, patch: 0, vulnerable: 0, deprecated: 0, replacement: 0 }
+  const nonUrgent = { major: 0, minor: 0, patch: 0, vulnerable: 0, deprecated: 0, replacement: 0 }
+  const active = { major: 0, minor: 0, patch: 0, vulnerable: 0, deprecated: 0, replacement: 0 }
+
+  if (!props.insights) return { urgent, nonUrgent, active }
+
+  for (const section of props.sections) {
+    const isUrgent = ['dependencies', 'bundledDependencies'].includes(section.id)
+    const isActive = !props.activeSections || props.activeSections.includes(section.id)
+    const target = isUrgent ? urgent : nonUrgent
+
+    for (const item of section.items) {
+      const outdated = props.insights.outdatedDeps.value?.[item.name]
+      if (outdated) {
+        if (outdated.majorsBehind > 0) {
+          target.major++
+          if (isActive) active.major++
+        } else if (outdated.minorsBehind > 0) {
+          target.minor++
+          if (isActive) active.minor++
+        } else if (outdated.resolved !== outdated.latest) {
+          target.patch++
+          if (isActive) active.patch++
+        }
+      }
+
+      if (props.insights.replacementDeps.value?.[item.name]) {
+        target.replacement++
+        if (isActive) active.replacement++
+      }
+      const realName = item.packageName || item.name
+      if (getVulnerableDepInfo(realName, props.insights.vulnTree.value)) {
+        target.vulnerable++
+        if (isActive) active.vulnerable++
+      }
+      if (getDeprecatedDepInfo(realName, props.insights.vulnTree.value)) {
+        target.deprecated++
+        if (isActive) active.deprecated++
+      }
+    }
+  }
+
+  return { urgent, nonUrgent, active }
+})
+
+const vulnLoading = computed(
+  () =>
+    !props.insights ||
+    props.insights.vulnStatus?.value === 'idle' ||
+    props.insights.vulnStatus?.value === 'pending',
+)
+const outdatedLoading = computed(
+  () =>
+    !props.insights ||
+    props.insights.outdatedStatus?.value === 'idle' ||
+    props.insights.outdatedStatus?.value === 'pending',
+)
+const replacementLoading = computed(
+  () =>
+    !props.insights ||
+    props.insights.replacementStatus?.value === 'idle' ||
+    props.insights.replacementStatus?.value === 'pending',
+)
+
+interface InsightMetric {
+  id: string
+  label: string
+  icon: string
+  iconColor: string
+  loading: boolean
+  urgentCount: number
+  nonUrgentCount: number
+  totalCount: number
+  activeCount: number
+}
+
+const metrics = computed<InsightMetric[]>(() => [
+  {
+    id: 'major',
+    label: $t('package.dependencies.insights.major_behind'),
+    icon: 'i-lucide:arrow-up',
+    iconColor: 'text-red-700 dark:text-red-500',
+    loading: outdatedLoading.value,
+    urgentCount: stats.value.urgent.major,
+    nonUrgentCount: stats.value.nonUrgent.major,
+    totalCount: stats.value.urgent.major + stats.value.nonUrgent.major,
+    activeCount: stats.value.active.major,
+  },
+  {
+    id: 'minor',
+    label: $t('package.dependencies.insights.minor_behind'),
+    icon: 'i-lucide:arrow-up',
+    iconColor: 'text-orange-700 dark:text-orange-500',
+    loading: outdatedLoading.value,
+    urgentCount: stats.value.urgent.minor,
+    nonUrgentCount: stats.value.nonUrgent.minor,
+    totalCount: stats.value.urgent.minor + stats.value.nonUrgent.minor,
+    activeCount: stats.value.active.minor,
+  },
+  {
+    id: 'patch',
+    label: $t('package.dependencies.insights.patch_behind'),
+    icon: 'i-lucide:arrow-up',
+    iconColor: 'text-yellow-700 dark:text-yellow-500',
+    loading: outdatedLoading.value,
+    urgentCount: stats.value.urgent.patch,
+    nonUrgentCount: stats.value.nonUrgent.patch,
+    totalCount: stats.value.urgent.patch + stats.value.nonUrgent.patch,
+    activeCount: stats.value.active.patch,
+  },
+  {
+    id: 'vulnerable',
+    label: $t('package.dependencies.insights.vulnerable'),
+    icon: 'i-lucide:shield-alert',
+    iconColor: 'text-red-600',
+    loading: vulnLoading.value,
+    urgentCount: stats.value.urgent.vulnerable,
+    nonUrgentCount: stats.value.nonUrgent.vulnerable,
+    totalCount: stats.value.urgent.vulnerable + stats.value.nonUrgent.vulnerable,
+    activeCount: stats.value.active.vulnerable,
+  },
+  {
+    id: 'deprecated',
+    label: $t('package.dependencies.insights.deprecated'),
+    icon: 'i-lucide:octagon-alert',
+    iconColor: 'text-purple-700 dark:text-purple-500',
+    loading: vulnLoading.value,
+    urgentCount: stats.value.urgent.deprecated,
+    nonUrgentCount: stats.value.nonUrgent.deprecated,
+    totalCount: stats.value.urgent.deprecated + stats.value.nonUrgent.deprecated,
+    activeCount: stats.value.active.deprecated,
+  },
+  {
+    id: 'replacement',
+    label: $t('package.dependencies.insights.replacements_available'),
+    icon: 'i-lucide:lightbulb',
+    iconColor: 'text-amber-700 dark:text-amber-500',
+    loading: replacementLoading.value,
+    urgentCount: stats.value.urgent.replacement,
+    nonUrgentCount: stats.value.nonUrgent.replacement,
+    totalCount: stats.value.urgent.replacement + stats.value.nonUrgent.replacement,
+    activeCount: stats.value.active.replacement,
+  },
+])
+
+function isItemInteractive(item: InsightMetric): boolean {
+  return props.interactive && item.totalCount > 0
+}
+
+const tooltipText = computed(() => {
+  return `${$t('package.dependencies.insights.subtitle')} — ${$t('package.dependencies.insights.tooltip_urgent')} / ${$t('package.dependencies.insights.tooltip_other')}`
+})
+
+const hasDependencies = computed(() => props.sections.some(s => s.items.length > 0))
+</script>
+
+<template>
+  <section v-if="hasDependencies" id="dependency-health" class="w-full py-4 mt-6">
+    <div class="flex items-center justify-between mb-2">
+      <div class="flex items-center gap-1.5">
+        <h2 class="text-fg-muted uppercase">
+          {{ $t('package.dependencies.insights.title') }}
+        </h2>
+        <TooltipApp :text="tooltipText" position="bottom">
+          <span class="i-lucide:info w-3.5 h-3.5" aria-hidden="true" />
+        </TooltipApp>
+      </div>
+
+      <button
+        v-if="interactive && selectedInsights.length > 0"
+        type="button"
+        class="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg font-mono transition-colors duration-200 cursor-pointer"
+        @click="selectedInsights = []"
+      >
+        <span class="i-lucide:x w-3 h-3" aria-hidden="true" />
+        <span>{{ $t('filters.clear_all') }}</span>
+      </button>
+    </div>
+
+    <div
+      class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-y-3 gap-x-4 border-y-border border-y py-3"
+    >
+      <component
+        :is="isItemInteractive(item) ? 'button' : 'div'"
+        v-for="item in metrics"
+        :key="item.id"
+        :type="isItemInteractive(item) ? 'button' : undefined"
+        class="py-1.5 px-2 rounded-md text-start transition-colors duration-200"
+        :class="[
+          isItemInteractive(item)
+            ? 'focus-visible:(outline-2 outline-accent/70 outline-offset-1) hover:bg-bg-subtle cursor-pointer'
+            : '',
+          isItemInteractive(item) && selectedInsights.includes(item.id)
+            ? 'bg-bg-muted ring-1 ring-border-hover'
+            : '',
+        ]"
+        :aria-pressed="isItemInteractive(item) ? selectedInsights.includes(item.id) : undefined"
+        :aria-label="
+          isItemInteractive(item)
+            ? selectedInsights.includes(item.id)
+              ? $t('package.dependencies.insights.clear_filter', { filter: item.label })
+              : $t('package.dependencies.insights.filter_by', { filter: item.label })
+            : undefined
+        "
+        @click="isItemInteractive(item) ? toggleInsight(item.id) : undefined"
+      >
+        <span
+          class="text-xs text-fg-muted lowercase flex items-center justify-start gap-1.5 w-full min-w-0"
+        >
+          <span class="flex items-center gap-1.5 truncate min-w-0">
+            <span
+              v-if="interactive && item.totalCount > 0"
+              aria-hidden="true"
+              class="w-3.5 h-3.5 border rounded shrink-0 flex items-center justify-center transition-colors pointer-events-none"
+              :class="
+                selectedInsights.includes(item.id)
+                  ? 'bg-fg border-fg text-bg'
+                  : 'border-border bg-bg-muted'
+              "
+            >
+              <span v-if="selectedInsights.includes(item.id)" class="i-lucide:check w-2.5 h-2.5" />
+            </span>
+            <span class="truncate">{{ item.label }}</span>
+          </span>
+          <span :class="[item.icon, item.iconColor, 'w-3.5 h-3.5 shrink-0']" aria-hidden="true" />
+        </span>
+        <span class="text-sm font-mono mt-1 block">
+          <template v-if="showSkeleton || item.loading">
+            <span class="inline-flex items-center gap-1 text-fg-subtle">
+              <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+            </span>
+          </template>
+          <template v-else>
+            <span class="flex text-sm items-center text-fg-subtle gap-1">
+              <span
+                v-if="item.totalCount === 0"
+                class="i-lucide:check w-3 h-3"
+                aria-hidden="true"
+              />
+              <span class="tabular-nums" :class="item.urgentCount > 0 ? 'text-fg font-medium' : ''">
+                {{ item.urgentCount }}
+              </span>
+              <template v-if="item.totalCount > 0">
+                <span class="px-0.5">/</span>
+                <span class="tabular-nums text-fg-muted">
+                  {{ item.totalCount }}
+                </span>
+              </template>
+            </span>
+          </template>
+        </span>
+      </component>
+    </div>
+  </section>
+</template>
diff --git a/app/components/Dependencies/List.vue b/app/components/Dependencies/List.vue
new file mode 100644
index 0000000000..385f7ecbce
--- /dev/null
+++ b/app/components/Dependencies/List.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type {
+  DependencySortOption,
+  PackageDependencyItem,
+} from '#shared/types/package-dependencies'
+import type { ColumnConfig, StructuredFilters, ViewMode } from '#shared/types/preferences'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+import { onKeyDown } from '@vueuse/core'
+
+defineProps<{
+  items: PackageDependencyItem[]
+  viewMode: ViewMode
+  columns?: ColumnConfig[]
+  sort: DependencySortOption
+  showSkeleton: boolean
+  insights?: PackageDependencyInsights
+  filters?: StructuredFilters
+}>()
+
+const emit = defineEmits<{
+  'update:sort': [value: DependencySortOption]
+  'clickKeyword': [keyword: string]
+}>()
+
+const keyboardShortcuts = useKeyboardShortcuts()
+
+const isVisible = (el: HTMLElement) => el.getClientRects().length > 0
+
+function getFocusableElements(): HTMLElement[] {
+  return Array.from(
+    document.querySelectorAll<HTMLElement>('#header-search, #deps-filter, [data-result-index]'),
+  )
+    .filter(isVisible)
+    .sort((a, b) => {
+      const aIdx = Number.parseInt(a.dataset.resultIndex ?? '0', 10)
+      const bIdx = Number.parseInt(b.dataset.resultIndex ?? '0', 10)
+      return aIdx - bIdx
+    })
+}
+
+function focusElement(el: HTMLElement) {
+  el.focus()
+  el.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+}
+
+function handleResultsKeydown(e: KeyboardEvent) {
+  if (!keyboardShortcuts.value) {
+    return
+  }
+
+  const elements = getFocusableElements()
+  if (elements.length === 0) return
+
+  const currentIndex = elements.findIndex(
+    el => el === document.activeElement || el.contains(document.activeElement),
+  )
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    const firstDataEntry = elements.findIndex(el => el.matches('[data-result-index]'))
+    const nextIndex =
+      firstDataEntry >= 0 && currentIndex < 0
+        ? firstDataEntry
+        : Math.min(currentIndex + 1, elements.length - 1)
+    const el = elements[nextIndex]
+    if (el) focusElement(el)
+    return
+  }
+
+  if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    const nextIndex = Math.max(currentIndex - 1, 0)
+    const el = elements[nextIndex]
+    if (el) focusElement(el)
+    return
+  }
+
+  if (e.key === 'Enter') {
+    // Browser handles Enter on focused links naturally, but handle for non-link elements
+    if (document.activeElement && elements.includes(document.activeElement as HTMLElement)) {
+      const el = document.activeElement as HTMLElement
+      // Only prevent default and click if it's not already a link (links handle Enter natively)
+      if (el.tagName !== 'A' && el.matches('[data-result-index]')) {
+        e.preventDefault()
+        el.click()
+      }
+    }
+  }
+}
+
+onKeyDown(['ArrowDown', 'ArrowUp', 'Enter'], handleResultsKeydown)
+</script>
+
+<template>
+  <DependenciesTable
+    v-show="viewMode === 'table'"
+    :items="items"
+    :sort="sort"
+    :columns="columns"
+    :show-skeleton="showSkeleton"
+    :insights="insights"
+    :filters="filters"
+    class="dependencies-list-element"
+    @update:sort="emit('update:sort', $event)"
+    @click-keyword="emit('clickKeyword', $event)"
+  />
+  <ol
+    v-show="viewMode === 'cards'"
+    class="dependencies-list-element list-none m-0 p-0 flex flex-col gap-4"
+  >
+    <li v-for="(item, index) in items" :key="item.name">
+      <DependenciesCard
+        :item="item"
+        :index="index"
+        :show-skeleton="showSkeleton"
+        :insights="insights"
+        :filters="filters"
+        @click-keyword="emit('clickKeyword', $event)"
+      />
+    </li>
+  </ol>
+</template>
diff --git a/app/components/Dependencies/StatusIndicators.vue b/app/components/Dependencies/StatusIndicators.vue
new file mode 100644
index 0000000000..f55c1b8d01
--- /dev/null
+++ b/app/components/Dependencies/StatusIndicators.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
+import { getVulnerableDepInfo, getDeprecatedDepInfo } from '~/utils/npm/problematic-dependencies'
+
+const props = defineProps<{
+  name: string
+  packageName?: string
+  flags?: string[]
+  insights?: PackageDependencyInsights
+  deprecated?: boolean | string
+  hasReplacement?: boolean
+  vulnTree?: VulnerabilityTreeResult
+  isLoading?: boolean
+}>()
+
+const structuralMeta = computed<Record<string, { icon: string; text: string }>>(() => ({
+  optional: { icon: 'i-lucide:circle-dashed', text: $t('package.dependencies.optional') },
+  bundled: { icon: 'i-lucide:package', text: $t('package.dependencies.bundled') },
+}))
+
+const realPackageName = computed(() => props.packageName || props.name)
+
+const isAliased = computed(() => !!props.packageName && props.packageName !== props.name)
+
+const isDataLoading = computed(() => {
+  if (props.isLoading !== undefined) return props.isLoading
+  if (props.insights) {
+    return (
+      unref(props.insights.vulnStatus) === 'pending' ||
+      unref(props.insights.replacementStatus) === 'pending'
+    )
+  }
+  return false
+})
+
+const healthStatusAlerts = computed(() => {
+  if (!props.name) return []
+
+  const alerts: Array<{
+    key: string
+    icon: string
+    cssClass: string
+    tooltipText: string
+  }> = []
+
+  const effectiveVulnTree = props.insights ? unref(props.insights.vulnTree) : props.vulnTree
+
+  if (getVulnerableDepInfo(realPackageName.value, effectiveVulnTree)) {
+    alerts.push({
+      key: 'vulnerable',
+      icon: 'i-lucide:shield-alert',
+      cssClass: 'text-red-600',
+      tooltipText: $t('package.dependencies.vulnerable'),
+    })
+  }
+
+  if (getDeprecatedDepInfo(realPackageName.value, effectiveVulnTree, props.deprecated)) {
+    alerts.push({
+      key: 'deprecated',
+      icon: 'i-lucide:octagon-alert',
+      cssClass: 'text-purple-700 dark:text-purple-500',
+      tooltipText: $t('package.deprecated.label'),
+    })
+  }
+
+  const replacementAvailable = props.insights
+    ? !!unref(props.insights.replacementDeps)?.[props.name]
+    : !!props.hasReplacement
+
+  if (replacementAvailable) {
+    alerts.push({
+      key: 'replacement',
+      icon: 'i-lucide:lightbulb',
+      cssClass: 'text-amber-700 dark:text-amber-500',
+      tooltipText: $t('package.dependencies.has_replacement'),
+    })
+  }
+
+  return alerts
+})
+</script>
+
+<template>
+  <span class="inline-flex shrink-0 z-20">
+    <TooltipApp
+      v-if="isAliased"
+      :text="$t('package.dependencies.aliased_to', { name: realPackageName })"
+      class="items-center shrink-0"
+    >
+      <span class="inline-flex items-center justify-center p-3 -my-3 cursor-help">
+        <span class="i-lucide:arrow-right-left w-3.5 h-3.5 text-fg-subtle" aria-hidden="true" />
+      </span>
+    </TooltipApp>
+
+    <template v-for="attribute in flags" :key="attribute">
+      <TooltipApp
+        v-if="structuralMeta[attribute]"
+        :text="structuralMeta[attribute].text"
+        class="items-center shrink-0"
+      >
+        <span class="inline-flex items-center justify-center p-3 -my-3 cursor-help">
+          <span
+            :class="structuralMeta[attribute].icon"
+            class="w-3.5 h-3.5 text-fg-subtle"
+            aria-hidden="true"
+          />
+        </span>
+      </TooltipApp>
+    </template>
+
+    <TooltipApp v-if="isDataLoading" :text="$t('common.loading')" class="items-center shrink-0">
+      <span class="inline-flex items-center justify-center p-3 -my-3 cursor-help">
+        <span class="i-svg-spinners:ring-resize w-3.5 h-3.5 text-fg-subtle" aria-hidden="true" />
+      </span>
+    </TooltipApp>
+
+    <TooltipApp
+      v-for="alert in healthStatusAlerts"
+      :key="alert.key"
+      :text="alert.tooltipText"
+      class="items-center shrink-0"
+    >
+      <span class="inline-flex items-center justify-center p-3 -my-3 cursor-help">
+        <span :class="[alert.icon, alert.cssClass]" class="w-3.5 h-3.5" aria-hidden="true" />
+      </span>
+    </TooltipApp>
+  </span>
+</template>
diff --git a/app/components/Dependencies/Table.vue b/app/components/Dependencies/Table.vue
new file mode 100644
index 0000000000..e05aa39e56
--- /dev/null
+++ b/app/components/Dependencies/Table.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type {
+  DependencySortOption,
+  PackageDependencyItem,
+} from '#shared/types/package-dependencies'
+import type { ColumnConfig, ColumnId, StructuredFilters } from '#shared/types/preferences'
+import { DEFAULT_COLUMNS } from '#shared/types/preferences'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+
+const props = defineProps<{
+  items: PackageDependencyItem[]
+  sort: DependencySortOption
+  showSkeleton: boolean
+  insights?: PackageDependencyInsights
+  columns?: ColumnConfig[]
+  filters?: StructuredFilters
+}>()
+
+const emit = defineEmits<{
+  'update:sort': [value: DependencySortOption]
+  'clickKeyword': [keyword: string]
+}>()
+
+function toggleNameSort() {
+  emit('update:sort', props.sort === 'name-asc' ? 'name-desc' : 'name-asc')
+}
+
+const nameSortDirection = computed(() =>
+  props.sort.startsWith('name') ? (props.sort === 'name-asc' ? 'asc' : 'desc') : null,
+)
+
+const activeColumns = computed(() => props.columns ?? DEFAULT_COLUMNS)
+
+function isColumnVisible(id: string): boolean {
+  return activeColumns.value.find(c => c.id === id)?.visible ?? false
+}
+
+// Map column IDs to i18n keys
+const columnLabels = computed(() => ({
+  name: $t('filters.columns.name'),
+  version: $t('filters.columns.version'),
+  description: $t('filters.columns.description'),
+  downloads: $t('filters.columns.downloads'),
+  updated: $t('filters.columns.published'),
+  maintainers: $t('filters.columns.maintainers'),
+  keywords: $t('filters.columns.keywords'),
+  security: $t('filters.columns.security'),
+  selection: $t('filters.columns.selection'),
+}))
+
+function getColumnLabel(id: ColumnId): string {
+  return columnLabels.value[id] ?? id
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto">
+    <table class="w-full text-start">
+      <thead class="border-b border-border">
+        <tr>
+          <th
+            scope="col"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none hover:text-fg transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none"
+            :aria-sort="
+              nameSortDirection
+                ? nameSortDirection === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
+            "
+            tabindex="0"
+            @click="toggleNameSort"
+            @keydown.enter="toggleNameSort"
+            @keydown.space.prevent="toggleNameSort"
+          >
+            <span class="inline-flex items-center gap-1">
+              {{ getColumnLabel('name') }}
+              <span
+                v-if="nameSortDirection"
+                class="i-lucide:chevron-down w-3 h-3"
+                :class="nameSortDirection === 'asc' ? 'rotate-180' : ''"
+                aria-hidden="true"
+              />
+              <span
+                v-else
+                class="i-lucide:chevrons-up-down w-3 h-3 opacity-30"
+                aria-hidden="true"
+              />
+            </span>
+          </th>
+
+          <th
+            v-if="isColumnVisible('version')"
+            scope="col"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('version') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('description')"
+            scope="col"
+            class="py-3 px-3 text-xs text-start text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('description') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('downloads')"
+            scope="col"
+            class="py-3 px-3 text-xs text-end text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('downloads') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('updated')"
+            scope="col"
+            class="py-3 px-3 text-xs text-end text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('updated') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('maintainers')"
+            scope="col"
+            class="py-3 px-3 text-xs text-end text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('maintainers') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('keywords')"
+            scope="col"
+            class="py-3 px-3 text-xs text-end text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('keywords') }}
+          </th>
+
+          <th
+            v-if="isColumnVisible('security')"
+            scope="col"
+            class="py-3 px-3 text-xs text-end text-fg-muted font-mono font-medium uppercase tracking-wider whitespace-nowrap select-none"
+          >
+            {{ getColumnLabel('security') }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <DependenciesTableRow
+          v-for="(item, index) in items"
+          :key="item.name"
+          :item="item"
+          :index="index"
+          :show-skeleton="showSkeleton"
+          :insights="insights"
+          :columns="activeColumns"
+          :filters="filters"
+          @click-keyword="emit('clickKeyword', $event)"
+        />
+      </tbody>
+    </table>
+
+    <div v-if="items.length === 0" class="py-12 text-center text-fg-subtle font-mono text-sm">
+      {{ $t('package.dependencies.no_matches') }}
+    </div>
+  </div>
+</template>
diff --git a/app/components/Dependencies/TableRow.vue b/app/components/Dependencies/TableRow.vue
new file mode 100644
index 0000000000..e69c594e9f
--- /dev/null
+++ b/app/components/Dependencies/TableRow.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { PackageDependencyItem } from '#shared/types/package-dependencies'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+import type { ColumnConfig, StructuredFilters } from '#shared/types/preferences'
+import { DEFAULT_COLUMNS, DEFAULT_FILTERS } from '#shared/types/preferences'
+import { getVersionClass, getOutdatedTooltip } from '~/utils/npm/problematic-dependencies'
+
+const props = defineProps<{
+  insights?: PackageDependencyInsights
+  item: PackageDependencyItem
+  showSkeleton: boolean
+  index?: number
+  columns?: ColumnConfig[]
+  filters?: StructuredFilters
+}>()
+
+const { model: globalSearchQuery } = useGlobalSearch()
+
+const activeFilters = computed<StructuredFilters>(() => {
+  if (props.filters) return props.filters
+  const parsed = parseSearchOperators(globalSearchQuery.value)
+  return {
+    ...DEFAULT_FILTERS,
+    keywords: parsed.keywords ?? [],
+    text: parsed.text ?? '',
+  }
+})
+
+const item = computed(() => props.item)
+
+const targetName = computed(() => item.value.packageName || item.value.name)
+
+// Fetch rich package metadata from API (with hydrated useState caching)
+const { data: meta } = usePackageMeta(targetName)
+
+const searchResult = computed(() => {
+  if (!meta.value) return null
+  const result = metaToSearchResult(meta.value)
+  result.package.name = item.value.name
+  result.package.version = item.value.range
+  return result
+})
+
+const minVersion = computed(() => resolveMinVersion(item.value.range))
+
+const packageUrl = computed(() => packageRoute(targetName.value, minVersion.value))
+
+const activeColumns = computed(() => props.columns ?? DEFAULT_COLUMNS)
+
+function isColumnVisible(id: string): boolean {
+  return activeColumns.value.find(c => c.id === id)?.visible ?? false
+}
+
+const outdated = computed(() => props.insights?.outdatedDeps.value?.[item.value.name])
+
+const versionClass = computed(() => getVersionClass(item.value.name, props.insights))
+
+const isLoadingData = computed(() => {
+  if (props.insights) {
+    const vStatus = unref(props.insights.vulnStatus)
+    const rStatus = unref(props.insights.replacementStatus)
+    return (
+      vStatus === 'pending' || vStatus === 'idle' || rStatus === 'pending' || rStatus === 'idle'
+    )
+  }
+  return false
+})
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  clickKeyword: [keyword: string]
+}>()
+</script>
+
+<template>
+  <PackageTableRow
+    v-if="searchResult && !showSkeleton"
+    :result="searchResult"
+    :columns="activeColumns"
+    :index="index"
+    :insights="insights || undefined"
+    :filters="activeFilters"
+    :to="packageUrl"
+    @click-keyword="emit('clickKeyword', $event)"
+  >
+    <template #version="{ version }">
+      <TooltipApp
+        v-if="outdated"
+        class="inline"
+        :text="getOutdatedTooltip(outdated, t)"
+        position="top"
+      >
+        <div
+          :class="versionClass"
+          class="flex items-center gap-1.5 cursor-help relative z-10 py-3 -my-3"
+        >
+          <span class="i-lucide:arrow-up w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+          <span>{{ version }}</span>
+        </div>
+      </TooltipApp>
+      <div v-else class="flex items-center gap-1.5">
+        <span>{{ version }}</span>
+      </div>
+    </template>
+    <template #status-indicators="{ insights }">
+      <DependenciesStatusIndicators
+        :name="item.name"
+        :package-name="targetName"
+        :flags="item.flags"
+        :deprecated="searchResult?.package.deprecated"
+        v-bind="{ insights }"
+        :is-loading="isLoadingData"
+        class="z-10"
+      />
+    </template>
+  </PackageTableRow>
+
+  <!-- Skeleton row -->
+  <tr v-else class="border-b border-border relative">
+    <!-- Name (always visible) -->
+    <td class="py-2 px-3">
+      <div class="flex items-center gap-2">
+        <NuxtLink
+          :to="packageUrl"
+          class="row-link font-mono text-sm transition-colors duration-200 inline-flex items-center gap-2 min-w-0 after:content-[''] after:absolute after:inset-0"
+          :data-result-index="index"
+        >
+          <span class="i-simple-icons:npm w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+          <span class="truncate" dir="ltr">{{ item.name }}</span>
+        </NuxtLink>
+        <DependenciesStatusIndicators
+          :name="item.name"
+          :package-name="targetName"
+          :flags="item.flags"
+          :deprecated="searchResult?.package.deprecated"
+          v-bind="{ insights }"
+          :is-loading="isLoadingData"
+          class="z-10"
+        />
+      </div>
+    </td>
+
+    <!-- Version -->
+    <td v-if="isColumnVisible('version')" class="py-2 px-3 font-mono text-xs text-fg-subtle">
+      <span dir="ltr">{{ item.range }}</span>
+    </td>
+
+    <!-- Description -->
+    <td
+      v-if="isColumnVisible('description')"
+      class="py-2 px-3 text-sm text-fg-muted max-w-xs truncate"
+    >
+      <SkeletonBlock class="h-4 w-48" />
+    </td>
+
+    <!-- Downloads -->
+    <td
+      v-if="isColumnVisible('downloads')"
+      class="py-2 px-3 font-mono text-xs text-fg-muted text-end tabular-nums"
+    >
+      <SkeletonBlock class="h-4 w-16 ms-auto" />
+    </td>
+
+    <!-- Updated -->
+    <td
+      v-if="isColumnVisible('updated')"
+      class="py-2 px-3 font-mono text-end text-xs text-fg-muted"
+    >
+      <SkeletonBlock class="h-4 w-20 ms-auto" />
+    </td>
+
+    <!-- Maintainers -->
+    <td v-if="isColumnVisible('maintainers')" class="py-2 px-3 text-sm text-fg-muted text-end">
+      <SkeletonBlock class="h-4 w-24 ms-auto" />
+    </td>
+
+    <!-- Keywords -->
+    <td v-if="isColumnVisible('keywords')" class="py-2 px-3 text-end">
+      <SkeletonBlock class="h-4 w-32 ms-auto" />
+    </td>
+
+    <!-- Security -->
+    <td v-if="isColumnVisible('security')" class="py-2 px-3">
+      <span class="text-fg-subtle"> - </span>
+    </td>
+  </tr>
+</template>
+
+<style scoped>
+.row-link {
+  &:focus-visible {
+    outline: 2px solid var(--color-fg);
+    outline-offset: -2px;
+  }
+}
+</style>
diff --git a/app/components/Dependencies/Toolbar.vue b/app/components/Dependencies/Toolbar.vue
new file mode 100644
index 0000000000..89a83995c3
--- /dev/null
+++ b/app/components/Dependencies/Toolbar.vue
@@ -0,0 +1,341 @@
+<script setup lang="ts">
+import type {
+  DependencySortOption,
+  PackageDependencySection,
+} from '#shared/types/package-dependencies'
+import type { ColumnConfig, ColumnId, ViewMode } from '#shared/types/preferences'
+
+const props = defineProps<{
+  filter: string
+  sort: DependencySortOption
+  viewMode: ViewMode
+  columns?: ColumnConfig[]
+  filteredCount: number
+  totalCount: number
+  sections?: PackageDependencySection[]
+  activeSection?: string
+  activeSections?: string[]
+}>()
+
+const emit = defineEmits<{
+  'update:filter': [value: string]
+  'update:sort': [value: DependencySortOption]
+  'update:viewMode': [value: ViewMode]
+  'update:activeSection': [value: string]
+  'update:activeSections': [value: string[]]
+  'toggleColumn': [columnId: ColumnId]
+  'resetColumns': []
+}>()
+
+const { t } = useI18n()
+
+const filterValue = computed({
+  get: () => props.filter,
+  set: value => emit('update:filter', value),
+})
+
+const viewModeValue = computed({
+  get: () => props.viewMode,
+  set: value => emit('update:viewMode', value),
+})
+
+const isSectionsOpen = shallowRef(false)
+const sectionsButtonRef = useTemplateRef('sectionsButtonRef')
+const sectionsMenuRef = useTemplateRef('sectionsMenuRef')
+const sectionsMenuId = useId()
+
+onClickOutside(
+  sectionsMenuRef,
+  () => {
+    isSectionsOpen.value = false
+  },
+  { ignore: [sectionsButtonRef] },
+)
+
+onKeyDown(
+  'Escape',
+  () => {
+    if (!isSectionsOpen.value) return
+    isSectionsOpen.value = false
+    sectionsButtonRef.value?.focus()
+  },
+  { dedupe: true },
+)
+
+const activeSectionsValue = computed({
+  get: () =>
+    props.activeSections ??
+    (props.activeSection ? [props.activeSection] : (props.sections?.map(s => s.id) ?? [])),
+  set: val => {
+    emit('update:activeSections', val)
+    if (val.length > 0) {
+      emit('update:activeSection', val[0]!)
+    }
+  },
+})
+
+function getSectionLabel(id: string) {
+  const labels: Record<string, string> = {
+    dependencies: t('compare.dependencies'),
+    devDependencies: t('compare.dev_dependencies'),
+    peerDependencies: t('compare.peer_dependencies'),
+    optionalDependencies: t('compare.optional_dependencies'),
+    bundledDependencies: t('compare.bundled_dependencies'),
+  }
+  return labels[id] || id
+}
+
+function toggleSection(id: string) {
+  const current = activeSectionsValue.value
+  if (current.includes(id)) {
+    activeSectionsValue.value = current.filter(s => s !== id)
+  } else {
+    activeSectionsValue.value = [...current, id]
+  }
+}
+
+const sectionTriggerText = computed(() => {
+  const total = props.sections?.length ?? 0
+  const active = activeSectionsValue.value
+  if (total === 1) {
+    return getSectionLabel(props.sections![0]!.id)
+  }
+  if (total > 0 && active.length === total) {
+    return t('package.dependencies.all')
+  }
+  if (active.length === 1) {
+    return getSectionLabel(active[0]!)
+  }
+  return t('action_bar.selection', { count: active.length }, active.length)
+})
+
+const { selectedPackages, clearSelectedPackages, openSelectionView } = usePackageSelection()
+
+// Parse current sort option into key and direction
+const currentSortKey = computed(() => {
+  if (props.sort.startsWith('name')) return 'name'
+  if (props.sort.startsWith('updated')) return 'updated'
+  return 'downloads-week'
+})
+
+const currentSortDirection = computed(() => (props.sort.endsWith('asc') ? 'asc' : 'desc'))
+
+const sortKeyModel = computed({
+  get: () => currentSortKey.value,
+  set: (newKey: string) => {
+    if (newKey === 'name') {
+      emit('update:sort', 'name-asc')
+    } else if (newKey === 'updated') {
+      emit('update:sort', 'updated-desc')
+    } else {
+      emit('update:sort', 'downloads-week-desc')
+    }
+  },
+})
+
+function handleToggleDirection() {
+  const key = currentSortKey.value
+  const newDir = currentSortDirection.value === 'asc' ? 'desc' : 'asc'
+  if (key === 'name') {
+    emit('update:sort', newDir === 'asc' ? 'name-asc' : 'name-desc')
+  } else if (key === 'updated') {
+    emit('update:sort', newDir === 'asc' ? 'updated-asc' : 'updated-desc')
+  } else {
+    emit('update:sort', newDir === 'asc' ? 'downloads-week-asc' : 'downloads-week-desc')
+  }
+}
+
+const sortOptions = computed(() => [
+  { value: 'downloads-week' as const, label: t('filters.sort.downloads_week') },
+  { value: 'updated' as const, label: t('filters.sort.published') },
+  { value: 'name' as const, label: t('filters.sort.name') },
+])
+
+const showFilteredCount = computed(() => props.filter && props.filteredCount !== props.totalCount)
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 mb-4 border-b border-border pb-4">
+    <div class="flex flex-col sm:flex-row sm:items-center gap-3">
+      <div v-if="sections && sections.length > 0" class="flex items-center gap-2">
+        <div class="relative">
+          <ButtonBase
+            ref="sectionsButtonRef"
+            :aria-expanded="isSectionsOpen"
+            aria-haspopup="true"
+            :aria-controls="isSectionsOpen ? sectionsMenuId : undefined"
+            @click.stop="isSectionsOpen = !isSectionsOpen"
+            classicon="i-lucide:layers"
+          >
+            {{ sectionTriggerText }}
+          </ButtonBase>
+
+          <Transition name="dropdown">
+            <div
+              v-if="isSectionsOpen"
+              ref="sectionsMenuRef"
+              :id="sectionsMenuId"
+              class="absolute top-full inset-is-0 mt-2 w-64 bg-bg-subtle border border-border rounded-lg shadow-lg z-20"
+              role="group"
+              :aria-label="t('filters.title')"
+            >
+              <div class="py-1">
+                <div
+                  class="px-3 py-2 text-xs font-mono text-fg-subtle uppercase tracking-wider border-b border-border flex items-center justify-between"
+                >
+                  <span>{{ t('filters.title') }}</span>
+                  <button
+                    type="button"
+                    class="text-xs text-fg-subtle hover:text-fg font-mono transition-colors cursor-pointer"
+                    @click="
+                      activeSectionsValue.length === sections.length
+                        ? (activeSectionsValue = [])
+                        : (activeSectionsValue = sections.map(s => s.id))
+                    "
+                  >
+                    {{
+                      activeSectionsValue.length === sections.length
+                        ? t('filters.clear_all')
+                        : t('filters.select_all')
+                    }}
+                  </button>
+                </div>
+
+                <div class="py-1 max-h-64 overflow-y-auto">
+                  <label
+                    v-for="section in sections"
+                    :key="section.id"
+                    class="flex gap-2 items-center px-3 py-2 transition-colors duration-200 hover:bg-bg-muted cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      :checked="activeSectionsValue.includes(section.id)"
+                      class="w-4 h-4 accent-fg bg-bg-muted border-border rounded"
+                      @change="toggleSection(section.id)"
+                    />
+                    <span class="text-sm text-fg-muted font-mono flex-1 truncate">
+                      {{ getSectionLabel(section.id) }}
+                    </span>
+                    <span class="text-xs text-fg-subtle font-mono">
+                      ({{ section.items.length }})
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+
+        <span v-if="showFilteredCount" class="text-xs font-mono text-fg-muted">
+          {{
+            $t('package.list.showing_count', {
+              filtered: filteredCount,
+              total: totalCount,
+            })
+          }}
+        </span>
+      </div>
+      <p v-else class="text-sm font-mono text-fg-muted shrink-0">
+        <template v-if="showFilteredCount">
+          {{
+            $t('package.list.showing_count', {
+              filtered: filteredCount,
+              total: totalCount,
+            })
+          }}
+        </template>
+        <template v-else>
+          {{ $t('package.dependencies.title', { count: $n(totalCount) }, totalCount) }}
+        </template>
+      </p>
+
+      <div class="flex-1" />
+
+      <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        <div class="flex-1 relative min-w-0">
+          <label for="deps-filter" class="sr-only">{{ $t('package.list.filter_label') }}</label>
+          <div
+            class="absolute inset-is-0 h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
+            aria-hidden="true"
+          >
+            <span class="i-lucide:search w-4 h-4" />
+          </div>
+          <InputBase
+            id="deps-filter"
+            v-model="filterValue"
+            type="search"
+            :placeholder="$t('package.dependencies.filter_placeholder')"
+            no-correct
+            class="w-full min-w-25 ps-10"
+          />
+        </div>
+
+        <div class="flex items-center gap-3">
+          <!-- Sort controls -->
+          <div class="flex items-center gap-1 shrink-0">
+            <SelectField
+              :label="$t('package.list.sort_label')"
+              hidden-label
+              id="deps-sort"
+              class="relative flex-1 sm:flex-initial sm:shrink-0 min-w-0"
+              v-model="sortKeyModel"
+              :items="sortOptions.map(o => ({ label: o.label, value: o.value }))"
+            />
+
+            <!-- Sort direction toggle -->
+            <button
+              type="button"
+              class="p-2.5 rounded-md border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+              :aria-label="$t('filters.sort.toggle_direction')"
+              :title="
+                currentSortDirection === 'asc'
+                  ? $t('filters.sort.ascending')
+                  : $t('filters.sort.descending')
+              "
+              @click="handleToggleDirection"
+            >
+              <span
+                class="w-4 h-4 block transition-transform duration-200"
+                :class="
+                  currentSortDirection === 'asc'
+                    ? 'i-lucide:arrow-down-narrow-wide'
+                    : 'i-lucide:arrow-down-wide-narrow'
+                "
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+
+          <ColumnPicker
+            v-if="viewModeValue === 'table' && columns"
+            :columns="columns"
+            @toggle="emit('toggleColumn', $event)"
+            @reset="emit('resetColumns')"
+          />
+
+          <ViewModeToggle v-model="viewModeValue" class="shrink-0" />
+
+          <div
+            class="flex items-center order-3 sm:border-is sm:border-fg-subtle/20 sm:ps-3"
+            v-if="selectedPackages.length"
+          >
+            <ButtonBase
+              variant="secondary"
+              @click="openSelectionView"
+              classicon="i-lucide:package-check"
+            >
+              {{ t('filters.view_selected') }} ({{ selectedPackages.length }})
+            </ButtonBase>
+            <button
+              @click="clearSelectedPackages"
+              :aria-label="$t('filters.clear_selected_label')"
+              class="flex items-center ms-2"
+            >
+              <span class="i-lucide:x text-sm" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
index 6550a4ceef..ef54817f5b 100644
--- a/app/components/Package/Card.vue
+++ b/app/components/Package/Card.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
 import type { StructuredFilters } from '#shared/types/preferences'
+import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/problematic-dependencies'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
 
 const props = defineProps<{
   /** The search result object containing package data */
@@ -14,6 +17,11 @@ const props = defineProps<{
   filters?: StructuredFilters
   /** Search query for highlighting exact matches */
   searchQuery?: string
+  /** Optional pre-computed insights to avoid duplicate fetching/processing */
+  insights?: PackageDependencyInsights
+  /** Version by default, adds "v" prefix. */
+  versionIsRange?: boolean
+  to?: RouteLocationRaw | string
 }>()
 
 const { selectable } = usePackageSelectionContext()
@@ -27,6 +35,8 @@ const emit = defineEmits<{
 }>()
 
 /** Check if this package is an exact match for the search query */
+const packageUrl = computed(() => props.to ?? packageRoute(props.result.package.name))
+
 const isExactMatch = computed(() => {
   if (!props.searchQuery) return false
   const query = props.searchQuery.trim().toLowerCase()
@@ -40,30 +50,85 @@ const pkgDescription = useMarkdown(() => ({
   plain: true,
 }))
 
+const insights = computed(() => props.insights)
+
+const standaloneReplacementRes = useModuleReplacement(() => props.result.package.name)
+const standaloneDepAnalysisRes = useDependencyAnalysis(
+  () => props.result.package.name,
+  () => props.result.package.version,
+)
+
+const hasReplacement = computed(() => {
+  if (insights.value) {
+    return !!unref(insights.value.replacementDeps)?.[props.result.package.name]
+  }
+  return !!standaloneReplacementRes.data.value?.replacement
+})
+
+const effectiveVulnTree = computed(() => {
+  if (insights.value) {
+    return unref(insights.value.vulnTree)
+  }
+  return standaloneDepAnalysisRes.data.value ?? undefined
+})
+
+const isLoadingData = computed(() => {
+  if (insights.value) {
+    const vStatus = unref(insights.value.vulnStatus)
+    const rStatus = unref(insights.value.replacementStatus)
+    return (
+      vStatus === 'pending' || vStatus === 'idle' || rStatus === 'pending' || rStatus === 'idle'
+    )
+  }
+  const vulnPending =
+    standaloneDepAnalysisRes.status.value === 'pending' ||
+    (standaloneDepAnalysisRes.status.value === 'idle' &&
+      standaloneDepAnalysisRes.data.value === undefined)
+  const replacementPending =
+    standaloneReplacementRes.status.value === 'pending' ||
+    (standaloneReplacementRes.status.value === 'idle' &&
+      standaloneReplacementRes.data.value === undefined)
+  return vulnPending || replacementPending
+})
+
 const numberFormatter = useNumberFormatter()
 </script>
 
 <template>
   <BaseCard :selected="isSelected" :isExactMatch="isExactMatch">
     <header class="mb-4 flex items-baseline justify-between gap-2">
-      <component
-        :is="headingLevel ?? 'h3'"
-        class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
-      >
-        <NuxtLink
-          :to="packageRoute(result.package.name)"
-          :prefetch-on="prefetch ? 'visibility' : 'interaction'"
-          class="decoration-none after:content-[''] after:absolute after:inset-0"
-          :data-result-index="index"
-          dir="ltr"
-          >{{ result.package.name }}</NuxtLink
+      <div class="flex items-baseline justify-start gap-2">
+        <component
+          :is="headingLevel ?? 'h3'"
+          class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all inline-flex items-center gap-2"
         >
-        <span
-          v-if="isExactMatch"
-          class="text-xs px-1.5 py-0.5 ms-2 rounded bg-bg-elevated border border-border-hover text-fg"
-          >{{ $t('search.exact_match') }}</span
-        >
-      </component>
+          <NuxtLink
+            :to="packageUrl"
+            :prefetch-on="prefetch ? 'visibility' : 'interaction'"
+            class="decoration-none hover:text-accent-fallback after:content-[''] after:absolute after:inset-0 inline-flex items-center gap-2 min-w-0"
+            :data-result-index="index"
+          >
+            <span class="i-simple-icons:npm w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+            <span class="truncate" dir="ltr">{{ result.package.name }}</span>
+          </NuxtLink>
+          <span
+            v-if="isExactMatch"
+            class="text-xs px-1.5 py-0.5 ms-2 rounded bg-bg-elevated border border-border-hover text-fg z-10"
+            >{{ $t('search.exact_match') }}</span
+          >
+        </component>
+        <slot name="status-indicators" :insights="insights">
+          <DependenciesStatusIndicators
+            :name="result.package.name"
+            :deprecated="result.package.deprecated"
+            :has-replacement="hasReplacement"
+            :vuln-tree="effectiveVulnTree"
+            :insights="insights"
+            :is-loading="isLoadingData"
+            class="z-10"
+          />
+        </slot>
+      </div>
 
       <PackageSelectionCheckbox
         v-if="selectable"
@@ -71,6 +136,7 @@ const numberFormatter = useNumberFormatter()
         :disabled="!canSelectMore && !isSelected"
         :checked="isSelected"
         @change="togglePackageSelection"
+        class="z-10"
       />
     </header>
 
@@ -87,10 +153,27 @@ const numberFormatter = useNumberFormatter()
         compact
       />
       <dl class="contents m-0">
-        <div v-if="result.package.version" class="flex items-center gap-1.5 min-w-0">
+        <div v-if="result.package.version" class="contents">
           <dt class="sr-only">{{ $t('package.card.version') }}</dt>
-          <dd class="font-mono truncate max-w-32" :title="result.package.version">
-            v{{ result.package.version }}
+          <dd class="flex items-center gap-1.5 font-mono max-w-32">
+            <TooltipApp
+              v-if="insights?.outdatedDeps.value?.[result.package.name]"
+              :text="getOutdatedTooltip(insights.outdatedDeps.value[result.package.name]!, $t)"
+              position="top"
+            >
+              <div
+                :class="getVersionClass(result.package.name, insights)"
+                class="inline-flex items-center gap-1 cursor-help py-3 -my-3 z-10 max-w-32"
+              >
+                <span class="i-lucide:arrow-up w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+                <span class="truncate"
+                  >{{ versionIsRange ? '' : 'v' }}{{ result.package.version }}</span
+                >
+              </div>
+            </TooltipApp>
+            <div v-else class="inline-flex items-center gap-1 py-3 -my-3 z-10">
+              <span> {{ versionIsRange ? '' : 'v' }}{{ result.package.version }} </span>
+            </div>
           </dd>
         </div>
         <div v-if="result.package.date" class="flex items-center gap-1.5">
@@ -123,7 +206,6 @@ const numberFormatter = useNumberFormatter()
     </div>
 
     <ul
-      role="list"
       v-if="result.package.keywords?.length"
       :aria-label="$t('package.card.keywords')"
       class="relative z-10 flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-border list-none m-0 p-0 pointer-events-none items-center"
@@ -132,7 +214,7 @@ const numberFormatter = useNumberFormatter()
         <ButtonBase
           class="pointer-events-auto"
           size="sm"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :aria-pressed="props.filters?.keywords?.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
         >
@@ -149,5 +231,7 @@ const numberFormatter = useNumberFormatter()
         </span>
       </li>
     </ul>
+
+    <slot name="extra" />
   </BaseCard>
 </template>
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
deleted file mode 100644
index 35657daadb..0000000000
--- a/app/components/Package/Dependencies.vue
+++ /dev/null
@@ -1,410 +0,0 @@
-<script setup lang="ts">
-import { parseDependencyVersion } from '#shared/utils/npm'
-import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
-import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
-
-const { t } = useI18n()
-
-const props = defineProps<{
-  packageName: string
-  version: string
-  dependencies?: Record<string, string>
-  peerDependencies?: Record<string, string>
-  peerDependenciesMeta?: Record<string, { optional?: boolean }>
-  optionalDependencies?: Record<string, string>
-}>()
-
-// Fetch outdated info for dependencies
-const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
-
-// Fetch replacement suggestions for dependencies
-const replacementDeps = useReplacementDependencies(() => props.dependencies)
-
-// Get vulnerability info from shared cache (already fetched by PackageVulnerabilityTree)
-const { data: vulnTree } = useDependencyAnalysis(
-  () => props.packageName,
-  () => props.version,
-)
-
-// Check if a dependency has vulnerabilities (only direct deps)
-function getVulnerableDepInfo(depName: string) {
-  if (!vulnTree.value) return null
-  return vulnTree.value.vulnerablePackages.find(p => p.name === depName && p.depth === 'direct')
-}
-
-// Check if a dependency is deprecated (only direct deps)
-function getDeprecatedDepInfo(depName: string) {
-  if (!vulnTree.value) return null
-  return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
-}
-
-// Sort dependencies alphabetically
-const sortedDependencies = computed(() => {
-  if (!props.dependencies) return []
-  return Object.entries(props.dependencies).sort(([a], [b]) => a.localeCompare(b))
-})
-
-// Sort peer dependencies alphabetically, with required first then optional
-const sortedPeerDependencies = computed(() => {
-  if (!props.peerDependencies) return []
-
-  return Object.entries(props.peerDependencies)
-    .map(([name, version]) => ({
-      name,
-      version,
-      optional: props.peerDependenciesMeta?.[name]?.optional ?? false,
-    }))
-    .sort((a, b) => {
-      // Required first, then optional
-      if (a.optional !== b.optional) return a.optional ? 1 : -1
-      return a.name.localeCompare(b.name)
-    })
-})
-
-// Sort optional dependencies alphabetically
-const sortedOptionalDependencies = computed(() => {
-  if (!props.optionalDependencies) return []
-  return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
-})
-
-// Get version tooltip (key for outdated lookup, realName for vuln/replacement lookup)
-function getDepVersionTooltip(key: string, realName: string, version: string) {
-  const outdated = outdatedDeps.value[key]
-  if (outdated) return getOutdatedTooltip(outdated, t)
-  if (getVulnerableDepInfo(realName) || getDeprecatedDepInfo(realName)) return version
-  if (replacementDeps.value[realName]) return t('package.dependencies.has_replacement')
-  return version
-}
-
-// Get version class (key for outdated lookup, realName for vuln/replacement lookup)
-function getDepVersionClass(key: string, realName: string) {
-  const outdated = outdatedDeps.value[key]
-  if (outdated) return getVersionClass(outdated)
-  if (getVulnerableDepInfo(realName) || getDeprecatedDepInfo(realName))
-    return getVersionClass(undefined)
-  if (replacementDeps.value[realName]) return 'text-amber-700 dark:text-amber-500'
-  return getVersionClass(undefined)
-}
-
-// Resolve npm: aliases — returns the real package name for links
-function resolveDepName(key: string, value: string): string {
-  return parseDependencyVersion(value).name ?? key
-}
-
-// Resolve npm: aliases — returns the version range for display
-function depRange(value: string): string {
-  return parseDependencyVersion(value).range ?? value
-}
-
-// Whether a dependency uses an npm: alias (listed name differs from the real package)
-function isAliased(key: string, value: string): boolean {
-  const realName = parseDependencyVersion(value).name
-  return realName != null && realName !== key
-}
-
-const {
-  visibleItems: visibleDeps,
-  hasMore: hasMoreDeps,
-  expand: expandDeps,
-} = useVisibleItems(sortedDependencies, 10)
-
-const {
-  visibleItems: visiblePeerDeps,
-  hasMore: hasMorePeerDeps,
-  expand: expandPeerDeps,
-} = useVisibleItems(sortedPeerDependencies, 10)
-
-const {
-  visibleItems: visibleOptionalDeps,
-  hasMore: hasMoreOptionalDeps,
-  expand: expandOptionalDeps,
-} = useVisibleItems(sortedOptionalDependencies, 10)
-
-const numberFormatter = useNumberFormatter()
-</script>
-
-<template>
-  <div class="space-y-8">
-    <!-- Dependencies -->
-    <CollapsibleSection
-      v-if="sortedDependencies.length > 0"
-      id="dependencies"
-      :title="
-        $t(
-          'package.dependencies.title',
-          {
-            count: numberFormatter.format(sortedDependencies.length),
-          },
-          sortedDependencies.length,
-        )
-      "
-    >
-      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
-        <li
-          v-for="[dep, version] in visibleDeps"
-          :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
-        >
-          <LinkBase
-            :to="packageRoute(resolveDepName(dep, version))"
-            class="block truncate"
-            dir="ltr"
-          >
-            {{ dep }}
-          </LinkBase>
-          <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
-            <TooltipApp
-              v-if="isAliased(dep, version)"
-              class="shrink-0 text-fg-muted"
-              :text="$t('package.dependencies.aliased_to', { name: resolveDepName(dep, version) })"
-            >
-              <button
-                type="button"
-                class="inline-flex items-center justify-center p-2 -m-2"
-                :aria-label="
-                  $t('package.dependencies.aliased_to', { name: resolveDepName(dep, version) })
-                "
-              >
-                <span class="i-lucide:arrow-right-left w-3 h-3" aria-hidden="true" />
-              </button>
-            </TooltipApp>
-            <TooltipApp
-              v-if="outdatedDeps[dep]"
-              class="shrink-0"
-              :class="getVersionClass(outdatedDeps[dep])"
-              :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
-            >
-              <button
-                type="button"
-                class="inline-flex items-center justify-center p-2 -m-2"
-                :aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
-              >
-                <span class="i-lucide:arrow-up w-3 h-3" aria-hidden="true" />
-              </button>
-            </TooltipApp>
-            <TooltipApp
-              v-if="replacementDeps[resolveDepName(dep, version)]"
-              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-2 -m-2"
-                :aria-label="$t('package.dependencies.has_replacement')"
-              >
-                <span class="i-lucide:lightbulb w-3 h-3" aria-hidden="true" />
-              </button>
-            </TooltipApp>
-            <LinkBase
-              v-if="getVulnerableDepInfo(resolveDepName(dep, version))"
-              :to="
-                packageRoute(
-                  resolveDepName(dep, version),
-                  getVulnerableDepInfo(resolveDepName(dep, version))!.version,
-                )
-              "
-              class="shrink-0"
-              :class="
-                SEVERITY_TEXT_COLORS[
-                  getHighestSeverity(getVulnerableDepInfo(resolveDepName(dep, version))!.counts)
-                ]
-              "
-              :aria-label="$t('package.dependencies.view_vulnerabilities')"
-              :title="
-                $t('package.dependencies.vulnerabilities_count', {
-                  count: getVulnerableDepInfo(resolveDepName(dep, version))!.counts.total,
-                })
-              "
-              classicon="i-lucide:shield-check"
-            />
-            <LinkBase
-              v-if="getDeprecatedDepInfo(resolveDepName(dep, version))"
-              :to="
-                packageRoute(
-                  resolveDepName(dep, version),
-                  getDeprecatedDepInfo(resolveDepName(dep, version))!.version,
-                )
-              "
-              class="shrink-0 text-purple-700 dark:text-purple-500"
-              :aria-label="$t('package.deprecated.label')"
-              :title="getDeprecatedDepInfo(resolveDepName(dep, version))!.message"
-              classicon="i-lucide:octagon-alert"
-            />
-            <LinkBase
-              :to="packageRoute(resolveDepName(dep, version), depRange(version))"
-              class="block truncate"
-              :class="getDepVersionClass(dep, resolveDepName(dep, version))"
-              :title="getDepVersionTooltip(dep, resolveDepName(dep, version), depRange(version))"
-            >
-              {{ depRange(version) }}
-            </LinkBase>
-            <span v-if="outdatedDeps[dep]" class="sr-only">
-              ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
-            </span>
-            <span v-if="getVulnerableDepInfo(resolveDepName(dep, version))" class="sr-only">
-              ({{
-                $t('package.dependencies.vulnerabilities_count', {
-                  count: getVulnerableDepInfo(resolveDepName(dep, version))!.counts.total,
-                })
-              }})
-            </span>
-          </span>
-        </li>
-      </ul>
-      <button
-        v-if="hasMoreDeps"
-        type="button"
-        class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="expandDeps"
-      >
-        {{
-          $t(
-            'package.dependencies.show_all',
-            {
-              count: numberFormatter.format(sortedDependencies.length),
-            },
-            sortedDependencies.length,
-          )
-        }}
-      </button>
-    </CollapsibleSection>
-
-    <!-- Peer Dependencies -->
-    <CollapsibleSection
-      v-if="sortedPeerDependencies.length > 0"
-      id="peer-dependencies"
-      :title="
-        $t('package.peer_dependencies.title', {
-          count: numberFormatter.format(sortedPeerDependencies.length),
-        })
-      "
-    >
-      <ul
-        class="px-1 space-y-1 list-none m-0"
-        :aria-label="$t('package.peer_dependencies.list_label')"
-      >
-        <li
-          v-for="peer in visiblePeerDeps"
-          :key="peer.name"
-          class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
-        >
-          <div class="flex items-center gap-2 min-w-0 flex-1">
-            <LinkBase
-              :to="packageRoute(resolveDepName(peer.name, peer.version))"
-              class="block min-w-0 break-all"
-              dir="ltr"
-            >
-              {{ peer.name }}
-            </LinkBase>
-            <TagStatic
-              v-if="peer.optional"
-              :title="$t('package.dependencies.optional')"
-              class="shrink-0"
-            >
-              {{ $t('package.dependencies.optional') }}
-            </TagStatic>
-          </div>
-          <LinkBase
-            :to="packageRoute(resolveDepName(peer.name, peer.version), depRange(peer.version))"
-            class="block truncate shrink-0 max-w-20"
-            :title="depRange(peer.version)"
-            dir="ltr"
-          >
-            {{ depRange(peer.version) }}
-          </LinkBase>
-        </li>
-      </ul>
-      <button
-        v-if="hasMorePeerDeps"
-        type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
-        @click="expandPeerDeps"
-      >
-        {{
-          $t(
-            'package.peer_dependencies.show_all',
-            {
-              count: numberFormatter.format(sortedPeerDependencies.length),
-            },
-            sortedPeerDependencies.length,
-          )
-        }}
-      </button>
-    </CollapsibleSection>
-
-    <!-- Optional Dependencies -->
-    <CollapsibleSection
-      v-if="sortedOptionalDependencies.length > 0"
-      id="optional-dependencies"
-      :title="
-        $t(
-          'package.optional_dependencies.title',
-          {
-            count: numberFormatter.format(sortedOptionalDependencies.length),
-          },
-          sortedOptionalDependencies.length,
-        )
-      "
-    >
-      <ul
-        class="px-1 space-y-1 list-none m-0"
-        :aria-label="$t('package.optional_dependencies.list_label')"
-      >
-        <li
-          v-for="[dep, version] in visibleOptionalDeps"
-          :key="dep"
-          class="flex items-baseline justify-between py-1 text-sm gap-2"
-        >
-          <LinkBase
-            :to="packageRoute(resolveDepName(dep, version))"
-            class="block max-w-[80%] break-words"
-            dir="ltr"
-          >
-            {{ dep }}
-          </LinkBase>
-          <span class="flex items-center gap-1 min-w-0" dir="ltr">
-            <TooltipApp
-              v-if="isAliased(dep, version)"
-              class="shrink-0 text-fg-muted"
-              :text="$t('package.dependencies.aliased_to', { name: resolveDepName(dep, version) })"
-            >
-              <button
-                type="button"
-                class="inline-flex items-center justify-center p-2 -m-2"
-                :aria-label="
-                  $t('package.dependencies.aliased_to', { name: resolveDepName(dep, version) })
-                "
-              >
-                <span class="i-lucide:arrow-right-left w-3 h-3" aria-hidden="true" />
-              </button>
-            </TooltipApp>
-            <LinkBase
-              :to="packageRoute(resolveDepName(dep, version), depRange(version))"
-              class="block truncate"
-              :title="depRange(version)"
-              dir="ltr"
-            >
-              {{ depRange(version) }}
-            </LinkBase>
-          </span>
-        </li>
-      </ul>
-      <button
-        v-if="hasMoreOptionalDeps"
-        type="button"
-        class="mt-2 truncate"
-        @click="expandOptionalDeps"
-      >
-        {{
-          $t(
-            'package.optional_dependencies.show_all',
-            {
-              count: numberFormatter.format(sortedOptionalDependencies.length),
-            },
-            sortedOptionalDependencies.length,
-          )
-        }}
-      </button>
-    </CollapsibleSection>
-  </div>
-</template>
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 1e0a0e813f..f48b9d8f39 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff' | 'changelog' | 'timeline' | 'stats'
+  page: 'main' | 'docs' | 'code' | 'dependencies' | 'diff' | 'changelog' | 'timeline' | 'stats'
   versionUrlPattern: string
 }>()
 
@@ -154,6 +154,13 @@ const codeLink = computed((): RouteLocationRaw | null => {
   }
 })
 
+const dependenciesLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  return dependenciesRoute(props.pkg.name, props.resolvedVersion)
+})
+
 const mainLink = computed((): RouteLocationRaw | null => {
   if (props.pkg == null || props.resolvedVersion == null) {
     return null
@@ -208,6 +215,7 @@ useShortcuts({
   '-': () => changelogLink.value,
   't': () => timelineLink.value,
   's': () => statsLink.value,
+  'y': () => dependenciesLink.value,
 })
 </script>
 
@@ -363,6 +371,15 @@ useShortcuts({
         >
           {{ $t('package.links.code') }}
         </LinkBase>
+        <LinkBase
+          v-if="dependenciesLink"
+          :to="dependenciesLink"
+          aria-keyshortcuts="y"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+          :class="page === 'dependencies' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.dependencies') }}
+        </LinkBase>
         <LinkBase
           v-if="diffLink"
           :to="diffLink"
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
index 9b9d591222..3c977cd9d3 100644
--- a/app/components/Package/InstallScripts.vue
+++ b/app/components/Package/InstallScripts.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/problematic-dependencies'
+import { normalizeDependencies } from '~/utils/npm/package-dependency-sections'
 import type { RouteLocationRaw } from 'vue-router'
 
 const props = defineProps<{
@@ -48,12 +49,25 @@ const scriptParts = computed(() => {
   return parts
 })
 
-const outdatedNpxDeps = useOutdatedDependencies(() => props.installScripts.npxDependencies)
+const { data: outdatedNpxDeps } = useOutdatedDependencies(() =>
+  normalizeDependencies(props.installScripts.npxDependencies),
+)
+// const { data: replacementNpxDeps } = useReplacementDependencies(
+//   () => props.installScripts.npxDependencies,
+// )
+const replacementNpxDeps = Object.create(null)
+
 const hasNpxDeps = computed(() => Object.keys(props.installScripts.npxDependencies).length > 0)
 const sortedNpxDeps = computed(() => {
   return Object.entries(props.installScripts.npxDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
 
+const versionClass = (dep: string) =>
+  getVersionClass(dep, {
+    outdatedDeps: ref(outdatedNpxDeps),
+    replacementDeps: ref(replacementNpxDeps),
+  })
+
 const isExpanded = shallowRef(false)
 </script>
 
@@ -135,7 +149,7 @@ const isExpanded = shallowRef(false)
                 outdatedNpxDeps[dep].resolved !== outdatedNpxDeps[dep].latest
               "
               class="shrink-0 p-2 -m-2"
-              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :class="versionClass(dep)"
               aria-hidden="true"
               :text="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
             >
@@ -143,7 +157,7 @@ const isExpanded = shallowRef(false)
             </TooltipApp>
             <span
               class="font-mono text-xs text-end truncate"
-              :class="getVersionClass(outdatedNpxDeps[dep])"
+              :class="versionClass(dep)"
               :title="
                 outdatedNpxDeps[dep]
                   ? outdatedNpxDeps[dep].resolved === outdatedNpxDeps[dep].latest
diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 0ba9b6331a..9689a74188 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
 import { WindowVirtualizer } from 'virtua/vue'
 
 /** Number of items to render statically during SSR */
@@ -7,6 +8,8 @@ const SSR_COUNT = 20
 const props = defineProps<{
   /** List of search results to display */
   results: NpmSearchResult[]
+  /** Optional pre-computed insights to avoid duplicate fetching/processing */
+  insights?: PackageDependencyInsights
   /** Filters to apply to the results */
   filters?: StructuredFilters
   /** Heading level for package names */
@@ -138,6 +141,13 @@ watch(
   },
 )
 
+/**
+ * Preserves the optional pre-computed `props.insights` override.
+ * Child components (`PackageCard` and `PackageTableRow`) render security and dependency insights
+ * when `props.insights` is passed from parent components (e.g. dependency tree views).
+ */
+const insights = computed(() => props.insights)
+
 function scrollToIndex(index: number, smooth = true) {
   listRef.value?.scrollToIndex(index, { align: 'center', smooth })
 }
@@ -157,6 +167,7 @@ defineExpose({
         :columns="columns"
         v-model:sort-option="sortOption"
         :is-loading="isLoading"
+        :insights="insights"
         @click-keyword="emit('clickKeyword', $event)"
       />
     </template>
@@ -193,6 +204,7 @@ defineExpose({
                     : {}
                 "
                 :filters="filters"
+                :insights="insights"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
@@ -211,6 +223,7 @@ defineExpose({
                   :index="index"
                   :search-query="searchQuery"
                   :filters="filters"
+                  :insights="insights"
                   @click-keyword="emit('clickKeyword', $event)"
                 />
               </div>
@@ -252,6 +265,7 @@ defineExpose({
                 : {}
             "
             :filters="filters"
+            :insights="insights"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </li>
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
index be3c610c89..c32a1c814c 100644
--- a/app/components/Package/ListControls.vue
+++ b/app/components/Package/ListControls.vue
@@ -56,7 +56,7 @@ const showFilteredCount = computed(() => {
     <div class="flex-1 relative">
       <label for="package-filter" class="sr-only">{{ $t('package.list.filter_label') }}</label>
       <div
-        class="absolute h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
+        class="absolute inset-is-0 h-full w-10 flex items-center justify-center text-fg-subtle pointer-events-none"
         aria-hidden="true"
       >
         <div class="i-lucide:search w-4 h-4" />
diff --git a/app/components/Package/SelectionCheckbox.vue b/app/components/Package/SelectionCheckbox.vue
index dddebc4672..673e2fcf38 100644
--- a/app/components/Package/SelectionCheckbox.vue
+++ b/app/components/Package/SelectionCheckbox.vue
@@ -14,8 +14,8 @@ const disabledText = t('package.card.select_maximum', MAX_PACKAGE_SELECTION)
 </script>
 
 <template>
-  <div class="relative z-1">
-    <label>
+  <div class="flex items-center relative z-1">
+    <label class="flex items-center">
       <span class="sr-only" v-if="disabled">{{ disabledText }}</span>
       <span class="sr-only" v-else> {{ $t('package.card.select') }}: {{ packageName }} </span>
 
diff --git a/app/components/Package/Table.vue b/app/components/Package/Table.vue
index 9bba226cee..9aac1c55e3 100644
--- a/app/components/Package/Table.vue
+++ b/app/components/Package/Table.vue
@@ -9,11 +9,14 @@ import type {
 } from '#shared/types/preferences'
 import { buildSortOption, parseSortOption, toggleDirection } from '#shared/types/preferences'
 
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
+
 const props = defineProps<{
   results: NpmSearchResult[]
   columns: ColumnConfig[]
   filters?: StructuredFilters
   isLoading?: boolean
+  insights?: PackageDependencyInsights
 }>()
 
 const { t } = useI18n()
@@ -101,7 +104,7 @@ const { selectable } = usePackageSelectionContext()
 </script>
 
 <template>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto" tabindex="0">
     <table class="w-full text-start">
       <thead class="border-b border-border">
         <tr>
@@ -303,6 +306,7 @@ const { selectable } = usePackageSelectionContext()
             :columns="columns"
             :index="index"
             :filters="filters"
+            :insights="insights"
             @click-keyword="emit('clickKeyword', $event)"
           />
         </template>
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
index 42fe4b62b0..b07e2af196 100644
--- a/app/components/Package/TableRow.vue
+++ b/app/components/Package/TableRow.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
 import type { NpmSearchResult } from '#shared/types/npm-registry'
 import type { ColumnConfig, StructuredFilters } from '#shared/types/preferences'
+import { getVulnerableDepInfo, getDeprecatedDepInfo } from '~/utils/npm/problematic-dependencies'
+import type { PackageDependencyInsights } from '~/composables/usePackageDependencyInsights'
 
 const props = defineProps<{
   result: NpmSearchResult
   columns: ColumnConfig[]
   index?: number
   filters?: StructuredFilters
+  insights?: PackageDependencyInsights
+  to?: RouteLocationRaw | string
 }>()
 
 const emit = defineEmits<{
@@ -14,6 +19,7 @@ const emit = defineEmits<{
 }>()
 
 const pkg = computed(() => props.result.package)
+const insights = computed(() => props.insights)
 
 const updatedDate = computed(() => props.result.package.date)
 const { isPackageSelected, togglePackageSelection, canSelectMore } = usePackageSelection()
@@ -25,13 +31,64 @@ function isColumnVisible(id: string): boolean {
   return props.columns.find(c => c.id === id)?.visible ?? false
 }
 
-const packageUrl = computed(() => packageRoute(pkg.value.name))
+const packageUrl = computed(() => props.to ?? packageRoute(pkg.value.name))
 
 const allMaintainersText = computed(() => {
   if (!pkg.value.maintainers?.length) return ''
   return pkg.value.maintainers.map(m => m.name || m.email).join(', ')
 })
 
+const standaloneReplacementRes = useModuleReplacement(() => props.result.package.name)
+const standaloneDepAnalysisRes = useDependencyAnalysis(
+  () => props.result.package.name,
+  () => props.result.package.version,
+)
+
+const isLoadingData = computed(() => {
+  if (insights.value) {
+    const vStatus = unref(insights.value.vulnStatus)
+    const rStatus = unref(insights.value.replacementStatus)
+    return (
+      vStatus === 'pending' || vStatus === 'idle' || rStatus === 'pending' || rStatus === 'idle'
+    )
+  }
+  const vulnPending =
+    standaloneDepAnalysisRes.status.value === 'pending' ||
+    (standaloneDepAnalysisRes.status.value === 'idle' &&
+      standaloneDepAnalysisRes.data.value === undefined)
+  const replacementPending =
+    standaloneReplacementRes.status.value === 'pending' ||
+    (standaloneReplacementRes.status.value === 'idle' &&
+      standaloneReplacementRes.data.value === undefined)
+  return vulnPending || replacementPending
+})
+
+const hasReplacement = computed(() => {
+  if (insights.value) {
+    return !!unref(insights.value.replacementDeps)?.[props.result.package.name]
+  }
+  return !!standaloneReplacementRes.data.value?.replacement
+})
+
+const effectiveVulnTree = computed(() => {
+  if (insights.value) {
+    return unref(insights.value.vulnTree)
+  }
+  return standaloneDepAnalysisRes.data.value ?? undefined
+})
+
+const packageTextColorClass = computed(() => {
+  const dependencyName = pkg.value.name
+  if (getVulnerableDepInfo(dependencyName, effectiveVulnTree.value)) return 'text-red-600'
+  if (
+    getDeprecatedDepInfo(dependencyName, effectiveVulnTree.value, props.result.package.deprecated)
+  )
+    return 'text-purple-700 dark:text-purple-500'
+  if (hasReplacement.value) return 'text-amber-700 dark:text-amber-500'
+
+  return 'text-fg hover:text-accent-fallback'
+})
+
 const compactNumberFormatter = useCompactNumberFormatter()
 
 const { selectable } = usePackageSelectionContext()
@@ -39,9 +96,7 @@ const { selectable } = usePackageSelectionContext()
 
 <template>
   <tr
-    class="group relative scale-100 [clip-path:inset(0)] border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
-    tabindex="0"
-    :data-result-index="index"
+    class="group relative scale-100 [clip-path:inset(0)] border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted focus-within:bg-bg-muted"
   >
     <td class="ps-3" v-if="selectable">
       <PackageSelectionCheckbox
@@ -49,22 +104,40 @@ const { selectable } = usePackageSelectionContext()
         :disabled="!canSelectMore && !isSelected"
         :checked="isSelected"
         @change="togglePackageSelection"
+        class="relative z-10"
       />
     </td>
     <!-- Name (always visible) -->
     <td class="py-2 px-3">
-      <NuxtLink
-        :to="packageUrl"
-        class="row-link font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
-        dir="ltr"
-      >
-        {{ pkg.name }}
-      </NuxtLink>
+      <div class="flex items-center gap-2">
+        <NuxtLink
+          :to="packageUrl"
+          class="row-link font-mono text-sm transition-colors duration-200 inline-flex items-center gap-2 min-w-0 after:content-[''] after:absolute after:inset-0"
+          :class="packageTextColorClass"
+          :data-result-index="index"
+        >
+          <span class="i-simple-icons:npm w-3.5 h-3.5 shrink-0" aria-hidden="true" />
+          <span class="truncate" dir="ltr">{{ pkg.name }}</span>
+        </NuxtLink>
+        <slot name="status-indicators" :insights="insights">
+          <DependenciesStatusIndicators
+            :name="pkg.name"
+            :deprecated="result.package.deprecated"
+            :has-replacement="hasReplacement"
+            :vuln-tree="effectiveVulnTree"
+            :insights="insights"
+            :is-loading="isLoadingData"
+            class="z-10"
+          />
+        </slot>
+      </div>
     </td>
 
     <!-- Version -->
     <td v-if="isColumnVisible('version')" class="py-2 px-3 font-mono text-xs text-fg-subtle">
-      <span dir="ltr">{{ pkg.version }}</span>
+      <slot name="version" :version="pkg.version">
+        <span dir="ltr">{{ pkg.version }}</span>
+      </slot>
     </td>
 
     <!-- Description -->
@@ -141,10 +214,9 @@ const { selectable } = usePackageSelectionContext()
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
           size="sm"
-          :aria-pressed="props.filters?.keywords.includes(keyword)"
+          :aria-pressed="props.filters?.keywords?.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
-          :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"
         >
           {{ keyword }}
         </ButtonBase>
@@ -176,14 +248,7 @@ const { selectable } = usePackageSelectionContext()
 
 <style scoped>
 .row-link {
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    cursor: pointer;
-  }
-
-  &:focus-visible::after {
+  &:focus-visible {
     outline: 2px solid var(--color-fg);
     outline-offset: -2px;
   }
diff --git a/app/composables/npm/search-utils.ts b/app/composables/npm/search-utils.ts
index 290feaea46..8024d668e1 100644
--- a/app/composables/npm/search-utils.ts
+++ b/app/composables/npm/search-utils.ts
@@ -10,6 +10,7 @@ export function metaToSearchResult(meta: PackageMetaResponse): NpmSearchResult {
       links: meta.links,
       author: meta.author,
       maintainers: meta.maintainers,
+      deprecated: meta.deprecated,
     },
     searchScore: 0,
     downloads: meta.weeklyDownloads !== undefined ? { weekly: meta.weeklyDownloads } : undefined,
diff --git a/app/composables/npm/useAlgoliaSearch.ts b/app/composables/npm/useAlgoliaSearch.ts
index b4a56fb79d..4a42b511a9 100644
--- a/app/composables/npm/useAlgoliaSearch.ts
+++ b/app/composables/npm/useAlgoliaSearch.ts
@@ -95,6 +95,7 @@ function hitToSearchResult(hit: AlgoliaHit): NpmSearchResult {
           }))
         : [],
       isSecurityHeld: hit.isSecurityHeld,
+      deprecated: hit.deprecated || (hit.isDeprecated ? true : undefined),
     },
     searchScore: 0,
     downloads: {
diff --git a/app/composables/npm/useOutdatedDependencies.ts b/app/composables/npm/useOutdatedDependencies.ts
index c59891a7bb..720114133f 100644
--- a/app/composables/npm/useOutdatedDependencies.ts
+++ b/app/composables/npm/useOutdatedDependencies.ts
@@ -1,28 +1,27 @@
 import type { PackageVersionsInfo } from 'fast-npm-meta'
 import { getVersionsBatch } from 'fast-npm-meta'
-import { difference, findMaxSatisfying, getMajor, getMinor, isGreater, isStable } from 'verkit'
+import {
+  difference,
+  findMaxSatisfying,
+  getMajor,
+  getMinor,
+  isGreater,
+  isStable,
+  isValidRange,
+} from 'verkit'
 import { parseDependencyVersion } from '#shared/utils/npm'
 import {
   type OutdatedDependencyInfo,
   constraintIncludesPrerelease,
-} from '~/utils/npm/outdated-dependencies'
-
-const BATCH_SIZE = 50
+} from '~/utils/npm/problematic-dependencies'
+import type { DependencySpec } from '~/utils/npm/package-dependency-sections'
 
-function resolveOutdated(
+export function resolveOutdated(
   versions: string[],
   latestTag: string,
   constraint: string,
 ): OutdatedDependencyInfo | null {
-  if (constraint === 'latest') {
-    return {
-      resolved: latestTag,
-      latest: latestTag,
-      majorsBehind: 0,
-      minorsBehind: 0,
-      diffType: null,
-    }
-  }
+  if (constraint === 'latest' || !isValidRange(constraint)) return null
 
   let filteredVersions = versions
   if (!constraintIncludesPrerelease(constraint)) {
@@ -30,14 +29,7 @@ function resolveOutdated(
   }
 
   const resolved = findMaxSatisfying(filteredVersions, constraint)
-  if (!resolved) return null
-
-  if (resolved === latestTag) return null
-
-  // Resolved is newer than latest (e.g. ^2.0.0-rc when latest is 1.x)
-  if (isGreater(resolved, latestTag)) {
-    return null
-  }
+  if (!resolved || resolved === latestTag || isGreater(resolved, latestTag)) return null
 
   const diffType = difference(resolved, latestTag)
   const majorsBehind = getMajor(latestTag) - getMajor(resolved)
@@ -52,78 +44,62 @@ function resolveOutdated(
   }
 }
 
+async function fetchOutdatedMap(
+  deps: Record<string, DependencySpec>,
+): Promise<Record<string, OutdatedDependencyInfo>> {
+  const semverEntries = Object.entries(deps).filter(([, spec]) => {
+    const parsed = parseDependencyVersion(spec.version)
+    return parsed.range !== null
+  })
+  if (semverEntries.length === 0) return {}
+
+  const names = Array.from(new Set(semverEntries.map(([, spec]) => spec.name)))
+  const dataList = await getVersionsBatch(names, { throw: false })
+
+  const versionMap = new Map<string, PackageVersionsInfo>()
+  for (const data of dataList) {
+    if (data && !('error' in data)) versionMap.set(data.name, data)
+  }
+
+  const results: Record<string, OutdatedDependencyInfo> = {}
+  for (const [key, spec] of semverEntries) {
+    const data = versionMap.get(spec.name)
+    if (!data?.distTags?.latest) continue
+    const parsed = parseDependencyVersion(spec.version)
+    const constraint = parsed.range ?? spec.version
+    const info = resolveOutdated(data.versions, data.distTags.latest, constraint)
+    if (info) results[key] = info
+  }
+
+  return results
+}
+
 /**
  * Check for outdated dependencies via fast-npm-meta batch version lookups.
- * Returns a reactive map of dependency name to outdated info.
+ * Returns an AsyncData result.
  */
 export function useOutdatedDependencies(
-  dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
+  dependencies: MaybeRefOrGetter<Record<string, DependencySpec> | undefined>,
 ) {
-  const outdated = shallowRef<Record<string, OutdatedDependencyInfo>>({})
-
-  async function fetchOutdatedInfo(deps: Record<string, string> | undefined) {
-    if (!deps || Object.keys(deps).length === 0) {
-      outdated.value = {}
-      return
-    }
-
-    // Resolve npm: aliases and filter out non-semver constraints
-    const resolvedEntries = Object.entries(deps)
-      .map(([key, value]) => {
-        const parsed = parseDependencyVersion(value)
-        return { key, realName: parsed.name ?? key, range: parsed.range }
-      })
-      .filter((e): e is typeof e & { range: string } => e.range !== null)
-
-    if (resolvedEntries.length === 0) {
-      outdated.value = {}
-      return
-    }
-
-    const packageNames = [...new Set(resolvedEntries.map(e => e.realName))]
-
-    const chunks: string[][] = []
-    for (let i = 0; i < packageNames.length; i += BATCH_SIZE) {
-      chunks.push(packageNames.slice(i, i + BATCH_SIZE))
-    }
-    const batchResults = await Promise.all(
-      chunks.map(chunk => getVersionsBatch(chunk, { throw: false })),
-    )
-    const allVersionData = batchResults.flat()
-
-    // Build a lookup map from package name to version data
-    const versionMap = new Map<string, PackageVersionsInfo>()
-    for (const data of allVersionData) {
-      if ('error' in data) continue
-      versionMap.set(data.name, data)
-    }
-
-    const results: Record<string, OutdatedDependencyInfo> = {}
-    for (const { key, realName, range } of resolvedEntries) {
-      const data = versionMap.get(realName)
-      if (!data) continue
-
-      const latestTag = data.distTags.latest
-      if (!latestTag) continue
-
-      const info = resolveOutdated(data.versions, latestTag, range)
-      if (info) {
-        results[key] = info
-      }
-    }
-
-    outdated.value = results
-  }
-
-  watch(
-    () => toValue(dependencies),
-    deps => {
-      fetchOutdatedInfo(deps).catch(() => {
-        // Network failure or fast-npm-meta outage — leave stale results in place
-      })
+  const key = computed(() => {
+    const deps = toValue(dependencies)
+    if (!deps) return 'outdated:none'
+    const sorted = Object.keys(deps).sort()
+    return sorted.length === 0
+      ? 'outdated:none'
+      : `outdated:${sorted.map(k => `${k}@${deps[k]!.version}`).join(',')}`
+  })
+
+  return useAsyncData<Record<string, OutdatedDependencyInfo>>(
+    key,
+    async () => {
+      const deps = toValue(dependencies)
+      if (!deps || Object.keys(deps).length === 0) return {}
+      return await fetchOutdatedMap(deps)
+    },
+    {
+      watch: [key],
+      default: () => ({}),
     },
-    { immediate: true },
   )
-
-  return outdated
 }
diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts
index baae299150..ff41503b39 100644
--- a/app/composables/npm/usePackage.ts
+++ b/app/composables/npm/usePackage.ts
@@ -15,6 +15,13 @@ export function transformPackument(
   pkg: Packument,
   requestedVersion?: string | null,
 ): SlimPackument {
+  // Resolve dist-tags or missing version to exact semver version
+  if (requestedVersion && pkg['dist-tags']?.[requestedVersion]) {
+    requestedVersion = pkg['dist-tags'][requestedVersion]
+  } else if (!requestedVersion) {
+    requestedVersion = pkg['dist-tags']?.latest ?? Object.values(pkg['dist-tags'] ?? {})[0]
+  }
+
   // Get versions pointed to by dist-tags
   const distTagVersions = new Set(Object.values(pkg['dist-tags'] ?? {}))
 
@@ -128,7 +135,7 @@ export function transformPackument(
 
 export function usePackage(
   name: MaybeRefOrGetter<string>,
-  requestedVersion?: MaybeRefOrGetter<string | null>,
+  requestedVersion?: MaybeRefOrGetter<string | null | undefined>,
 ) {
   const asyncData = useLazyAsyncData(
     () => `package:${toValue(name)}:${toValue(requestedVersion) ?? ''}`,
diff --git a/app/composables/npm/usePackageMeta.ts b/app/composables/npm/usePackageMeta.ts
new file mode 100644
index 0000000000..0e108ae2ab
--- /dev/null
+++ b/app/composables/npm/usePackageMeta.ts
@@ -0,0 +1,42 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { encodePackageName } from '#shared/utils/npm'
+
+export function usePackageMetaState() {
+  return useState<Record<string, PackageMetaResponse>>('package-meta-cache', () => ({}))
+}
+
+export function fetchPackageMeta(name: string): Promise<PackageMetaResponse | null> {
+  const cache = usePackageMetaState()
+  if (cache.value[name]) {
+    return Promise.resolve(cache.value[name]!)
+  }
+
+  return $fetch<PackageMetaResponse>(`/api/registry/package-meta/${encodePackageName(name)}`)
+    .then(data => {
+      cache.value = { ...cache.value, [name]: data }
+      return data
+    })
+    .catch(() => null)
+}
+
+export function usePackageMeta(packageName: MaybeRefOrGetter<string | undefined>) {
+  const cache = usePackageMetaState()
+  const name = computed(() => toValue(packageName))
+
+  return useAsyncData<PackageMetaResponse | null>(
+    () => `package-meta:${name.value}`,
+    async () => {
+      const pkgName = name.value
+      if (!pkgName) return null
+      if (cache.value[pkgName]) {
+        return cache.value[pkgName]!
+      }
+      const data = await fetchPackageMeta(pkgName)
+      return data
+    },
+    {
+      watch: [name],
+      default: () => (name.value ? (cache.value[name.value] ?? null) : null),
+    },
+  )
+}
diff --git a/app/composables/npm/useReplacementDependencies.ts b/app/composables/npm/useReplacementDependencies.ts
index b362556c2e..88dadd5884 100644
--- a/app/composables/npm/useReplacementDependencies.ts
+++ b/app/composables/npm/useReplacementDependencies.ts
@@ -1,72 +1,57 @@
-import type { ModuleReplacement, ModuleReplacementMapping } from 'module-replacements'
-import { parseDependencyVersion } from '#shared/utils/npm'
+import type { ModuleReplacement } from 'module-replacements'
+import type { DependencySpec } from '~/utils/npm/package-dependency-sections'
 
 async function fetchReplacements(
-  deps: Record<string, string>,
+  deps: Record<string, DependencySpec>,
 ): Promise<Record<string, ModuleReplacement>> {
-  const names = [
-    ...new Set(
-      Object.entries(deps).map(([key, value]) => parseDependencyVersion(value).name ?? key),
-    ),
-  ]
-
-  const results = await Promise.all(
-    names.map(async name => {
-      try {
-        const response = await $fetch<{
-          mapping: ModuleReplacementMapping
-          replacement: ModuleReplacement
-        } | null>(`/api/replacements/${name}`)
-        const replacement = response?.replacement ?? null
-        return { name, replacement }
-      } catch {
-        return { name, replacement: null }
-      }
-    }),
-  )
-
-  const map: Record<string, ModuleReplacement> = {}
-  for (const { name, replacement } of results) {
-    if (replacement) {
-      map[name] = replacement
+  const entries = Object.entries(deps)
+  if (entries.length === 0) return {}
+
+  const names = Array.from(new Set(entries.map(([, spec]) => spec.name)))
+  try {
+    const isSingle = names.length === 1
+    const res = await $fetch<any>(`/api/replacements/${names.map(encodeURIComponent).join(',')}`)
+    if (!res) return {}
+
+    const map: Record<string, ModuleReplacement> = {}
+    for (const [key, spec] of entries) {
+      const match = isSingle ? res : res[spec.name]
+      if (match?.replacement) map[key] = match.replacement
     }
+    return map
+  } catch {
+    return {}
   }
-  return map
 }
 
 /**
  * Fetch module replacement suggestions for a set of dependencies.
- * Returns a reactive map of dependency name to ModuleReplacement.
+ * Returns an AsyncData result.
  */
 export function useReplacementDependencies(
-  dependencies: MaybeRefOrGetter<Record<string, string> | undefined>,
+  dependencies: MaybeRefOrGetter<Record<string, DependencySpec> | undefined>,
 ) {
-  const replacements = shallowRef<Record<string, ModuleReplacement>>({})
-  let generation = 0
-
-  if (import.meta.client) {
-    watch(
-      () => toValue(dependencies),
-      async deps => {
-        const currentGeneration = ++generation
-
-        if (!deps || Object.keys(deps).length === 0) {
-          replacements.value = {}
-          return
-        }
-
-        try {
-          const result = await fetchReplacements(deps)
-          if (currentGeneration === generation) {
-            replacements.value = result
-          }
-        } catch {
-          // catastrophic failure, just keep whatever we have
-        }
-      },
-      { immediate: true },
-    )
-  }
-
-  return replacements
+  const depsRef = computed(() => toValue(dependencies))
+
+  const key = computed(() => {
+    const deps = depsRef.value
+    if (!deps) return 'replacements:none'
+    const sorted = Object.keys(deps).sort()
+    return sorted.length === 0
+      ? 'replacements:none'
+      : `replacements:${sorted.map(k => `${k}@${deps[k]!.version}`).join(',')}`
+  })
+
+  return useAsyncData<Record<string, ModuleReplacement>>(
+    key.value,
+    async () => {
+      const deps = depsRef.value
+      if (!deps || Object.keys(deps).length === 0) return {}
+      return await fetchReplacements(deps)
+    },
+    {
+      watch: [depsRef],
+      default: () => ({}),
+    },
+  )
 }
diff --git a/app/composables/useCommandPalettePackageCommands.ts b/app/composables/useCommandPalettePackageCommands.ts
index 78ae3a62e0..a5c90260ea 100644
--- a/app/composables/useCommandPalettePackageCommands.ts
+++ b/app/composables/useCommandPalettePackageCommands.ts
@@ -47,6 +47,10 @@ export function useCommandPalettePackageCommands(
           filePath: '',
         },
       }
+      const dependenciesLink = dependenciesRoute(
+        resolvedContext.packageName,
+        resolvedContext.resolvedVersion,
+      )
 
       const commands: CommandPaletteContextCommandInput[] = [
         {
@@ -82,6 +86,16 @@ export function useCommandPalettePackageCommands(
           activeLabel: activeLabel(route.name === 'code', t('command_palette.here')),
           to: codeLink,
         },
+        {
+          id: 'package-dependencies',
+          group: 'package',
+          label: t('package.links.dependencies'),
+          keywords: [resolvedContext.packageName, t('package.links.dependencies')],
+          iconClass: 'i-lucide:network',
+          active: route.name === 'dependencies',
+          activeLabel: activeLabel(route.name === 'dependencies', t('command_palette.here')),
+          to: dependenciesLink,
+        },
         {
           id: 'package-timeline',
           group: 'package',
diff --git a/app/composables/useDependencyAnalysis.ts b/app/composables/useDependencyAnalysis.ts
index d8eee606a2..87add5b228 100644
--- a/app/composables/useDependencyAnalysis.ts
+++ b/app/composables/useDependencyAnalysis.ts
@@ -1,3 +1,5 @@
+import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
+
 /**
  * Shared composable for dependency analysis data (vulnerabilities, deprecated packages).
  * Fetches once and caches the result so multiple components can use it.
@@ -5,10 +7,25 @@
  */
 export function useDependencyAnalysis(
   packageName: MaybeRefOrGetter<string>,
-  version: MaybeRefOrGetter<string>,
+  version: MaybeRefOrGetter<string | null | undefined>,
 ) {
-  return useFetch(
-    () =>
-      `/api/registry/vulnerabilities/${encodePackageName(toValue(packageName))}/v/${toValue(version)}`,
+  const resolvedVersion = computed((): string | undefined => {
+    const ver = toValue(version)
+    return resolveMinVersion(ver) ?? undefined
+  })
+
+  return useFetch<VulnerabilityTreeResult>(
+    () => {
+      const pkg = toValue(packageName)
+      const ver = resolvedVersion.value
+      if (!pkg || !ver) return ''
+      return `/api/registry/vulnerabilities/${encodePackageName(pkg)}/v/${ver}`
+    },
+    {
+      key: () => `vuln:${toValue(packageName)}:${resolvedVersion.value}`,
+      watch: [() => toValue(packageName), resolvedVersion],
+      server: false,
+      lazy: true,
+    },
   )
 }
diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index eecd177d17..7b6c6d5d9b 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -2,7 +2,7 @@ import { normalizeSearchParam } from '#shared/utils/url'
 import { debounce } from 'perfect-debounce'
 
 // Pages that have their own local filter using ?q
-const pagesWithLocalFilter = new Set(['~username', 'org'])
+const pagesWithLocalFilter = new Set(['~username', 'org', 'dependencies'])
 
 const SEARCH_DEBOUNCE_MS = 100
 
diff --git a/app/composables/usePackageDependencyInsights.ts b/app/composables/usePackageDependencyInsights.ts
new file mode 100644
index 0000000000..0c7d89ca67
--- /dev/null
+++ b/app/composables/usePackageDependencyInsights.ts
@@ -0,0 +1,42 @@
+import type { DependencySpec } from '~/utils/npm/package-dependency-sections'
+
+export function usePackageDependencyInsights(
+  packageName: MaybeRefOrGetter<string>,
+  version: MaybeRefOrGetter<string | null | undefined>,
+  dependencies: MaybeRefOrGetter<Record<string, DependencySpec> | undefined>,
+) {
+  const {
+    data: outdatedDeps,
+    status: outdatedStatus,
+    error: outdatedError,
+  } = useOutdatedDependencies(dependencies)
+
+  const {
+    data: replacementDeps,
+    status: replacementStatus,
+    error: replacementError,
+  } = useReplacementDependencies(dependencies)
+
+  const {
+    data: vulnTree,
+    status: vulnStatus,
+    error: vulnError,
+  } = useDependencyAnalysis(packageName, version)
+
+  const hasError = computed(() => {
+    return !!(vulnError.value || outdatedError.value || replacementError.value)
+  })
+
+  return {
+    outdatedDeps,
+    outdatedStatus,
+    replacementDeps,
+    replacementStatus,
+    vulnTree,
+    vulnStatus,
+    hasError,
+    errors: { vulnError, outdatedError, replacementError },
+  }
+}
+
+export type PackageDependencyInsights = ReturnType<typeof usePackageDependencyInsights>
diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index c7d74034aa..63773598bb 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -66,7 +66,7 @@ function getCodeUrl(args: {
 }
 
 // Fetch package data for version list
-const { data: pkg } = usePackage(packageName)
+const { data: pkg } = usePackage(packageName, version)
 const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
   useCommandPalettePackageVersions(packageName)
 
diff --git a/app/pages/package-deps/[...path].vue b/app/pages/package-deps/[...path].vue
new file mode 100644
index 0000000000..97b72a0579
--- /dev/null
+++ b/app/pages/package-deps/[...path].vue
@@ -0,0 +1,600 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { setResponseHeader } from 'h3'
+import { DEFAULT_FILTERS } from '#shared/types/preferences'
+import type { DepSectionId, DependencySortOption } from '#shared/types/package-dependencies'
+import { assertValidPackageName } from '#shared/utils/npm'
+import { normalizeSearchParam } from '#shared/utils/url'
+import { debounce } from 'perfect-debounce'
+import {
+  getDefaultDependencySection,
+  getPackageDependencySections,
+  isDepSectionId,
+  getNormalizedDependenciesFromPackageVersion,
+} from '~/utils/npm/package-dependency-sections'
+import { getVulnerableDepInfo, getDeprecatedDepInfo } from '~/utils/npm/problematic-dependencies'
+
+definePageMeta({
+  name: 'dependencies',
+  path: '/package-deps/:path+',
+  alias: ['/package/dependencies/:path+', '/dependencies/:path+'],
+  scrollMargin: 160,
+  preserveScrollOnQuery: true,
+})
+
+const route = useRoute('dependencies')
+const router = useRouter()
+
+const { packageName, requestedVersion } = usePackageRoute()
+
+if (import.meta.server && packageName.value) {
+  assertValidPackageName(packageName.value)
+}
+
+const {
+  data: resolvedVersion,
+  status: resolvedStatus,
+  pending: resolvedPending,
+} = await useResolvedVersion(packageName, requestedVersion)
+
+if (
+  import.meta.server &&
+  !resolvedVersion.value &&
+  ['success', 'error'].includes(resolvedStatus.value)
+) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: $t('package.not_found'),
+    message: $t('package.not_found_message'),
+  })
+}
+
+watch(
+  [resolvedStatus, resolvedVersion],
+  ([status, version]) => {
+    if ((!version && status === 'success') || status === 'error') {
+      showError({
+        statusCode: 404,
+        statusMessage: $t('package.not_found'),
+        message: $t('package.not_found_message'),
+      })
+    }
+  },
+  { immediate: true },
+)
+
+const { data: pkg, status: pkgStatus } = await usePackage(
+  packageName,
+  () => resolvedVersion.value ?? requestedVersion.value,
+)
+const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
+  useCommandPalettePackageVersions(packageName)
+
+const latestVersionTag = computed(() => pkg.value?.['dist-tags']?.latest ?? null)
+
+if (import.meta.server && !requestedVersion.value && packageName.value) {
+  const app = useNuxtApp()
+  const latest = await fetchLatestVersion(packageName.value)
+  if (latest) {
+    setResponseHeader(useRequestEvent()!, 'Cache-Control', 'no-cache')
+    app.runWithContext(() =>
+      navigateTo(dependenciesRoute(packageName.value, latest), { redirectCode: 302 }),
+    )
+  }
+}
+
+watch(
+  [requestedVersion, latestVersionTag, packageName],
+  ([reqVer, latest, name]) => {
+    if (!reqVer && latest && name) {
+      router.replace(dependenciesRoute(name, latest))
+    }
+  },
+  { immediate: true },
+)
+
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+
+const isPkgLoading = computed(
+  () => resolvedPending.value || pkgStatus.value === 'idle' || pkgStatus.value === 'pending',
+)
+
+const sections = computed(() => getPackageDependencySections(displayVersion.value))
+
+const DEFAULT_SORT: DependencySortOption = 'name-asc'
+
+function parseSectionsFromQuery(queryValue: unknown): string[] {
+  if (!queryValue) return []
+  const rawList = Array.isArray(queryValue) ? queryValue : [queryValue]
+  const parsed: string[] = []
+  for (const item of rawList) {
+    if (typeof item === 'string') {
+      const parts = item.split(',')
+      for (const part of parts) {
+        const trimmed = part.trim()
+        if (isDepSectionId(trimmed) && !parsed.includes(trimmed)) {
+          parsed.push(trimmed)
+        }
+      }
+    }
+  }
+  return parsed
+}
+
+const filter = ref(normalizeSearchParam(route.query.q))
+const initialQuerySort = normalizeSearchParam(route.query.sort) as DependencySortOption
+const sort = ref<DependencySortOption>(
+  [
+    'name-asc',
+    'name-desc',
+    'downloads-week-asc',
+    'downloads-week-desc',
+    'updated-asc',
+    'updated-desc',
+  ].includes(initialQuerySort)
+    ? initialQuerySort
+    : DEFAULT_SORT,
+)
+
+const initialQuerySections = parseSectionsFromQuery(route.query.sections ?? route.query.section)
+const activeSections = ref<string[]>(
+  initialQuerySections.length > 0 ? initialQuerySections : ['dependencies'],
+)
+
+watch(
+  sections,
+  s => {
+    if (s.length > 0) {
+      const validActive = activeSections.value.filter(id => s.some(sec => sec.id === id))
+      if (validActive.length === 0) {
+        const defaultSec = getDefaultDependencySection(s)
+        activeSections.value = defaultSec ? [defaultSec] : s.map(sec => sec.id)
+      }
+    }
+  },
+  { immediate: true },
+)
+
+const updateUrl = debounce(() => {
+  const newQ = filter.value.trim() || undefined
+  const newSort = sort.value !== DEFAULT_SORT ? sort.value : undefined
+
+  const defaultSec =
+    sections.value.length > 0 ? getDefaultDependencySection(sections.value) : 'dependencies'
+  const isDefaultSections =
+    activeSections.value.length === 1 && activeSections.value[0] === defaultSec
+  const newSections = isDefaultSections ? undefined : activeSections.value.join(',')
+
+  const currentQ = normalizeSearchParam(route.query.q) || undefined
+  const currentSort = normalizeSearchParam(route.query.sort) || undefined
+  const currentSections =
+    parseSectionsFromQuery(route.query.sections ?? route.query.section).join(',') || undefined
+
+  if (
+    currentQ !== newQ ||
+    currentSort !== newSort ||
+    currentSections !== newSections ||
+    route.query.section !== undefined
+  ) {
+    const query = { ...route.query }
+    delete query.section
+    if (newQ) query.q = newQ
+    else delete query.q
+
+    if (newSort) query.sort = newSort
+    else delete query.sort
+
+    if (newSections) query.sections = newSections
+    else delete query.sections
+
+    router.replace({ query })
+  }
+}, 300)
+
+watch([filter, sort, activeSections], () => {
+  updateUrl()
+})
+
+watch(
+  () => route.query,
+  newQuery => {
+    const qFromUrl = normalizeSearchParam(newQuery.q)
+    if (filter.value !== qFromUrl) {
+      filter.value = qFromUrl
+    }
+
+    const sortFromUrl = normalizeSearchParam(newQuery.sort) as DependencySortOption
+    const validSort = [
+      'name-asc',
+      'name-desc',
+      'downloads-week-asc',
+      'downloads-week-desc',
+      'updated-asc',
+      'updated-desc',
+    ].includes(sortFromUrl)
+      ? sortFromUrl
+      : DEFAULT_SORT
+    if (sort.value !== validSort) {
+      sort.value = validSort
+    }
+
+    const sectionsFromUrl = parseSectionsFromQuery(newQuery.sections ?? newQuery.section)
+    if (sectionsFromUrl.length > 0) {
+      const isSame =
+        sectionsFromUrl.length === activeSections.value.length &&
+        sectionsFromUrl.every((sec, i) => sec === activeSections.value[i])
+      if (!isSame) {
+        activeSections.value = sectionsFromUrl
+      }
+    }
+  },
+)
+
+onBeforeUnmount(() => {
+  updateUrl.cancel()
+})
+
+const currentSections = computed(() =>
+  sections.value.filter(s => activeSections.value.includes(s.id)),
+)
+
+const allSectionItems = computed(() => {
+  return currentSections.value.flatMap(s => s.items)
+})
+
+const allDependencies = computed(() => {
+  return getNormalizedDependenciesFromPackageVersion(pkg.value?.requestedVersion)
+})
+
+const versionUrlPattern = computed(() => {
+  const base = `/package-deps/${pkg.value?.name || packageName.value}/v/{version}`
+  const secs = activeSections.value.join(',')
+  return secs ? `${base}?sections=${secs}` : base
+})
+
+function depsVersionRoute(nextVersion: string): RouteLocationRaw {
+  return dependenciesRoute(packageName.value, nextVersion, activeSections.value as DepSectionId[])
+}
+
+const commandPalettePackageContext = computed(() => {
+  const packageData = pkg.value
+  if (!packageData) return null
+
+  return {
+    packageName: packageData.name,
+    resolvedVersion: resolvedVersion.value ?? packageData['dist-tags']?.latest ?? null,
+    latestVersion: packageData['dist-tags']?.latest ?? null,
+    versions: commandPaletteVersions.value ?? Object.keys(packageData.versions ?? {}),
+  }
+})
+
+useCommandPalettePackageContext(commandPalettePackageContext, {
+  onOpen: ensureCommandPaletteVersionsLoaded,
+})
+useCommandPalettePackageCommands(commandPalettePackageContext)
+useCommandPaletteVersionCommands(commandPalettePackageContext, depsVersionRoute)
+
+const insights = usePackageDependencyInsights(packageName, resolvedVersion, allDependencies)
+
+const { viewMode, columns, toggleColumn, resetColumns } = usePackageListPreferences()
+
+const selectedInsights = ref<string[]>([])
+
+const packageMetaCache = usePackageMetaState()
+
+watch(
+  allSectionItems,
+  items => {
+    if (!items) return
+    for (const item of items) {
+      const targetName = item.packageName || item.name
+      if (packageMetaCache.value[targetName]) continue
+      fetchPackageMeta(targetName).catch(() => {})
+    }
+  },
+  { immediate: true },
+)
+
+const filteredItems = computed(() => {
+  const items = allSectionItems.value
+  const query = filter.value.trim().toLowerCase()
+  let result = query
+    ? items.filter(
+        item =>
+          item.name.toLowerCase().includes(query) || item.packageName.toLowerCase().includes(query),
+      )
+    : [...items]
+
+  if (selectedInsights.value.length > 0) {
+    result = result.filter(item => {
+      const targetName = item.packageName || item.name
+      const outdated = insights.outdatedDeps.value?.[item.name]
+      return selectedInsights.value.some(id => {
+        switch (id) {
+          case 'major':
+            return outdated ? outdated.majorsBehind > 0 : false
+          case 'minor':
+            return outdated ? outdated.majorsBehind === 0 && outdated.minorsBehind > 0 : false
+          case 'patch':
+            return outdated
+              ? outdated.majorsBehind === 0 &&
+                  outdated.minorsBehind === 0 &&
+                  outdated.resolved !== outdated.latest
+              : false
+          case 'vulnerable':
+            return !!getVulnerableDepInfo(targetName, insights.vulnTree.value)
+          case 'deprecated':
+            return !!getDeprecatedDepInfo(targetName, insights.vulnTree.value)
+          case 'replacement':
+            return !!insights.replacementDeps.value?.[item.name]
+          default:
+            return false
+        }
+      })
+    })
+  }
+
+  result.sort((a, b) => {
+    const metaA = packageMetaCache.value[a.packageName || a.name]
+    const metaB = packageMetaCache.value[b.packageName || b.name]
+
+    switch (sort.value) {
+      case 'name-desc':
+        return b.name.localeCompare(a.name)
+      case 'downloads-week-desc':
+        return (metaB?.weeklyDownloads ?? 0) - (metaA?.weeklyDownloads ?? 0)
+      case 'downloads-week-asc':
+        return (metaA?.weeklyDownloads ?? 0) - (metaB?.weeklyDownloads ?? 0)
+      case 'updated-desc':
+        return (
+          (metaB?.date ? Date.parse(metaB.date) : 0) - (metaA?.date ? Date.parse(metaA.date) : 0)
+        )
+      case 'updated-asc':
+        return (
+          (metaA?.date ? Date.parse(metaA.date) : 0) - (metaB?.date ? Date.parse(metaB.date) : 0)
+        )
+      default:
+        return a.name.localeCompare(b.name)
+    }
+  })
+
+  return result
+})
+
+const isInsightsLoading = computed(() => {
+  if (selectedInsights.value.length === 0) return false
+  return selectedInsights.value.some(id => {
+    if (['major', 'minor', 'patch'].includes(id)) {
+      return insights.outdatedStatus.value === 'pending' || insights.outdatedStatus.value === 'idle'
+    }
+    if (['vulnerable', 'deprecated'].includes(id)) {
+      return insights.vulnStatus.value === 'pending' || insights.vulnStatus.value === 'idle'
+    }
+    if (id === 'replacement') {
+      return (
+        insights.replacementStatus.value === 'pending' ||
+        insights.replacementStatus.value === 'idle'
+      )
+    }
+    return false
+  })
+})
+
+const latestVersion = computed(() => {
+  if (!pkg.value) return null
+  const latestTag = pkg.value['dist-tags']?.latest
+  if (!latestTag) return null
+  return pkg.value.versions[latestTag] ?? null
+})
+
+useSeoMeta({
+  title: () =>
+    pkg.value && resolvedVersion.value
+      ? `${pkg.value.name}@${resolvedVersion.value} dependencies - npmx`
+      : 'Dependencies - npmx',
+})
+
+const showSkeleton = shallowRef(false)
+
+const { model: globalSearchModel } = useGlobalSearch()
+
+const structuredFilters = computed(() => {
+  const parsed = parseSearchOperators(globalSearchModel.value)
+  return {
+    ...DEFAULT_FILTERS,
+    keywords: parsed.keywords ?? [],
+    text: parsed.text ?? '',
+  }
+})
+
+function handleKeywordClick(keyword: string) {
+  const currentQuery = globalSearchModel.value.trim()
+  const parsed = parseSearchOperators(currentQuery)
+  const alreadyExists = parsed.keywords?.includes(keyword)
+
+  let queryStr: string
+  if (alreadyExists) {
+    queryStr = removeKeywordFromQuery(currentQuery, keyword)
+  } else if (currentQuery) {
+    queryStr = `${currentQuery} keyword:${keyword}`
+  } else {
+    queryStr = `keyword:${keyword}`
+  }
+
+  globalSearchModel.value = queryStr
+}
+
+const unselectedSectionsWithMatchingItems = computed(() => {
+  if (selectedInsights.value.length === 0) return []
+
+  const unselectedSections = sections.value.filter(s => !activeSections.value.includes(s.id))
+  if (unselectedSections.length === 0) return []
+
+  const matchingSections: typeof sections.value = []
+
+  for (const section of unselectedSections) {
+    const hasMatch = section.items.some(item => {
+      const targetName = item.packageName || item.name
+      const outdated = insights.outdatedDeps.value?.[item.name]
+      return selectedInsights.value.some(id => {
+        switch (id) {
+          case 'major':
+            return outdated ? outdated.majorsBehind > 0 : false
+          case 'minor':
+            return outdated ? outdated.majorsBehind === 0 && outdated.minorsBehind > 0 : false
+          case 'patch':
+            return outdated
+              ? outdated.majorsBehind === 0 &&
+                  outdated.minorsBehind === 0 &&
+                  outdated.resolved !== outdated.latest
+              : false
+          case 'vulnerable':
+            return !!getVulnerableDepInfo(targetName, insights.vulnTree.value)
+          case 'deprecated':
+            return !!getDeprecatedDepInfo(targetName, insights.vulnTree.value)
+          case 'replacement':
+            return !!insights.replacementDeps.value?.[item.name]
+          default:
+            return false
+        }
+      })
+    })
+
+    if (hasMatch) {
+      matchingSections.push(section)
+    }
+  }
+
+  return matchingSections
+})
+
+function enableUnselectedSections() {
+  const idsToAdd = unselectedSectionsWithMatchingItems.value.map(s => s.id)
+  activeSections.value = Array.from(new Set([...activeSections.value, ...idsToAdd]))
+}
+</script>
+
+<template>
+  <DevOnly>
+    <ButtonBase
+      class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
+      classicon="i-simple-icons:skeleton"
+      variant="primary"
+      title="Toggle skeleton loader (development only)"
+      :aria-pressed="showSkeleton"
+      @click="showSkeleton = !showSkeleton"
+    >
+      <span class="text-xs">Skeleton</span>
+    </ButtonBase>
+  </DevOnly>
+  <main class="flex-1 pb-8">
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="resolvedVersion"
+      :display-version="displayVersion"
+      :latest-version="latestVersion"
+      :version-url-pattern="versionUrlPattern"
+      page="dependencies"
+    />
+
+    <div v-if="isPkgLoading" class="container py-20 text-center">
+      <div class="i-svg-spinners:ring-resize w-8 h-8 mx-auto text-fg-muted" />
+    </div>
+
+    <div
+      v-else-if="pkgStatus === 'error' || resolvedStatus === 'error'"
+      role="alert"
+      class="flex flex-col items-center py-20 text-center container w-full"
+    >
+      <h1 class="font-mono text-2xl font-medium mb-4">
+        {{ $t('package.not_found') }}
+      </h1>
+      <p class="text-fg-muted mb-8">
+        {{ $t('package.not_found_message') }}
+      </p>
+      <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+        $t('common.go_back_home')
+      }}</LinkBase>
+    </div>
+
+    <div
+      v-else-if="sections.length === 0 && pkgStatus === 'success' && resolvedStatus === 'success'"
+      class="container py-20 text-center"
+    >
+      <p class="text-fg-muted mb-4">{{ $t('package.dependencies.none') }}</p>
+      <LinkBase variant="button-secondary" :to="packageRoute(packageName, requestedVersion)">{{
+        $t('code.back_to_package')
+      }}</LinkBase>
+    </div>
+
+    <article v-else-if="sections.length > 0" id="package-article" class="container w-full">
+      <DependenciesInsightsSummary
+        v-model:selected-insights="selectedInsights"
+        :sections="sections"
+        :show-skeleton="showSkeleton"
+        :insights="insights"
+        :package-name="packageName"
+      />
+
+      <div class="py-4">
+        <DependenciesToolbar
+          v-model:filter="filter"
+          v-model:sort="sort"
+          v-model:view-mode="viewMode"
+          v-model:active-sections="activeSections"
+          :columns="columns"
+          :filtered-count="filteredItems.length"
+          :total-count="allSectionItems.length"
+          :sections="sections"
+          @toggle-column="toggleColumn"
+          @reset-columns="resetColumns"
+        />
+
+        <div
+          v-if="unselectedSectionsWithMatchingItems.length > 0"
+          class="my-3 p-3 rounded-md bg-amber-500/10 border border-amber-500/20 text-amber-800 dark:text-amber-200 text-xs font-mono flex items-center justify-between gap-2"
+        >
+          <div class="flex items-center gap-2">
+            <span
+              class="i-lucide:triangle-alert w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400"
+              aria-hidden="true"
+            />
+            <span>{{
+              $t('package.dependencies.insights.unselected_sections_warning', {
+                sections: unselectedSectionsWithMatchingItems.map(s => s.id).join(', '),
+              })
+            }}</span>
+          </div>
+          <button
+            type="button"
+            class="underline font-sans font-medium hover:text-fg transition-colors cursor-pointer shrink-0"
+            @click="enableUnselectedSections"
+          >
+            {{ $t('package.dependencies.insights.enable_sections') }}
+          </button>
+        </div>
+
+        <div v-if="isInsightsLoading" class="py-12 text-center">
+          <div class="i-svg-spinners:ring-resize w-6 h-6 mx-auto text-fg-muted" />
+        </div>
+
+        <DependenciesList
+          v-else-if="filteredItems.length > 0"
+          :items="filteredItems"
+          :view-mode="viewMode"
+          :columns="columns"
+          :show-skeleton="showSkeleton"
+          :sort="sort"
+          :insights="insights"
+          :filters="structuredFilters"
+          @update:sort="sort = $event"
+          @click-keyword="handleKeywordClick"
+        />
+
+        <p v-else class="py-12 text-center text-fg-subtle font-mono text-sm">
+          {{ $t('package.dependencies.no_matches') }}
+        </p>
+      </div>
+    </article>
+  </main>
+</template>
diff --git a/app/pages/package-stats/[[org]]/[packageName].vue b/app/pages/package-stats/[[org]]/[packageName].vue
index d9fa54ef1f..54ea188743 100644
--- a/app/pages/package-stats/[[org]]/[packageName].vue
+++ b/app/pages/package-stats/[[org]]/[packageName].vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import {
+  getPackageDependencySections,
+  getNormalizedDependenciesFromPackageVersion,
+} from '~/utils/npm/package-dependency-sections'
+
 definePageMeta({
   name: 'stats',
   path: '/package-stats/:org?/:packageName/v/:version',
@@ -14,7 +19,22 @@ const packageName = computed(() =>
 )
 const version = computed(() => route.params.version)
 
-const { data: pkg } = usePackage(packageName, version)
+const { data: resolvedVersion } = await useResolvedVersion(packageName, version)
+
+const { data: pkg, status: pkgStatus } = await usePackage(
+  packageName,
+  () => resolvedVersion.value ?? version.value,
+)
+
+const displayVersion = computed(() => pkg.value?.requestedVersion ?? null)
+const sections = computed(() => getPackageDependencySections(displayVersion.value))
+
+const allDependencies = computed(() => {
+  return getNormalizedDependenciesFromPackageVersion(pkg.value?.requestedVersion)
+})
+
+const insights = usePackageDependencyInsights(packageName, resolvedVersion, allDependencies)
+
 const { versions: commandPaletteVersions, ensureLoaded: ensureCommandPaletteVersionsLoaded } =
   useCommandPalettePackageVersions(packageName)
 
@@ -99,8 +119,10 @@ useSeoMeta({
       page="stats"
     />
 
-    <section class="container w-full py-8">
-      <h2 class="text-fg-muted mb-2 uppercase">{{ $t('package.stats.main_information') }}</h2>
+    <section class="container w-full py-4">
+      <h2 class="text-fg-muted mb-2 uppercase text-xs font-semibold tracking-wider">
+        {{ $t('package.stats.main_information') }}
+      </h2>
       <dl
         class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-y-2 gap-x-4 border-y-border border-y py-2"
       >
@@ -121,7 +143,16 @@ useSeoMeta({
           </dd>
         </div>
       </dl>
+
+      <DependenciesInsightsSummary
+        :insights="insights"
+        :sections="sections"
+        :show-skeleton="pkgStatus === 'pending' || pkgStatus === 'idle'"
+        :package-name="packageName"
+        :interactive="false"
+      />
     </section>
+
     <div class="container w-full flex max-lg:flex-col gap-8 pb-16">
       <div class="flex-1">
         <section id="trends">
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 28615fb30f..68734fdf81 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -370,16 +370,9 @@ const sizeTooltip = computed(() => {
   return chunks.filter(Boolean).join('\n')
 })
 
-const hasDependencies = computed(() => {
-  if (!displayVersion.value) return false
-  const deps = displayVersion.value.dependencies
-  const peerDeps = displayVersion.value.peerDependencies
-  const optionalDeps = displayVersion.value.optionalDependencies
-  return (
-    (deps && Object.keys(deps).length > 0) ||
-    (peerDeps && Object.keys(peerDeps).length > 0) ||
-    (optionalDeps && Object.keys(optionalDeps).length > 0)
-  )
+const dependenciesTabLink = computed(() => {
+  if (!pkg.value || !resolvedVersion.value) return null
+  return dependenciesRoute(pkg.value.name, resolvedVersion.value)
 })
 
 // Vulnerability count for the stats banner
@@ -601,7 +594,16 @@ const showSkeleton = shallowRef(false)
               <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
                 <span class="flex items-center gap-1">
                   <!-- Direct deps (muted) -->
-                  <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
+                  <NuxtLink
+                    v-if="dependenciesTabLink"
+                    :to="dependenciesTabLink"
+                    class="text-fg-muted hover:text-fg transition-colors decoration-none"
+                  >
+                    {{ numberFormatter.format(dependencyCount) }}
+                  </NuxtLink>
+                  <span v-else class="text-fg-muted">{{
+                    numberFormatter.format(dependencyCount)
+                  }}</span>
 
                   <!-- Total transitive deps in parens -->
                   <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
@@ -972,17 +974,6 @@ const showSkeleton = shallowRef(false)
               :install-scripts="displayVersion.installScripts"
             />
 
-            <!-- Dependencies -->
-            <PackageDependencies
-              v-if="hasDependencies && resolvedVersion && displayVersion"
-              :package-name="pkg.name"
-              :version="resolvedVersion"
-              :dependencies="displayVersion.dependencies"
-              :peer-dependencies="displayVersion.peerDependencies"
-              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
-              :optional-dependencies="displayVersion.optionalDependencies"
-            />
-
             <!-- Keywords -->
             <PackageKeywords :keywords="displayVersion?.keywords" />
 
diff --git a/app/utils/npm/package-dependency-sections.ts b/app/utils/npm/package-dependency-sections.ts
new file mode 100644
index 0000000000..f340727f47
--- /dev/null
+++ b/app/utils/npm/package-dependency-sections.ts
@@ -0,0 +1,191 @@
+import type { PackumentVersion } from '#shared/types/npm-registry'
+import type {
+  DepFlag,
+  DepRegistry,
+  DepSectionId,
+  PackageDependencyItem,
+  PackageDependencySection,
+} from '#shared/types/package-dependencies'
+import { parsePackageSpec } from '#shared/utils/parse-package-param'
+
+const SECTION_ORDER: DepSectionId[] = [
+  'dependencies',
+  'devDependencies',
+  'peerDependencies',
+  'optionalDependencies',
+  'bundledDependencies',
+]
+
+export function inferDependencyRegistry(name: string, range: string): DepRegistry {
+  if (name.startsWith('@jsr/')) return 'jsr'
+  if (range.startsWith('jsr:') || range.startsWith('npm:@jsr/')) return 'jsr'
+  return 'npm'
+}
+
+export interface DependencySpec {
+  name: string
+  version: string
+}
+
+export function normalizeDependencies(
+  record: Record<string, string> | undefined,
+): Record<string, DependencySpec> {
+  if (!record) return {}
+  const normalized: Record<string, DependencySpec> = {}
+  for (const [key, range] of Object.entries(record)) {
+    if (range.startsWith('npm:') || range.startsWith('jsr:')) {
+      const { name, version } = parsePackageSpec(range)
+      normalized[key] = {
+        name,
+        version: version ?? '*',
+      }
+    } else {
+      normalized[key] = {
+        name: key,
+        version: range,
+      }
+    }
+  }
+  return normalized
+}
+
+export function getNormalizedDependenciesFromPackageVersion(
+  reqVer: Partial<PackumentVersion> | null | undefined,
+): Record<string, DependencySpec> | undefined {
+  if (!reqVer) return undefined
+  const rawRecord: Record<string, string> = {
+    ...reqVer.dependencies,
+    ...reqVer.devDependencies,
+    ...reqVer.peerDependencies,
+    ...reqVer.optionalDependencies,
+  }
+  if (Array.isArray(reqVer.bundledDependencies)) {
+    for (const name of reqVer.bundledDependencies) {
+      if (!rawRecord[name]) {
+        rawRecord[name] = reqVer.dependencies?.[name] ?? '*'
+      }
+    }
+  }
+  return normalizeDependencies(rawRecord)
+}
+
+function entriesToItems(
+  record: Record<string, string> | undefined,
+  bundledSet: Set<string>,
+  extraFlags?: (name: string) => DepFlag[],
+): PackageDependencyItem[] {
+  if (!record) return []
+
+  return Object.entries(record)
+    .map(([name, rawRange]) => {
+      const flags: DepFlag[] = [...(extraFlags?.(name) ?? [])]
+      if (bundledSet.has(name) && !flags.includes('bundled')) flags.push('bundled')
+      let packageName = name
+      let range = rawRange
+
+      if (rawRange.startsWith('npm:') || rawRange.startsWith('jsr:')) {
+        const parsed = parsePackageSpec(rawRange)
+        packageName = parsed.name
+        range = parsed.version ?? '*'
+      }
+
+      return {
+        name,
+        packageName,
+        range,
+        registry: inferDependencyRegistry(name, rawRange),
+        flags,
+      }
+    })
+    .sort((a, b) => a.name.localeCompare(b.name))
+}
+
+export function getPackageDependencySections(
+  version: Partial<PackumentVersion> | null | undefined,
+): PackageDependencySection[] {
+  if (!version) return []
+
+  const bundledDeps = Array.isArray(version.bundledDependencies)
+    ? version.bundledDependencies
+    : typeof version.bundledDependencies === 'boolean' && version.bundledDependencies
+      ? Object.keys(version.dependencies ?? {})
+      : []
+  const bundledSet = new Set(bundledDeps)
+
+  const sections: PackageDependencySection[] = [
+    {
+      id: 'dependencies',
+      items: entriesToItems(version.dependencies, bundledSet),
+    },
+    {
+      id: 'devDependencies',
+      items: entriesToItems(version.devDependencies, bundledSet),
+    },
+    {
+      id: 'peerDependencies',
+      items: entriesToItems(version.peerDependencies, bundledSet, name => {
+        const flags: DepFlag[] = []
+        if (version.peerDependenciesMeta?.[name]?.optional) flags.push('optional')
+        return flags
+      }),
+    },
+    {
+      id: 'optionalDependencies',
+      items: entriesToItems(version.optionalDependencies, bundledSet, () => ['optional']),
+    },
+  ]
+
+  const bundledOnly = bundledDeps
+    .filter(name => {
+      const inOther =
+        name in (version.dependencies ?? {}) ||
+        name in (version.devDependencies ?? {}) ||
+        name in (version.peerDependencies ?? {}) ||
+        name in (version.optionalDependencies ?? {})
+      return !inOther
+    })
+    .map((name): PackageDependencyItem => {
+      const rawRange = version.dependencies?.[name] ?? '*'
+      let packageName = name
+      let range = rawRange
+
+      if (rawRange.startsWith('npm:') || rawRange.startsWith('jsr:')) {
+        const parsed = parsePackageSpec(rawRange)
+        packageName = parsed.name
+        range = parsed.version ?? '*'
+      }
+
+      return {
+        name,
+        packageName,
+        range,
+        registry: inferDependencyRegistry(name, rawRange),
+        flags: ['bundled'],
+      }
+    })
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  if (bundledOnly.length > 0) {
+    sections.push({ id: 'bundledDependencies', items: bundledOnly })
+  }
+
+  return sections
+    .filter(section => section.items.length > 0)
+    .sort((a, b) => SECTION_ORDER.indexOf(a.id) - SECTION_ORDER.indexOf(b.id))
+}
+
+export function hasPackageDependencies(
+  version: Partial<PackumentVersion> | null | undefined,
+): boolean {
+  return getPackageDependencySections(version).length > 0
+}
+
+export function getDefaultDependencySection(
+  sections: PackageDependencySection[],
+): DepSectionId | null {
+  return sections[0]?.id ?? null
+}
+
+export function isDepSectionId(value: string): value is DepSectionId {
+  return SECTION_ORDER.includes(value as DepSectionId)
+}
diff --git a/app/utils/npm/outdated-dependencies.ts b/app/utils/npm/problematic-dependencies.ts
similarity index 52%
rename from app/utils/npm/outdated-dependencies.ts
rename to app/utils/npm/problematic-dependencies.ts
index 3843d994d0..420c4c55ec 100644
--- a/app/utils/npm/outdated-dependencies.ts
+++ b/app/utils/npm/problematic-dependencies.ts
@@ -1,4 +1,5 @@
 import type { VersionDifference } from 'verkit'
+import type { PackageDependencyInsights } from '../../composables/usePackageDependencyInsights'
 
 /** Information about an outdated dependency */
 export interface OutdatedDependencyInfo {
@@ -52,17 +53,57 @@ export function getOutdatedTooltip(
 /**
  * Get CSS class for a dependency version based on outdated status
  */
-export function getVersionClass(info: OutdatedDependencyInfo | undefined): string {
-  if (!info) return 'text-fg-subtle'
-  // Green for up-to-date (e.g. "latest" constraint)
-  if (info.majorsBehind === 0 && info.minorsBehind === 0 && info.resolved === info.latest) {
-    return 'text-green-700 dark:text-green-500 cursor-help'
+export function getVersionClass(
+  dep: string,
+  insights: Pick<PackageDependencyInsights, 'outdatedDeps' | 'replacementDeps'> | undefined,
+): string {
+  const outdated = insights?.outdatedDeps.value?.[dep]
+  if (!outdated) {
+    // Amber for replacements (not outdated)
+    if (insights?.replacementDeps.value?.[dep]) {
+      return 'text-amber-700 dark:text-amber-500'
+    }
+    // Normal
+    return 'text-fg-subtle'
   }
   // Red for major versions behind
-  if (info.majorsBehind > 0) return 'text-red-700 dark:text-red-500 cursor-help'
-  // if (info.majorsBehind > 0) return 'text-#db0000 dark:text-red-500 cursor-help'
+  if (outdated.majorsBehind > 0) return 'text-red-700 dark:text-red-500'
+  // if (info.majorsBehind > 0) return 'text-#db0000 dark:text-red-500'
   // Orange for minor versions behind
-  if (info.minorsBehind > 0) return 'text-orange-700 dark:text-orange-500 cursor-help'
+  if (outdated.minorsBehind > 0) return 'text-orange-700 dark:text-orange-500'
   // Yellow for patch versions behind
-  return 'text-yellow-700 dark:text-yellow-500 cursor-help'
+  return 'text-yellow-700 dark:text-yellow-500'
+}
+
+export function getVulnerableDepInfo(
+  depName: string,
+  vulnTree: VulnerabilityTreeResult | undefined,
+) {
+  if (!vulnTree?.vulnerablePackages) return null
+  return vulnTree.vulnerablePackages.find(
+    p => p.name === depName && (p.depth === 'root' || p.depth === 'direct'),
+  )
+}
+
+export function getDeprecatedDepInfo(
+  depName: string,
+  vulnTree: VulnerabilityTreeResult | undefined,
+  fallbackDeprecated?: string | boolean,
+) {
+  if (vulnTree?.deprecatedPackages) {
+    const found = vulnTree.deprecatedPackages.find(
+      p => p.name === depName && (p.depth === 'root' || p.depth === 'direct'),
+    )
+    if (found) return found
+  }
+  if (fallbackDeprecated) {
+    return {
+      name: depName,
+      version: '',
+      depth: 'root' as const,
+      path: [depName],
+      message: typeof fallbackDeprecated === 'string' ? fallbackDeprecated : '',
+    }
+  }
+  return null
 }
diff --git a/app/utils/router.ts b/app/utils/router.ts
index 2ea9c0700b..af257cb003 100644
--- a/app/utils/router.ts
+++ b/app/utils/router.ts
@@ -1,4 +1,5 @@
 import type { RouteLocationRaw } from 'vue-router'
+import type { DepSectionId } from '#shared/types/package-dependencies'
 import { splitPackageName } from '~/utils/package-name'
 
 export function packageRoute(
@@ -130,3 +131,26 @@ export function packageStatsRoute(
     },
   }
 }
+
+export function dependenciesRoute(
+  packageName: string,
+  version?: string | null,
+  sections?: DepSectionId | DepSectionId[],
+): RouteLocationRaw {
+  const { org, name } = splitPackageName(packageName)
+  const nameSegments = org ? [org, name] : [name]
+  const path = version ? [...nameSegments, 'v', version.replace(/\s+/g, '')] : nameSegments
+
+  let sectionsQuery: string | undefined
+  if (Array.isArray(sections)) {
+    sectionsQuery = sections.length > 0 ? sections.join(',') : undefined
+  } else if (sections) {
+    sectionsQuery = sections
+  }
+
+  return {
+    name: 'dependencies',
+    params: { path: path as [string, ...string[]] },
+    query: sectionsQuery ? { sections: sectionsQuery } : undefined,
+  }
+}
diff --git a/app/utils/versions.ts b/app/utils/versions.ts
index b848bf3442..e15ca87265 100644
--- a/app/utils/versions.ts
+++ b/app/utils/versions.ts
@@ -1,9 +1,28 @@
-import { compare, normalizeRange, satisfies, tryParse } from 'verkit'
+import {
+  compare,
+  findMinimumForRange,
+  isValidRange,
+  normalize,
+  normalizeRange,
+  satisfies,
+  tryParse,
+} from 'verkit'
 
 /**
  * Utilities for handling npm package versions and dist-tags
  */
 
+/**
+ * Resolves a semver range string to its minimum normalized version string.
+ * Fallbacks to original range if minimum version cannot be resolved.
+ */
+export function resolveMinVersion(range: string | null | undefined): string | null {
+  if (!range) return null
+  if (!isValidRange(range)) return range
+  const min = findMinimumForRange(range)
+  return (min && normalize(min)) || range
+}
+
 /** Parsed semver version components */
 export interface ParsedVersion {
   major: number
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index 8d6343938b..057d31d977 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -65,6 +65,24 @@
       "view_org_packages": "عرض حزم هذه المؤسسة"
     }
   },
+  "command_palette": {
+    "keyboard_shortcuts": {},
+    "state": {},
+    "groups": {},
+    "actions": {},
+    "connections": {},
+    "navigation": {},
+    "links": {},
+    "package_links": {},
+    "theme": {},
+    "package": {},
+    "package_actions": {},
+    "code": {},
+    "diff": {},
+    "version": {},
+    "status": {},
+    "announcements": {}
+  },
   "nav": {
     "main_navigation": "الصفحة الرئيسية",
     "popular_packages": "الحزم الشائعة",
@@ -81,6 +99,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "الإعدادات",
     "tagline": "تخصيص تجربتك على npmx",
@@ -117,7 +138,8 @@
     "translation_progress": "تقدم الترجمة",
     "background_themes": {
       "label": "درجة خلفية الصفحة"
-    }
+    },
+    "foreground_themes": {}
   },
   "i18n": {
     "missing_keys": "{count} ترجمات مفقودة | ترجمة واحدة مفقودة | ترجمتان مفقودتان | {count} ترجمات مفقودة | {count} ترجمة مفقودة | {count} ترجمة مفقودة",
@@ -171,6 +193,7 @@
       "no_reason": "لم يتم تقديم سبب"
     },
     "size_increase": {},
+    "size_decrease": {},
     "replacement": {
       "title": "قد لا تحتاج إلى هذه التبعية.",
       "native": "يمكن استبدالها بـ {replacement}، المتوفرة منذ Node {nodeVersion}.",
@@ -245,6 +268,7 @@
       "title": "تشغيل",
       "locally": "تشغيل محليًا"
     },
+    "command": {},
     "readme": {
       "title": "README (إقرأني)",
       "no_readme": "لا يتوفر README.",
@@ -315,27 +339,20 @@
       "no_matches": "لا توجد إصدارات تطابق هذا النطاق",
       "copy_alt": {}
     },
+    "timeline": {
+      "chart": {
+        "copy_alt": {}
+      }
+    },
     "dependencies": {
       "title": "التبعيات ({count})",
-      "list_label": "تبعيات الحزمة",
-      "show_all": "عرض كل التبعيات ({count})",
+      "insights": {},
       "optional": "اختياري",
-      "view_vulnerabilities": "عرض الثغرات",
       "outdated_major": "أقدم بـ{count} إصدار رئيسي (الأحدث: {latest}) | أقدم بإصدار رئيسي واحد (الأحدث: {latest}) | أقدم بإصدارين رئيسيين (الأحدث: {latest}) | أقدم بـ{count} إصدارات رئيسية (الأحدث: {latest}) | أقدم بـ{count} إصدار رئيسي (الأحدث: {latest}) | أقدم بـ{count} إصدار رئيسي (الأحدث: {latest})",
       "outdated_minor": "أقدم بـ{count} إصدار ثانوي (الأحدث: {latest}) | أقدم بإصدار ثانوي واحد (الأحدث: {latest}) | أقدم بإصدارين ثانويين (الأحدث: {latest}) | أقدم بـ{count} إصدارات ثانوية (الأحدث: {latest}) | أقدم بـ{count} إصدار ثانوي (الأحدث: {latest}) | أقدم بـ{count} إصدار ثانوي (الأحدث: {latest})",
       "outdated_patch": "تحديث تصحيحي متاح (الأحدث: {latest})",
       "has_replacement": "هذه التبعية لها بدائل مقترحة"
     },
-    "peer_dependencies": {
-      "title": "تبعيات النظير ({count})",
-      "list_label": "تبعيات نظير الحزمة",
-      "show_all": "عرض كل تبعيات النظير ({count})"
-    },
-    "optional_dependencies": {
-      "title": "تبعيات اختيارية ({count})",
-      "list_label": "تبعيات الحزمة الاختيارية",
-      "show_all": "عرض كل التبعيات الاختيارية ({count})"
-    },
     "maintainers": {
       "title": "المشرفون",
       "list_label": "مشرفو الحزمة",
@@ -351,6 +368,7 @@
       "show_less": "(عرض أقل)"
     },
     "trends": {
+      "chart_assistive_text": {},
       "granularity": "مستوى التفصيل",
       "granularity_daily": "يومي",
       "granularity_weekly": "أسبوعي",
@@ -374,7 +392,8 @@
         "likes": "الإعجابات",
         "contributors": "المساهمون"
       },
-      "copy_alt": {}
+      "copy_alt": {},
+      "embedding": {}
     },
     "downloads": {
       "title": "التنزيلات الأسبوعية",
@@ -470,6 +489,9 @@
     },
     "download": {}
   },
+  "leaderboard": {
+    "likes": {}
+  },
   "connector": {
     "modal": {
       "title": "الموصل المحلي",
@@ -848,6 +870,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "اتصال",
     "account": "الحساب",
@@ -920,6 +961,9 @@
       "packages_selected": "{count}/{max} حزمة محددة.",
       "add_hint": "أضف حزمتين على الأقل للمقارنة."
     },
+    "scatter_chart": {
+      "copy_alt": {}
+    },
     "no_dependency": {
       "label": "(بدون تبعية)",
       "typeahead_title": "ماذا كان سيفعل James؟",
@@ -994,7 +1038,11 @@
         "vulnerabilities": {
           "label": "الثغرات",
           "description": "ثغرات أمنية معروفة"
-        }
+        },
+        "githubStars": {},
+        "githubForks": {},
+        "githubIssues": {},
+        "createdAt": {}
       },
       "values": {
         "any": "أي من",
@@ -1133,5 +1181,23 @@
   "translation_status": {
     "table": {}
   },
-  "action_bar": {}
+  "vacations": {
+    "what": {},
+    "meantime": {},
+    "return": {},
+    "stats": {
+      "subtitle": {}
+    }
+  },
+  "action_bar": {},
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
+  },
+  "changelog": {
+    "error": {}
+  }
 }
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index 4737416609..1d21b715cd 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -74,6 +74,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -127,6 +128,9 @@
       "more_replies": "daha {count} cavab... | daha {count} cavab..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "tənzimləmələr",
     "tagline": "npmx təcrübənizi fərdiləşdirin",
@@ -167,6 +171,7 @@
     "background_themes": {
       "label": "Fon tonu"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Klaviatura qısayollarını aktivləşdir",
     "keyboard_shortcuts_enabled_description": "Klaviatura qısayolları digər brauzer və ya sistem qısayolları ilə toqquşarsa deaktiv edilə bilər"
   },
@@ -327,6 +332,7 @@
       "title": "İşə sal",
       "locally": "Lokal işə sal"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README mövcud deyil.",
@@ -414,25 +420,13 @@
     },
     "dependencies": {
       "title": "Asılılıq ({count}) | Asılılıqlar ({count})",
-      "list_label": "Paket asılılıqları",
-      "show_all": "{count} asılılığı göstər | bütün {count} asılılığı göstər",
+      "insights": {},
       "optional": "əlavə",
-      "view_vulnerabilities": "Zəiflikləri göstər",
       "outdated_major": "{count} major versiya geridə (son: {latest}) | {count} major versiya geridə (son: {latest})",
       "outdated_minor": "{count} minor versiya geridə (son: {latest}) | {count} minor versiya geridə (son: {latest})",
       "outdated_patch": "Patch yeniləməsi mövcuddur (son: {latest})",
       "has_replacement": "Bu asılılığın tövsiyə olunan əvəzləyiciləri var"
     },
-    "peer_dependencies": {
-      "title": "Peer Asılılıq ({count}) | Peer Asılılıqlar ({count})",
-      "list_label": "Paket peer asılılıqları",
-      "show_all": "{count} peer asılılığı göstər | bütün {count} peer asılılığı göstər"
-    },
-    "optional_dependencies": {
-      "title": "Əlavə Asılılıq ({count}) | Əlavə Asılılıqlar ({count})",
-      "list_label": "Paket əlavə asılılıqları",
-      "show_all": "{count} əlavə asılılığı göstər | bütün {count} əlavə asılılığı göstər"
-    },
     "maintainers": {
       "title": "Dəstəkçilər",
       "list_label": "Paket dəstəkçiləri",
@@ -499,7 +493,8 @@
         "compare": "Paket endirmə müqayisəsi xətt diaqramı: {packages}.",
         "single_package": "{package} paketi üçün endirmə xətt diaqramı.",
         "general_description": "Y oxu endirmələrin sayını təmsil edir. X oxu tarix aralığını təmsil edir, {start_date}-dən {end_date}-ə, {granularity} zaman dövrü ilə.{estimation_notice} {packages_analysis}. {watermark}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Həftəlik Endirmələr",
@@ -986,6 +981,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "qoşul",
     "account": "Hesab",
@@ -1139,6 +1153,7 @@
           "description": "Məlum təhlükəsizlik zəiflikləri"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index d289b44e80..22b623bdd5 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -66,6 +66,7 @@
     }
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -98,6 +99,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "настройки",
     "tagline": "персонализирайте вашето npmx изживяване",
@@ -136,6 +140,7 @@
     "background_themes": {
       "label": "Фонов нюанс"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Активиране на клавишни комбинации",
     "keyboard_shortcuts_enabled_description": "Клавишните комбинации могат да бъдат деактивирани, ако влизат в конфликт с други браузърни или системни преки пътища"
   },
@@ -290,6 +295,7 @@
       "title": "Изпълнение",
       "locally": "Изпълнение локално"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Няма наличен README.",
@@ -377,25 +383,13 @@
     },
     "dependencies": {
       "title": "Зависимост ({count}) | Зависимости ({count})",
-      "list_label": "Зависимости на пакета",
-      "show_all": "показване на {count} зависимост | показване на всички {count} зависимости",
+      "insights": {},
       "optional": "опционална",
-      "view_vulnerabilities": "Преглед на уязвимости",
       "outdated_major": "{count} major версия назад (последна: {latest}) | {count} major версии назад (последна: {latest})",
       "outdated_minor": "{count} minor версия назад (последна: {latest}) | {count} minor версии назад (последна: {latest})",
       "outdated_patch": "Налична patch актуализация (последна: {latest})",
       "has_replacement": "Тази зависимост има предложени замени"
     },
-    "peer_dependencies": {
-      "title": "Peer зависимост ({count}) | Peer зависимости ({count})",
-      "list_label": "Peer зависимости на пакета",
-      "show_all": "показване на {count} peer зависимост | показване на всички {count} peer зависимости"
-    },
-    "optional_dependencies": {
-      "title": "Опционална зависимост ({count}) | Опционални зависимости ({count})",
-      "list_label": "Опционални зависимости на пакета",
-      "show_all": "показване на {count} опционална зависимост | показване на всички {count} опционални зависимости"
-    },
     "maintainers": {
       "title": "Поддържащи",
       "list_label": "Поддържащи на пакета",
@@ -460,7 +454,8 @@
         "compare": "Линейна диаграма за сравнение на изтегляния на пакети за: {packages}.",
         "single_package": "Линейна диаграма на изтегляния за пакета {package}.",
         "general_description": "Оста Y представлява броя на изтеглянията. Оста X представлява диапазона от дати, от {start_date} до {end_date}, с {granularity} времеви период.{estimation_notice} {packages_analysis}. {watermark}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Седмични изтегляния",
@@ -943,6 +938,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "свързване",
     "account": "Акаунт",
@@ -1096,6 +1110,7 @@
           "description": "Известни уязвимости в сигурността"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 09fb25ab7a..371741857b 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -319,6 +319,7 @@
       "slate": "স্লেট",
       "black": "কালো"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "কীবোর্ড শর্টকাট সক্রিয় করুন",
     "keyboard_shortcuts_enabled_description": "কীবোর্ড শর্টকাট নিষ্ক্রিয় করা যেতে পারে যদি তারা অন্যান্য ব্রাউজার বা সিস্টেম শর্টকাটের সঙ্গে দুইপাশের সমস্যা তৈরি করে",
     "enable_code_ligatures": "কোডে লিগচারস সক্রিয় করুন",
@@ -526,6 +527,7 @@
       "title": "চালান",
       "locally": "স্থানীয়ভাবে চালান"
     },
+    "command": {},
     "readme": {
       "title": "রিডমি",
       "no_readme": "README উপলব্ধ নেই।",
@@ -657,25 +659,12 @@
     },
     "dependencies": {
       "title": "নির্ভরতা ({count})",
-      "list_label": "প্যাকেজ নির্ভরতা",
-      "show_all": "{count}টি নির্ভরতা দেখান | সব {count}টি নির্ভরতা দেখান",
+      "insights": {},
       "optional": "ঐচ্ছিক",
-      "view_vulnerabilities": "দুর্বলতা দেখুন",
       "outdated_major": "{count}টি মেজর ভার্সন পিছিয়ে (সর্বশেষ: {latest}) | {count}টি মেজর ভার্সন পিছিয়ে (সর্বশেষ: {latest})",
       "outdated_minor": "{count}টি মাইনর ভার্সন পিছিয়ে (সর্বশেষ: {latest}) | {count}টি মাইনর ভার্সন পিছিয়ে (সর্বশেষ: {latest})",
       "outdated_patch": "প্যাচ আপডেট উপলব্ধ (সর্বশেষ: {latest})",
-      "has_replacement": "এই নির্ভরতা প্রতিস্থাপনের পরামর্শ দিয়েছে",
-      "vulnerabilities_count": "{count} দুর্বলতা | {count} দুর্বলতা"
-    },
-    "peer_dependencies": {
-      "title": "পিয়ার নির্ভরতা ({count})",
-      "list_label": "প্যাকেজ পিয়ার নির্ভরতা",
-      "show_all": "{count}টি পিয়ার নির্ভরতা দেখান | সব {count}টি পিয়ার নির্ভরতা দেখান"
-    },
-    "optional_dependencies": {
-      "title": "ঐচ্ছিক নির্ভরতা ({count})",
-      "list_label": "প্যাকেজ ঐচ্ছিক নির্ভরতা",
-      "show_all": "{count}টি ঐচ্ছিক নির্ভরতা দেখান | সব {count}টি ঐচ্ছিক নির্ভরতা দেখান"
+      "has_replacement": "এই নির্ভরতা প্রতিস্থাপনের পরামর্শ দিয়েছে"
     },
     "maintainers": {
       "title": "রক্ষণাবেক্ষণকারী",
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index bf39beef84..32b210a1b6 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -316,6 +316,7 @@
       "slate": "Břidlice",
       "black": "Černá"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Povolit klávesové zkratky",
     "keyboard_shortcuts_enabled_description": "Klávesové zkratky lze zakázat, pokud se střetávají s jinými zkratkami prohlížeče nebo systému",
     "enable_code_ligatures": "Zapnout ligatury v kódu",
@@ -523,6 +524,7 @@
       "title": "Spustit",
       "locally": "Spustit lokálně"
     },
+    "command": {},
     "readme": {
       "title": "ČTI MĚ",
       "no_readme": "Žádné ČTI MĚ NENÍ k dispozici.",
@@ -648,25 +650,12 @@
     },
     "dependencies": {
       "title": "Závislosti ({count})",
-      "list_label": "Závislosti balíčku",
-      "show_all": "zobrazit všechny závislosti ({count})",
+      "insights": {},
       "optional": "volitelné",
-      "view_vulnerabilities": "Zobrazit zranitelnosti",
       "outdated_major": "o {count} hlavní verzi pozadu (nejnovější: {latest}) | o {count} hlavní verze pozadu (nejnovější: {latest}) | o {count} hlavních verzích pozadu (nejnovější: {latest})",
       "outdated_minor": "o {count} vedlejší verzi pozadu (nejnovější: {latest}) | o {count} vedlejší verze pozadu (nejnovější: {latest}) | o {count} vedlejších verzích pozadu (nejnovější: {latest})",
       "outdated_patch": "Aktualizace záplaty dostupná (nejnovější: {latest})",
-      "has_replacement": "Tato závislost má navrhované náhrady",
-      "vulnerabilities_count": "{count} zranitelnost | {count} zranitelnosti | {count} zranitelností"
-    },
-    "peer_dependencies": {
-      "title": "Vzájemné závislosti ({count})",
-      "list_label": "Vzájemné závislosti balíčku",
-      "show_all": "zobrazit všechny vzájemné závislosti ({count})"
-    },
-    "optional_dependencies": {
-      "title": "Volitelné závislosti ({count})",
-      "list_label": "Volitelné závislosti balíčku",
-      "show_all": "zobrazit všechny volitelné závislosti ({count})"
+      "has_replacement": "Tato závislost má navrhované náhrady"
     },
     "maintainers": {
       "title": "Správci",
@@ -1264,6 +1253,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "připojit",
     "account": "Účet",
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 7263064ef2..cf16df2438 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -98,6 +98,7 @@
     "current": "aktuell",
     "here": "du bist hier",
     "connected": "verbunden",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "an",
       "off": "aus"
@@ -229,6 +230,9 @@
       "more_replies": "noch {count} Antwort… | noch {count} Antworten…"
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "einstellungen",
     "tagline": "Passe npmx an deine Vorlieben an",
@@ -284,6 +288,7 @@
       "slate": "Schiefer",
       "black": "Schwarz"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Tastenkombinationen aktivieren",
     "keyboard_shortcuts_enabled_description": "Tastenkombinationen können deaktiviert werden, wenn sie mit anderen Browser- oder Systemkürzeln in Konflikt stehen",
     "enable_code_ligatures": "Ligaturen im Code aktivieren",
@@ -485,6 +490,7 @@
       "title": "Ausführen",
       "locally": "Lokal ausführen"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Keine README verfügbar.",
@@ -610,27 +616,14 @@
     },
     "dependencies": {
       "title": "Abhängigkeit ({count}) | Abhängigkeiten ({count})",
-      "list_label": "Paketabhängigkeiten",
-      "show_all": "{count} Abhängigkeit anzeigen | alle {count} Abhängigkeiten anzeigen",
+      "insights": {},
       "optional": "optional",
-      "view_vulnerabilities": "Sicherheitslücken anzeigen",
       "outdated_major": "{count} Hauptversion zurück (neueste: {latest}) | {count} Hauptversionen zurück (neueste: {latest})",
       "outdated_minor": "{count} Nebenversion zurück (neueste: {latest}) | {count} Nebenversionen zurück (neueste: {latest})",
       "outdated_patch": "Patch-Update verfügbar (aktuellste: {latest})",
       "has_replacement": "Für diese Abhängigkeit gibt es empfohlene Alternativen",
-      "vulnerabilities_count": "{count} Sicherheitslücke | {count} Sicherheitslücken",
       "aliased_to": "Alias für {name}"
     },
-    "peer_dependencies": {
-      "title": "Peer-Abhängigkeit ({count}) | Peer-Abhängigkeiten ({count})",
-      "list_label": "Peer-Abhängigkeiten des Pakets",
-      "show_all": "{count} Peer-Abhängigkeit anzeigen | alle {count} Peer-Abhängigkeiten anzeigen"
-    },
-    "optional_dependencies": {
-      "title": "Optionale Abhängigkeit ({count}) | Optionale Abhängigkeiten ({count})",
-      "list_label": "Optionale Abhängigkeiten des Pakets",
-      "show_all": "{count} optionale Abhängigkeit anzeigen | alle {count} optionalen Abhängigkeiten anzeigen"
-    },
     "maintainers": {
       "title": "Maintainer",
       "list_label": "Paket-Maintainer",
@@ -709,7 +702,8 @@
         "general_description": "Die Y-Achse stellt die Anzahl der Downloads dar. Die X-Achse stellt den Datumsbereich dar, von {start_date} bis {end_date}, mit einem {granularity}en Zeitraum.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Horizontales Balkendiagramm für: {packages}, Vergleich von {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} hat einen Wert von {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Wöchentliche Downloads",
@@ -1221,6 +1215,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "Verbinden",
     "account": "Konto",
@@ -1395,6 +1408,7 @@
           "label": "GitHub-Sterne",
           "description": "Anzahl der Sterne im GitHub-Repository"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "GitHub-Issues",
           "description": "Anzahl der Issues im GitHub-Repository"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1e164af70a..ca33517f05 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -494,6 +494,7 @@
       "issues": "issues",
       "jsr": "jsr",
       "code": "code",
+      "dependencies": "dependencies",
       "docs": "docs",
       "fund": "fund",
       "compare": "compare",
@@ -642,7 +643,7 @@
     "timeline": {
       "load_more": "Load more",
       "load_error": "Failed to load timeline. Please try again later.",
-      "no_stable_versions": "No stable versions to show. Turn off \u201cstable only\u201d to include pre-releases.",
+      "no_stable_versions": "No stable versions to show. Turn off “stable only” to include pre-releases.",
       "size_increase": "Install size increased by {percent}% ({size})",
       "size_decrease": "Install size decreased by {percent}% ({size})",
       "dep_increase": "{count} dependency added | {count} dependencies added",
@@ -681,27 +682,35 @@
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
-      "list_label": "Package dependencies",
-      "show_all": "show {count} dep | show all {count} deps",
+      "insights": {
+        "title": "Dependency Health",
+        "subtitle": "Across all direct dependencies",
+        "tooltip_urgent": "Urgent (prod & bundled)",
+        "tooltip_other": "Total (all sections)",
+        "major_behind": "Major behind",
+        "minor_behind": "Minor behind",
+        "patch_behind": "Patch behind",
+        "vulnerable": "Vulnerable",
+        "deprecated": "Deprecated",
+        "replacements_available": "Replacements available",
+        "clear_filter": "Clear filter ({filter})",
+        "filter_by": "Filter dependencies by {filter}",
+        "unselected_sections_warning": "Matching dependencies exist in unselected sections ({sections}).",
+        "enable_sections": "Show these sections"
+      },
       "optional": "optional",
-      "view_vulnerabilities": "View vulnerabilities",
+      "bundled": "bundled",
+      "all": "All dependencies",
+      "none": "This version has no dependencies.",
+      "no_matches": "No dependencies match your filter.",
+      "filter_placeholder": "Filter dependencies...",
+      "vulnerable": "Vulnerable",
       "outdated_major": "{count} major version behind (latest: {latest}) | {count} major versions behind (latest: {latest})",
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
-      "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities",
       "aliased_to": "Aliased to {name}"
     },
-    "peer_dependencies": {
-      "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
-      "list_label": "Package peer dependencies",
-      "show_all": "show {count} peer dep | show all {count} peer deps"
-    },
-    "optional_dependencies": {
-      "title": "Optional Dependency ({count}) | Optional Dependencies ({count})",
-      "list_label": "Package optional dependencies",
-      "show_all": "show {count} optional dep | show all {count} optional deps"
-    },
     "maintainers": {
       "title": "Maintainers",
       "list_label": "Package maintainers",
@@ -1142,6 +1151,7 @@
     "keywords": "Keywords",
     "more_keywords": "+{count} more",
     "clear_all": "Clear all",
+    "select_all": "Select all",
     "remove_filter": "Remove {label} filter",
     "chips": {
       "search": "Search",
@@ -1583,6 +1593,7 @@
     "dev_dependencies": "Dev Dependencies",
     "peer_dependencies": "Peer Dependencies",
     "optional_dependencies": "Optional Dependencies",
+    "bundled_dependencies": "Bundled Dependencies",
     "no_dependency_changes": "No dependency changes",
     "file_filter_option": {
       "all": "All ({count})",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 3e0823d806..9b244d0cab 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -319,6 +319,7 @@
       "slate": "Pizarra",
       "black": "Negro"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Activar atajos de teclado",
     "keyboard_shortcuts_enabled_description": "Los atajos de teclado pueden desactivarse si entran en conflicto con otros atajos del navegador o del sistema",
     "enable_code_ligatures": "Activar ligaduras en código",
@@ -526,6 +527,7 @@
       "title": "Ejecutar",
       "locally": "Ejecutar localmente"
     },
+    "command": {},
     "readme": {
       "title": "Léeme",
       "no_readme": "No hay README disponible.",
@@ -657,25 +659,12 @@
     },
     "dependencies": {
       "title": "Dependencias ({count})",
-      "list_label": "Dependencias del paquete",
-      "show_all": "mostrar {count} dependencia | mostrar todas las {count} dependencias",
+      "insights": {},
       "optional": "opcional",
-      "view_vulnerabilities": "Ver vulnerabilidades",
       "outdated_major": "{count} versión mayor por detrás (última: {latest}) | {count} versiones mayores por detrás (última: {latest})",
       "outdated_minor": "{count} versión menor por detrás (última: {latest}) | {count} versiones menores por detrás (última: {latest})",
       "outdated_patch": "Actualización de parche disponible (última: {latest})",
-      "has_replacement": "Existen sugerencias para reemplazar esta dependencia",
-      "vulnerabilities_count": "{count} vulnerabilidad | {count} vulnerabilidades"
-    },
-    "peer_dependencies": {
-      "title": "Dependencias Peer ({count})",
-      "list_label": "Dependencias peer del paquete",
-      "show_all": "mostrar {count} dependencia peer | mostrar todas las {count} dependencias peer"
-    },
-    "optional_dependencies": {
-      "title": "Dependencias Opcionales ({count})",
-      "list_label": "Dependencias opcionales del paquete",
-      "show_all": "mostrar {count} dependencia opcional | mostrar todas las {count} dependencias opcionales"
+      "has_replacement": "Existen sugerencias para reemplazar esta dependencia"
     },
     "maintainers": {
       "title": "Mantenedores",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index cf2e06850c..ea1ef15a82 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -98,6 +98,7 @@
     "current": "actuel",
     "here": "vous êtes ici",
     "connected": "connecté",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "activé",
       "off": "désactivé"
@@ -229,6 +230,9 @@
       "more_replies": "{count} réponse supplémentaire... | {count} réponses supplémentaires..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "paramètres",
     "tagline": "personnalisez votre expérience npmx",
@@ -284,6 +288,7 @@
       "slate": "Ardoise",
       "black": "Noir"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Activer les raccourcis clavier",
     "keyboard_shortcuts_enabled_description": "Les raccourcis clavier peuvent être désactivés s'ils entrent en conflit avec d'autres raccourcis du navigateur ou du système",
     "enable_code_ligatures": "Activer les ligatures de code",
@@ -485,6 +490,7 @@
       "title": "Exécuter",
       "locally": "Exécuter localement"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Aucun README disponible.",
@@ -610,25 +616,12 @@
     },
     "dependencies": {
       "title": "Dépendances ({count})",
-      "list_label": "Dépendances du paquet",
-      "show_all": "afficher les {count} dépendances",
+      "insights": {},
       "optional": "optionnelle",
-      "view_vulnerabilities": "Voir les vulnérabilités",
       "outdated_major": "{count} version majeure en retard (dernière : {latest}) | {count} versions majeures en retard (dernière : {latest})",
       "outdated_minor": "{count} version mineure en retard (dernière : {latest}) | {count} versions mineures en retard (dernière : {latest})",
       "outdated_patch": "Mise à jour patch disponible (dernière : {latest})",
-      "has_replacement": "Cette dépendance a des remplacements suggérés",
-      "vulnerabilities_count": "{count} vulnérabilité | {count} vulnérabilités"
-    },
-    "peer_dependencies": {
-      "title": "Dépendances peer ({count})",
-      "list_label": "Dépendances peer du paquet",
-      "show_all": "afficher les {count} dépendances peer"
-    },
-    "optional_dependencies": {
-      "title": "Dépendances optionnelles ({count})",
-      "list_label": "Dépendances optionnelles du paquet",
-      "show_all": "afficher les {count} dépendances optionnelles"
+      "has_replacement": "Cette dépendance a des remplacements suggérés"
     },
     "maintainers": {
       "title": "Mainteneurs",
@@ -1226,6 +1219,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "connexion",
     "account": "Compte",
@@ -1400,6 +1412,7 @@
           "label": "Étoiles GitHub",
           "description": "Nombre d’étoiles du dépôt GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Issues GitHub",
           "description": "Nombre d’issues ouvertes sur GitHub"
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 3217385374..f7e4b0cfa6 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -77,6 +77,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -131,6 +132,9 @@
       "more_replies": "{count} और जवाब... | {count} और जवाब..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "सेटिंग्स",
     "tagline": "अपने npmx अनुभव को अनुकूलित करें",
@@ -185,6 +189,7 @@
       "slate": "स्लेट",
       "black": "काला"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "कीबोर्ड शॉर्टकट सक्षम करें",
     "keyboard_shortcuts_enabled_description": "यदि कीबोर्ड शॉर्टकट अन्य ब्राउज़र या सिस्टम शॉर्टकट से टकराते हैं, तो उन्हें बंद किया जा सकता है"
   },
@@ -352,6 +357,7 @@
       "title": "चलाएं",
       "locally": "स्थानीय रूप से चलाएं"
     },
+    "command": {},
     "readme": {
       "title": "रीडमी",
       "no_readme": "कोई README उपलब्ध नहीं है।",
@@ -448,25 +454,12 @@
     },
     "dependencies": {
       "title": "निर्भरताएँ ({count})",
-      "list_label": "पैकेज निर्भरताएँ",
-      "show_all": "{count} निर्भरता दिखाएं | सभी {count} निर्भरताएँ दिखाएं",
+      "insights": {},
       "optional": "वैकल्पिक",
-      "view_vulnerabilities": "कमजोरियाँ देखें",
       "outdated_major": "{count} मेजर संस्करण पीछे (नवीनतम: {latest}) | {count} मेजर संस्करण पीछे (नवीनतम: {latest})",
       "outdated_minor": "{count} माइनर संस्करण पीछे (नवीनतम: {latest}) | {count} माइनर संस्करण पीछे (नवीनतम: {latest})",
       "outdated_patch": "पैच अद्यतन उपलब्ध (नवीनतम: {latest})",
-      "has_replacement": "इस निर्भरता के सुझाए गए विकल्प हैं",
-      "vulnerabilities_count": "{count} कमजोरी | {count} कमजोरियाँ"
-    },
-    "peer_dependencies": {
-      "title": "पीयर निर्भरताएँ ({count})",
-      "list_label": "पैकेज पीयर निर्भरताएँ",
-      "show_all": "{count} पीयर निर्भरता दिखाएं | सभी {count} पीयर निर्भरताएँ दिखाएं"
-    },
-    "optional_dependencies": {
-      "title": "वैकल्पिक निर्भरताएँ ({count})",
-      "list_label": "पैकेज वैकल्पिक निर्भरता",
-      "show_all": "{count} वैकल्पिक निर्भरता दिखाएं | सभी {count} वैकल्पिक निर्भरताएँ दिखाएं"
+      "has_replacement": "इस निर्भरता के सुझाए गए विकल्प हैं"
     },
     "maintainers": {
       "title": "अनुरक्षक",
@@ -543,7 +536,8 @@
         "general_description": "Y अक्ष डाउनलोड की संख्या दर्शाता है। X अक्ष {start_date} से {end_date} तक की तारीख सीमा दर्शाता है, जिसमें {granularity} समय अवधि है।{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "इनके लिए क्षैतिज बार चार्ट: {packages}, {facet} की तुलना करते हुए ({description})। {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} का मान {value} है।"
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड्स",
@@ -1040,6 +1034,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "कनेक्ट करें",
     "account": "खाता",
@@ -1198,6 +1211,7 @@
           "description": "ज्ञात सुरक्षा कमजोरियाँ"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index bfb78e3d27..2dd453a00f 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -66,6 +66,7 @@
     }
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -98,6 +99,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "beállítások",
     "tagline": "szabd személyre az npmx élményed",
@@ -136,6 +140,7 @@
     "background_themes": {
       "label": "Háttér árnyalata"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Billentyűzet parancsikonok engedélyezése",
     "keyboard_shortcuts_enabled_description": "A billentyűzet parancsikonok letilthatók, ha ütköznek más böngésző vagy rendszer parancsikonokkal"
   },
@@ -290,6 +295,7 @@
       "title": "Futtatás",
       "locally": "Futtatás helyileg"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Nincs elérhető README.",
@@ -377,25 +383,13 @@
     },
     "dependencies": {
       "title": "Függőség ({count}) | Függőségek ({count})",
-      "list_label": "Csomag függőségei",
-      "show_all": "{count} függ mutatása | az összes {count} függ mutatása",
+      "insights": {},
       "optional": "opcionális",
-      "view_vulnerabilities": "Sebezhetőségek megtekintése",
       "outdated_major": "{count} major verzió lemaradva (legutóbbi: {latest}) | {count} major verzió lemaradva (legutóbbi: {latest})",
       "outdated_minor": "{count} minor verzió lemaradva (legutóbbi: {latest}) | {count} minor verzió lemaradva (legutóbbi: {latest})",
       "outdated_patch": "Patch frissítés elérhető (legutóbbi: {latest})",
       "has_replacement": "Ennek a függőségnek vannak javasolt helyettesítései"
     },
-    "peer_dependencies": {
-      "title": "Peer függőség ({count}) | Peer függőségek ({count})",
-      "list_label": "Csomag peer függőségei",
-      "show_all": "{count} peer függ mutatása | az összes {count} peer függ mutatása"
-    },
-    "optional_dependencies": {
-      "title": "Opcionális függőség ({count}) | Opcionális függőségek ({count})",
-      "list_label": "Csomag opcionális függőségei",
-      "show_all": "{count} opt. függ mutatása | az összes {count} opt. függ mutatása"
-    },
     "maintainers": {
       "title": "Karbantartók",
       "list_label": "Csomag karbantartói",
@@ -460,7 +454,8 @@
         "compare": "Csomag letöltési összehasonlítás vonaldiagram: {packages}.",
         "single_package": "A(z) {package} csomag letöltési vonaldiagramja.",
         "general_description": "Az Y tengely a letöltések számát ábrázolja. Az X tengely a dátumtartományt ábrázolja, {start_date} -től {end_date} -ig, {granularity} időszakkal.{estimation_notice} {packages_analysis}. {watermark}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Heti letöltések",
@@ -943,6 +938,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "csatlakozás",
     "account": "Fiók",
@@ -1096,6 +1110,7 @@
           "description": "Ismert biztonsági sebezhetőségek"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index c54f662d3e..a6cfc5b60e 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -77,6 +77,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -131,6 +132,9 @@
       "more_replies": "{count} balasan lagi... | {count} balasan lagi..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "pengaturan",
     "tagline": "Sesuaikan npmx dengan preferensi anda",
@@ -185,6 +189,7 @@
       "slate": "Slate",
       "black": "Hitam"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Aktifkan pintasan papan ketik",
     "keyboard_shortcuts_enabled_description": "Pintasan papan ketik dapat dinonaktifkan jika bertentangan dengan pintasan peramban atau sistem lainnya."
   },
@@ -366,6 +371,7 @@
       "title": "Jalankan",
       "locally": "Jalankan secara lokal"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README tidak tersedia.",
@@ -462,25 +468,12 @@
     },
     "dependencies": {
       "title": "Dependensi ({count})",
-      "list_label": "Dependensi paket",
-      "show_all": "tampilkan {count} dep | tampilkan semua {count} dep",
+      "insights": {},
       "optional": "opsional",
-      "view_vulnerabilities": "Lihat kerentanan",
       "outdated_major": "Tertinggal {count} versi major (terbaru: {latest}) | Tertinggal {count} versi major (terbaru: {latest})",
       "outdated_minor": "Tertinggal {count} versi minor (terbaru: {latest}) | Tertinggal {count} versi minor (terbaru: {latest})",
       "outdated_patch": "Pembaruan patch tersedia (terbaru: {latest})",
-      "has_replacement": "Ketergantungan ini telah menyarankan beberapa alternatif",
-      "vulnerabilities_count": "{count} kerentanan | {count} kerentanan"
-    },
-    "peer_dependencies": {
-      "title": "Peer Dependencies ({count})",
-      "list_label": "Peer dependencies paket",
-      "show_all": "tampilkan {count} peer dep | tampilkan semua {count} peer dep"
-    },
-    "optional_dependencies": {
-      "title": "Optional Dependencies ({count})",
-      "list_label": "Optional dependencies paket",
-      "show_all": "tampilkan {count} optional dep | tampilkan semua {count} optional dep"
+      "has_replacement": "Ketergantungan ini telah menyarankan beberapa alternatif"
     },
     "maintainers": {
       "title": "Pemelihara",
@@ -560,7 +553,8 @@
         "general_description": "Sumbu Y melambangkan jumlah unduhan. Sumbu X melambangkan jangka waktu, mulai dari {start_date} hingga {end_date}, dalam kurun waktu {granularity}. {estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Grafik batang horizontal untuk: {packages}, membandingkan {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} memiliki nilai {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Unduhan Mingguan",
@@ -1057,6 +1051,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "hubungkan",
     "account": "Akun",
@@ -1220,6 +1233,7 @@
           "description": "Kerentanan keamanan yang diketahui"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index 3a77b0f36b..bda6f1a62c 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -99,6 +99,7 @@
     "current": "corrente",
     "here": "sei qui",
     "connected": "connesso",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "attivo",
       "off": "disattivo"
@@ -311,6 +312,7 @@
       "slate": "Ardesia",
       "black": "Nero"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Abilita scorciatoie da tastiera",
     "keyboard_shortcuts_enabled_description": "Le scorciatoie da tastiera possono essere disabilitate se entrano in conflitto con altre scorciatoie del browser o del sistema",
     "enable_code_ligatures": "Abilita legature nel codice",
@@ -518,6 +520,7 @@
       "title": "Esegui",
       "locally": "Esegui localmente"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Nessuno README disponibile.",
@@ -643,25 +646,12 @@
     },
     "dependencies": {
       "title": "Dipendenza ({count}) | Dipendenze ({count})",
-      "list_label": "Dipendenze del pacchetto",
-      "show_all": "mostra {count} dip | mostra tutte le {count} dip",
+      "insights": {},
       "optional": "opzionale",
-      "view_vulnerabilities": "Visualizza vulnerabilità",
       "outdated_major": "{count} versione principale indietro (latest: {latest}) | {count} versioni principali indietro (latest: {latest})",
       "outdated_minor": "{count} versione minore indietro (latest: {latest}) | {count} versioni minori indietro (latest: {latest})",
       "outdated_patch": "Aggiornamento patch disponibile (latest: {latest})",
-      "has_replacement": "Questa dipendenza ha sostituzioni suggerite",
-      "vulnerabilities_count": "{count} vulnerabilità | {count} vulnerabilità"
-    },
-    "peer_dependencies": {
-      "title": "Dipendenza peer ({count}) | Dipendenze peer ({count})",
-      "list_label": "Dipendenze peer del pacchetto",
-      "show_all": "mostra {count} dip peer | mostra tutte le {count} dip peer"
-    },
-    "optional_dependencies": {
-      "title": "Dipendenza opzionale ({count}) | Dipendenze opzionali ({count})",
-      "list_label": "Dipendenze opzionali del pacchetto",
-      "show_all": "mostra {count} dip opzionale | mostra tutte le {count} dip opzionali"
+      "has_replacement": "Questa dipendenza ha sostituzioni suggerite"
     },
     "maintainers": {
       "title": "Mantenitori",
@@ -1259,6 +1249,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "connetti",
     "account": "Account",
@@ -1544,6 +1553,20 @@
       "new_accounts": "...più altri {count} che sono nuovi sull'atmosphere"
     }
   },
+  "privacy_policy": {
+    "cookies": {
+      "what_are": {},
+      "types": {},
+      "local_storage": {},
+      "management": {}
+    },
+    "analytics": {},
+    "authenticated": {},
+    "data_retention": {},
+    "your_rights": {},
+    "contact": {},
+    "changes": {}
+  },
   "a11y": {
     "title": "accessibilità",
     "footer_title": "a11y",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index c63ebbb91f..1354a4c86d 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -319,6 +319,7 @@
       "slate": "スレート",
       "black": "ブラック"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "キーボードショートカットを有効化",
     "keyboard_shortcuts_enabled_description": "ブラウザやシステムのショートカットと競合する場合、キーボードショートカットを無効化できます",
     "enable_code_ligatures": "コードのリガチャを有効化",
@@ -526,6 +527,7 @@
       "title": "実行",
       "locally": "ローカルで実行"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "READMEはありません。",
@@ -651,25 +653,12 @@
     },
     "dependencies": {
       "title": "依存関係（{count}）",
-      "list_label": "パッケージの依存関係",
-      "show_all": "全 {count} 個の依存関係を表示",
+      "insights": {},
       "optional": "オプション",
-      "view_vulnerabilities": "脆弱性情報を表示",
       "outdated_major": "最新から {count} 個のメジャーバージョン遅れています (最新: {latest})",
       "outdated_minor": "最新から {count} 個のマイナーバージョン遅れています (最新: {latest})",
       "outdated_patch": "パッチアップデートがあります (最新: {latest})",
-      "has_replacement": "この依存関係には代替の候補があります",
-      "vulnerabilities_count": "{count} 件の脆弱性"
-    },
-    "peer_dependencies": {
-      "title": "ピア依存関係（{count}）",
-      "list_label": "パッケージのピア依存関係",
-      "show_all": "全 {count} 個のピア依存関係を表示"
-    },
-    "optional_dependencies": {
-      "title": "オプションの依存関係（{count}）",
-      "list_label": "パッケージのオプションの依存関係",
-      "show_all": "全 {count} 個のオプションの依存関係を表示"
+      "has_replacement": "この依存関係には代替の候補があります"
     },
     "maintainers": {
       "title": "メンテナ",
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index 340a157d81..7419d6a637 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -42,6 +42,24 @@
       "view_org_packages": "ಈ ಸಂಸ್ಥೆಯ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ನೋಡಿ"
     }
   },
+  "command_palette": {
+    "keyboard_shortcuts": {},
+    "state": {},
+    "groups": {},
+    "actions": {},
+    "connections": {},
+    "navigation": {},
+    "links": {},
+    "package_links": {},
+    "theme": {},
+    "package": {},
+    "package_actions": {},
+    "code": {},
+    "diff": {},
+    "version": {},
+    "status": {},
+    "announcements": {}
+  },
   "nav": {
     "main_navigation": "ಮುಖ್ಯ ನಾವಿಗೇಶನ್",
     "popular_packages": "ಜನಪ್ರಿಯ ಪ್ಯಾಕೇಜ್‌ಗಳು",
@@ -58,6 +76,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು",
     "tagline": "ನಿಮ್ಮ npmx ಅನುಭವವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ",
@@ -84,7 +105,8 @@
     },
     "clear_accent": "ಅಕ್ಸೆಂಟ್ ಬಣ್ಣ ತೆರವುಗೊಳಿಸಿ",
     "translation_progress": "ಅನುವಾದ ಪ್ರಗತಿ",
-    "background_themes": {}
+    "background_themes": {},
+    "foreground_themes": {}
   },
   "i18n": {
     "missing_keys": "{count} ಅನುವಾದ ಇಲ್ಲ | {count} ಅನುವಾದಗಳು ಇಲ್ಲ",
@@ -137,6 +159,7 @@
       "no_reason": "ಕಾರಣ ನೀಡಲಾಗಿಲ್ಲ"
     },
     "size_increase": {},
+    "size_decrease": {},
     "replacement": {
       "title": "ನಿಮಗೆ ಈ ಅವಲಂಬನೆ ಅಗತ್ಯವಿಲ್ಲದಿರಬಹುದು.",
       "native": "ಇದನ್ನು {replacement} ಮೂಲಕ ಬದಲಾಯಿಸಬಹುದು, ಇದು Node {nodeVersion} ರಿಂದ ಲಭ್ಯವಿದೆ.",
@@ -201,6 +224,7 @@
       "title": "ಚಲಾಯಿಸಿ",
       "locally": "ಸ್ಥಳೀಯವಾಗಿ ಚಲಾಯಿಸಿ"
     },
+    "command": {},
     "readme": {
       "title": "ರೀಡ್‌ಮಿ",
       "no_readme": "README ಲಭ್ಯವಿಲ್ಲ.",
@@ -231,26 +255,19 @@
       "view_all": "{count} ಆವೃತ್ತಿ ನೋಡಿ | ಎಲ್ಲಾ {count} ಆವೃತ್ತಿಗಳನ್ನು ನೋಡಿ",
       "copy_alt": {}
     },
+    "timeline": {
+      "chart": {
+        "copy_alt": {}
+      }
+    },
     "dependencies": {
       "title": "ಅವಲಂಬನೆಗಳು ({count})",
-      "list_label": "ಪ್ಯಾಕೇಜ್ ಅವಲಂಬನೆಗಳು",
-      "show_all": "{count} ಅವಲಂಬನೆ ತೋರಿಸಿ | ಎಲ್ಲಾ {count} ಅವಲಂಬನೆಗಳನ್ನು ತೋರಿಸಿ",
+      "insights": {},
       "optional": "ಐಚ್ಛಿಕ",
-      "view_vulnerabilities": "ಭದ್ರತಾ ದುರ್ಬಲತೆಗಳನ್ನು ನೋಡಿ",
       "outdated_major": "{count} ಮೇಜರ್ ಆವೃತ್ತಿ ಹಿಂದುಳಿದಿದೆ (ಇತ್ತೀಚಿನದು: {latest}) | {count} ಮೇಜರ್ ಆವೃತ್ತಿಗಳು ಹಿಂದುಳಿದಿವೆ (ಇತ್ತೀಚಿನದು: {latest})",
       "outdated_minor": "{count} ಮೈನರ್ ಆವೃತ್ತಿ ಹಿಂದುಳಿದಿದೆ (ಇತ್ತೀಚಿನದು: {latest}) | {count} ಮೈನರ್ ಆವೃತ್ತಿಗಳು ಹಿಂದುಳಿದಿವೆ (ಇತ್ತೀಚಿನದು: {latest})",
       "outdated_patch": "ಪ್ಯಾಚ್ ನವೀಕರಣ ಲಭ್ಯವಿದೆ (ಇತ್ತೀಚಿನದು: {latest})"
     },
-    "peer_dependencies": {
-      "title": "ಪೀರ್ ಅವಲಂಬನೆಗಳು ({count})",
-      "list_label": "ಪ್ಯಾಕೇಜ್ ಪೀರ್ ಅವಲಂಬನೆಗಳು",
-      "show_all": "{count} ಪೀರ್ ಅವಲಂಬನೆ ತೋರಿಸಿ | ಎಲ್ಲಾ {count} ಪೀರ್ ಅವಲಂಬನೆಗಳನ್ನು ತೋರಿಸಿ"
-    },
-    "optional_dependencies": {
-      "title": "ಐಚ್ಛಿಕ ಅವಲಂಬನೆಗಳು ({count})",
-      "list_label": "ಪ್ಯಾಕೇಜ್ ಐಚ್ಛಿಕ ಅವಲಂಬನೆ",
-      "show_all": "{count} ಐಚ್ಛಿಕ ಅವಲಂಬನೆ ತೋರಿಸಿ | ಎಲ್ಲಾ {count} ಐಚ್ಛಿಕ ಅವಲಂಬನೆಗಳನ್ನು ತೋರಿಸಿ"
-    },
     "maintainers": {
       "title": "ನಿರ್ವಹಕರು",
       "list_label": "ಪ್ಯಾಕೇಜ್ ನಿರ್ವಹಕರು",
@@ -266,6 +283,7 @@
       "show_less": "(ಕಡಿಮೆ ತೋರಿಸಿ)"
     },
     "trends": {
+      "chart_assistive_text": {},
       "granularity": "ಗ್ರಾನ್ಯುಲಾರಿಟಿ",
       "granularity_daily": "ದೈನಂದಿನ",
       "granularity_weekly": "ವಾರದ",
@@ -279,7 +297,8 @@
       "download_file": "{fileType} ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
       "toggle_annotator": "ಅನೋಟೇಟರ್ ಟಾಗಲ್ ಮಾಡಿ",
       "items": {},
-      "copy_alt": {}
+      "copy_alt": {},
+      "embedding": {}
     },
     "downloads": {
       "title": "ವಾರದ ಡೌನ್‌ಲೋಡ್‌ಗಳು"
@@ -368,6 +387,9 @@
     "size": {},
     "download": {}
   },
+  "leaderboard": {
+    "likes": {}
+  },
   "connector": {
     "modal": {
       "title": "ಸ್ಥಳೀಯ ಸಂಪರ್ಕಕ",
@@ -729,6 +751,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "ಸಂಪರ್ಕಿಸಿ",
     "account": "ಖಾತೆ",
@@ -800,6 +841,9 @@
       "packages_selected": "{count}/{max} ಪ್ಯಾಕೇಜ್‌ಗಳು ಆಯ್ಕೆಮಾಡಲಾಗಿದೆ.",
       "add_hint": "ಹೋಲಿಸಲು ಕನಿಷ್ಠ 2 ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸೇರಿಸಿ."
     },
+    "scatter_chart": {
+      "copy_alt": {}
+    },
     "no_dependency": {},
     "facets": {
       "all": "ಎಲ್ಲ",
@@ -826,7 +870,11 @@
         "types": {},
         "moduleFormat": {},
         "license": {},
-        "vulnerabilities": {}
+        "vulnerabilities": {},
+        "githubStars": {},
+        "githubForks": {},
+        "githubIssues": {},
+        "createdAt": {}
       },
       "values": {},
       "trends": {}
@@ -860,9 +908,26 @@
     "limitations": {},
     "contact": {}
   },
-  "changelog": {},
   "translation_status": {
     "table": {}
   },
-  "action_bar": {}
+  "vacations": {
+    "what": {},
+    "meantime": {},
+    "return": {},
+    "stats": {
+      "subtitle": {}
+    }
+  },
+  "action_bar": {},
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
+  },
+  "changelog": {
+    "error": {}
+  }
 }
diff --git a/i18n/locales/ko-KR.json b/i18n/locales/ko-KR.json
index ada2c1bb7b..8af728c026 100644
--- a/i18n/locales/ko-KR.json
+++ b/i18n/locales/ko-KR.json
@@ -681,25 +681,12 @@
     },
     "dependencies": {
       "title": "의존성({count}) | 의존성({count})",
-      "list_label": "패키지 의존성",
-      "show_all": "의존성 {count}개 보기 | 전체 의존성 {count}개 보기",
+      "insights": {},
       "optional": "선택 사항",
-      "view_vulnerabilities": "취약점 보기",
       "outdated_major": "메이저 버전 {count}개 뒤처짐(최신: {latest}) | 메이저 버전 {count}개 뒤처짐(최신: {latest})",
       "outdated_minor": "마이너 버전 {count}개 뒤처짐(최신: {latest}) | 마이너 버전 {count}개 뒤처짐(최신: {latest})",
       "outdated_patch": "패치 업데이트 사용 가능(최신: {latest})",
-      "has_replacement": "이 의존성에는 권장 대체 항목이 있습니다",
-      "vulnerabilities_count": "취약점 {count}개 | 취약점 {count}개"
-    },
-    "peer_dependencies": {
-      "title": "피어 의존성({count}) | 피어 의존성({count})",
-      "list_label": "패키지 피어 의존성",
-      "show_all": "피어 의존성 {count}개 보기 | 전체 피어 의존성 {count}개 보기"
-    },
-    "optional_dependencies": {
-      "title": "선택 의존성({count}) | 선택 의존성({count})",
-      "list_label": "패키지 선택 의존성",
-      "show_all": "선택 의존성 {count}개 보기 | 전체 선택 의존성 {count}개 보기"
+      "has_replacement": "이 의존성에는 권장 대체 항목이 있습니다"
     },
     "maintainers": {
       "title": "메인테이너",
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index 8f40859f82..6c1093df16 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -60,6 +60,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -114,6 +115,9 @@
       "more_replies": "{count} आणखी उत्तर... | {count} आणखी उत्तरे..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "सेटिंग्ज",
     "tagline": "तुमचा npmx अनुभव सानुकूलित करा",
@@ -168,6 +172,7 @@
       "slate": "स्लेट",
       "black": "काळा"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "कीबोर्ड शॉर्टकट सक्षम करा",
     "keyboard_shortcuts_enabled_description": "जर कीबोर्ड शॉर्टकट इतर ब्राउझर किंवा सिस्टम शॉर्टकटशी संघर्ष करत असतील तर ते अक्षम करता येतात"
   },
@@ -335,6 +340,7 @@
       "title": "चालवा",
       "locally": "स्थानिकरित्या चालवा"
     },
+    "command": {},
     "readme": {
       "title": "रीडमी",
       "no_readme": "कोणतेही README उपलब्ध नाही.",
@@ -431,25 +437,12 @@
     },
     "dependencies": {
       "title": "{count} निर्भरता | {count} निर्भरता",
-      "list_label": "पॅकेज निर्भरता",
-      "show_all": "{count} निर्भरता दाखवा | सर्व {count} निर्भरता दाखवा",
+      "insights": {},
       "optional": "ऐच्छिक",
-      "view_vulnerabilities": "असुरक्षा पहा",
       "outdated_major": "{count} प्रमुख आवृत्ती मागे (नवीनतम: {latest}) | {count} प्रमुख आवृत्त्या मागे (नवीनतम: {latest})",
       "outdated_minor": "{count} लघु आवृत्ती मागे (नवीनतम: {latest}) | {count} लघु आवृत्त्या मागे (नवीनतम: {latest})",
       "outdated_patch": "पॅच अद्यतन उपलब्ध (नवीनतम: {latest})",
-      "has_replacement": "या निर्भरतेसाठी पर्यायी सूचना आहेत",
-      "vulnerabilities_count": "{count} असुरक्षा | {count} असुरक्षा"
-    },
-    "peer_dependencies": {
-      "title": "{count} पीअर निर्भरता | {count} पीअर निर्भरता",
-      "list_label": "पॅकेज पीअर निर्भरता",
-      "show_all": "{count} पीअर निर्भरता दाखवा | सर्व {count} पीअर निर्भरता दाखवा"
-    },
-    "optional_dependencies": {
-      "title": "{count} ऐच्छिक निर्भरता | {count} ऐच्छिक निर्भरता",
-      "list_label": "पॅकेज ऐच्छिक निर्भरता",
-      "show_all": "{count} ऐच्छिक निर्भरता दाखवा | सर्व {count} ऐच्छिक निर्भरता दाखवा"
+      "has_replacement": "या निर्भरतेसाठी पर्यायी सूचना आहेत"
     },
     "maintainers": {
       "title": "देखभालकर्ते",
@@ -521,7 +514,8 @@
         "general_description": "Y अक्ष डाउनलोड्सची संख्या दर्शवतो. X अक्ष {start_date} ते {end_date} पर्यंतची दिनांक श्रेणी दर्शवतो, ज्यात {granularity} कालावधी आहे.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "या पॅकेजांसाठी आडवा बार चार्ट: {packages}, {facet} ची तुलना ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} ची किंमत {value} आहे."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "साप्ताहिक डाउनलोड्स",
@@ -1017,6 +1011,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "जोडा",
     "account": "खाते",
@@ -1173,6 +1186,7 @@
           "description": "ज्ञात सुरक्षा असुरक्षितता"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index a54ec9667f..5afd206bc7 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -316,6 +316,7 @@
       "slate": "Skifer",
       "black": "Svart"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Aktiver tastatursnarveier",
     "keyboard_shortcuts_enabled_description": "Tastatursnarveier kan deaktiveres hvis de er i konflikt med andre nettleser- eller systemsnarveier",
     "enable_code_ligatures": "Aktiver ligaturer i kode",
@@ -523,6 +524,7 @@
       "title": "Kjør",
       "locally": "Kjør lokalt"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Ingen README tilgjengelig.",
@@ -648,25 +650,12 @@
     },
     "dependencies": {
       "title": "Avhengighet ({count}) | Avhengigheter ({count})",
-      "list_label": "Pakkeavhengigheter",
-      "show_all": "vis {count} avh. | vis alle {count} avh.",
+      "insights": {},
       "optional": "valgfri",
-      "view_vulnerabilities": "Vis sårbarheter",
       "outdated_major": "{count} major-versjon bak (nyeste: {latest}) | {count} major-versjoner bak (nyeste: {latest})",
       "outdated_minor": "{count} minor-versjon bak (nyeste: {latest}) | {count} minor-versjoner bak (nyeste: {latest})",
       "outdated_patch": "Patch-oppdatering tilgjengelig (nyeste: {latest})",
-      "has_replacement": "Denne avhengigheten har foreslåtte erstatninger",
-      "vulnerabilities_count": "{count} sårbarhet | {count} sårbarheter"
-    },
-    "peer_dependencies": {
-      "title": "Peer-avhengighet ({count}) | Peer-avhengigheter ({count})",
-      "list_label": "Pakkens peer-avhengigheter",
-      "show_all": "vis {count} peer-avh. | vis alle {count} peer-avh."
-    },
-    "optional_dependencies": {
-      "title": "Valgfri avhengighet ({count}) | Valgfrie avhengigheter ({count})",
-      "list_label": "Pakkens valgfrie avhengigheter",
-      "show_all": "vis {count} valgfri avh. | vis alle {count} valgfrie avh."
+      "has_replacement": "Denne avhengigheten har foreslåtte erstatninger"
     },
     "maintainers": {
       "title": "Vedlikeholdere",
@@ -1264,6 +1253,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "koble til",
     "account": "Konto",
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index 6d4bed6b15..408c4e7ed2 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -527,6 +527,7 @@
       "title": "चलाउनुहोस्",
       "locally": "लोकलमा चलाउनुहोस्"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README उपलब्ध छैन।",
@@ -658,25 +659,12 @@
     },
     "dependencies": {
       "title": "डिपेन्डेन्सी ({count}) | डिपेन्डेन्सीहरू ({count})",
-      "list_label": "प्याकेज डिपेन्डेन्सीहरू",
-      "show_all": "{count} dep देखाउनुहोस् | सबै {count} deps देखाउनुहोस्",
+      "insights": {},
       "optional": "वैकल्पिक",
-      "view_vulnerabilities": "कमजोरीहरू हेर्नुहोस्",
       "outdated_major": "{count} मेजर संस्करण पछाडि (नवीनतम: {latest}) | {count} मेजर संस्करणहरू पछाडि (नवीनतम: {latest})",
       "outdated_minor": "{count} माइनर संस्करण पछाडि (नवीनतम: {latest}) | {count} माइनर संस्करणहरू पछाडि (नवीनतम: {latest})",
       "outdated_patch": "प्याच अपडेट उपलब्ध (नवीनतम: {latest})",
-      "has_replacement": "यस डिपेन्डेन्सीका लागि विकल्पहरू सुझाइएका छन्",
-      "vulnerabilities_count": "{count} कमजोरी | {count} कमजोरीहरू"
-    },
-    "peer_dependencies": {
-      "title": "पियर डिपेन्डेन्सी ({count}) | पियर डिपेन्डेन्सीहरू ({count})",
-      "list_label": "प्याकेज पियर डिपेन्डेन्सीहरू",
-      "show_all": "{count} पियर dep देखाउनुहोस् | सबै {count} पियर deps देखाउनुहोस्"
-    },
-    "optional_dependencies": {
-      "title": "वैकल्पिक डिपेन्डेन्सी ({count}) | वैकल्पिक डिपेन्डेन्सीहरू ({count})",
-      "list_label": "प्याकेज वैकल्पिक डिपेन्डेन्सीहरू",
-      "show_all": "{count} वैकल्पिक dep देखाउनुहोस् | सबै {count} वैकल्पिक deps देखाउनुहोस्"
+      "has_replacement": "यस डिपेन्डेन्सीका लागि विकल्पहरू सुझाइएका छन्"
     },
     "maintainers": {
       "title": "मेन्टेनरहरू",
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index 0252910cea..8aca681b85 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -668,25 +668,12 @@
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
-      "list_label": "Pakket dependencies",
-      "show_all": "toon {count} dep | toon alle {count} deps",
+      "insights": {},
       "optional": "optioneel",
-      "view_vulnerabilities": "Bekijk kwetsbaarheden",
       "outdated_major": "{count} hoofdversie achter (nieuwste: {latest}) | {count} hoofdversies achter (nieuwste: {latest})",
       "outdated_minor": "{count} subversie achter (nieuwste: {latest}) | {count} subversies achter (nieuwste: {latest})",
       "outdated_patch": "Patch update beschikbaar (nieuwste: {latest})",
-      "has_replacement": "Deze dedependency heeft voorgesteld alternatieven",
-      "vulnerabilities_count": "{count} kwetsbaarheid | {count} kwetsbaarheden"
-    },
-    "peer_dependencies": {
-      "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
-      "list_label": "Pakket peer dependencies",
-      "show_all": "toon {count} peer dep | toon alle {count} peer deps"
-    },
-    "optional_dependencies": {
-      "title": "Optionele Dependency ({count}) | Optionele Dependencies ({count})",
-      "list_label": "Optionele pakket dependencies",
-      "show_all": "toon {count} Optionele dep | toon alle {count} Optionele deps"
+      "has_replacement": "Deze dependency heeft voorgesteld alternatieven"
     },
     "maintainers": {
       "title": "Beheerders",
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 9888a88aaf..2e703eb8b9 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -74,6 +74,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -127,6 +128,9 @@
       "more_replies": "jeszcze {count} odpowiedź… | jeszcze {count} odpowiedzi… | jeszcze {count} odpowiedzi…"
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "ustawienia",
     "tagline": "dostosuj npmx do siebie",
@@ -167,6 +171,7 @@
     "background_themes": {
       "label": "Odcień tła"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Włącz skróty klawiaturowe",
     "keyboard_shortcuts_enabled_description": "Skróty klawiaturowe mogą zostać wyłączone jeśli kolidują z innymi skrótami przeglądarki lub systemu"
   },
@@ -337,6 +342,7 @@
       "title": "Uruchom",
       "locally": "Uruchom lokalnie"
     },
+    "command": {},
     "readme": {
       "title": "README",
       "no_readme": "Brak README.",
@@ -425,25 +431,13 @@
     },
     "dependencies": {
       "title": "Zależności ({count})",
-      "list_label": "Zależności pakietu",
-      "show_all": "pokaż wszystkie ({count})",
+      "insights": {},
       "optional": "opcjonalne",
-      "view_vulnerabilities": "Zobacz luki",
       "outdated_major": "{count} wersji głównych w tyle (najnowsza: {latest}) | {count} wersja główna w tyle (najnowsza: {latest}) | {count} wersje główne w tyle (najnowsza: {latest}) | {count} wersji głównych w tyle (najnowsza: {latest}) | {count} wersji głównych w tyle (najnowsza: {latest})",
       "outdated_minor": "{count} wersji minor w tyle (najnowsza: {latest}) | {count} wersja minor w tyle (najnowsza: {latest}) | {count} wersje minor w tyle (najnowsza: {latest}) | {count} wersji minor w tyle (najnowsza: {latest}) | {count} wersji minor w tyle (najnowsza: {latest})",
       "outdated_patch": "Dostępna poprawka (najnowsza: {latest})",
       "has_replacement": "Ta zależność ma sugerowane zamienniki"
     },
-    "peer_dependencies": {
-      "title": "Zależności peer ({count})",
-      "list_label": "Zależności peer pakietu",
-      "show_all": "pokaż wszystkie ({count})"
-    },
-    "optional_dependencies": {
-      "title": "Zależności opcjonalne ({count})",
-      "list_label": "Opcjonalne zależności pakietu",
-      "show_all": "pokaż wszystkie ({count})"
-    },
     "maintainers": {
       "title": "Opiekunowie",
       "list_label": "Opiekunowie pakietu",
@@ -513,7 +507,8 @@
         "general_description": "Oś Y przedstawia ilość pobrań. Oś X przedstawia zakres dat, od {start_date} do {end_date}, z jednostką czasu {granularity}. {estimation_notice} {package_analysis}. {watermark}",
         "facet_bar_general_description": "Poziomy wykres słupkowy dla: {packages}, porównuje {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} ma wartość {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Pobrania tygodniowe",
@@ -1000,6 +995,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "połącz",
     "account": "Konto",
@@ -1155,6 +1169,7 @@
           "description": "Znane luki bezpieczeństwa"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index 8d8e63f148..b81be5484a 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -98,6 +98,7 @@
     "current": "atual",
     "here": "você está aqui",
     "connected": "conectado",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "ativado",
       "off": "desativado"
@@ -228,6 +229,9 @@
       "more_replies": "{count} mais resposta... | {count} mais respostas..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "configurações",
     "tagline": "personalize sua experiência npmx",
@@ -283,6 +287,7 @@
       "slate": "Ardósia",
       "black": "Preto"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Habilitar atalhos de teclado",
     "keyboard_shortcuts_enabled_description": "Os atalhos de teclado podem ser desativados se entrarem em conflito com outros atalhos do navegador ou do sistema",
     "enable_code_ligatures": "Habilitar ligaturas no código"
@@ -477,6 +482,7 @@
       "title": "Executar",
       "locally": "Executar localmente"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README não disponível.",
@@ -589,25 +595,12 @@
     },
     "dependencies": {
       "title": "Dependências ({count})",
-      "list_label": "Dependências do pacote",
-      "show_all": "mostrar {count} dep | mostrar todas as {count} deps",
+      "insights": {},
       "optional": "opcional",
-      "view_vulnerabilities": "Ver vulnerabilidades",
       "outdated_major": "{count} versão principal desatualizada (mais recente: {latest}) | {count} versões principais desatualizadas (mais recente: {latest})",
       "outdated_minor": "{count} versão secundária desatualizada (mais recente: {latest}) | {count} versões secundárias desatualizadas (mais recente: {latest})",
       "outdated_patch": "Atualização de patch disponível (mais recente: {latest})",
-      "has_replacement": "Esta dependência tem substituições sugeridas",
-      "vulnerabilities_count": "{count} vulnerabilidade | {count} vulnerabilidades"
-    },
-    "peer_dependencies": {
-      "title": "Dependências Pares ({count})",
-      "list_label": "Dependências pares do pacote",
-      "show_all": "mostrar {count} dep par | mostrar todas as {count} deps pares"
-    },
-    "optional_dependencies": {
-      "title": "Dependências Opcionais ({count})",
-      "list_label": "Dependências opcionais do pacote",
-      "show_all": "mostrar {count} dep opcional | mostrar todas as {count} deps opcionais"
+      "has_replacement": "Esta dependência tem substituições sugeridas"
     },
     "maintainers": {
       "title": "Mantenedores",
@@ -687,7 +680,8 @@
         "general_description": "O eixo Y representa o número de downloads. O eixo X representa o intervalo de datas, de {start_date} a {end_date}, com um período de {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Gráfico de barras horizontais para: {packages}, comparando {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} tem um valor de {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Downloads Semanais",
@@ -1188,6 +1182,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "conectar",
     "account": "Conta",
@@ -1362,6 +1375,7 @@
           "label": "Estrelas no Github",
           "description": "Número de estrelas no repositório GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Issues no Github",
           "description": "Número de issues no repositório GitHub"
diff --git a/i18n/locales/pt-PT.json b/i18n/locales/pt-PT.json
index 6857a83cec..135a367d85 100644
--- a/i18n/locales/pt-PT.json
+++ b/i18n/locales/pt-PT.json
@@ -98,6 +98,7 @@
     "current": "atual",
     "here": "estás aqui",
     "connected": "ligado",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "ativado",
       "off": "desativado"
@@ -228,6 +229,9 @@
       "more_replies": "mais {count} resposta... | mais {count} respostas..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "definições",
     "tagline": "personaliza a tua experiência npmx",
@@ -283,6 +287,7 @@
       "slate": "Ardósia",
       "black": "Preto"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Ativar atalhos de teclado",
     "keyboard_shortcuts_enabled_description": "Os atalhos de teclado podem ser desativados se entrarem em conflito com outros atalhos do navegador ou do sistema",
     "enable_code_ligatures": "Ativar ligaturas no código"
@@ -481,6 +486,7 @@
       "title": "Executar",
       "locally": "Executar localmente"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README indisponível.",
@@ -593,25 +599,12 @@
     },
     "dependencies": {
       "title": "Dependência ({count}) | Dependências ({count})",
-      "list_label": "Dependências do pacote",
-      "show_all": "mostrar {count} dep | mostrar todas as {count} deps",
+      "insights": {},
       "optional": "opcional",
-      "view_vulnerabilities": "Ver vulnerabilidades",
       "outdated_major": "{count} versão major desatualizada (mais recente: {latest}) | {count} versões major desatualizadas (mais recente: {latest})",
       "outdated_minor": "{count} versão minor desatualizada (mais recente: {latest}) | {count} versões minor desatualizadas (mais recente: {latest})",
       "outdated_patch": "Atualização de patch disponível (mais recente: {latest})",
-      "has_replacement": "Esta dependência tem alternativas sugeridas",
-      "vulnerabilities_count": "{count} vulnerabilidade | {count} vulnerabilidades"
-    },
-    "peer_dependencies": {
-      "title": "Dependência Peer ({count}) | Dependências Peer ({count})",
-      "list_label": "Dependências peer do pacote",
-      "show_all": "mostrar {count} dep peer | mostrar todas as {count} deps peer"
-    },
-    "optional_dependencies": {
-      "title": "Dependência Opcional ({count}) | Dependências Opcionais ({count})",
-      "list_label": "Dependências opcionais do pacote",
-      "show_all": "mostrar {count} dep opcional | mostrar todas as {count} deps opcionais"
+      "has_replacement": "Esta dependência tem alternativas sugeridas"
     },
     "maintainers": {
       "title": "Responsáveis",
@@ -691,7 +684,8 @@
         "general_description": "O eixo Y representa o número de transferências. O eixo X representa o intervalo de datas, de {start_date} a {end_date}, com periodicidade {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Gráfico de barras horizontais para: {packages}, comparando {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} tem um valor de {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Transferências Semanais",
@@ -1199,6 +1193,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "ligar",
     "account": "Conta",
@@ -1373,6 +1386,7 @@
           "label": "Estrelas no GitHub",
           "description": "Número de estrelas no repositório GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Issues no GitHub",
           "description": "Número de issues no repositório GitHub"
diff --git a/i18n/locales/ro-RO.json b/i18n/locales/ro-RO.json
index 69cba1598f..60a3841a6d 100644
--- a/i18n/locales/ro-RO.json
+++ b/i18n/locales/ro-RO.json
@@ -98,6 +98,7 @@
     "current": "actual",
     "here": "ești aici",
     "connected": "conectat",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "activată",
       "off": "dezactivată"
@@ -228,6 +229,9 @@
       "more_replies": "{count} repostare în plus... | {count} repostări în plus..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "setări",
     "tagline": "personalizează-ți experiența cu npmx",
@@ -283,6 +287,7 @@
       "slate": "Ardezie",
       "black": "Negru"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Activează comenzile rapide de la tastatură",
     "keyboard_shortcuts_enabled_description": "Comenzile rapide de la tastatură pot fi dezactivate dacă intră în conflict cu alte comenzi rapide ale browserului sau ale sistemului",
     "enable_code_ligatures": "Activează litere ligaturate în cod"
@@ -481,6 +486,7 @@
       "title": "Pornește",
       "locally": "Pornește local"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Niciun README disponibil.",
@@ -601,25 +607,12 @@
     },
     "dependencies": {
       "title": "Dependență ({count}) | Dependențe ({count})",
-      "list_label": "Dependențele pachetului",
-      "show_all": "Afișează {count} dependențe | Afișează toate {count} dependențele",
+      "insights": {},
       "optional": "opțional",
-      "view_vulnerabilities": "Afișează vulnerabilitățile",
       "outdated_major": "{count} versiuni majore în urmă (ultima: {latest}) | {count} versiuni majore în urmă (ultima: {latest})",
       "outdated_minor": "{count} versiuni minore în urmă (ultima: {latest}) | {count} versiuni minore în urmă (ultima: {latest})",
       "outdated_patch": "Patch de actualizare disponibil (ultima versiune: {latest})",
-      "has_replacement": "Această dependență are propuneri de înlocuire",
-      "vulnerabilities_count": "{count} vulnerabilitate | {count} vulnerabilități"
-    },
-    "peer_dependencies": {
-      "title": "Dependență Pereche ({count}) | Dependențe Pereche ({count})",
-      "list_label": "Dependențe Pereche la Pachet",
-      "show_all": "afișează {count} dependențe pereche | afișează toate {count} dependențe pereche"
-    },
-    "optional_dependencies": {
-      "title": "Dependență Opțională ({count}) | Dependențe Opționale ({count})",
-      "list_label": "Dependențe Opționale la Pachet",
-      "show_all": "afișează {count} dependențe opționale | afișează toate {count} dependențe opționale"
+      "has_replacement": "Această dependență are propuneri de înlocuire"
     },
     "maintainers": {
       "title": "Menținători",
@@ -699,7 +692,8 @@
         "general_description": "Axa Y reprezintă numărul de descărcări. Axa X reprezintă intervalul de date, de la {start_date} până la {end_date}, cu o perioadă de timp de {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Diagramă cu bare orizontale pentru: {packages}, comparând {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} are valoarea {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Descărcări Săptămânale",
@@ -1207,6 +1201,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "conectează",
     "account": "Cont",
@@ -1381,6 +1394,7 @@
           "label": "Stele GitHub",
           "description": "Numărul de stele din repository-ul GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Probleme GitHub",
           "description": "Numărul de probleme din repository-ul GitHub"
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 5ae881cca3..0e2c8d8d7c 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -535,6 +535,7 @@
       "title": "Запуск",
       "locally": "Запустить локально"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README недоступен.",
@@ -666,25 +667,12 @@
     },
     "dependencies": {
       "title": "Зависимости ({count})",
-      "list_label": "Зависимости пакета",
-      "show_all": "показать все ({count})",
+      "insights": {},
       "optional": "опционально",
-      "view_vulnerabilities": "Посмотреть уязвимости",
       "outdated_major": "{count} мажорная версия позади (последняя: {latest}) | {count} мажорные версии позади (последняя: {latest}) | {count} мажорных версий позади (последняя: {latest})",
       "outdated_minor": "{count} минорная версия позади (последняя: {latest}) | {count} минорные версии позади (последняя: {latest}) | {count} минорных версий позади (последняя: {latest})",
       "outdated_patch": "Доступно патч-обновление (последняя: {latest})",
-      "has_replacement": "Для этой зависимости есть рекомендуемые замены",
-      "vulnerabilities_count": "{count} уязвимость | {count} уязвимости | {count} уязвимостей"
-    },
-    "peer_dependencies": {
-      "title": "Peer-зависимости ({count})",
-      "list_label": "Peer-зависимости пакета",
-      "show_all": "показать все ({count})"
-    },
-    "optional_dependencies": {
-      "title": "Опциональные зависимости ({count})",
-      "list_label": "Опциональные зависимости пакета",
-      "show_all": "показать все ({count})"
+      "has_replacement": "Для этой зависимости есть рекомендуемые замены"
     },
     "maintainers": {
       "title": "Мейнтейнеры",
diff --git a/i18n/locales/sr-Latn-RS.json b/i18n/locales/sr-Latn-RS.json
index 2b9057d06d..0f73838faa 100644
--- a/i18n/locales/sr-Latn-RS.json
+++ b/i18n/locales/sr-Latn-RS.json
@@ -77,6 +77,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -131,6 +132,9 @@
       "more_replies": "{count} još odgovor... | {count} još odgovora... | {count} još odgovora..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "podešavanja",
     "tagline": "prilagodite svoje npmx iskustvo",
@@ -185,6 +189,7 @@
       "slate": "Škriljac",
       "black": "Crna"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Omogućite prečice na tastaturi",
     "keyboard_shortcuts_enabled_description": "Prečice na tastaturi mogu biti isključene ako su u sukobu sa drugim prečicama pregledača ili sistema"
   },
@@ -366,6 +371,7 @@
       "title": "Pokrenite",
       "locally": "Pokrenite lokalno"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Nema README datoteke.",
@@ -462,25 +468,12 @@
     },
     "dependencies": {
       "title": "Zavisnost ({count}) | Zavisnosti ({count})",
-      "list_label": "Zavisnosti paketa",
-      "show_all": "prikažite {count} zavisnost | prikažite {count} zavisnosti | prikažite svih {count} zavisnosti",
+      "insights": {},
       "optional": "opciono",
-      "view_vulnerabilities": "Pogledajte ranljivosti",
       "outdated_major": "{count} glavna verzija kasni (najnovija: {latest}) | {count} glavne verzije kasne (najnovija: {latest}) | {count} glavnih verzija kasni (najnovija: {latest})",
       "outdated_minor": "{count} sporedna verzija kasni (najnovija: {latest}) | {count} sporedne verzije kasne (najnovija: {latest}) | {count} sporednih verzija kasni (najnovija: {latest})",
       "outdated_patch": "Dostupno je ažuriranje zakrpe (najnovija: {latest})",
-      "has_replacement": "Ova zavisnost ima predložene zamene",
-      "vulnerabilities_count": "{count} ranjivost | {count} ranjivosti | {count} ranjivosti"
-    },
-    "peer_dependencies": {
-      "title": "Peer zavisnost ({count}) | Peer zavisnosti ({count})",
-      "list_label": "Peer zavisnosti",
-      "show_all": "prikažite {count} peer zavisnost | prikažite {count} peer zavisnosti | prikažite svih {count} peer zavisnosti"
-    },
-    "optional_dependencies": {
-      "title": "Opciona zavisnost ({count}) | Opcione zavisnosti ({count})",
-      "list_label": "Opcione zavisnosti paketa",
-      "show_all": "prikažite {count} opcionu zavisnost | prikažite {count} opcione zavisnosti | prikažite svih {count} opcionih zavisnosti"
+      "has_replacement": "Ova zavisnost ima predložene zamene"
     },
     "maintainers": {
       "title": "Održavaoci",
@@ -557,7 +550,8 @@
         "general_description": "Y osa predstavlja broj preuzimanja. X osa predstavlja opseg datuma, od {start_date} do {end_date}, sa vremenskim periodom {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Horizontalni stubičasti grafikon za: {packages}, poređenje {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} ima vrednost {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Nedeljna preuzimanja",
@@ -1054,6 +1048,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "povežite se",
     "account": "Nalog",
@@ -1216,6 +1229,7 @@
           "description": "Poznate bezbednosne ranjivosti"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 17f6da22df..3791bea5d6 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -64,6 +64,24 @@
       "view_org_packages": "இந்த நிறுவனத்தின் தொகுப்புகளைக் காண்க"
     }
   },
+  "command_palette": {
+    "keyboard_shortcuts": {},
+    "state": {},
+    "groups": {},
+    "actions": {},
+    "connections": {},
+    "navigation": {},
+    "links": {},
+    "package_links": {},
+    "theme": {},
+    "package": {},
+    "package_actions": {},
+    "code": {},
+    "diff": {},
+    "version": {},
+    "status": {},
+    "announcements": {}
+  },
   "nav": {
     "main_navigation": "முதன்மை",
     "popular_packages": "பிரபலமான தொகுப்புகள்",
@@ -80,6 +98,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "அமைப்புகள்",
     "tagline": "உங்கள் npmx அனுபவத்தைத் தனிப்பயனாக்கு",
@@ -116,7 +137,8 @@
     "translation_progress": "மொழிபெயர்ப்பு முன்னேற்றம்",
     "background_themes": {
       "label": "பின்புல நிழல்"
-    }
+    },
+    "foreground_themes": {}
   },
   "i18n": {
     "missing_keys": "{count} விடுபட்ட மொழிபெயர்ப்பு | {count} விடுபட்ட மொழிபெயர்ப்புகள்",
@@ -169,6 +191,7 @@
       "no_reason": "காரணம் வழங்கப்படவில்லை"
     },
     "size_increase": {},
+    "size_decrease": {},
     "replacement": {
       "title": "இந்த சார்பு உங்களுக்குத் தேவைப்படாமல் இருக்கலாம்.",
       "native": "இதை {replacement} மூலம் மாற்றலாம், Node {nodeVersion} முதல் கிடைக்கிறது.",
@@ -241,6 +264,7 @@
       "title": "இயக்கு",
       "locally": "உள்ளூரில் இயக்கு"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README கிடைக்கவில்லை.",
@@ -299,26 +323,19 @@
       "view_all": "{count} பதிப்பைக் காண்க | அனைத்து {count} பதிப்புகளையும் காண்க",
       "copy_alt": {}
     },
+    "timeline": {
+      "chart": {
+        "copy_alt": {}
+      }
+    },
     "dependencies": {
       "title": "சார்பு ({count}) | சார்புகள் ({count})",
-      "list_label": "தொகுப்பு சார்புகள்",
-      "show_all": "{count} சார்பைக் காண்பி | அனைத்து {count} சார்புகளையும் காண்பி",
+      "insights": {},
       "optional": "விருப்பமான",
-      "view_vulnerabilities": "பாதிப்புகளைக் காண்க",
       "outdated_major": "{count} முதன்மை பதிப்பு பின்தங்கியுள்ளது (சமீபத்தியது: {latest}) | {count} முதன்மை பதிப்புகள் பின்தங்கியுள்ளன (சமீபத்தியது: {latest})",
       "outdated_minor": "{count} சிறு பதிப்பு பின்தங்கியுள்ளது (சமீபத்தியது: {latest}) | {count} சிறு பதிப்புகள் பின்தங்கியுள்ளன (சமீபத்தியது: {latest})",
       "outdated_patch": "திருத்தப்பட்ட புதுப்பிப்பு கிடைக்கிறது (சமீபத்தியது: {latest})"
     },
-    "peer_dependencies": {
-      "title": "சக சார்பு ({count}) | சக சார்புகள் ({count})",
-      "list_label": "தொகுப்பு சக சார்புகள்",
-      "show_all": "{count} சக சார்பைக் காண்பி | அனைத்து {count} சக சார்புகளையும் காண்பி"
-    },
-    "optional_dependencies": {
-      "title": "விருப்ப சார்பு ({count}) | விருப்ப சார்புகள் ({count})",
-      "list_label": "தொகுப்பு விருப்ப சார்புகள்",
-      "show_all": "{count} விருப்ப சார்பைக் காண்பி | அனைத்து {count} விருப்ப சார்புகளையும் காண்பி"
-    },
     "maintainers": {
       "title": "பராமரிப்பாளர்கள்",
       "list_label": "தொகுப்பு பராமரிப்பாளர்கள்",
@@ -334,6 +351,7 @@
       "show_less": "(குறைவாகக் காண்பி)"
     },
     "trends": {
+      "chart_assistive_text": {},
       "granularity": "நுண்ணிலை",
       "granularity_daily": "தினசரி",
       "granularity_weekly": "வாராந்திர",
@@ -352,7 +370,8 @@
       "items": {
         "downloads": "பதிவிறக்கங்கள்"
       },
-      "copy_alt": {}
+      "copy_alt": {},
+      "embedding": {}
     },
     "downloads": {
       "title": "வாராந்திர பதிவிறக்கங்கள்",
@@ -448,6 +467,9 @@
     },
     "download": {}
   },
+  "leaderboard": {
+    "likes": {}
+  },
   "connector": {
     "modal": {
       "title": "உள்ளூர் இணைப்பான்",
@@ -817,6 +839,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "இணை",
     "account": "கணக்கு",
@@ -889,6 +930,9 @@
       "packages_selected": "{count}/{max} தொகுப்புகள் தேர்ந்தெடுக்கப்பட்டன.",
       "add_hint": "ஒப்பிட குறைந்தது 2 தொகுப்புகளைச் சேர்க்கவும்."
     },
+    "scatter_chart": {
+      "copy_alt": {}
+    },
     "no_dependency": {
       "label": "(சார்பு இல்லை)",
       "typeahead_title": "What Would James Do?",
@@ -963,7 +1007,11 @@
         "vulnerabilities": {
           "label": "பாதிப்புகள்",
           "description": "அறியப்பட்ட பாதுகாப்பு பாதிப்புகள்"
-        }
+        },
+        "githubStars": {},
+        "githubForks": {},
+        "githubIssues": {},
+        "createdAt": {}
       },
       "values": {
         "any": "எதுவும்",
@@ -1078,5 +1126,23 @@
   "translation_status": {
     "table": {}
   },
-  "action_bar": {}
+  "vacations": {
+    "what": {},
+    "meantime": {},
+    "return": {},
+    "stats": {
+      "subtitle": {}
+    }
+  },
+  "action_bar": {},
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
+  },
+  "changelog": {
+    "error": {}
+  }
 }
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 9f6e5a8622..0779195691 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -42,6 +42,24 @@
       "view_org_packages": "ఈ సంస్థ ప్యాకేజ్‌లను వీక్షించండి"
     }
   },
+  "command_palette": {
+    "keyboard_shortcuts": {},
+    "state": {},
+    "groups": {},
+    "actions": {},
+    "connections": {},
+    "navigation": {},
+    "links": {},
+    "package_links": {},
+    "theme": {},
+    "package": {},
+    "package_actions": {},
+    "code": {},
+    "diff": {},
+    "version": {},
+    "status": {},
+    "announcements": {}
+  },
   "nav": {
     "main_navigation": "ప్రధాన",
     "popular_packages": "జనాదరణ ప్యాకేజ్‌లు",
@@ -58,6 +76,9 @@
     "author": {},
     "atproto": {}
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "సెట్టింగ్‌లు",
     "tagline": "మీ npmx అనుభవాన్ని అనుకూలీకరించండి",
@@ -84,7 +105,8 @@
     },
     "clear_accent": "యాక్సెంట్ రంగును క్లియర్ చేయండి",
     "translation_progress": "అనువాద పురోగతి",
-    "background_themes": {}
+    "background_themes": {},
+    "foreground_themes": {}
   },
   "i18n": {
     "missing_keys": "{count} అనువాదం లేదు | {count} అనువాదాలు లేవు",
@@ -137,6 +159,7 @@
       "no_reason": "కారణం అందించబడలేదు"
     },
     "size_increase": {},
+    "size_decrease": {},
     "replacement": {
       "title": "మీకు ఈ డిపెండెన్సీ అవసరం లేకపోవచ్చు.",
       "native": "దీనిని {replacement} తో భర్తీ చేయవచ్చు, ఇది Node {nodeVersion} నుండి అందుబాటులో ఉంది.",
@@ -201,6 +224,7 @@
       "title": "అమలు చేయండి",
       "locally": "స్థానికంగా అమలు చేయండి"
     },
+    "command": {},
     "readme": {
       "title": "రీడ్మీ",
       "no_readme": "README అందుబాటులో లేదు.",
@@ -231,26 +255,19 @@
       "view_all": "{count} వెర్షన్‌లను వీక్షించండి | అన్ని {count} వెర్షన్‌లను వీక్షించండి",
       "copy_alt": {}
     },
+    "timeline": {
+      "chart": {
+        "copy_alt": {}
+      }
+    },
     "dependencies": {
       "title": "డిపెండెన్సీలు ({count})",
-      "list_label": "ప్యాకేజ్ డిపెండెన్సీలు",
-      "show_all": "{count} డిపెండెన్సీని చూపించండి | అన్ని {count} డిపెండెన్సీలను చూపించండి",
+      "insights": {},
       "optional": "ఐచ్ఛికం",
-      "view_vulnerabilities": "అసురక్షితత్వాలను వీక్షించండి",
       "outdated_major": "{count} మేజర్ వెర్షన్ వెనుకబడి ఉంది (తాజాది: {latest}) | {count} మేజర్ వెర్షన్‌లు వెనుకబడి ఉన్నాయి (తాజాది: {latest})",
       "outdated_minor": "{count} మైనర్ వెర్షన్ వెనుకబడి ఉంది (తాజాది: {latest}) | {count} మైనర్ వెర్షన్‌లు వెనుకబడి ఉన్నాయి (తాజాది: {latest})",
       "outdated_patch": "ప్యాచ్ నవీకరణ అందుబాటులో ఉంది (తాజాది: {latest})"
     },
-    "peer_dependencies": {
-      "title": "పీర్ డిపెండెన్సీలు ({count})",
-      "list_label": "ప్యాకేజ్ పీర్ డిపెండెన్సీలు",
-      "show_all": "{count} పీర్ డిపెండెన్సీని చూపించండి | అన్ని {count} పీర్ డిపెండెన్సీలను చూపించండి"
-    },
-    "optional_dependencies": {
-      "title": "ఐచ్ఛిక డిపెండెన్సీలు ({count})",
-      "list_label": "ప్యాకేజ్ ఐచ్ఛిక డిపెండెన్సీ",
-      "show_all": "{count} ఐచ్ఛిక డిపెండెన్సీని చూపించండి | అన్ని {count} ఐచ్ఛిక డిపెండెన్సీలను చూపించండి"
-    },
     "maintainers": {
       "title": "నిర్వహకులు",
       "list_label": "ప్యాకేజ్ నిర్వహకులు",
@@ -266,6 +283,7 @@
       "show_less": "(తక్కువ చూపించండి)"
     },
     "trends": {
+      "chart_assistive_text": {},
       "granularity": "గ్రాన్యులారిటీ",
       "granularity_daily": "రోజువారీ",
       "granularity_weekly": "వారపు",
@@ -279,7 +297,8 @@
       "download_file": "{fileType} డౌన్‌లోడ్ చేయండి",
       "toggle_annotator": "అనోటేటర్‌ను టాగుల్ చేయండి",
       "items": {},
-      "copy_alt": {}
+      "copy_alt": {},
+      "embedding": {}
     },
     "downloads": {
       "title": "వారపు డౌన్‌లోడ్‌లు"
@@ -368,6 +387,9 @@
     "size": {},
     "download": {}
   },
+  "leaderboard": {
+    "likes": {}
+  },
   "connector": {
     "modal": {
       "title": "లోకల్ కనెక్టర్",
@@ -729,6 +751,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "కనెక్ట్ చేయండి",
     "account": "ఖాతా",
@@ -800,6 +841,9 @@
       "packages_selected": "{count}/{max} ప్యాకేజ్‌లు ఎంచుకోబడ్డాయి.",
       "add_hint": "పోల్చడానికి కనీసం 2 ప్యాకేజ్‌లను జోడించండి."
     },
+    "scatter_chart": {
+      "copy_alt": {}
+    },
     "no_dependency": {},
     "facets": {
       "all": "అన్నీ",
@@ -826,7 +870,11 @@
         "types": {},
         "moduleFormat": {},
         "license": {},
-        "vulnerabilities": {}
+        "vulnerabilities": {},
+        "githubStars": {},
+        "githubForks": {},
+        "githubIssues": {},
+        "createdAt": {}
       },
       "values": {},
       "trends": {}
@@ -863,5 +911,23 @@
   "translation_status": {
     "table": {}
   },
-  "action_bar": {}
+  "vacations": {
+    "what": {},
+    "meantime": {},
+    "return": {},
+    "stats": {
+      "subtitle": {}
+    }
+  },
+  "action_bar": {},
+  "logo_menu": {},
+  "brand": {
+    "logos": {},
+    "customize": {},
+    "typography": {},
+    "guidelines": {}
+  },
+  "changelog": {
+    "error": {}
+  }
 }
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index be24977204..edd2af0aa5 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -98,6 +98,7 @@
     "current": "mevcut",
     "here": "buradasınız",
     "connected": "bağlı",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "açık",
       "off": "kapalı"
@@ -229,6 +230,9 @@
       "more_replies": "{count} yanıt daha... | {count} yanıt daha..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "ayarlar",
     "tagline": "npmx deneyiminizi kişiselleştirin",
@@ -284,6 +288,7 @@
       "slate": "Arduvaz",
       "black": "Siyah"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Klavye kısayolları etkin",
     "keyboard_shortcuts_enabled_description": "Hızlı navigasyon için klavye kısayollarını etkinleştir",
     "enable_code_ligatures": "Kodda ligature'ları etkinleştir",
@@ -485,6 +490,7 @@
       "title": "Çalıştır",
       "locally": "Yerel olarak çalıştır"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README mevcut değil.",
@@ -609,25 +615,12 @@
     },
     "dependencies": {
       "title": "Bağımlılık ({count}) | Bağımlılıklar ({count})",
-      "list_label": "Paket bağımlılıkları",
-      "show_all": "{count} bağımlılığı göster | tüm {count} bağımlılığı göster",
+      "insights": {},
       "optional": "isteğe bağlı",
-      "view_vulnerabilities": "Güvenlik açıklarını göster",
       "outdated_major": "{count} major sürüm geride (son: {latest}) | {count} major sürüm geride (son: {latest})",
       "outdated_minor": "{count} minor sürüm geride (son: {latest}) | {count} minor sürüm geride (son: {latest})",
       "outdated_patch": "Patch güncellemesi mevcut (son: {latest})",
-      "has_replacement": "Bu bağımlılığın önerilen alternatifleri var",
-      "vulnerabilities_count": "{count} güvenlik açığı | {count} güvenlik açığı"
-    },
-    "peer_dependencies": {
-      "title": "Peer Bağımlılık ({count}) | Peer Bağımlılıklar ({count})",
-      "list_label": "Paket peer bağımlılıkları",
-      "show_all": "{count} peer bağımlılığı göster | tüm {count} peer bağımlılığı göster"
-    },
-    "optional_dependencies": {
-      "title": "İsteğe Bağlı Bağımlılık ({count}) | İsteğe Bağlı Bağımlılıklar ({count})",
-      "list_label": "Paket isteğe bağlı bağımlılıkları",
-      "show_all": "{count} isteğe bağlı bağımlılığı göster | tüm {count} isteğe bağlı bağımlılığı göster"
+      "has_replacement": "Bu bağımlılığın önerilen alternatifleri var"
     },
     "maintainers": {
       "title": "Geliştiriciler",
@@ -707,7 +700,8 @@
         "general_description": "Y ekseni indirme sayısını temsil eder. X ekseni tarih aralığını temsil eder, {start_date}'den {end_date}'e, {granularity} zaman dönemi ile.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "{packages} paketleri için yatay çubuk grafiği, {facet} karşılaştırması ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} paketi {value} değerine sahip."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Haftalık İndirmeler",
@@ -1215,6 +1209,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "Bağlan",
     "account": "Hesap",
@@ -1389,6 +1402,7 @@
           "label": "GitHub Yıldızları",
           "description": "GitHub deposundaki yıldız sayısı"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "GitHub Sorunları",
           "description": "GitHub deposundaki sorun sayısı"
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index fbd7140891..77efcf62da 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -98,6 +98,7 @@
     "current": "поточна",
     "here": "ви тут",
     "connected": "підключено",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "увімкнено",
       "off": "вимкнено"
@@ -228,6 +229,9 @@
       "more_replies": "ще {count} відповідь... | ще {count} відповіді... | ще {count} відповідей..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "налаштування",
     "tagline": "налаштуйте ваше середовище npmx",
@@ -283,6 +287,7 @@
       "slate": "Сланцевий",
       "black": "Чорний"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Увімкнути гарячі клавіші",
     "keyboard_shortcuts_enabled_description": "Гарячі клавіші можна вимкнути, якщо вони конфліктують з налаштуваннями браузера або системи",
     "enable_code_ligatures": "Увімкнути лігатури в коді"
@@ -481,6 +486,7 @@
       "title": "Запустити",
       "locally": "Запустити локально"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "README недоступний.",
@@ -604,25 +610,12 @@
     },
     "dependencies": {
       "title": "Залежності ({count})",
-      "list_label": "Залежності пакета",
-      "show_all": "показати {count} залежність | показати {count} залежності | показати {count} залежностей",
+      "insights": {},
       "optional": "опціонально",
-      "view_vulnerabilities": "Переглянути вразливості",
       "outdated_major": "{count} мажорна версія позаду (остання: {latest}) | {count} мажорні версії позаду (остання: {latest}) | {count} мажорних версій позаду (остання: {latest})",
       "outdated_minor": "{count} мінорна версія позаду (остання: {latest}) | {count} мінорні версії позаду (остання: {latest}) | {count} мінорних версій позаду (остання: {latest})",
       "outdated_patch": "Доступне оновлення (остання версія: {latest})",
-      "has_replacement": "Ця залежність має рекомендовані заміни",
-      "vulnerabilities_count": "{count} вразливість | {count} вразливості | {count} вразливостей"
-    },
-    "peer_dependencies": {
-      "title": "Peer-залежності ({count})",
-      "list_label": "Peer-залежності пакета",
-      "show_all": "показати {count} peer-залежність | показати {count} peer-залежності | показати {count} peer-залежностей"
-    },
-    "optional_dependencies": {
-      "title": "Опціональні залежності ({count})",
-      "list_label": "Опціональні залежності пакета",
-      "show_all": "показати {count} опціональну залежність | показати {count} опціональні залежності | показати {count} опціональних залежностей"
+      "has_replacement": "Ця залежність має рекомендовані заміни"
     },
     "maintainers": {
       "title": "Супроводжувачі",
@@ -702,7 +695,8 @@
         "general_description": "Вісь Y відображає кількість завантажень. Вісь X відображає діапазон дат, від {start_date} до {end_date}, з часовим інтервалом {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Горизонтальна стовпчаста діаграма для {packages}, порівнюється {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} має значення {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Завантажень на тиждень",
@@ -1210,6 +1204,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "підключити",
     "account": "Обліковий запис",
@@ -1384,6 +1397,7 @@
           "label": "Зірки GitHub",
           "description": "Кількість зірок у репозиторії GitHub"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "Issues GitHub",
           "description": "Кількість issues у репозиторії GitHub"
diff --git a/i18n/locales/vi-VN.json b/i18n/locales/vi-VN.json
index c8fb308fbd..8f1c265fdd 100644
--- a/i18n/locales/vi-VN.json
+++ b/i18n/locales/vi-VN.json
@@ -77,6 +77,7 @@
     "instant_search_advisory": "{label} {state} — {action}"
   },
   "command_palette": {
+    "keyboard_shortcuts": {},
     "state": {},
     "groups": {},
     "actions": {},
@@ -131,6 +132,9 @@
       "more_replies": "Thêm {count} phản hồi... | Thêm {count} phản hồi..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "cài đặt",
     "tagline": "tùy chỉnh trải nghiệm npmx của riêng bạn",
@@ -185,6 +189,7 @@
       "slate": "Slate",
       "black": "Black"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "Phím tắt",
     "keyboard_shortcuts_enabled_description": "Bạn có thể vô hiệu hóa phím tắt nếu gặp xung đột với trình duyệt hoặc các phím tắt hệ thống khác."
   },
@@ -366,6 +371,7 @@
       "title": "Chạy",
       "locally": "Chạy cục bộ"
     },
+    "command": {},
     "readme": {
       "title": "Readme",
       "no_readme": "Không có README.",
@@ -462,25 +468,12 @@
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependency ({count})",
-      "list_label": "Dependency của gói",
-      "show_all": "hiện {count} dep | hiện tất cả {count} dep",
+      "insights": {},
       "optional": "tùy chọn",
-      "view_vulnerabilities": "Xem lỗ hổng",
       "outdated_major": "Chậm {count} major (mới nhất: {latest}) | Chậm {count} major (mới nhất: {latest})",
       "outdated_minor": "Chậm {count} minor (mới nhất: {latest}) | Chậm {count} minor (mới nhất: {latest})",
       "outdated_patch": "Có bản cập nhật patch (mới nhất: {latest})",
-      "has_replacement": "Dependency này có gợi ý thay thế",
-      "vulnerabilities_count": "{count} lỗ hổng | {count} lỗ hổng"
-    },
-    "peer_dependencies": {
-      "title": "Peer Dependency ({count}) | Peer Dependencies ({count})",
-      "list_label": "Peer dependency của gói",
-      "show_all": "hiện {count} peer dep | hiện tất cả {count} peer dep"
-    },
-    "optional_dependencies": {
-      "title": "Optional Dependency ({count}) | Optional Dependencies ({count})",
-      "list_label": "Optional dependency của gói",
-      "show_all": "hiện {count} optional dep | hiện tất cả {count} optional dep"
+      "has_replacement": "Dependency này có gợi ý thay thế"
     },
     "maintainers": {
       "title": "Người duy trì",
@@ -557,7 +550,8 @@
         "general_description": "Trục Y biểu thị số lượt tải. Trục X biểu thị khoảng ngày, từ {start_date} đến {end_date}, với độ chi tiết {granularity}.{estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "Biểu đồ cột ngang cho: {packages}, so sánh {facet} ({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} có giá trị {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "Lượt tải hàng tuần",
@@ -1054,6 +1048,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "kết nối",
     "account": "Tài khoản",
@@ -1216,6 +1229,7 @@
           "description": "Các lỗ hổng bảo mật phổ biến"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 665e2b7d51..38f625c5d6 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -98,6 +98,7 @@
     "current": "当前",
     "here": "你在这里",
     "connected": "已连接",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "开启",
       "off": "关闭"
@@ -228,6 +229,9 @@
       "more_replies": "还有 {count} 条回复..."
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "设置",
     "tagline": "定制你的 npmx 体验",
@@ -283,6 +287,7 @@
       "slate": "板岩灰",
       "black": "黑色"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "启用快捷键",
     "keyboard_shortcuts_enabled_description": "如果某些快捷键与其他浏览器或系统快捷键冲突，可以选择将其禁用。",
     "enable_code_ligatures": "在代码中启用连字"
@@ -481,6 +486,7 @@
       "title": "运行",
       "locally": "本地运行"
     },
+    "command": {},
     "readme": {
       "title": "自述文件",
       "no_readme": "无可用自述文件。",
@@ -590,6 +596,7 @@
       "trusted_publisher_removed": "已移除可信发布",
       "provenance_added": "已启用 Provenance",
       "provenance_removed": "已移除 Provenance",
+      "deprecated": "已弃用",
       "chart": {
         "tab_aria_label": "指标选择",
         "base_scale": "Y 轴从 0 开始",
@@ -600,30 +607,16 @@
           "version_events": "版本 {version}：{events}",
           "general_description": "折线图展示了 {package} 包从版本 {first} 到 {last} 的 {metric} 变化情况。版本 {first} 的 {metric} 为 {first_value}，版本 {last} 为 {last_value}（整体变化 {overall_progress_percentage}%）。{key_changes} {watermark}。"
         }
-      },
-      "deprecated": "已弃用"
+      }
     },
     "dependencies": {
       "title": "依赖（{count} 个）",
-      "list_label": "包依赖",
-      "show_all": "显示全部 {count} 个依赖",
+      "insights": {},
       "optional": "可选",
-      "view_vulnerabilities": "查看漏洞",
       "outdated_major": "落后 {count} 个主要版本（最新：{latest}）",
       "outdated_minor": "落后 {count} 个次要版本（最新：{latest}）",
       "outdated_patch": "有可用的补丁更新（最新：{latest}）",
-      "has_replacement": "该依赖有推荐的替代包。",
-      "vulnerabilities_count": "{count} 个漏洞"
-    },
-    "peer_dependencies": {
-      "title": "对等依赖（{count} 个）",
-      "list_label": "包对等依赖",
-      "show_all": "显示全部 {count} 个对等依赖"
-    },
-    "optional_dependencies": {
-      "title": "可选依赖（{count} 个）",
-      "list_label": "包可选依赖",
-      "show_all": "显示全部 {count} 个可选依赖"
+      "has_replacement": "该依赖有推荐的替代包。"
     },
     "maintainers": {
       "title": "维护者",
@@ -703,7 +696,8 @@
         "general_description": "Y 轴表示下载量，X 轴表示日期范围（{start_date} 至 {end_date}），统计周期为{granularity}。{estimation_notice} {packages_analysis}。{watermark}。",
         "facet_bar_general_description": "水平条形图：{packages} 的 {facet} 对比（{description}）。{facet_analysis} {watermark}",
         "facet_bar_analysis": "{package_name}：{value}"
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "每周下载量",
@@ -1212,6 +1206,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "连接",
     "account": "账户",
@@ -1386,6 +1399,7 @@
           "label": "GitHub 星标",
           "description": "GitHub 仓库的星标数量"
         },
+        "githubForks": {},
         "githubIssues": {
           "label": "GitHub 问题数",
           "description": "GitHub 仓库的问题数量"
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index e143f2a3a3..452be9cb95 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -94,6 +94,7 @@
     "current": "目前",
     "here": "你所在的位置",
     "connected": "已連線",
+    "keyboard_shortcuts": {},
     "state": {
       "on": "開",
       "off": "關"
@@ -224,6 +225,9 @@
       "more_replies": "還有 {count} 則回覆⋯⋯ | 還有 {count} 則回覆⋯⋯"
     }
   },
+  "noodles": {
+    "missing": {}
+  },
   "settings": {
     "title": "設定",
     "tagline": "自訂你的 npmx 體驗",
@@ -279,6 +283,7 @@
       "slate": "板岩灰",
       "black": "黑色"
     },
+    "foreground_themes": {},
     "keyboard_shortcuts_enabled": "啟用鍵盤快速鍵",
     "keyboard_shortcuts_enabled_description": "若與其他瀏覽器或系統快捷鍵衝突，可停用鍵盤快速鍵"
   },
@@ -462,6 +467,7 @@
       "title": "執行",
       "locally": "在本機執行"
     },
+    "command": {},
     "readme": {
       "title": "README",
       "no_readme": "沒有可用的 README。",
@@ -552,32 +558,19 @@
       "no_match_filter": "沒有版本符合 {filter}"
     },
     "timeline": {
+      "deprecated": "已棄用",
       "chart": {
         "copy_alt": {}
-      },
-      "deprecated": "已棄用"
+      }
     },
     "dependencies": {
       "title": "相依（{count} 個）",
-      "list_label": "套件相依",
-      "show_all": "顯示全部 {count} 個相依套件",
+      "insights": {},
       "optional": "選用",
-      "view_vulnerabilities": "檢視漏洞",
       "outdated_major": "落後 {count} 個主要版本（最新：{latest}）",
       "outdated_minor": "落後 {count} 個次要版本（最新：{latest}）",
       "outdated_patch": "有可用的修補更新（最新：{latest}）",
-      "has_replacement": "此相依套件有建議的替代方案",
-      "vulnerabilities_count": "{count} 個漏洞"
-    },
-    "peer_dependencies": {
-      "title": "peer 相依（{count} 個）",
-      "list_label": "套件 peer 相依",
-      "show_all": "顯示全部 {count} 個 peer 相依"
-    },
-    "optional_dependencies": {
-      "title": "選用相依（{count} 個）",
-      "list_label": "套件選用相依",
-      "show_all": "顯示全部 {count} 個選用相依"
+      "has_replacement": "此相依套件有建議的替代方案"
     },
     "maintainers": {
       "title": "維護者",
@@ -657,7 +650,8 @@
         "general_description": "Y 軸代表下載次數。X 軸代表日期範圍，從 {start_date} 至 {end_date}，以 {granularity} 為時間單位。 {estimation_notice} {packages_analysis}. {watermark}.",
         "facet_bar_general_description": "水平長條圖: {package} 的 {facet} 對比({description}). {facet_analysis} {watermark}.",
         "facet_bar_analysis": "{package_name} 值為 {value}."
-      }
+      },
+      "embedding": {}
     },
     "downloads": {
       "title": "每週下載量",
@@ -1159,6 +1153,25 @@
       }
     }
   },
+  "sponsors_page": {
+    "what_we_do": {},
+    "what_support_means": {},
+    "what_this_means_for_you": {
+      "cards": {
+        "people": {},
+        "visitors": {},
+        "stars": {},
+        "community": {},
+        "adoption": {},
+        "default_source": {}
+      }
+    },
+    "tiers": {
+      "silver": {},
+      "gold": {},
+      "platinum": {}
+    }
+  },
   "account_menu": {
     "connect": "連線",
     "account": "帳戶",
@@ -1330,6 +1343,7 @@
           "description": "已知安全漏洞"
         },
         "githubStars": {},
+        "githubForks": {},
         "githubIssues": {},
         "createdAt": {}
       },
diff --git a/i18n/schema.json b/i18n/schema.json
index c68578df54..853c06e8b9 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1486,6 +1486,9 @@
             "code": {
               "type": "string"
             },
+            "dependencies": {
+              "type": "string"
+            },
             "docs": {
               "type": "string"
             },
@@ -2047,64 +2050,88 @@
             "title": {
               "type": "string"
             },
-            "list_label": {
-              "type": "string"
-            },
-            "show_all": {
-              "type": "string"
+            "insights": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "subtitle": {
+                  "type": "string"
+                },
+                "tooltip_urgent": {
+                  "type": "string"
+                },
+                "tooltip_other": {
+                  "type": "string"
+                },
+                "major_behind": {
+                  "type": "string"
+                },
+                "minor_behind": {
+                  "type": "string"
+                },
+                "patch_behind": {
+                  "type": "string"
+                },
+                "vulnerable": {
+                  "type": "string"
+                },
+                "deprecated": {
+                  "type": "string"
+                },
+                "replacements_available": {
+                  "type": "string"
+                },
+                "clear_filter": {
+                  "type": "string"
+                },
+                "filter_by": {
+                  "type": "string"
+                },
+                "unselected_sections_warning": {
+                  "type": "string"
+                },
+                "enable_sections": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
             },
             "optional": {
               "type": "string"
             },
-            "view_vulnerabilities": {
+            "bundled": {
               "type": "string"
             },
-            "outdated_major": {
+            "all": {
               "type": "string"
             },
-            "outdated_minor": {
+            "none": {
               "type": "string"
             },
-            "outdated_patch": {
+            "no_matches": {
               "type": "string"
             },
-            "has_replacement": {
+            "filter_placeholder": {
               "type": "string"
             },
-            "vulnerabilities_count": {
+            "vulnerable": {
               "type": "string"
             },
-            "aliased_to": {
-              "type": "string"
-            }
-          },
-          "additionalProperties": false
-        },
-        "peer_dependencies": {
-          "type": "object",
-          "properties": {
-            "title": {
+            "outdated_major": {
               "type": "string"
             },
-            "list_label": {
+            "outdated_minor": {
               "type": "string"
             },
-            "show_all": {
-              "type": "string"
-            }
-          },
-          "additionalProperties": false
-        },
-        "optional_dependencies": {
-          "type": "object",
-          "properties": {
-            "title": {
+            "outdated_patch": {
               "type": "string"
             },
-            "list_label": {
+            "has_replacement": {
               "type": "string"
             },
-            "show_all": {
+            "aliased_to": {
               "type": "string"
             }
           },
@@ -3430,6 +3457,9 @@
         "clear_all": {
           "type": "string"
         },
+        "select_all": {
+          "type": "string"
+        },
         "remove_filter": {
           "type": "string"
         },
@@ -4753,6 +4783,9 @@
         "optional_dependencies": {
           "type": "string"
         },
+        "bundled_dependencies": {
+          "type": "string"
+        },
         "no_dependency_changes": {
           "type": "string"
         },
diff --git a/server/api/registry/package-meta/[...pkg].get.ts b/server/api/registry/package-meta/[...pkg].get.ts
index fca3910fc1..c12b1c6198 100644
--- a/server/api/registry/package-meta/[...pkg].get.ts
+++ b/server/api/registry/package-meta/[...pkg].get.ts
@@ -69,6 +69,7 @@ export default defineCachedEventHandler(
       }
 
       const license = normalizeLicense(packument.license)
+      const deprecated = packument.versions?.[latestVersion]?.deprecated
 
       return {
         name: packument.name,
@@ -86,6 +87,7 @@ export default defineCachedEventHandler(
         author,
         maintainers: packument.maintainers,
         weeklyDownloads: downloads?.downloads,
+        deprecated,
       }
     } catch (error: unknown) {
       handleApiError(error, {
diff --git a/server/api/replacements/[...pkg].get.ts b/server/api/replacements/[...pkg].get.ts
index 3cabb56268..7feece7bf2 100644
--- a/server/api/replacements/[...pkg].get.ts
+++ b/server/api/replacements/[...pkg].get.ts
@@ -1,16 +1,42 @@
 import { all, type ModuleReplacement, type ModuleReplacementMapping } from 'module-replacements'
 
-export default defineEventHandler(
-  (event): { mapping: ModuleReplacementMapping; replacement: ModuleReplacement } | null => {
-    const pkg = getRouterParam(event, 'pkg')
-    if (!pkg) return null
-    if (!Object.hasOwn(all.mappings, pkg)) return null
-    const mapping = all.mappings[pkg]
-    if (!mapping) return null
-    const replacementId = mapping.replacements[0]
-    if (!replacementId) return null
-    const replacement = all.replacements[replacementId]
-    if (!replacement) return null
-    return { mapping, replacement }
-  },
-)
+export default defineEventHandler((event): any => {
+  const pkg = getRouterParam(event, 'pkg')
+  if (!pkg) return null
+
+  // Support batch query via comma-separated list
+  if (pkg.includes(',')) {
+    const names = pkg.split(',')
+    const results: Record<
+      string,
+      { mapping: ModuleReplacementMapping; replacement: ModuleReplacement }
+    > = {}
+    for (const name of names) {
+      const decodedName = decodeURIComponent(name)
+      if (Object.hasOwn(all.mappings, decodedName)) {
+        const mapping = all.mappings[decodedName]
+        if (mapping) {
+          const replacementId = mapping.replacements[0]
+          if (replacementId) {
+            const replacement = all.replacements[replacementId]
+            if (replacement) {
+              results[decodedName] = { mapping, replacement }
+            }
+          }
+        }
+      }
+    }
+    return results
+  }
+
+  // Single query (backward compatible)
+  const decodedName = decodeURIComponent(pkg)
+  if (!Object.hasOwn(all.mappings, decodedName)) return null
+  const mapping = all.mappings[decodedName]
+  if (!mapping) return null
+  const replacementId = mapping.replacements[0]
+  if (!replacementId) return null
+  const replacement = all.replacements[replacementId]
+  if (!replacement) return null
+  return { mapping, replacement }
+})
diff --git a/server/utils/dependency-resolver.ts b/server/utils/dependency-resolver.ts
index 3b49ce6b49..9ff5553e98 100644
--- a/server/utils/dependency-resolver.ts
+++ b/server/utils/dependency-resolver.ts
@@ -1,5 +1,5 @@
 import { mapWithConcurrency } from '#shared/utils/async'
-import { findMaxSatisfying } from 'verkit'
+import { findMaxSatisfying, isValidRange } from 'verkit'
 
 /** Concurrency limit for fetching packuments during dependency resolution */
 const PACKUMENT_FETCH_CONCURRENCY = 20
@@ -64,20 +64,29 @@ export function matchesPlatform(version: PackumentVersion): boolean {
 }
 
 /**
- * Resolve a semver range to a specific version from available versions.
+ * Resolve a semver range or dist-tag to a specific version from available versions.
  */
-export function resolveVersion(range: string, versions: string[]): string | null {
+export function resolveVersion(
+  range: string,
+  versions: string[],
+  distTags?: Record<string, string>,
+): string | null {
   if (versions.includes(range)) return range
 
   // Handle npm: protocol (aliases)
   if (range.startsWith('npm:')) {
     const atIndex = range.lastIndexOf('@')
     if (atIndex > 4) {
-      return resolveVersion(range.slice(atIndex + 1), versions)
+      return resolveVersion(range.slice(atIndex + 1), versions, distTags)
     }
     return null
   }
 
+  // Handle dist-tags (e.g. "latest", "next", "canary", etc.)
+  if (distTags && distTags[range]) {
+    return distTags[range]
+  }
+
   // Handle URLs, git refs, etc. - we can't resolve these
   if (
     range.startsWith('http://') ||
@@ -90,6 +99,8 @@ export function resolveVersion(range: string, versions: string[]): string | null
     return null
   }
 
+  if (!isValidRange(range)) return null
+
   return findMaxSatisfying(versions, range)
 }
 
@@ -144,7 +155,7 @@ export async function resolveDependencyTree(
         if (!packument) return
 
         const versions = Object.keys(packument.versions)
-        const version = resolveVersion(range, versions)
+        const version = resolveVersion(range, versions, packument['dist-tags'])
         if (!version) return
 
         const versionData = packument.versions[version]
diff --git a/server/utils/npm.ts b/server/utils/npm.ts
index 1c4ba40d6e..1fd4737fb2 100644
--- a/server/utils/npm.ts
+++ b/server/utils/npm.ts
@@ -1,4 +1,4 @@
-import { findMaxSatisfying } from 'verkit'
+import { findMaxSatisfying, isValidRange } from 'verkit'
 
 export const fetchNpmPackage = defineCachedFunction(
   async (name: string): Promise<Packument> => {
@@ -46,6 +46,12 @@ export async function resolveVersionConstraint(
 ): Promise<string | null> {
   try {
     const packument = await fetchNpmPackage(packageName)
+    if (packument['dist-tags']?.[constraint]) {
+      return packument['dist-tags'][constraint]
+    }
+    if (!isValidRange(constraint)) {
+      return null
+    }
     const versions = Object.keys(packument.versions)
     return findMaxSatisfying(versions, constraint)
   } catch {
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 46ec7caee1..202fdf13b7 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -190,6 +190,7 @@ export interface NpmSearchPackage {
   license?: string
   /** Algolia-only: package is an npm-owned security-holder takedown */
   isSecurityHeld?: boolean
+  deprecated?: boolean | string
 }
 
 /**
@@ -417,4 +418,5 @@ export interface PackageMetaResponse {
   maintainers?: NpmPerson[]
   weeklyDownloads?: number
   repositoryStars?: number | null
+  deprecated?: boolean | string
 }
diff --git a/shared/types/package-dependencies.ts b/shared/types/package-dependencies.ts
new file mode 100644
index 0000000000..900a7b9f8c
--- /dev/null
+++ b/shared/types/package-dependencies.ts
@@ -0,0 +1,27 @@
+import type { SortOption } from './preferences'
+
+export type DepSectionId =
+  | 'dependencies'
+  | 'devDependencies'
+  | 'peerDependencies'
+  | 'optionalDependencies'
+  | 'bundledDependencies'
+
+export type DepRegistry = 'npm' | 'jsr'
+
+export type DepFlag = 'optional' | 'bundled'
+
+export interface PackageDependencyItem {
+  name: string
+  packageName: string
+  range: string
+  registry: DepRegistry
+  flags: DepFlag[]
+}
+
+export interface PackageDependencySection {
+  id: DepSectionId
+  items: PackageDependencyItem[]
+}
+
+export type DependencySortOption = SortOption
diff --git a/shared/utils/parse-package-param.ts b/shared/utils/parse-package-param.ts
index 7ea86c73b8..7211d923be 100644
--- a/shared/utils/parse-package-param.ts
+++ b/shared/utils/parse-package-param.ts
@@ -75,33 +75,40 @@ export function parsePackageParam(pkgParam: string): ParsedPackageParams {
  * ```
  */
 export function parsePackageSpec(input: string): { name: string; version?: string } {
-  if (input.startsWith('@')) {
+  let spec = input
+  if (spec.startsWith('npm:')) {
+    spec = spec.slice(4)
+  } else if (spec.startsWith('jsr:')) {
+    spec = spec.slice(4)
+  }
+
+  if (spec.startsWith('@')) {
     // Scoped package: @scope/name or @scope/name@version
-    const slashIndex = input.indexOf('/')
+    const slashIndex = spec.indexOf('/')
     if (slashIndex === -1) {
       // Invalid format like just "@scope"
-      return { name: input }
+      return { name: spec }
     }
-    const afterSlash = input.slice(slashIndex + 1)
+    const afterSlash = spec.slice(slashIndex + 1)
     const atIndex = afterSlash.indexOf('@')
     if (atIndex === -1) {
       // @scope/name (no version)
-      return { name: input }
+      return { name: spec }
     }
     // @scope/name@version
     return {
-      name: input.slice(0, slashIndex + 1 + atIndex),
+      name: spec.slice(0, slashIndex + 1 + atIndex),
       version: afterSlash.slice(atIndex + 1),
     }
   }
 
   // Unscoped package: name or name@version
-  const atIndex = input.indexOf('@')
+  const atIndex = spec.indexOf('@')
   if (atIndex === -1) {
-    return { name: input }
+    return { name: spec }
   }
   return {
-    name: input.slice(0, atIndex),
-    version: input.slice(atIndex + 1),
+    name: spec.slice(0, atIndex),
+    version: spec.slice(atIndex + 1),
   }
 }
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
index 2ac88c05fc..42a75732bc 100644
--- a/test/e2e/interactions.spec.ts
+++ b/test/e2e/interactions.spec.ts
@@ -441,3 +441,32 @@ test.describe('Keyboard Shortcuts disabled', () => {
     await expect(page).toHaveURL(/\/package\/vue$/)
   })
 })
+
+test.describe('Package Dependencies Page', () => {
+  test('loads dependencies for a package without premature "no dependencies" state', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/package-deps/vue', { waitUntil: 'hydration' })
+
+    await expect(page.locator('h1').first()).toContainText('vue')
+
+    const dependenciesArticle = page.locator('#package-article')
+    await expect(dependenciesArticle).toBeVisible({ timeout: 15_000 })
+
+    await expect(page.locator('text=This version has no dependencies')).toHaveCount(0)
+  })
+
+  test('correctly shows no dependencies for a leaf package with zero dependencies', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/package-deps/react/v/19.2.5', { waitUntil: 'hydration' })
+
+    await expect(page.locator('h1').first()).toContainText('react')
+
+    await expect(page.locator('text=This version has no dependencies')).toBeVisible({
+      timeout: 15_000,
+    })
+  })
+})
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 923d9f7df4..11b0e61dcb 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -5,6 +5,7 @@ import 'axe-core'
 import type { AxeResults, RunOptions } from 'axe-core'
 import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from 'vitest'
 import { createLikesLeaderboardEntry } from '~~/test/fixtures/likes-leaderboard'
+import { normalizeDependencies } from '~/utils/npm/package-dependency-sections'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
@@ -214,7 +215,13 @@ import {
   PackageCard,
   PackageClaimPackageModal,
   PackageCompatibility,
-  PackageDependencies,
+  DependenciesCard,
+  DependenciesInsightsSummary,
+  DependenciesList,
+  DependenciesStatusIndicators,
+  DependenciesTable,
+  DependenciesTableRow,
+  DependenciesToolbar,
   PackageDeprecatedTree,
   PackageHeader,
   PackageInstallScripts,
@@ -1560,41 +1567,137 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('PackageDependencies', () => {
-    it('should have no accessibility violations without dependencies', async () => {
-      const component = await mountSuspended(PackageDependencies, {
-        props: { packageName: 'test-package', version: '1.0.0' },
+  describe('DependenciesCard', () => {
+    it('should have no accessibility violations', async () => {
+      const insights = usePackageDependencyInsights(
+        'test-package',
+        '1.0.0',
+        normalizeDependencies({ vue: '^3.0.0' }),
+      )
+      const component = await mountSuspended(DependenciesCard, {
+        props: {
+          insights,
+          item: {
+            name: 'vue',
+            packageName: 'vue',
+            range: '^3.0.0',
+            registry: 'npm',
+            flags: [],
+          },
+          showSkeleton: false,
+        },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+  })
 
-    it('should have no accessibility violations with dependencies', async () => {
-      const component = await mountSuspended(PackageDependencies, {
+  describe('DependenciesInsightsSummary', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DependenciesInsightsSummary, {
         props: {
-          packageName: 'test-package',
-          version: '1.0.0',
-          dependencies: {
-            vue: '^3.0.0',
-            lodash: '^4.17.0',
-          },
+          sections: [
+            {
+              id: 'dependencies',
+              items: [
+                { name: 'vue', packageName: 'vue', range: '^3.0.0', registry: 'npm', flags: [] },
+              ],
+            },
+          ],
+          showSkeleton: false,
         },
       })
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+  })
 
-    it('should have no accessibility violations with peer dependencies', async () => {
-      const component = await mountSuspended(PackageDependencies, {
+  describe('DependenciesList', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DependenciesList, {
         props: {
-          packageName: 'test-package',
-          version: '1.0.0',
-          peerDependencies: {
-            vue: '^3.0.0',
-          },
-          peerDependenciesMeta: {
-            vue: { optional: true },
-          },
+          items: [{ name: 'vue', packageName: 'vue', range: '^3.0.0', registry: 'npm', flags: [] }],
+          viewMode: 'cards',
+          showSkeleton: false,
+          sort: 'name-asc',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DependenciesStatusIndicators', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DependenciesStatusIndicators, {
+        props: {
+          name: 'vue',
+          flags: ['optional', 'bundled'],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DependenciesTable', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DependenciesTable, {
+        props: {
+          items: [{ name: 'vue', packageName: 'vue', range: '^3.0.0', registry: 'npm', flags: [] }],
+          sort: 'name-asc',
+          showSkeleton: false,
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DependenciesTableRow', () => {
+    it('should have no accessibility violations', async () => {
+      const insights = usePackageDependencyInsights(
+        'test-package',
+        '1.0.0',
+        normalizeDependencies({ vue: '^3.0.0' }),
+      )
+      const component = await mountSuspended(DependenciesTableRow, {
+        props: {
+          insights,
+          item: { name: 'vue', packageName: 'vue', range: '^3.0.0', registry: 'npm', flags: [] },
+          showSkeleton: false,
+        },
+        attachTo: (() => {
+          const table = document.createElement('table')
+          const tbody = document.createElement('tbody')
+          table.appendChild(tbody)
+          document.body.appendChild(table)
+          return tbody
+        })(),
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('DependenciesToolbar', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(DependenciesToolbar, {
+        props: {
+          filter: '',
+          sort: 'name-asc',
+          viewMode: 'cards',
+          filteredCount: 1,
+          totalCount: 1,
+          sections: [
+            {
+              id: 'dependencies',
+              items: [
+                { name: 'vue', packageName: 'vue', range: '^3.0.0', registry: 'npm', flags: [] },
+              ],
+            },
+          ],
+          activeSections: ['dependencies'],
         },
       })
       const results = await runAxe(component)
diff --git a/test/nuxt/composables/use-replacement-dependencies.spec.ts b/test/nuxt/composables/use-replacement-dependencies.spec.ts
index f0e2796bfe..506f747466 100644
--- a/test/nuxt/composables/use-replacement-dependencies.spec.ts
+++ b/test/nuxt/composables/use-replacement-dependencies.spec.ts
@@ -1,6 +1,8 @@
 import { describe, expect, it, vi } from 'vitest'
 import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import { defineEventHandler } from 'h3'
 import type { ModuleReplacement } from 'module-replacements'
+import { normalizeDependencies } from '~/utils/npm/package-dependency-sections'
 
 const SIMPLE_REPLACEMENT: ModuleReplacement = {
   id: 'snippet::is-even',
@@ -45,10 +47,10 @@ async function mountWithDeps(deps: Record<string, string> | undefined) {
 
   const WrapperComponent = defineComponent({
     setup() {
-      const replacements = useReplacementDependencies(() => deps)
+      const replacements = useReplacementDependencies(() => normalizeDependencies(deps))
 
       watchEffect(() => {
-        captured.value = { ...replacements.value }
+        captured.value = { ...replacements.data.value }
       })
 
       return () => h('div')
@@ -62,8 +64,15 @@ async function mountWithDeps(deps: Record<string, string> | undefined) {
 
 describe('useReplacementDependencies', () => {
   it('returns replacements for dependencies that have them', async () => {
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
-    registerEndpoint('/api/replacements/picoquery', () => null)
+    const handler = defineEventHandler(event => {
+      const url = event.node.req.url ?? ''
+      if (url.includes('is-even')) {
+        return { 'is-even': { replacement: SIMPLE_REPLACEMENT } }
+      }
+      return {}
+    })
+    registerEndpoint('/api/replacements/is-even,picoquery', handler)
+    registerEndpoint('/api/replacements/is-even%2Cpicoquery', handler)
 
     const replacements = await mountWithDeps({
       'is-even': '^1.0.0',
@@ -95,11 +104,12 @@ describe('useReplacementDependencies', () => {
   })
 
   it('handles multiple dependencies with replacements', async () => {
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
-    registerEndpoint('/api/replacements/array-includes', () => ({
-      replacement: NATIVE_REPLACEMENT,
+    const handler = defineEventHandler(() => ({
+      'is-even': { replacement: SIMPLE_REPLACEMENT },
+      'array-includes': { replacement: NATIVE_REPLACEMENT },
     }))
-    registerEndpoint('/api/replacements/picoquery', () => null)
+    registerEndpoint('/api/replacements/is-even,array-includes,picoquery', handler)
+    registerEndpoint('/api/replacements/is-even%2Carray-includes%2Cpicoquery', handler)
 
     const replacements = await mountWithDeps({
       'is-even': '^1.0.0',
@@ -121,10 +131,11 @@ describe('useReplacementDependencies', () => {
   })
 
   it('handles fetch errors gracefully', async () => {
-    registerEndpoint('/api/replacements/failing-package', () => {
+    const errorHandler = defineEventHandler(() => {
       throw new Error('Network error')
     })
-    registerEndpoint('/api/replacements/is-even', () => ({ replacement: SIMPLE_REPLACEMENT }))
+    registerEndpoint('/api/replacements/failing-package,is-even', errorHandler)
+    registerEndpoint('/api/replacements/failing-package%2Cis-even', errorHandler)
 
     const replacements = await mountWithDeps({
       'failing-package': '^1.0.0',
@@ -132,10 +143,9 @@ describe('useReplacementDependencies', () => {
     })
 
     await vi.waitFor(() => {
-      expect(replacements.value['is-even']).toBeDefined()
+      expect(replacements.value).toEqual({})
     })
 
     expect(replacements.value['failing-package']).toBeUndefined()
-    expect(replacements.value['is-even']?.type).toBe('simple')
   })
 })
diff --git a/test/nuxt/utils/package-dependency-sections.spec.ts b/test/nuxt/utils/package-dependency-sections.spec.ts
new file mode 100644
index 0000000000..0d71f4ebf4
--- /dev/null
+++ b/test/nuxt/utils/package-dependency-sections.spec.ts
@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getDefaultDependencySection,
+  getPackageDependencySections,
+  hasPackageDependencies,
+  inferDependencyRegistry,
+  normalizeDependencies,
+} from '~/utils/npm/package-dependency-sections'
+
+describe('package-dependency-sections', () => {
+  it('normalizes dependency records stripping protocol aliases', () => {
+    const raw = {
+      'vue': '^3.0.0',
+      'typescript7': 'npm:typescript@^7.0.2',
+      'std-path': 'jsr:@std/path@^1.0.0',
+    }
+    expect(normalizeDependencies(raw)).toEqual({
+      'vue': { name: 'vue', version: '^3.0.0' },
+      'typescript7': { name: 'typescript', version: '^7.0.2' },
+      'std-path': { name: '@std/path', version: '^1.0.0' },
+    })
+  })
+
+  it('detects jsr registry from package name', () => {
+    expect(inferDependencyRegistry('@jsr/std__path', '^1.0.0')).toBe('jsr')
+    expect(inferDependencyRegistry('lodash', '^4.0.0')).toBe('npm')
+  })
+
+  it('builds sections in order and omits empty ones', () => {
+    const sections = getPackageDependencySections({
+      dependencies: { lodash: '^4.0.0' },
+      devDependencies: { vitest: '^1.0.0' },
+      peerDependencies: { vue: '^3.0.0' },
+      peerDependenciesMeta: { vue: { optional: true } },
+    })
+
+    expect(sections.map(s => s.id)).toEqual(['dependencies', 'devDependencies', 'peerDependencies'])
+    expect(sections[2]?.items[0]?.flags).toContain('optional')
+  })
+
+  it('correctly handles alias dependencies', () => {
+    const sections = getPackageDependencySections({
+      dependencies: {
+        typescript: 'npm:typescript@^7.0.2',
+        typescript5: 'npm:typescript@~5.7.3',
+        typescript6: 'npm:typescript@^6.0.3',
+      },
+    })
+
+    expect(sections[0]?.items).toEqual([
+      {
+        name: 'typescript',
+        packageName: 'typescript',
+        range: '^7.0.2',
+        registry: 'npm',
+        flags: [],
+      },
+      {
+        name: 'typescript5',
+        packageName: 'typescript',
+        range: '~5.7.3',
+        registry: 'npm',
+        flags: [],
+      },
+      {
+        name: 'typescript6',
+        packageName: 'typescript',
+        range: '^6.0.3',
+        registry: 'npm',
+        flags: [],
+      },
+    ])
+  })
+
+  it('reports whether a version has dependencies', () => {
+    expect(hasPackageDependencies({})).toBe(false)
+    expect(
+      hasPackageDependencies({
+        optionalDependencies: { fsevents: '^2.0.0' },
+      }),
+    ).toBe(true)
+  })
+
+  it('defaults to the first available section', () => {
+    const sections = getPackageDependencySections({
+      devDependencies: { vitest: '^1.0.0' },
+    })
+    expect(getDefaultDependencySection(sections)).toBe('devDependencies')
+  })
+})
diff --git a/test/unit/app/composables/use-package-transform.spec.ts b/test/unit/app/composables/use-package-transform.spec.ts
new file mode 100644
index 0000000000..62edea779b
--- /dev/null
+++ b/test/unit/app/composables/use-package-transform.spec.ts
@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+import { transformPackument } from '../../../../app/composables/npm/usePackage'
+
+function createVersion(version: string) {
+  return {
+    _npmVersion: '10.0.0',
+    _id: `foo@${version}`,
+    name: 'foo',
+    version,
+    dependencies: {
+      bar: '^1.0.0',
+    },
+    dist: {
+      shasum: version,
+      tarball: `https://registry.npmjs.org/foo/-/foo-${version}.tgz`,
+      signatures: [],
+    },
+  }
+}
+
+function createPackument(
+  versions: Packument['versions'],
+  time: Packument['time'],
+  latest: string,
+): Packument {
+  return {
+    '_rev': '1',
+    '_id': 'foo',
+    'name': 'foo',
+    'description': 'A test package',
+    'dist-tags': { latest },
+    time,
+    versions,
+    'maintainers': [],
+    'author': { name: 'test' },
+    'license': 'MIT',
+    'homepage': '',
+    'keywords': [],
+    'repository': { type: 'git', url: 'https://github.com/foo/foo' },
+    'bugs': { url: '' },
+    'readme': '',
+  }
+}
+
+describe('transformPackument', () => {
+  it('resolves latest dist-tag version when requestedVersion is null, undefined, or a dist-tag', () => {
+    const packument = createPackument(
+      {
+        '1.0.0': createVersion('1.0.0'),
+        '1.0.1': createVersion('1.0.1'),
+      },
+      {
+        'created': '2026-01-01T00:00:00.000Z',
+        'modified': '2026-01-02T00:00:00.000Z',
+        '1.0.0': '2026-01-01T00:00:00.000Z',
+        '1.0.1': '2026-01-02T00:00:00.000Z',
+      },
+      '1.0.1',
+    )
+
+    const transformedNull = transformPackument(packument, null)
+    expect(transformedNull.requestedVersion?.version).toBe('1.0.1')
+    expect(transformedNull.requestedVersion?.dependencies).toEqual({ bar: '^1.0.0' })
+
+    const transformedUndefined = transformPackument(packument, undefined)
+    expect(transformedUndefined.requestedVersion?.version).toBe('1.0.1')
+    expect(transformedUndefined.requestedVersion?.dependencies).toEqual({ bar: '^1.0.0' })
+
+    const transformedTag = transformPackument(packument, 'latest')
+    expect(transformedTag.requestedVersion?.version).toBe('1.0.1')
+    expect(transformedTag.requestedVersion?.dependencies).toEqual({ bar: '^1.0.0' })
+  })
+
+  it('uses specific requestedVersion when provided and available', () => {
+    const packument = createPackument(
+      {
+        '1.0.0': createVersion('1.0.0'),
+        '1.0.1': createVersion('1.0.1'),
+      },
+      {
+        'created': '2026-01-01T00:00:00.000Z',
+        'modified': '2026-01-02T00:00:00.000Z',
+        '1.0.0': '2026-01-01T00:00:00.000Z',
+        '1.0.1': '2026-01-02T00:00:00.000Z',
+      },
+      '1.0.1',
+    )
+
+    const transformed = transformPackument(packument, '1.0.0')
+    expect(transformed.requestedVersion?.version).toBe('1.0.0')
+  })
+})
diff --git a/test/unit/app/utils/problematic-dependencies.spec.ts b/test/unit/app/utils/problematic-dependencies.spec.ts
new file mode 100644
index 0000000000..169e908f13
--- /dev/null
+++ b/test/unit/app/utils/problematic-dependencies.spec.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest'
+import { getDeprecatedDepInfo, getVulnerableDepInfo } from '~/utils/npm/problematic-dependencies'
+import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
+
+describe('problematic dependencies utils', () => {
+  describe('getDeprecatedDepInfo', () => {
+    it('returns deprecated info from vulnTree if present', () => {
+      const vulnTree: VulnerabilityTreeResult = {
+        package: 'test',
+        version: '1.0.0',
+        vulnerablePackages: [],
+        deprecatedPackages: [
+          {
+            name: 'dep-pkg',
+            version: '1.0.0',
+            depth: 'root',
+            path: ['dep-pkg'],
+            message: 'Deprecated in tree',
+          },
+        ],
+        totalPackages: 1,
+        failedQueries: 0,
+        totalCounts: { total: 0, critical: 0, high: 0, moderate: 0, low: 0 },
+      }
+
+      const info = getDeprecatedDepInfo('dep-pkg', vulnTree)
+      expect(info).not.toBeNull()
+      expect(info?.message).toBe('Deprecated in tree')
+    })
+
+    it('uses fallbackDeprecated if vulnTree does not contain deprecation info', () => {
+      const info = getDeprecatedDepInfo('dep-pkg', undefined, 'Deprecated message')
+      expect(info).not.toBeNull()
+      expect(info?.name).toBe('dep-pkg')
+      expect(info?.message).toBe('Deprecated message')
+    })
+
+    it('returns null if neither vulnTree nor fallbackDeprecated is present', () => {
+      const info = getDeprecatedDepInfo('dep-pkg', undefined)
+      expect(info).toBeNull()
+    })
+  })
+
+  describe('getVulnerableDepInfo', () => {
+    it('returns vulnerable info from vulnTree if present', () => {
+      const vulnTree: VulnerabilityTreeResult = {
+        package: 'test',
+        version: '1.0.0',
+        vulnerablePackages: [
+          {
+            name: 'vuln-pkg',
+            version: '1.0.0',
+            depth: 'root',
+            path: ['vuln-pkg'],
+            vulnerabilities: [],
+            counts: { total: 1, critical: 1, high: 0, moderate: 0, low: 0 },
+          },
+        ],
+        deprecatedPackages: [],
+        totalPackages: 1,
+        failedQueries: 0,
+        totalCounts: { total: 1, critical: 1, high: 0, moderate: 0, low: 0 },
+      }
+
+      const info = getVulnerableDepInfo('vuln-pkg', vulnTree)
+      expect(info).not.toBeNull()
+      expect(info?.name).toBe('vuln-pkg')
+    })
+
+    it('returns null if package is not in vulnerablePackages', () => {
+      const info = getVulnerableDepInfo('safe-pkg', undefined)
+      expect(info).toBeNull()
+    })
+  })
+
+  describe('combined status checks for packages with multiple issues', () => {
+    it('correctly identifies both vulnerable and deprecated info for the same package', () => {
+      const vulnTree: VulnerabilityTreeResult = {
+        package: 'request',
+        version: '2.88.2',
+        vulnerablePackages: [
+          {
+            name: 'request',
+            version: '2.88.2',
+            depth: 'root',
+            path: ['request'],
+            vulnerabilities: [],
+            counts: { total: 1, critical: 0, high: 1, moderate: 0, low: 0 },
+          },
+        ],
+        deprecatedPackages: [
+          {
+            name: 'request',
+            version: '2.88.2',
+            depth: 'root',
+            path: ['request'],
+            message: 'request has been deprecated',
+          },
+        ],
+        totalPackages: 1,
+        failedQueries: 0,
+        totalCounts: { total: 1, critical: 0, high: 1, moderate: 0, low: 0 },
+      }
+
+      const vulnInfo = getVulnerableDepInfo('request', vulnTree)
+      const deprInfo = getDeprecatedDepInfo('request', vulnTree, 'request has been deprecated')
+
+      expect(vulnInfo).not.toBeNull()
+      expect(deprInfo).not.toBeNull()
+    })
+  })
+})
diff --git a/test/unit/app/utils/router.spec.ts b/test/unit/app/utils/router.spec.ts
index cf93ed00ea..f2927532c9 100644
--- a/test/unit/app/utils/router.spec.ts
+++ b/test/unit/app/utils/router.spec.ts
@@ -1,5 +1,31 @@
 import { describe, expect, it } from 'vitest'
-import { docsRoute } from '~/utils/router'
+import { dependenciesRoute, docsRoute } from '~/utils/router'
+
+describe('dependenciesRoute', () => {
+  it('generates dependencies route for unscoped package without sections', () => {
+    expect(dependenciesRoute('vue', '3.4.0')).toEqual({
+      name: 'dependencies',
+      params: { path: ['vue', 'v', '3.4.0'] },
+      query: undefined,
+    })
+  })
+
+  it('generates dependencies route with single section as query', () => {
+    expect(dependenciesRoute('vue', '3.4.0', 'devDependencies')).toEqual({
+      name: 'dependencies',
+      params: { path: ['vue', 'v', '3.4.0'] },
+      query: { sections: 'devDependencies' },
+    })
+  })
+
+  it('generates dependencies route with multiple sections as comma-separated query', () => {
+    expect(dependenciesRoute('@nuxt/kit', '3.10.0', ['dependencies', 'peerDependencies'])).toEqual({
+      name: 'dependencies',
+      params: { path: ['@nuxt', 'kit', 'v', '3.10.0'] },
+      query: { sections: 'dependencies,peerDependencies' },
+    })
+  })
+})
 
 describe('docsRoute', () => {
   it('emits a scoped name as two path segments (literal slash, not %2F)', () => {
diff --git a/test/unit/app/utils/versions.spec.ts b/test/unit/app/utils/versions.spec.ts
index bd06dca885..064e1e2f49 100644
--- a/test/unit/app/utils/versions.spec.ts
+++ b/test/unit/app/utils/versions.spec.ts
@@ -11,8 +11,29 @@ import {
   getVersionGroupLabel,
   isSameVersionGroup,
   parseStableVersion,
+  resolveMinVersion,
 } from '~/utils/versions'
 
+describe('resolveMinVersion', () => {
+  it('returns null for null, undefined, or empty string', () => {
+    expect(resolveMinVersion(null)).toBeNull()
+    expect(resolveMinVersion(undefined)).toBeNull()
+    expect(resolveMinVersion('')).toBeNull()
+  })
+
+  it('resolves standard semver ranges to minimum normalized version', () => {
+    expect(resolveMinVersion('^1.2.3')).toBe('1.2.3')
+    expect(resolveMinVersion('~2.0.0')).toBe('2.0.0')
+    expect(resolveMinVersion('>=3.1.0')).toBe('3.1.0')
+  })
+
+  it('returns original input without throwing for non-semver or dist-tags like "latest"', () => {
+    expect(resolveMinVersion('latest')).toBe('latest')
+    expect(resolveMinVersion('next')).toBe('next')
+    expect(resolveMinVersion('invalid-range-!@#')).toBe('invalid-range-!@#')
+  })
+})
+
 describe('getPrereleaseChannel', () => {
   it('returns empty string for stable versions', () => {
     expect(getPrereleaseChannel('1.0.0')).toBe('')
diff --git a/test/unit/server/utils/dependency-resolver.spec.ts b/test/unit/server/utils/dependency-resolver.spec.ts
index f1beaaaf2d..8f20ede3df 100644
--- a/test/unit/server/utils/dependency-resolver.spec.ts
+++ b/test/unit/server/utils/dependency-resolver.spec.ts
@@ -183,6 +183,22 @@ describe('dependency-resolver', () => {
       // Range with prerelease - semver correctly prefers stable 2.0.0 over 2.0.0-beta.1
       expect(resolveVersion('^2.0.0-beta.0', versions)).toBe('2.0.0')
     })
+
+    it('resolves dist-tags when provided in distTags map', () => {
+      const distTags = { latest: '3.0.0', next: '2.0.0-beta.1' }
+      expect(resolveVersion('latest', versions, distTags)).toBe('3.0.0')
+      expect(resolveVersion('next', versions, distTags)).toBe('2.0.0-beta.1')
+    })
+
+    it('returns null without throwing error for invalid comparator or unknown dist-tag', () => {
+      expect(resolveVersion('latest', versions)).toBe(null)
+      expect(resolveVersion('invalid-comparator-123', versions)).toBe(null)
+    })
+
+    it('resolves npm: protocol aliases with dist-tags', () => {
+      const distTags = { latest: '3.0.0' }
+      expect(resolveVersion('npm:some-pkg@latest', versions, distTags)).toBe('3.0.0')
+    })
   })
 
   describe('resolveDependencyTree', () => {
diff --git a/test/unit/shared/utils/parse-package-param.spec.ts b/test/unit/shared/utils/parse-package-param.spec.ts
index dbf2223082..61107266eb 100644
--- a/test/unit/shared/utils/parse-package-param.spec.ts
+++ b/test/unit/shared/utils/parse-package-param.spec.ts
@@ -1,5 +1,47 @@
 import { describe, expect, it } from 'vitest'
-import { parsePackageParam } from '#shared/utils/parse-package-param'
+import { parsePackageParam, parsePackageSpec } from '#shared/utils/parse-package-param'
+
+describe('parsePackageSpec', () => {
+  it('parses standard package specs', () => {
+    expect(parsePackageSpec('react')).toEqual({ name: 'react', version: undefined })
+    expect(parsePackageSpec('react@18.2.0')).toEqual({ name: 'react', version: '18.2.0' })
+    expect(parsePackageSpec('@vue/reactivity')).toEqual({
+      name: '@vue/reactivity',
+      version: undefined,
+    })
+    expect(parsePackageSpec('@vue/reactivity@3.4.0')).toEqual({
+      name: '@vue/reactivity',
+      version: '3.4.0',
+    })
+  })
+
+  it('parses npm: protocol aliased specs', () => {
+    expect(parsePackageSpec('npm:typescript@^7.0.2')).toEqual({
+      name: 'typescript',
+      version: '^7.0.2',
+    })
+    expect(parsePackageSpec('npm:typescript@~5.7.3')).toEqual({
+      name: 'typescript',
+      version: '~5.7.3',
+    })
+    expect(parsePackageSpec('npm:@types/node@^20.0.0')).toEqual({
+      name: '@types/node',
+      version: '^20.0.0',
+    })
+    expect(parsePackageSpec('npm:@jsr/luca__cases@1')).toEqual({
+      name: '@jsr/luca__cases',
+      version: '1',
+    })
+    expect(parsePackageSpec('npm:typescript')).toEqual({ name: 'typescript', version: undefined })
+  })
+
+  it('parses jsr: protocol aliased specs', () => {
+    expect(parsePackageSpec('jsr:@std/path@^1.0.0')).toEqual({
+      name: '@std/path',
+      version: '^1.0.0',
+    })
+  })
+})
 
 describe('parsePackageParam', () => {
   describe('unscoped packages', () => {
diff --git a/uno.config.ts b/uno.config.ts
index 426b9dd40b..8b693f4a32 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -23,11 +23,7 @@ export default defineConfig({
         // Exclude OG image templates from the pipeline
         '**/OgImage/*.takumi.vue',
       ],
-      include: [
-        /\.(vue|mdx|html)($|\?)/,
-        // git provider icons composable
-        '**/composables/useProviderIcon.ts',
-      ],
+      include: [/\.(vue|mdx|html)($|\?)/, '**/utils/**/*.ts', '**/composables/**/*.ts'],
     },
   },
   presets: [