From bd33d4a86a1141a90665fae10ddf6d41ed20ebc3 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 12:54:53 -0400
Subject: [PATCH 1/4] fix: link aliased dependencies to their real package
 (#2010)

---
 app/components/Package/Dependencies.vue | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 6edc71377b..ed2b147d79 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -90,6 +90,19 @@ function getDepVersionClass(dep: string) {
 }
 
 const numberFormatter = useNumberFormatter()
+
+/**
+ * Parses npm alias syntax: "npm:real-pkg@^1.0.0"
+ * Returns { name, range } for the real package, or null if not an alias.
+ */
+function parseNpmAlias(version: string): { name: string; range: string } | null {
+  if (!version.startsWith('npm:')) return null
+  const spec = version.slice(4) // strip 'npm:'
+  // Handle scoped packages like @scope/pkg@1.0.0 — find @ after position 0
+  const atIdx = spec.startsWith('@') ? spec.indexOf('@', 1) : spec.indexOf('@')
+  if (atIdx === -1) return { name: spec, range: '' }
+  return { name: spec.slice(0, atIdx), range: spec.slice(atIdx + 1) }
+}
 </script>
 
 <template>
@@ -114,7 +127,7 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block truncate" dir="ltr">
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -169,7 +182,7 @@ const numberFormatter = useNumberFormatter()
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
             <LinkBase
-              :to="packageRoute(dep, version)"
+              :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
               class="block truncate"
               :class="getDepVersionClass(dep)"
               :title="getDepVersionTooltip(dep, version)"
@@ -227,7 +240,7 @@ const numberFormatter = useNumberFormatter()
           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(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
+            <LinkBase :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name)" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -235,7 +248,7 @@ const numberFormatter = useNumberFormatter()
             </TagStatic>
           </div>
           <LinkBase
-            :to="packageRoute(peer.name, peer.version)"
+            :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name, parseNpmAlias(peer.version)?.range ?? peer.version)"
             class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
@@ -288,11 +301,11 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
+          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase
-            :to="packageRoute(dep, version)"
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
             class="block truncate"
             :title="version"
             dir="ltr"

From 6ad27611e304ea653d92cb96ff64824203268eba Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 15:03:02 -0400
Subject: [PATCH 2/4] refactor: extract parseNpmAlias to app/utils/npm/alias.ts

---
 app/components/Package/Dependencies.vue | 13 +------------
 app/utils/npm/alias.ts                  | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 app/utils/npm/alias.ts

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index ed2b147d79..86a79717da 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
+import { parseNpmAlias } from '~/utils/npm/alias'
 
 const { t } = useI18n()
 
@@ -91,18 +92,6 @@ function getDepVersionClass(dep: string) {
 
 const numberFormatter = useNumberFormatter()
 
-/**
- * Parses npm alias syntax: "npm:real-pkg@^1.0.0"
- * Returns { name, range } for the real package, or null if not an alias.
- */
-function parseNpmAlias(version: string): { name: string; range: string } | null {
-  if (!version.startsWith('npm:')) return null
-  const spec = version.slice(4) // strip 'npm:'
-  // Handle scoped packages like @scope/pkg@1.0.0 — find @ after position 0
-  const atIdx = spec.startsWith('@') ? spec.indexOf('@', 1) : spec.indexOf('@')
-  if (atIdx === -1) return { name: spec, range: '' }
-  return { name: spec.slice(0, atIdx), range: spec.slice(atIdx + 1) }
-}
 </script>
 
 <template>
diff --git a/app/utils/npm/alias.ts b/app/utils/npm/alias.ts
new file mode 100644
index 0000000000..8f6256901d
--- /dev/null
+++ b/app/utils/npm/alias.ts
@@ -0,0 +1,18 @@
+/**
+ * Parses npm alias syntax: "npm:real-pkg@^1.0.0"
+ * Returns { name, range } for the real package, or null if not an alias.
+ *
+ * @example
+ * parseNpmAlias('npm:real-pkg@^1.0.0') // { name: 'real-pkg', range: '^1.0.0' }
+ * parseNpmAlias('npm:@scope/pkg@^1.0.0') // { name: '@scope/pkg', range: '^1.0.0' }
+ * parseNpmAlias('npm:real-pkg') // { name: 'real-pkg', range: '' }
+ * parseNpmAlias('^1.0.0') // null
+ */
+export function parseNpmAlias(version: string): { name: string; range: string } | null {
+  if (!version.startsWith('npm:')) return null
+  const spec = version.slice(4) // strip 'npm:'
+  // Handle scoped packages like @scope/pkg@1.0.0 — find @ after position 0
+  const atIdx = spec.startsWith('@') ? spec.indexOf('@', 1) : spec.indexOf('@')
+  if (atIdx === -1) return { name: spec, range: '' }
+  return { name: spec.slice(0, atIdx), range: spec.slice(atIdx + 1) }
+}

From 4a0ff3748e95b1f85c0e60f88e527e3b6078a002 Mon Sep 17 00:00:00 2001
From: Alexander Wondwossen <alex.reed0@icloud.com>
Date: Sun, 22 Mar 2026 15:03:48 -0400
Subject: [PATCH 3/4] test: add parseNpmAlias unit tests

---
 test/unit/app/utils/npm/alias.spec.ts | 62 +++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 test/unit/app/utils/npm/alias.spec.ts

diff --git a/test/unit/app/utils/npm/alias.spec.ts b/test/unit/app/utils/npm/alias.spec.ts
new file mode 100644
index 0000000000..002e751ec1
--- /dev/null
+++ b/test/unit/app/utils/npm/alias.spec.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { parseNpmAlias } from '~/utils/npm/alias'
+
+describe('parseNpmAlias', () => {
+  it('returns null for a regular semver range (not an alias)', () => {
+    expect(parseNpmAlias('^1.0.0')).toBeNull()
+  })
+
+  it('returns null for an empty string', () => {
+    expect(parseNpmAlias('')).toBeNull()
+  })
+
+  it('returns null for a plain version number', () => {
+    expect(parseNpmAlias('1.2.3')).toBeNull()
+  })
+
+  it('returns null for a workspace protocol', () => {
+    expect(parseNpmAlias('workspace:*')).toBeNull()
+  })
+
+  it('parses a simple alias with version range', () => {
+    expect(parseNpmAlias('npm:real-pkg@^1.0.0')).toEqual({
+      name: 'real-pkg',
+      range: '^1.0.0',
+    })
+  })
+
+  it('parses a scoped package alias', () => {
+    expect(parseNpmAlias('npm:@scope/pkg@^1.0.0')).toEqual({
+      name: '@scope/pkg',
+      range: '^1.0.0',
+    })
+  })
+
+  it('parses an alias without a version range', () => {
+    expect(parseNpmAlias('npm:real-pkg')).toEqual({
+      name: 'real-pkg',
+      range: '',
+    })
+  })
+
+  it('parses an alias with an exact version', () => {
+    expect(parseNpmAlias('npm:real-pkg@2.0.0')).toEqual({
+      name: 'real-pkg',
+      range: '2.0.0',
+    })
+  })
+
+  it('parses a scoped package alias without version', () => {
+    expect(parseNpmAlias('npm:@scope/pkg')).toEqual({
+      name: '@scope/pkg',
+      range: '',
+    })
+  })
+
+  it('strips the npm: prefix correctly', () => {
+    const result = parseNpmAlias('npm:lodash@^4.0.0')
+    expect(result).not.toBeNull()
+    expect(result!.name).toBe('lodash')
+    expect(result!.name).not.toContain('npm:')
+  })
+})

From 96f2bbd8890d94f21d12b16cf860be99799164d4 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:05:37 +0000
Subject: [PATCH 4/4] [autofix.ci] apply automated fixes

---
 app/components/Package/Dependencies.vue | 40 ++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 86a79717da..041dc39679 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -91,7 +91,6 @@ function getDepVersionClass(dep: string) {
 }
 
 const numberFormatter = useNumberFormatter()
-
 </script>
 
 <template>
@@ -116,7 +115,11 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block truncate" dir="ltr">
+          <LinkBase
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep)"
+            class="block truncate"
+            dir="ltr"
+          >
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
@@ -171,7 +174,12 @@ const numberFormatter = useNumberFormatter()
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
             <LinkBase
-              :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
+              :to="
+                packageRoute(
+                  parseNpmAlias(version)?.name ?? dep,
+                  parseNpmAlias(version)?.range ?? version,
+                )
+              "
               class="block truncate"
               :class="getDepVersionClass(dep)"
               :title="getDepVersionTooltip(dep, version)"
@@ -229,7 +237,11 @@ const numberFormatter = useNumberFormatter()
           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(parseNpmAlias(peer.version)?.name ?? peer.name)" class="block max-w-[70%] break-words" dir="ltr">
+            <LinkBase
+              :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name)"
+              class="block max-w-[70%] break-words"
+              dir="ltr"
+            >
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -237,7 +249,12 @@ const numberFormatter = useNumberFormatter()
             </TagStatic>
           </div>
           <LinkBase
-            :to="packageRoute(parseNpmAlias(peer.version)?.name ?? peer.name, parseNpmAlias(peer.version)?.range ?? peer.version)"
+            :to="
+              packageRoute(
+                parseNpmAlias(peer.version)?.name ?? peer.name,
+                parseNpmAlias(peer.version)?.range ?? peer.version,
+              )
+            "
             class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
@@ -290,11 +307,20 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(parseNpmAlias(version)?.name ?? dep)" class="block max-w-[80%] break-words" dir="ltr">
+          <LinkBase
+            :to="packageRoute(parseNpmAlias(version)?.name ?? dep)"
+            class="block max-w-[80%] break-words"
+            dir="ltr"
+          >
             {{ dep }}
           </LinkBase>
           <LinkBase
-            :to="packageRoute(parseNpmAlias(version)?.name ?? dep, parseNpmAlias(version)?.range ?? version)"
+            :to="
+              packageRoute(
+                parseNpmAlias(version)?.name ?? dep,
+                parseNpmAlias(version)?.range ?? version,
+              )
+            "
             class="block truncate"
             :title="version"
             dir="ltr"