From 2106cb4ede581a89b14670326206b7b5ad289e59 Mon Sep 17 00:00:00 2001
From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com>
Date: Wed, 8 Apr 2026 14:30:26 +0200
Subject: [PATCH 1/3] feat(ui): basic dep sizes

---
 app/components/Package/Dependencies.vue | 29 +++++++++++++++++++++++++
 app/pages/package/[[org]]/[name].vue    |  1 +
 2 files changed, 30 insertions(+)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 2bddda193a..5930ba68b6 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -7,6 +7,7 @@ const { t } = useI18n()
 const props = defineProps<{
   packageName: string
   version: string
+  packageSize?: InstallSizeResult | null
   dependencies?: Record<string, string>
   peerDependencies?: Record<string, string>
   peerDependenciesMeta?: Record<string, { optional?: boolean }>
@@ -37,6 +38,11 @@ function getDeprecatedDepInfo(depName: string) {
   return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
+// Get dependency size (only direct deps)
+function getSizeDepInfo(depName: string) {
+  return props.packageSize?.dependencies?.find(p => p.name === depName)?.size ?? null
+}
+
 // Sort dependencies alphabetically
 const sortedDependencies = computed(() => {
   if (!props.dependencies) return []
@@ -103,6 +109,7 @@ const {
 } = useVisibleItems(sortedOptionalDependencies, 10)
 
 const numberFormatter = useNumberFormatter()
+const bytesFormatter = useBytesFormatter()
 </script>
 
 <template>
@@ -189,6 +196,28 @@ const numberFormatter = useNumberFormatter()
             >
               {{ version }}
             </LinkBase>
+            <TooltipApp
+              v-if="getSizeDepInfo(dep)"
+              class="shrink-0"
+              :class="getVersionClass(undefined)"
+              :text="
+                $t('package.stats.size_tooltip.unpacked', {
+                  size: bytesFormatter.format(getSizeDepInfo(dep)!),
+                })
+              "
+            >
+              <button
+                type="button"
+                class="inline-flex items-center justify-center p-2 -m-2"
+                :aria-label="
+                  $t('package.stats.size_tooltip.unpacked', {
+                    size: bytesFormatter.format(getSizeDepInfo(dep)!),
+                  })
+                "
+              >
+                <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+              </button>
+            </TooltipApp>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index bc10db6210..de9477a2e0 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -983,6 +983,7 @@ const showSkeleton = shallowRef(false)
               v-if="hasDependencies && resolvedVersion && displayVersion"
               :package-name="pkg.name"
               :version="resolvedVersion"
+              :package-size="installSize"
               :dependencies="displayVersion.dependencies"
               :peer-dependencies="displayVersion.peerDependencies"
               :peer-dependencies-meta="displayVersion.peerDependenciesMeta"

From f6aa69012ac7f04a4702b412350b6bfba4178457 Mon Sep 17 00:00:00 2001
From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com>
Date: Fri, 10 Apr 2026 00:49:22 +0200
Subject: [PATCH 2/3] feat: total size split-bar

---
 app/components/Package/Dependencies.vue | 258 ++++++++++++++++++++++--
 app/pages/package/[[org]]/[name].vue    |   3 +
 2 files changed, 243 insertions(+), 18 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 5930ba68b6..91740a34d4 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { NuxtError } from '#app'
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
 
@@ -12,6 +13,7 @@ const props = defineProps<{
   peerDependencies?: Record<string, string>
   peerDependenciesMeta?: Record<string, { optional?: boolean }>
   optionalDependencies?: Record<string, string>
+  bundledDependencies?: boolean | string[]
 }>()
 
 // Fetch outdated info for dependencies
@@ -38,11 +40,6 @@ function getDeprecatedDepInfo(depName: string) {
   return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
-// Get dependency size (only direct deps)
-function getSizeDepInfo(depName: string) {
-  return props.packageSize?.dependencies?.find(p => p.name === depName)?.size ?? null
-}
-
 // Sort dependencies alphabetically
 const sortedDependencies = computed(() => {
   if (!props.dependencies) return []
@@ -72,6 +69,198 @@ const sortedOptionalDependencies = computed(() => {
   return Object.entries(props.optionalDependencies).sort(([a], [b]) => a.localeCompare(b))
 })
 
+// Fetch size information for dependencies that require it
+const { data: serverSizes, pending: sizesLoading } = await useAsyncData(
+  `sizes:${props.packageName}:${props.version}`,
+  async (_app, { signal }) => {
+    const entries = sortedDependencies.value
+
+    const results = await Promise.all(
+      entries.map<
+        Promise<
+          { kind: 'success'; packageSize: InstallSizeResult } | { kind: 'error'; error: NuxtError }
+        >
+      >(async ([name, version]) => {
+        try {
+          const { data: resolvedVersion, error } = await useResolvedVersion(name, version)
+
+          if (error.value || !resolvedVersion.value) return { kind: 'error', error: error.value! }
+
+          return {
+            kind: 'success',
+            packageSize: await $fetch<InstallSizeResult>(
+              `/api/registry/install-size/${name}/v/${encodeURIComponent(resolvedVersion.value)}`,
+              { signal },
+            ),
+          }
+        } catch (err) {
+          return { kind: 'error', error: (err as Ref<NuxtError>)?.value }
+        }
+      }),
+    )
+
+    return results.reduce(
+      (acc, curr) => {
+        if (curr.kind === 'error') return acc
+        acc[curr.packageSize.package] = curr
+        return acc
+      },
+      {} as Record<
+        string,
+        { kind: 'success'; packageSize: InstallSizeResult } | { kind: 'error'; error: NuxtError }
+      >,
+    )
+  },
+  {
+    watch: [sortedDependencies],
+  },
+)
+
+// Minimum percentage to be shown as an individual slice
+const THRESHOLD_PERCENT = 10
+
+type Sizereq = {
+  info: InstallSizeResult
+  bundled: boolean
+  percent: number
+  error: NuxtError | null
+}
+
+// Process dependencies for size visualization
+const sortedSizereqDependecies = computed(() => {
+  if (!props.packageSize?.totalSize || !props.packageSize.dependencies) {
+    return { visible: [], others: [], totalOthersSize: 0, othersPercentage: 0 }
+  }
+
+  const total = props.packageSize.totalSize
+
+  // 1. Map everything first, preserving the 'bundled' flag from the source
+  const allMapped = props.packageSize.dependencies
+    .map(depSize => {
+      const bundled = !sortedDependencies.value.some(([name]) => name === depSize.name)
+      const percent = props.packageSize ? (depSize.size / props.packageSize.totalSize) * 100 : 0
+      const serverData = serverSizes.value?.[depSize.name]
+      const error = serverData?.kind === 'error' ? serverData.error : null
+      return {
+        info:
+          serverData?.kind === 'success'
+            ? {
+                package: depSize.name,
+                totalSize: serverData.packageSize?.totalSize ?? depSize.size,
+                selfSize: serverData.packageSize?.selfSize ?? depSize.size,
+              }
+            : {
+                package: depSize.name,
+                totalSize: depSize.size,
+                selfSize: depSize.size,
+              },
+        error,
+        bundled,
+        percent,
+      } as Sizereq
+    })
+    .sort((a, b) => {
+      // Bundled first
+      if (a.bundled !== b.bundled) return a.bundled ? -1 : 1
+      return b.info.totalSize - a.info.totalSize
+    })
+
+  const visible: Sizereq[] = []
+  const others: Sizereq[] = []
+
+  for (const dep of allMapped) {
+    const percentage = (dep.info.totalSize / total) * 100
+    if (percentage >= THRESHOLD_PERCENT) {
+      visible.push({ ...dep, percent: percentage })
+    } else {
+      others.push(dep)
+    }
+  }
+
+  const totalOthersSize = others.reduce((acc, d) => acc + d.info.totalSize, 0)
+  const othersPercentage = (totalOthersSize / total) * 100
+
+  if (othersPercentage < THRESHOLD_PERCENT || others.length === 1) {
+    visible.push(others[0]!)
+    others.length = 0
+    visible.sort((a, b) => b.info.totalSize - a.info.totalSize)
+  }
+
+  return { visible, others, totalOthersSize, othersPercentage }
+})
+
+const othersTooltip = computed(() => {
+  const others = sortedSizereqDependecies.value.others
+  if (others.length === 0) return ''
+
+  const MAX_VISIBLE_IN_TOOLTIP = 0
+  const visiblePart = others.slice(0, MAX_VISIBLE_IN_TOOLTIP)
+  const remainingCount = others.length - MAX_VISIBLE_IN_TOOLTIP
+
+  const lines = [
+    bytesFormatter.format(sortedSizereqDependecies.value.totalOthersSize),
+    numberFormatter.value.format(sortedSizereqDependecies.value.othersPercentage),
+    '',
+    ...visiblePart.flatMap(size => [size.info.package, getDepSizeTooltipText(size), '']),
+  ]
+
+  if (remainingCount > 0) {
+    lines.push(t('package.size_increase.deps', { count: remainingCount }))
+  }
+
+  return lines.join('\n')
+})
+
+const selfSizeWidth = computed(() => {
+  if (!props.packageSize?.selfSize || !props.packageSize?.totalSize) return 0
+  return (props.packageSize.selfSize / props.packageSize.totalSize) * 100
+})
+
+const remainingWidth = computed(() => {
+  const total = props.packageSize?.totalSize
+  if (!total) return 100
+
+  // Sum up everything we actually HAVE data for
+  const self = props.packageSize.selfSize || 0
+  const depsSum = [
+    ...sortedSizereqDependecies.value.visible,
+    ...sortedSizereqDependecies.value.others,
+  ].reduce((acc, d) => acc + d.info.totalSize, 0)
+
+  const width = ((total - (self + depsSum)) / total) * 100
+  return Math.max(0, width)
+})
+
+// Get dependency size tooltip
+function getDepSizeTooltip(dep: string): string | undefined {
+  const size = [
+    ...sortedSizereqDependecies.value.visible,
+    ...sortedSizereqDependecies.value.others,
+  ].find(d => d.info.package === dep)
+  return size && getDepSizeTooltipText(size)
+}
+
+function getDepSizeTooltipText(size: Sizereq): string {
+  const packageSize = size?.error ? undefined : size?.info
+  const percent = size?.percent
+  return [
+    size?.error?.message,
+    percent && numberFormatter.value.format(percent),
+    packageSize &&
+      packageSize?.totalSize !== packageSize?.selfSize &&
+      t('package.stats.size_tooltip.unpacked', {
+        size: bytesFormatter.format(packageSize.selfSize!),
+      }),
+    packageSize?.totalSize &&
+      t('package.stats.size_tooltip.total', {
+        count: packageSize.dependencyCount,
+        size: bytesFormatter.format(packageSize.totalSize),
+      }),
+  ]
+    .filter(Boolean)
+    .join('\n')
+}
+
 // Get version tooltip
 function getDepVersionTooltip(dep: string, version: string) {
   const outdated = outdatedDeps.value[dep]
@@ -128,6 +317,41 @@ const bytesFormatter = useBytesFormatter()
         )
       "
     >
+      <div class="gap-0.5 flex flex-row h-6 w-full bg-fg-muted/10 overflow-hidden rounded-md">
+        <TooltipApp
+          v-if="selfSizeWidth > 0"
+          :text="
+            t('package.stats.size_tooltip.unpacked', {
+              size: bytesFormatter.format(props.packageSize?.selfSize || 0),
+            })
+          "
+          class="h-full bg-blue-500"
+          :style="{ width: selfSizeWidth + '%' }"
+        />
+
+        <template v-for="dep in sortedSizereqDependecies.visible" :key="dep.info.package">
+          <TooltipApp
+            :text="`${dep.info.package}\n${getDepSizeTooltip(dep.info.package)}`"
+            class="h-full"
+            :class="dep.bundled ? 'bg-blue-500' : 'bg-fg'"
+            :style="{ width: dep.percent + '%' }"
+          />
+        </template>
+
+        <TooltipApp
+          v-if="sortedSizereqDependecies.others.length > 0"
+          :text="othersTooltip"
+          class="h-full bg-fg flex items-center justify-center"
+          :style="{ width: sortedSizereqDependecies.othersPercentage + '%' }"
+        >
+          <span class="i-lucide:layers-2 w-3 h-3 text-bg" aria-hidden="true" />
+        </TooltipApp>
+
+        <div
+          v-if="remainingWidth > 0"
+          class="h-full bg-bg-elevated animate-skeleton-pulse flex-1"
+        />
+      </div>
       <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in visibleDeps"
@@ -197,25 +421,23 @@ const bytesFormatter = useBytesFormatter()
               {{ version }}
             </LinkBase>
             <TooltipApp
-              v-if="getSizeDepInfo(dep)"
+              v-if="getDepSizeTooltip(dep)"
               class="shrink-0"
               :class="getVersionClass(undefined)"
-              :text="
-                $t('package.stats.size_tooltip.unpacked', {
-                  size: bytesFormatter.format(getSizeDepInfo(dep)!),
-                })
-              "
+              :text="getDepSizeTooltip(dep)"
             >
               <button
                 type="button"
-                class="inline-flex items-center justify-center p-2 -m-2"
-                :aria-label="
-                  $t('package.stats.size_tooltip.unpacked', {
-                    size: bytesFormatter.format(getSizeDepInfo(dep)!),
-                  })
-                "
+                class="inline-flex items-center justify-center p-2 -m-2 outline-none"
+                :aria-label="getDepSizeTooltip(dep)"
               >
-                <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+                <span
+                  class="i-lucide:info w-3 h-3 opacity-50 transition-opacity hover:opacity-100"
+                  :class="{
+                    'i-svg-spinners:ring-resize': sizesLoading && !serverSizes?.[dep],
+                  }"
+                  aria-hidden="true"
+                />
               </button>
             </TooltipApp>
             <span v-if="outdatedDeps[dep]" class="sr-only">
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index de9477a2e0..157de8217b 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -988,6 +988,9 @@ const showSkeleton = shallowRef(false)
               :peer-dependencies="displayVersion.peerDependencies"
               :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
               :optional-dependencies="displayVersion.optionalDependencies"
+              :bundled-dependencies="
+                displayVersion.bundleDependencies || displayVersion.bundledDependencies
+              "
             />
 
             <!-- Keywords -->

From a47cfd602a58d6b174493da30d4b4c22c97a86af Mon Sep 17 00:00:00 2001
From: Mopsgamer <79159094+Mopsgamer@users.noreply.github.com>
Date: Sat, 11 Apr 2026 15:00:01 +0200
Subject: [PATCH 3/3] fix: click to navigate, apply suggestions, blue is accent

---
 app/components/Package/Dependencies.vue | 108 +++++++++++++-----------
 1 file changed, 59 insertions(+), 49 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 91740a34d4..953b4d3d2c 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -70,7 +70,7 @@ const sortedOptionalDependencies = computed(() => {
 })
 
 // Fetch size information for dependencies that require it
-const { data: serverSizes, pending: sizesLoading } = await useAsyncData(
+const { data: sizereqData, pending: sizereqLoading } = await useAsyncData(
   `sizes:${props.packageName}:${props.version}`,
   async (_app, { signal }) => {
     const entries = sortedDependencies.value
@@ -113,11 +113,12 @@ const { data: serverSizes, pending: sizesLoading } = await useAsyncData(
   },
   {
     watch: [sortedDependencies],
+    server: false,
   },
 )
 
 // Minimum percentage to be shown as an individual slice
-const THRESHOLD_PERCENT = 10
+const THRESHOLD_PERCENT = 2
 
 type Sizereq = {
   info: InstallSizeResult
@@ -132,44 +133,45 @@ const sortedSizereqDependecies = computed(() => {
     return { visible: [], others: [], totalOthersSize: 0, othersPercentage: 0 }
   }
 
-  const total = props.packageSize.totalSize
-
-  // 1. Map everything first, preserving the 'bundled' flag from the source
-  const allMapped = props.packageSize.dependencies
-    .map(depSize => {
-      const bundled = !sortedDependencies.value.some(([name]) => name === depSize.name)
-      const percent = props.packageSize ? (depSize.size / props.packageSize.totalSize) * 100 : 0
-      const serverData = serverSizes.value?.[depSize.name]
-      const error = serverData?.kind === 'error' ? serverData.error : null
-      return {
-        info:
-          serverData?.kind === 'success'
-            ? {
-                package: depSize.name,
-                totalSize: serverData.packageSize?.totalSize ?? depSize.size,
-                selfSize: serverData.packageSize?.selfSize ?? depSize.size,
-              }
-            : {
-                package: depSize.name,
-                totalSize: depSize.size,
-                selfSize: depSize.size,
-              },
-        error,
-        bundled,
-        percent,
-      } as Sizereq
-    })
-    .sort((a, b) => {
-      // Bundled first
-      if (a.bundled !== b.bundled) return a.bundled ? -1 : 1
-      return b.info.totalSize - a.info.totalSize
-    })
+  const allMapped = props.packageSize.dependencies.map(depSize => {
+    let bundled: boolean = false
+    switch (typeof props.bundledDependencies) {
+      case 'boolean':
+        bundled = props.bundledDependencies
+        break
+      case 'object':
+        bundled = props.bundledDependencies.some(name => name === depSize.name)
+        break
+    }
+    const percent = props.packageSize ? (depSize.size / props.packageSize.totalSize) * 100 : 0
+    const serverData = sizereqData.value?.[depSize.name]
+    const error = serverData?.kind === 'error' ? serverData.error : null
+    return {
+      info:
+        serverData?.kind === 'success' && serverData.packageSize
+          ? {
+              package: depSize.name,
+              version: depSize.version,
+              totalSize: serverData.packageSize.totalSize,
+              selfSize: serverData.packageSize.selfSize,
+            }
+          : {
+              package: depSize.name,
+              version: depSize.version,
+              totalSize: depSize.size,
+              selfSize: depSize.size,
+            },
+      error,
+      bundled,
+      percent,
+    } as Sizereq
+  })
 
   const visible: Sizereq[] = []
   const others: Sizereq[] = []
 
   for (const dep of allMapped) {
-    const percentage = (dep.info.totalSize / total) * 100
+    const percentage = (dep.info.selfSize / props.packageSize.totalSize) * 100
     if (percentage >= THRESHOLD_PERCENT) {
       visible.push({ ...dep, percent: percentage })
     } else {
@@ -177,16 +179,20 @@ const sortedSizereqDependecies = computed(() => {
     }
   }
 
-  const totalOthersSize = others.reduce((acc, d) => acc + d.info.totalSize, 0)
-  const othersPercentage = (totalOthersSize / total) * 100
+  const othersSelfSize = others.reduce((acc, d) => acc + d.info.selfSize, 0)
+  const othersPercentage = (othersSelfSize / props.packageSize.totalSize) * 100
 
-  if (othersPercentage < THRESHOLD_PERCENT || others.length === 1) {
-    visible.push(others[0]!)
-    others.length = 0
-    visible.sort((a, b) => b.info.totalSize - a.info.totalSize)
-  }
+  //   if (others.length === 1) {
+  //     visible.push(others[0]!)
+  //     others.length = 0
+  //     visible.sort((a, b) => b.info.totalSize - a.info.totalSize)
+  //   } else if (others.length > 1 && othersPercentage < THRESHOLD_PERCENT) {
+  //     visible.push(...others)
+  //     others.length = 0
+  //     visible.sort((a, b) => b.info.totalSize - a.info.totalSize)
+  //   }
 
-  return { visible, others, totalOthersSize, othersPercentage }
+  return { visible, others, totalOthersSize: othersSelfSize, othersPercentage }
 })
 
 const othersTooltip = computed(() => {
@@ -220,12 +226,11 @@ const remainingWidth = computed(() => {
   const total = props.packageSize?.totalSize
   if (!total) return 100
 
-  // Sum up everything we actually HAVE data for
   const self = props.packageSize.selfSize || 0
   const depsSum = [
     ...sortedSizereqDependecies.value.visible,
     ...sortedSizereqDependecies.value.others,
-  ].reduce((acc, d) => acc + d.info.totalSize, 0)
+  ].reduce((acc, d) => acc + d.info.selfSize, 0)
 
   const width = ((total - (self + depsSum)) / total) * 100
   return Math.max(0, width)
@@ -325,7 +330,7 @@ const bytesFormatter = useBytesFormatter()
               size: bytesFormatter.format(props.packageSize?.selfSize || 0),
             })
           "
-          class="h-full bg-blue-500"
+          class="h-full bg-accent"
           :style="{ width: selfSizeWidth + '%' }"
         />
 
@@ -333,9 +338,14 @@ const bytesFormatter = useBytesFormatter()
           <TooltipApp
             :text="`${dep.info.package}\n${getDepSizeTooltip(dep.info.package)}`"
             class="h-full"
-            :class="dep.bundled ? 'bg-blue-500' : 'bg-fg'"
+            :class="dep.bundled ? 'bg-accent' : 'bg-fg'"
             :style="{ width: dep.percent + '%' }"
-          />
+          >
+            <RouterLink
+              :to="packageRoute(dep.info.package, dep.info.version)"
+              class="block w-full h-full"
+            />
+          </TooltipApp>
         </template>
 
         <TooltipApp
@@ -434,7 +444,7 @@ const bytesFormatter = useBytesFormatter()
                 <span
                   class="i-lucide:info w-3 h-3 opacity-50 transition-opacity hover:opacity-100"
                   :class="{
-                    'i-svg-spinners:ring-resize': sizesLoading && !serverSizes?.[dep],
+                    'i-svg-spinners:ring-resize': sizereqLoading && !sizereqData?.[dep],
                   }"
                   aria-hidden="true"
                 />