From 941bf209ca204495e001ddd80728d8fec98a2280 Mon Sep 17 00:00:00 2001
From: LubuSeb <187313664+LubuSeb@users.noreply.github.com>
Date: Sun, 9 Aug 2026 03:11:20 +0200
Subject: [PATCH 1/2] fix: fall back to unpkg for oversized packages

---
 app/components/Code/Header.vue                |   7 +-
 .../v/[version]/[...filePath].vue             |  21 +-
 modules/runtime/server/cache.ts               |   6 +-
 .../api/registry/compare-file/[...pkg].get.ts |  44 ++--
 server/api/registry/compare/[...pkg].get.ts   |  12 +-
 server/api/registry/file/[...pkg].get.ts      |  48 ++--
 server/api/registry/files/[...pkg].get.ts     |  10 +-
 server/utils/file-tree.ts                     | 182 +++++++++++++--
 server/utils/package-files.ts                 | 113 +++++++++
 server/utils/skills.ts                        | 110 +++++----
 shared/types/npm-registry.ts                  |  18 +-
 shared/utils/package-files.ts                 |  44 ++++
 test/fixtures/mock-routes.cjs                 |   6 +-
 test/nuxt/pages/PackageCodePage.spec.ts       |   2 +-
 test/unit/server/utils/file-tree.spec.ts      | 220 +++++++++++++++---
 test/unit/server/utils/package-files.spec.ts  | 147 ++++++++++++
 test/unit/server/utils/skills.spec.ts         |  61 +++++
 test/unit/shared/utils/package-files.spec.ts  |  26 +++
 18 files changed, 900 insertions(+), 177 deletions(-)
 create mode 100644 server/utils/package-files.ts
 create mode 100644 shared/utils/package-files.ts
 create mode 100644 test/unit/server/utils/package-files.spec.ts
 create mode 100644 test/unit/server/utils/skills.spec.ts
 create mode 100644 test/unit/shared/utils/package-files.spec.ts

diff --git a/app/components/Code/Header.vue b/app/components/Code/Header.vue
index 6a3c04dbe3..7ee70d37fb 100644
--- a/app/components/Code/Header.vue
+++ b/app/components/Code/Header.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PackageFileContentResponse } from '#shared/types/npm-registry'
+import { getPackageFileViewerUrl } from '#shared/utils/package-files'
 
 interface BreadcrumbItem {
   name: string
@@ -26,6 +27,10 @@ const emit = defineEmits<{
 
 const { toggleCodeContainer } = useCodeContainer()
 
+const rawFileUrl = computed(() =>
+  props.filePath ? getPackageFileViewerUrl(props.packageName, props.version, props.filePath) : '',
+)
+
 const markdownViewModes = [
   {
     key: 'preview' as const,
@@ -244,7 +249,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
           <TooltipApp :text="$t('code.open_raw_file')" position="top">
             <LinkBase
               variant="button-secondary"
-              :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+              :to="rawFileUrl"
               class="px-3"
               :aria-label="$t('code.open_raw_file')"
             />
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..264b7d5294 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+import { getPackageFileViewerUrl } from '#shared/utils/package-files'
 
 // Maximum file size we'll try to load (500KB) - must match server
 const MAX_FILE_SIZE = 500 * 1024
@@ -51,6 +52,9 @@ const packageName = computed(() => parsedRoute.value.packageName)
 const version = computed(() => parsedRoute.value.version)
 const filePathOrig = computed(() => parsedRoute.value.filePath)
 const filePath = computed(() => parsedRoute.value.filePath?.replace(/\/$/, ''))
+const rawFileUrl = computed(() =>
+  filePath.value ? getPackageFileViewerUrl(packageName.value, version.value, filePath.value) : '',
+)
 
 // Navigation helper - build URL for a path
 function getCodeUrl(args: {
@@ -367,7 +371,7 @@ useCommandPaletteContextCommands(
         label: $t('code.view_raw'),
         keywords: [packageName.value, filePath.value],
         iconClass: 'i-lucide:file-output',
-        href: `https://cdn.jsdelivr.net/npm/${packageName.value}@${version.value}/${filePath.value}`,
+        href: rawFileUrl.value,
       })
     }
 
@@ -552,10 +556,7 @@ onPrehydrate(el => {
               })
             }}
           </p>
-          <LinkBase
-            variant="button-secondary"
-            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-          >
+          <LinkBase variant="button-secondary" :to="rawFileUrl">
             {{ $t('code.view_raw') }}
           </LinkBase>
         </div>
@@ -569,10 +570,7 @@ onPrehydrate(el => {
               $t('code.file_size_warning', { size: bytesFormatter.format(currentNode?.size ?? 0) })
             }}
           </p>
-          <LinkBase
-            variant="button-secondary"
-            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-          >
+          <LinkBase variant="button-secondary" :to="rawFileUrl">
             {{ $t('code.view_raw') }}
           </LinkBase>
         </div>
@@ -582,10 +580,7 @@ onPrehydrate(el => {
           <div class="i-lucide:circle-alert w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <LinkBase
-            variant="button-secondary"
-            :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-          >
+          <LinkBase variant="button-secondary" :to="rawFileUrl">
             {{ $t('code.view_raw') }}
           </LinkBase>
         </div>
diff --git a/modules/runtime/server/cache.ts b/modules/runtime/server/cache.ts
index 5359f75ea4..bd4075e1a0 100644
--- a/modules/runtime/server/cache.ts
+++ b/modules/runtime/server/cache.ts
@@ -544,9 +544,9 @@ async function handleJsdelivrDataApi(
       name: parsed.name,
       version: parsed.version || 'latest',
       files: [
-        { name: 'package.json', hash: 'abc123', size: 1000 },
-        { name: 'index.js', hash: 'def456', size: 500 },
-        { name: 'README.md', hash: 'ghi789', size: 2000 },
+        { type: 'file', name: 'package.json', hash: 'abc123', size: 1000 },
+        { type: 'file', name: 'index.js', hash: 'def456', size: 500 },
+        { type: 'file', name: 'README.md', hash: 'ghi789', size: 2000 },
       ],
     },
   }
diff --git a/server/api/registry/compare-file/[...pkg].get.ts b/server/api/registry/compare-file/[...pkg].get.ts
index 5f5504e01d..5cb13b366e 100644
--- a/server/api/registry/compare-file/[...pkg].get.ts
+++ b/server/api/registry/compare-file/[...pkg].get.ts
@@ -1,4 +1,9 @@
 import * as v from 'valibot'
+import {
+  fetchPackageFile,
+  PackageResponseTooLargeError,
+  readPackageResponseText,
+} from '#server/utils/package-files'
 import { PackageFileDiffQuerySchema } from '#shared/schemas/package'
 import { countDiffStats, createDiff, insertSkipBlocks, truncateDiffHunks } from '#shared/utils/diff'
 import type { DiffHunk, DiffSkipBlock } from '#shared/types/compare'
@@ -50,7 +55,7 @@ function countRenderableDiffBytes(hunks: (DiffHunk | DiffSkipBlock)[]): number {
 }
 
 /**
- * Fetch file content from jsDelivr with size check
+ * Fetch package file content with a size check.
  */
 async function fetchFileContentForDiff(
   packageName: string,
@@ -59,7 +64,6 @@ async function fetchFileContentForDiff(
   maxBytes: number,
   signal?: AbortSignal,
 ): Promise<string | null> {
-  const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
   const controller = new AbortController()
   const timeoutId = setTimeout(() => controller.abort(), DIFF_TIMEOUT)
   if (signal) {
@@ -67,34 +71,32 @@ async function fetchFileContentForDiff(
   }
 
   try {
-    const response = await fetch(url, { signal: controller.signal })
+    const { provider, response } = await fetchPackageFile(
+      packageName,
+      version,
+      filePath,
+      controller.signal,
+    )
 
     if (!response.ok) {
       if (response.status === 404) return null
       throw createError({
-        statusCode: response.status >= 500 ? 502 : response.status,
+        statusCode: provider === 'unpkg' || response.status >= 500 ? 502 : response.status,
         message: `Failed to fetch file (${response.status})`,
       })
     }
 
-    const contentLength = response.headers.get('content-length')
-    if (contentLength && parseInt(contentLength, 10) > maxBytes) {
-      throw createError({
-        statusCode: 413,
-        message: `File too large to diff (${(parseInt(contentLength, 10) / 1024).toFixed(0)}KB). Maximum is ${maxBytes / 1024}KB.`,
-      })
-    }
-
-    const content = await response.text()
-
-    if (byteLength(content) > maxBytes) {
-      throw createError({
-        statusCode: 413,
-        message: `File too large to diff (${(byteLength(content) / 1024).toFixed(0)}KB). Maximum is ${maxBytes / 1024}KB.`,
-      })
+    try {
+      return await readPackageResponseText(response, maxBytes)
+    } catch (error) {
+      if (error instanceof PackageResponseTooLargeError) {
+        throw createError({
+          statusCode: 413,
+          message: `File too large to diff (${(error.sizeBytes / 1024).toFixed(0)}KB). Maximum is ${maxBytes / 1024}KB.`,
+        })
+      }
+      throw error
     }
-
-    return content
   } catch (error) {
     if (error && typeof error === 'object' && 'statusCode' in error) {
       throw error
diff --git a/server/api/registry/compare/[...pkg].get.ts b/server/api/registry/compare/[...pkg].get.ts
index c4c44793a1..0825218d50 100644
--- a/server/api/registry/compare/[...pkg].get.ts
+++ b/server/api/registry/compare/[...pkg].get.ts
@@ -1,11 +1,13 @@
 import * as v from 'valibot'
+import { fetchPackageFile, readPackageResponseText } from '#server/utils/package-files'
 import { PackageCompareQuerySchema } from '#shared/schemas/package'
 
 const CACHE_VERSION = 1
 const COMPARE_TIMEOUT = 8000 // 8 seconds
+const MAX_PACKAGE_JSON_SIZE = 2 * 1024 * 1024
 
 /**
- * Fetch package.json from jsDelivr
+ * Fetch package.json from a package CDN.
  */
 async function fetchPackageJson(
   packageName: string,
@@ -13,10 +15,12 @@ async function fetchPackageJson(
   signal?: AbortSignal,
 ): Promise<Record<string, unknown> | null> {
   try {
-    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
-    const response = await fetch(url, { signal })
+    const { response } = await fetchPackageFile(packageName, version, 'package.json', signal)
     if (!response.ok) return null
-    return (await response.json()) as Record<string, unknown>
+    return JSON.parse(await readPackageResponseText(response, MAX_PACKAGE_JSON_SIZE)) as Record<
+      string,
+      unknown
+    >
   } catch {
     return null
   }
diff --git a/server/api/registry/file/[...pkg].get.ts b/server/api/registry/file/[...pkg].get.ts
index da250d9026..3b4b38b70e 100644
--- a/server/api/registry/file/[...pkg].get.ts
+++ b/server/api/registry/file/[...pkg].get.ts
@@ -1,5 +1,10 @@
 import * as v from 'valibot'
 import type { InternalImportsMap, PackageExportsMap } from '#server/utils/import-resolver'
+import {
+  fetchPackageFile,
+  PackageResponseTooLargeError,
+  readPackageResponseText,
+} from '#server/utils/package-files'
 import { PackageFileQuerySchema } from '#shared/schemas/package'
 import type { ReadmeResponse } from '#shared/types/readme'
 import {
@@ -11,6 +16,7 @@ const CACHE_VERSION = 3
 
 // Maximum file size to fetch and highlight (500KB)
 const MAX_FILE_SIZE = 500 * 1024
+const MAX_PACKAGE_JSON_SIZE = 2 * 1024 * 1024
 
 // Languages that benefit from import linking
 const IMPORT_LANGUAGES = new Set([
@@ -33,29 +39,27 @@ interface PackageJson {
 }
 
 /**
- * Fetch package.json from jsDelivr to get dependency info
+ * Fetch package.json to get dependency info.
  */
 async function fetchPackageJson(packageName: string, version: string): Promise<PackageJson | null> {
   try {
-    const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/package.json`
-    const response = await fetch(url)
+    const { response } = await fetchPackageFile(packageName, version, 'package.json')
     if (!response.ok) return null
-    return (await response.json()) as PackageJson
+    return JSON.parse(await readPackageResponseText(response, MAX_PACKAGE_JSON_SIZE)) as PackageJson
   } catch {
     return null
   }
 }
 
 /**
- * Fetch file content from jsDelivr CDN.
+ * Fetch file content from a package CDN.
  */
 async function fetchFileContent(
   packageName: string,
   version: string,
   filePath: string,
 ): Promise<{ content: string; contentType: string | null }> {
-  const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
-  const response = await fetch(url)
+  const { response } = await fetchPackageFile(packageName, version, filePath)
 
   if (!response.ok) {
     if (response.status === 404) {
@@ -63,29 +67,23 @@ async function fetchFileContent(
     }
     throw createError({
       statusCode: 502,
-      message: 'Failed to fetch file from jsDelivr',
+      message: 'Failed to fetch package file',
     })
   }
 
   const contentType = response.headers.get('content-type')
 
-  // Check content-length header if available
-  const contentLength = response.headers.get('content-length')
-  if (contentLength && parseInt(contentLength, 10) > MAX_FILE_SIZE) {
-    throw createError({
-      statusCode: 413,
-      message: `File too large (${(parseInt(contentLength, 10) / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_FILE_SIZE / 1024}KB.`,
-    })
-  }
-
-  const content = await response.text()
-
-  // Double-check size after fetching (in case content-length wasn't set)
-  if (content.length > MAX_FILE_SIZE) {
-    throw createError({
-      statusCode: 413,
-      message: `File too large (${(content.length / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_FILE_SIZE / 1024}KB.`,
-    })
+  let content: string
+  try {
+    content = await readPackageResponseText(response, MAX_FILE_SIZE)
+  } catch (error) {
+    if (error instanceof PackageResponseTooLargeError) {
+      throw createError({
+        statusCode: 413,
+        message: `File too large (${(error.sizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_FILE_SIZE / 1024}KB.`,
+      })
+    }
+    throw error
   }
 
   return { content, contentType }
diff --git a/server/api/registry/files/[...pkg].get.ts b/server/api/registry/files/[...pkg].get.ts
index 27cb1d6736..f96686c54e 100644
--- a/server/api/registry/files/[...pkg].get.ts
+++ b/server/api/registry/files/[...pkg].get.ts
@@ -22,15 +22,7 @@ export default defineCachedEventHandler(
         version: rawVersion,
       })
 
-      const jsDelivrData = await fetchFileTree(packageName, version)
-      const tree = convertToFileTree(jsDelivrData.files)
-
-      return {
-        package: packageName,
-        version,
-        default: jsDelivrData.default ?? undefined,
-        tree,
-      } satisfies PackageFileTreeResponse
+      return await getPackageFileTree(packageName, version)
     } catch (error: unknown) {
       handleApiError(error, {
         statusCode: 502,
diff --git a/server/utils/file-tree.ts b/server/utils/file-tree.ts
index 50e21d439c..9ff0756994 100644
--- a/server/utils/file-tree.ts
+++ b/server/utils/file-tree.ts
@@ -1,27 +1,130 @@
+import * as v from 'valibot'
 import { getLatestVersion } from 'fast-npm-meta'
 import { flattenFileTree } from '#server/utils/import-resolver'
+import { fetchPackageMetadata, readPackageResponseText } from '#server/utils/package-files'
+import { ERROR_FILE_LIST_FETCH_FAILED } from '#shared/utils/constants'
 import type { ExtendedPackageJson, TypesPackageInfo } from '#shared/utils/package-analysis'
 
-/**
- * Fetch the file tree from jsDelivr API.
- * Returns a nested tree structure of all files in the package.
- */
-export async function fetchFileTree(
-  packageName: string,
-  version: string,
-  signal?: AbortSignal,
-): Promise<JsDelivrPackageResponse> {
-  const url = `https://data.jsdelivr.com/v1/packages/npm/${packageName}@${version}`
-  const response = await fetch(url, { signal })
+const FileSizeSchema = v.pipe(v.number(), v.safeInteger(), v.minValue(0))
+const MAX_UNPKG_METADATA_BYTES = 10 * 1024 * 1024
+const MAX_UNPKG_FILE_COUNT = 50_000
+const MAX_UNPKG_PATH_DEPTH = 100
+const MAX_UNPKG_TOTAL_PATH_SEGMENTS = 250_000
 
-  if (!response.ok) {
-    if (response.status === 404) {
-      throw createError({ statusCode: 404, message: 'Package or version not found' })
+const JsDelivrFileNodeSchema: v.GenericSchema<JsDelivrFileNode> = v.lazy(() =>
+  v.object({
+    type: v.picklist(['file', 'directory']),
+    name: v.pipe(v.string(), v.nonEmpty()),
+    hash: v.optional(v.string()),
+    size: v.optional(FileSizeSchema),
+    files: v.optional(v.array(JsDelivrFileNodeSchema)),
+  }),
+)
+
+const JsDelivrPackageResponseSchema: v.GenericSchema<JsDelivrPackageResponse> = v.object({
+  type: v.literal('npm'),
+  name: v.pipe(v.string(), v.nonEmpty()),
+  version: v.pipe(v.string(), v.nonEmpty()),
+  default: v.optional(v.nullable(v.string())),
+  files: v.array(JsDelivrFileNodeSchema),
+})
+
+const UnpkgFilePathSchema = v.pipe(
+  v.string(),
+  v.check(path => {
+    if (!path.startsWith('/') || path.includes('\\')) return false
+    const segments = path.slice(1).split('/')
+    return (
+      segments.length > 0 &&
+      segments.length <= MAX_UNPKG_PATH_DEPTH &&
+      segments.every(segment => segment && !['.', '..'].includes(segment))
+    )
+  }),
+)
+
+const UnpkgFileMetadataSchema: v.GenericSchema<UnpkgFileMetadata> = v.object({
+  path: UnpkgFilePathSchema,
+  size: FileSizeSchema,
+  type: v.pipe(v.string(), v.nonEmpty()),
+  integrity: v.pipe(
+    v.string(),
+    v.check(value => value.startsWith('sha256-') && value.length > 'sha256-'.length),
+  ),
+})
+
+const UnpkgMetadataResponseSchema: v.GenericSchema<UnpkgMetadataResponse> = v.object({
+  package: v.pipe(v.string(), v.nonEmpty()),
+  version: v.pipe(v.string(), v.nonEmpty()),
+  prefix: v.literal('/'),
+  files: v.pipe(v.array(UnpkgFileMetadataSchema), v.maxLength(MAX_UNPKG_FILE_COUNT)),
+})
+
+interface MutableDirectoryNode {
+  type: 'directory'
+  name: string
+  files: Map<string, MutableTreeNode>
+}
+
+interface MutableFileNode {
+  type: 'file'
+  name: string
+  hash: string
+  size: number
+}
+
+type MutableTreeNode = MutableDirectoryNode | MutableFileNode
+
+function materializeNodes(nodes: Map<string, MutableTreeNode>): JsDelivrFileNode[] {
+  return Array.from(nodes.values(), node => {
+    if (node.type === 'file') return node
+    return {
+      type: 'directory',
+      name: node.name,
+      files: materializeNodes(node.files),
+    }
+  })
+}
+
+export function convertUnpkgToFileTree(files: UnpkgFileMetadata[]): PackageFileTree[] {
+  const root = new Map<string, MutableTreeNode>()
+  let totalPathSegments = 0
+
+  for (const file of files) {
+    const segments = file.path.slice(1).split('/')
+    totalPathSegments += segments.length
+    if (totalPathSegments > MAX_UNPKG_TOTAL_PATH_SEGMENTS) {
+      throw new Error('Package file tree exceeds the complexity limit')
+    }
+    const fileName = segments.pop()!
+    let current = root
+
+    for (const segment of segments) {
+      const existing = current.get(segment)
+      if (existing?.type === 'file') throw new Error('File path conflicts with a directory')
+
+      const directory = existing ?? {
+        type: 'directory' as const,
+        name: segment,
+        files: new Map<string, MutableTreeNode>(),
+      }
+      current.set(segment, directory)
+      current = directory.files
     }
-    throw createError({ statusCode: 502, message: 'Failed to fetch file list from jsDelivr' })
+
+    if (current.has(fileName)) throw new Error('Duplicate package file path')
+    current.set(fileName, {
+      type: 'file',
+      name: fileName,
+      hash: file.integrity.slice('sha256-'.length),
+      size: file.size,
+    })
   }
 
-  return response.json()
+  return convertToFileTree(materializeNodes(root))
+}
+
+function invalidFileListError() {
+  return createError({ statusCode: 502, message: ERROR_FILE_LIST_FETCH_FAILED })
 }
 
 /**
@@ -77,14 +180,53 @@ export async function getPackageFileTree(
   version: string,
   signal?: AbortSignal,
 ): Promise<PackageFileTreeResponse> {
-  const jsDelivrData = await fetchFileTree(packageName, version, signal)
-  const tree = convertToFileTree(jsDelivrData.files)
+  const { provider, response } = await fetchPackageMetadata(packageName, version, signal)
+
+  if (!response.ok) {
+    if (provider === 'jsdelivr' && response.status === 404) {
+      throw createError({ statusCode: 404, message: 'Package or version not found' })
+    }
+    throw invalidFileListError()
+  }
+
+  let payload: unknown
+  try {
+    payload =
+      provider === 'unpkg'
+        ? JSON.parse(await readPackageResponseText(response, MAX_UNPKG_METADATA_BYTES))
+        : await response.json()
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') throw error
+    throw invalidFileListError()
+  }
+
+  if (provider === 'unpkg') {
+    const parsed = v.safeParse(UnpkgMetadataResponseSchema, payload)
+    if (!parsed.success || parsed.output.package !== packageName) {
+      throw invalidFileListError()
+    }
+
+    try {
+      return {
+        package: packageName,
+        version,
+        tree: convertUnpkgToFileTree(parsed.output.files),
+      }
+    } catch {
+      throw invalidFileListError()
+    }
+  }
+
+  const parsed = v.safeParse(JsDelivrPackageResponseSchema, payload)
+  if (!parsed.success || parsed.output.name !== packageName) {
+    throw invalidFileListError()
+  }
 
   return {
     package: packageName,
     version,
-    default: jsDelivrData.default ?? undefined,
-    tree,
+    default: parsed.output.default ?? undefined,
+    tree: convertToFileTree(parsed.output.files),
   }
 }
 
diff --git a/server/utils/package-files.ts b/server/utils/package-files.ts
new file mode 100644
index 0000000000..d8d59f86b3
--- /dev/null
+++ b/server/utils/package-files.ts
@@ -0,0 +1,113 @@
+import type { PackageFileProvider } from '#shared/utils/package-files'
+import { getPackageFileUrl, getPackageMetadataUrl } from '#shared/utils/package-files'
+
+export interface PackageFetchResult {
+  provider: PackageFileProvider
+  response: Response
+}
+
+export class PackageResponseTooLargeError extends Error {
+  constructor(public readonly sizeBytes: number) {
+    super('Package response exceeded the size limit')
+    this.name = 'PackageResponseTooLargeError'
+  }
+}
+
+async function cancelResponseBody(response: Response): Promise<void> {
+  try {
+    await response.body?.cancel()
+  } catch {
+    // A failed body cancellation must not hide the caller's real outcome.
+  }
+}
+
+export async function readPackageResponseText(
+  response: Response,
+  maxBytes: number,
+): Promise<string> {
+  const contentLength = response.headers.get('content-length')
+  const declaredSize = contentLength ? Number.parseInt(contentLength, 10) : Number.NaN
+  if (Number.isFinite(declaredSize) && declaredSize > maxBytes) {
+    await cancelResponseBody(response)
+    throw new PackageResponseTooLargeError(declaredSize)
+  }
+
+  if (!response.body) {
+    const content = await response.text()
+    const sizeBytes = Buffer.byteLength(content, 'utf8')
+    if (sizeBytes > maxBytes) throw new PackageResponseTooLargeError(sizeBytes)
+    return content
+  }
+
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+  const chunks: string[] = []
+  let sizeBytes = 0
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      sizeBytes += value.byteLength
+      if (sizeBytes > maxBytes) {
+        try {
+          await reader.cancel()
+        } catch {
+          // A failed body cancellation must not hide the size-limit error.
+        }
+        throw new PackageResponseTooLargeError(sizeBytes)
+      }
+
+      chunks.push(decoder.decode(value, { stream: true }))
+    }
+
+    chunks.push(decoder.decode())
+    return chunks.join('')
+  } finally {
+    reader.releaseLock()
+  }
+}
+
+async function fetchWithFallback(
+  primaryUrl: string,
+  fallbackUrl: string,
+  signal?: AbortSignal,
+): Promise<PackageFetchResult> {
+  const primary = await fetch(primaryUrl, { signal })
+  if (primary.status !== 403) {
+    if (!primary.ok) await cancelResponseBody(primary)
+    return { provider: 'jsdelivr', response: primary }
+  }
+
+  await cancelResponseBody(primary)
+
+  const fallback = await fetch(fallbackUrl, { signal })
+  if (!fallback.ok) await cancelResponseBody(fallback)
+  return { provider: 'unpkg', response: fallback }
+}
+
+export function fetchPackageFile(
+  packageName: string,
+  version: string,
+  filePath: string,
+  signal?: AbortSignal,
+): Promise<PackageFetchResult> {
+  return fetchWithFallback(
+    getPackageFileUrl('jsdelivr', packageName, version, filePath),
+    getPackageFileUrl('unpkg', packageName, version, filePath),
+    signal,
+  )
+}
+
+export function fetchPackageMetadata(
+  packageName: string,
+  version: string,
+  signal?: AbortSignal,
+): Promise<PackageFetchResult> {
+  return fetchWithFallback(
+    getPackageMetadataUrl('jsdelivr', packageName, version),
+    getPackageMetadataUrl('unpkg', packageName, version),
+    signal,
+  )
+}
diff --git a/server/utils/skills.ts b/server/utils/skills.ts
index d9e431ef24..b1974e139e 100644
--- a/server/utils/skills.ts
+++ b/server/utils/skills.ts
@@ -1,4 +1,18 @@
+import {
+  fetchPackageFile,
+  PackageResponseTooLargeError,
+  readPackageResponseText,
+} from '#server/utils/package-files'
+import { mapWithConcurrency } from '#shared/utils/async'
+
 const MAX_SKILL_FILE_SIZE = 500 * 1024
+const MAX_DISCOVERED_SKILLS = 100
+
+function assertSkillCount(count: number): void {
+  if (count > MAX_DISCOVERED_SKILLS) {
+    throw createError({ statusCode: 502, message: 'Package contains too many skills' })
+  }
+}
 
 /**
  * Parse YAML frontmatter from SKILL.md content.
@@ -70,13 +84,16 @@ export function findSkillDirs(tree: PackageFileTree[]): SkillDirInfo[] {
   const skillsDir = tree.find(node => node.type === 'directory' && node.name === 'skills')
   if (!skillsDir?.children) return []
 
-  return skillsDir.children
+  const skillDirs = skillsDir.children
     .filter(
       child =>
         child.type === 'directory' &&
         child.children?.some(f => f.type === 'file' && f.name === 'SKILL.md'),
     )
     .map(child => ({ name: child.name, children: child.children || [] }))
+
+  assertSkillCount(skillDirs.length)
+  return skillDirs
 }
 
 const countFilesRecursive = (nodes: PackageFileTree[]): number =>
@@ -102,38 +119,33 @@ export function countSkillFiles(children: PackageFileTree[]): SkillFileCounts |
 }
 
 /**
- * Fetch file content from jsDelivr CDN with size limit.
+ * Fetch package file content with a size limit.
  */
 export async function fetchSkillFile(
   packageName: string,
   version: string,
   filePath: string,
 ): Promise<string> {
-  const url = `https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`
-  const response = await fetch(url)
+  const { response } = await fetchPackageFile(packageName, version, filePath)
 
   if (!response.ok) {
     if (response.status === 404) {
       throw createError({ statusCode: 404, message: 'File not found' })
     }
-    throw createError({ statusCode: 502, message: 'Failed to fetch file from jsDelivr' })
-  }
-
-  const contentLength = response.headers.get('content-length')
-  if (contentLength && parseInt(contentLength, 10) > MAX_SKILL_FILE_SIZE) {
-    throw createError({
-      statusCode: 413,
-      message: `File too large (${(parseInt(contentLength, 10) / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
-    })
+    throw createError({ statusCode: 502, message: 'Failed to fetch package file' })
   }
 
-  const content = await response.text()
-
-  if (content.length > MAX_SKILL_FILE_SIZE) {
-    throw createError({
-      statusCode: 413,
-      message: `File too large (${(content.length / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
-    })
+  let content: string
+  try {
+    content = await readPackageResponseText(response, MAX_SKILL_FILE_SIZE)
+  } catch (error) {
+    if (error instanceof PackageResponseTooLargeError) {
+      throw createError({
+        statusCode: 413,
+        message: `File too large (${(error.sizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
+      })
+    }
+    throw error
   }
 
   return content
@@ -173,27 +185,26 @@ export async function fetchSkillsList(
   version: string,
   skillDirs: SkillDirInfo[],
 ): Promise<SkillListItem[]> {
-  const skills = await Promise.all(
-    skillDirs.map(async ({ name: dirName, children }) => {
-      try {
-        const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
-        const warnings = validateSkill(frontmatter)
-        const fileCounts = countSkillFiles(children)
-        const item: SkillListItem = {
-          name: frontmatter.name,
-          description: frontmatter.description,
-          dirName,
-          license: frontmatter.license,
-          compatibility: frontmatter.compatibility,
-          warnings: warnings.length > 0 ? warnings : undefined,
-          fileCounts,
-        }
-        return item
-      } catch {
-        return null
+  assertSkillCount(skillDirs.length)
+  const skills = await mapWithConcurrency(skillDirs, async ({ name: dirName, children }) => {
+    try {
+      const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
+      const warnings = validateSkill(frontmatter)
+      const fileCounts = countSkillFiles(children)
+      const item: SkillListItem = {
+        name: frontmatter.name,
+        description: frontmatter.description,
+        dirName,
+        license: frontmatter.license,
+        compatibility: frontmatter.compatibility,
+        warnings: warnings.length > 0 ? warnings : undefined,
+        fileCounts,
       }
-    }),
-  )
+      return item
+    } catch {
+      return null
+    }
+  })
   return skills.filter((s): s is SkillListItem => s !== null)
 }
 
@@ -211,15 +222,14 @@ export async function fetchSkillsListForWellKnown(
   version: string,
   skillNames: string[],
 ): Promise<WellKnownSkillItem[]> {
-  const skills = await Promise.all(
-    skillNames.map(async dirName => {
-      try {
-        const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
-        return { name: dirName, description: frontmatter.description, files: ['SKILL.md'] }
-      } catch {
-        return null
-      }
-    }),
-  )
+  assertSkillCount(skillNames.length)
+  const skills = await mapWithConcurrency(skillNames, async dirName => {
+    try {
+      const { frontmatter } = await fetchSkillContent(packageName, version, dirName)
+      return { name: dirName, description: frontmatter.description, files: ['SKILL.md'] }
+    } catch {
+      return null
+    }
+  })
   return skills.filter((s): s is WellKnownSkillItem => s !== null)
 }
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 97c4d99903..f7464cc51e 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -320,7 +320,7 @@ export interface JsDelivrPackageResponse {
   name: string
   version: string
   /** Default entry point file */
-  default: string | null
+  default?: string | null
   /** Nested file tree */
   files: JsDelivrFileNode[]
 }
@@ -339,6 +339,22 @@ export interface JsDelivrFileNode {
   files?: JsDelivrFileNode[]
 }
 
+/** A file from the UNPKG metadata API. */
+export interface UnpkgFileMetadata {
+  path: string
+  size: number
+  type: string
+  integrity: string
+}
+
+/** Response from the UNPKG package metadata API. */
+export interface UnpkgMetadataResponse {
+  package: string
+  version: string
+  prefix: '/'
+  files: UnpkgFileMetadata[]
+}
+
 /**
  * Tree node for package file browser
  */
diff --git a/shared/utils/package-files.ts b/shared/utils/package-files.ts
new file mode 100644
index 0000000000..64225337b6
--- /dev/null
+++ b/shared/utils/package-files.ts
@@ -0,0 +1,44 @@
+export type PackageFileProvider = 'jsdelivr' | 'unpkg'
+
+const PACKAGE_FILE_BASE_URLS: Record<PackageFileProvider, string> = {
+  jsdelivr: 'https://cdn.jsdelivr.net/npm',
+  unpkg: 'https://unpkg.com',
+}
+
+function encodeFilePath(filePath: string): string {
+  return filePath
+    .split('/')
+    .map(segment => encodeURIComponent(segment))
+    .join('/')
+}
+
+export function getPackageFileUrl(
+  provider: PackageFileProvider,
+  packageName: string,
+  version: string,
+  filePath: string,
+): string {
+  const packageSpec = `${packageName}@${encodeURIComponent(version)}`
+  return `${PACKAGE_FILE_BASE_URLS[provider]}/${packageSpec}/${encodeFilePath(filePath)}`
+}
+
+export function getPackageMetadataUrl(
+  provider: PackageFileProvider,
+  packageName: string,
+  version: string,
+): string {
+  const packageSpec = `${packageName}@${encodeURIComponent(version)}`
+  if (provider === 'jsdelivr') {
+    return `https://data.jsdelivr.com/v1/packages/npm/${packageSpec}`
+  }
+  return `https://unpkg.com/${packageSpec}/?meta`
+}
+
+export function getPackageFileViewerUrl(
+  packageName: string,
+  version: string,
+  filePath: string,
+): string {
+  const packageSpec = `${packageName}@${encodeURIComponent(version)}`
+  return `https://app.unpkg.com/${packageSpec}/files/${encodeFilePath(filePath)}`
+}
diff --git a/test/fixtures/mock-routes.cjs b/test/fixtures/mock-routes.cjs
index 775372a268..17f3d98c46 100644
--- a/test/fixtures/mock-routes.cjs
+++ b/test/fixtures/mock-routes.cjs
@@ -436,9 +436,9 @@ function matchJsdelivrDataApi(urlString) {
       name: parsed.name,
       version: parsed.version || 'latest',
       files: [
-        { name: 'package.json', hash: 'abc123', size: 1000 },
-        { name: 'index.js', hash: 'def456', size: 500 },
-        { name: 'README.md', hash: 'ghi789', size: 2000 },
+        { type: 'file', name: 'package.json', hash: 'abc123', size: 1000 },
+        { type: 'file', name: 'index.js', hash: 'def456', size: 500 },
+        { type: 'file', name: 'README.md', hash: 'ghi789', size: 2000 },
       ],
     })
   }
diff --git a/test/nuxt/pages/PackageCodePage.spec.ts b/test/nuxt/pages/PackageCodePage.spec.ts
index 5459076532..817f0ddf0d 100644
--- a/test/nuxt/pages/PackageCodePage.spec.ts
+++ b/test/nuxt/pages/PackageCodePage.spec.ts
@@ -68,7 +68,7 @@ describe('package code page', () => {
 
     const rawFileLink = component.findComponent({ name: 'LinkBase' })
     expect(rawFileLink.props('to')).toBe(
-      'https://cdn.jsdelivr.net/npm/@types/vscode@1.118.0/index.d.ts',
+      'https://app.unpkg.com/@types/vscode@1.118.0/files/index.d.ts',
     )
   })
 })
diff --git a/test/unit/server/utils/file-tree.spec.ts b/test/unit/server/utils/file-tree.spec.ts
index 5e8d3da396..dda33d288d 100644
--- a/test/unit/server/utils/file-tree.spec.ts
+++ b/test/unit/server/utils/file-tree.spec.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it, vi } from 'vitest'
-import type { JsDelivrFileNode, PackageFileTree } from '#shared/types'
-import { convertToFileTree, fetchFileTree, getPackageFileTree } from '#server/utils/file-tree'
+import type { JsDelivrFileNode, PackageFileTree, UnpkgFileMetadata } from '#shared/types'
+import {
+  convertToFileTree,
+  convertUnpkgToFileTree,
+  getPackageFileTree,
+} from '#server/utils/file-tree'
 
 const getChildren = (node?: PackageFileTree): PackageFileTree[] => node?.children ?? []
 
@@ -115,50 +119,45 @@ describe('convertToFileTree', () => {
   })
 })
 
-describe('fetchFileTree', () => {
-  it('returns parsed json when response is ok', async () => {
-    const body = {
-      type: 'npm',
-      name: 'pkg',
-      version: '1.0.0',
-      default: 'index.js',
-      files: [],
-    }
-
-    mockFetchOk(body)
+describe('convertUnpkgToFileTree', () => {
+  it('rejects metadata whose cumulative path complexity exceeds the tree budget', () => {
+    const directoryPrefix = Array.from({ length: 99 }, (_, index) => `d${index}`).join('/')
+    const files: UnpkgFileMetadata[] = Array.from({ length: 2501 }, (_, index) => ({
+      path: `/${directoryPrefix}/file-${index}.js`,
+      size: 1,
+      type: 'text/javascript',
+      integrity: `sha256-${index}`,
+    }))
 
-    try {
-      const result = await fetchFileTree('pkg', '1.0.0')
-      expect(result).toEqual(body)
-    } finally {
-      vi.unstubAllGlobals()
-    }
+    expect(() => convertUnpkgToFileTree(files)).toThrow('complexity limit')
   })
+})
 
+describe('getPackageFileTree', () => {
   it('throws a 404 error when package is not found', async () => {
-    mockFetchError(404)
+    const fetchMock = mockFetchError(404)
     mockCreateError()
 
     try {
-      await expect(fetchFileTree('pkg', '1.0.0')).rejects.toMatchObject({ statusCode: 404 })
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({ statusCode: 404 })
+      expect(fetchMock).toHaveBeenCalledOnce()
     } finally {
       vi.unstubAllGlobals()
     }
   })
 
-  it('throws a 502 error for non-404 failures', async () => {
-    mockFetchError(500)
+  it('throws a 502 error for a primary non-403 failure', async () => {
+    const fetchMock = mockFetchError(500)
     mockCreateError()
 
     try {
-      await expect(fetchFileTree('pkg', '1.0.0')).rejects.toMatchObject({ statusCode: 502 })
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({ statusCode: 502 })
+      expect(fetchMock).toHaveBeenCalledOnce()
     } finally {
       vi.unstubAllGlobals()
     }
   })
-})
 
-describe('getPackageFileTree', () => {
   it('returns metadata and a converted tree', async () => {
     const body = {
       type: 'npm',
@@ -205,4 +204,173 @@ describe('getPackageFileTree', () => {
       vi.unstubAllGlobals()
     }
   })
+
+  it('converts UNPKG metadata after a jsDelivr 403', async () => {
+    const cancel = vi.fn().mockResolvedValue(undefined)
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({ ok: false, status: 403, body: { cancel } })
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            package: 'pkg',
+            version: '1.0.0',
+            prefix: '/',
+            files: [
+              {
+                path: '/zeta.txt',
+                size: 10,
+                type: 'text/plain',
+                integrity: 'sha256-zeta',
+              },
+              {
+                path: '/src/nested/index.js',
+                size: 25,
+                type: 'text/javascript',
+                integrity: 'sha256-index',
+              },
+              {
+                path: '/src/main.js',
+                size: 15,
+                type: 'text/javascript',
+                integrity: 'sha256-main',
+              },
+            ],
+          }),
+          { status: 200 },
+        ),
+      )
+    vi.stubGlobal('fetch', fetchMock)
+
+    try {
+      const result = await getPackageFileTree('pkg', '1.0.0')
+
+      expect(result.default).toBeUndefined()
+      expect(result.tree.map(node => node.name)).toEqual(['src', 'zeta.txt'])
+      expect(result.tree[0]?.size).toBe(40)
+      expect(result.tree[0]?.children?.map(node => node.name)).toEqual(['nested', 'main.js'])
+      expect(result.tree[0]?.children?.[1]).toMatchObject({
+        hash: 'main',
+        path: 'src/main.js',
+      })
+      expect(cancel).toHaveBeenCalledOnce()
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+
+  it('throws a provider-neutral 502 when the fallback fails', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({
+        ok: false,
+        status: 403,
+        body: { cancel: vi.fn().mockResolvedValue(undefined) },
+      })
+      .mockResolvedValueOnce({ ok: false, status: 500 })
+    vi.stubGlobal('fetch', fetchMock)
+    mockCreateError()
+
+    try {
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({
+        statusCode: 502,
+        message: 'Failed to fetch file list.',
+      })
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+
+  it('throws a 502 for invalid fallback metadata', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({
+        ok: false,
+        status: 403,
+        body: { cancel: vi.fn().mockResolvedValue(undefined) },
+      })
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            package: 'pkg',
+            version: '1.0.0',
+            prefix: '/',
+            files: [
+              {
+                path: '/../index.js',
+                size: 1,
+                type: 'text/javascript',
+                integrity: 'sha256-index',
+              },
+            ],
+          }),
+          { status: 200 },
+        ),
+      )
+    vi.stubGlobal('fetch', fetchMock)
+    mockCreateError()
+
+    try {
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({
+        statusCode: 502,
+      })
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+
+  it('preserves an abort while reading the metadata response body', async () => {
+    const abortError = new DOMException('Aborted', 'AbortError')
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockRejectedValue(abortError),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+
+    try {
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toBe(abortError)
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+
+  it('maps malformed metadata JSON to a provider-neutral 502', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockRejectedValue(new SyntaxError('Unexpected token')),
+    })
+    vi.stubGlobal('fetch', fetchMock)
+    mockCreateError()
+
+    try {
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({
+        statusCode: 502,
+      })
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
+
+  it('rejects oversized fallback metadata before parsing it', async () => {
+    const fallback = new Response('{}', {
+      headers: { 'content-length': `${10 * 1024 * 1024 + 1}` },
+    })
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(new Response(null, { status: 403 }))
+      .mockResolvedValueOnce(fallback)
+    vi.stubGlobal('fetch', fetchMock)
+    mockCreateError()
+
+    try {
+      await expect(getPackageFileTree('pkg', '1.0.0')).rejects.toMatchObject({
+        statusCode: 502,
+      })
+      expect(fallback.bodyUsed).toBe(true)
+    } finally {
+      vi.unstubAllGlobals()
+    }
+  })
 })
diff --git a/test/unit/server/utils/package-files.spec.ts b/test/unit/server/utils/package-files.spec.ts
new file mode 100644
index 0000000000..ee02f2c635
--- /dev/null
+++ b/test/unit/server/utils/package-files.spec.ts
@@ -0,0 +1,147 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  fetchPackageFile,
+  fetchPackageMetadata,
+  readPackageResponseText,
+  type PackageResponseTooLargeError,
+} from '#server/utils/package-files'
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('fetchPackageFile', () => {
+  it('uses jsDelivr without a fallback when the primary request succeeds', async () => {
+    const response = new Response('content')
+    const fetchMock = vi.fn().mockResolvedValue(response)
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await fetchPackageFile('pkg', '1.0.0', 'dist/index.js')
+
+    expect(result).toEqual({ provider: 'jsdelivr', response })
+    expect(fetchMock).toHaveBeenCalledOnce()
+    expect(fetchMock).toHaveBeenCalledWith('https://cdn.jsdelivr.net/npm/pkg@1.0.0/dist/index.js', {
+      signal: undefined,
+    })
+  })
+
+  it('falls back to UNPKG after a jsDelivr 403 and reuses the abort signal', async () => {
+    const primary = new Response('Package size exceeded', { status: 403 })
+    const fallback = new Response('content')
+    const fetchMock = vi.fn().mockResolvedValueOnce(primary).mockResolvedValueOnce(fallback)
+    vi.stubGlobal('fetch', fetchMock)
+    const signal = new AbortController().signal
+
+    const result = await fetchPackageFile('@scope/pkg', '1.0.0', 'file name.js', signal)
+
+    expect(result).toEqual({ provider: 'unpkg', response: fallback })
+    expect(primary.bodyUsed).toBe(true)
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      'https://cdn.jsdelivr.net/npm/@scope/pkg@1.0.0/file%20name.js',
+      { signal },
+    )
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      'https://unpkg.com/@scope/pkg@1.0.0/file%20name.js',
+      { signal },
+    )
+  })
+
+  it('preserves a primary 404 without trying the fallback', async () => {
+    const response = new Response(null, { status: 404 })
+    const fetchMock = vi.fn().mockResolvedValue(response)
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await fetchPackageFile('pkg', '1.0.0', 'missing.js')
+
+    expect(result).toEqual({ provider: 'jsdelivr', response })
+    expect(fetchMock).toHaveBeenCalledOnce()
+  })
+
+  it('propagates an aborted primary request without trying the fallback', async () => {
+    const abortError = new DOMException('Aborted', 'AbortError')
+    const fetchMock = vi.fn().mockRejectedValue(abortError)
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchPackageFile('pkg', '1.0.0', 'index.js')).rejects.toBe(abortError)
+    expect(fetchMock).toHaveBeenCalledOnce()
+  })
+
+  it('propagates an aborted fallback request', async () => {
+    const abortError = new DOMException('Aborted', 'AbortError')
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({
+        status: 403,
+        body: { cancel: vi.fn().mockResolvedValue(undefined) },
+      })
+      .mockRejectedValueOnce(abortError)
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchPackageFile('pkg', '1.0.0', 'index.js')).rejects.toBe(abortError)
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('continues to the fallback when discarding the primary body fails', async () => {
+    const fallback = new Response('content')
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({
+        status: 403,
+        body: { cancel: vi.fn().mockRejectedValue(new Error('cancel failed')) },
+      })
+      .mockResolvedValueOnce(fallback)
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchPackageFile('pkg', '1.0.0', 'index.js')).resolves.toEqual({
+      provider: 'unpkg',
+      response: fallback,
+    })
+  })
+})
+
+describe('fetchPackageMetadata', () => {
+  it('uses the metadata endpoints for the same fallback behavior', async () => {
+    const primary = new Response(null, { status: 403 })
+    const fallback = new Response('{}')
+    const fetchMock = vi.fn().mockResolvedValueOnce(primary).mockResolvedValueOnce(fallback)
+    vi.stubGlobal('fetch', fetchMock)
+
+    const result = await fetchPackageMetadata('pkg', '1.0.0')
+
+    expect(result).toEqual({ provider: 'unpkg', response: fallback })
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      'https://data.jsdelivr.com/v1/packages/npm/pkg@1.0.0',
+      { signal: undefined },
+    )
+    expect(fetchMock).toHaveBeenNthCalledWith(2, 'https://unpkg.com/pkg@1.0.0/?meta', {
+      signal: undefined,
+    })
+  })
+})
+
+describe('readPackageResponseText', () => {
+  it('reads a response within the byte limit', async () => {
+    await expect(readPackageResponseText(new Response('hello'), 5)).resolves.toBe('hello')
+  })
+
+  it('stops a streamed response that exceeds the byte limit without a content-length header', async () => {
+    const response = new Response('sixsix')
+
+    await expect(readPackageResponseText(response, 5)).rejects.toMatchObject({
+      name: 'PackageResponseTooLargeError',
+      sizeBytes: 6,
+    } satisfies Partial<PackageResponseTooLargeError>)
+  })
+
+  it('rejects a declared oversized response before reading its body', async () => {
+    const response = new Response('small', { headers: { 'content-length': '10' } })
+
+    await expect(readPackageResponseText(response, 5)).rejects.toMatchObject({
+      sizeBytes: 10,
+    } satisfies Partial<PackageResponseTooLargeError>)
+    expect(response.bodyUsed).toBe(true)
+  })
+})
diff --git a/test/unit/server/utils/skills.spec.ts b/test/unit/server/utils/skills.spec.ts
new file mode 100644
index 0000000000..cf6914a4a3
--- /dev/null
+++ b/test/unit/server/utils/skills.spec.ts
@@ -0,0 +1,61 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { fetchSkillFile, findSkillDirs } from '#server/utils/skills'
+import type { PackageFileTree } from '#shared/types'
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('fetchSkillFile', () => {
+  it('loads skill content through the package CDN fallback', async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(new Response(null, { status: 403 }))
+      .mockResolvedValueOnce(
+        new Response('# Skill', {
+          headers: {
+            'content-length': '7',
+            'content-type': 'text/markdown',
+          },
+        }),
+      )
+    vi.stubGlobal('fetch', fetchMock)
+
+    await expect(fetchSkillFile('pkg', '1.0.0', 'skills/demo/SKILL.md')).resolves.toBe('# Skill')
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      'https://unpkg.com/pkg@1.0.0/skills/demo/SKILL.md',
+      { signal: undefined },
+    )
+  })
+})
+
+describe('findSkillDirs', () => {
+  it('rejects packages that would trigger excessive skill fetches', () => {
+    const skills: PackageFileTree = {
+      name: 'skills',
+      path: 'skills',
+      type: 'directory',
+      children: Array.from({ length: 101 }, (_, index) => ({
+        name: `skill-${index}`,
+        path: `skills/skill-${index}`,
+        type: 'directory' as const,
+        children: [
+          {
+            name: 'SKILL.md',
+            path: `skills/skill-${index}/SKILL.md`,
+            type: 'file' as const,
+          },
+        ],
+      })),
+    }
+    vi.stubGlobal(
+      'createError',
+      vi.fn((options: { statusCode: number; message: string }) =>
+        Object.assign(new Error(options.message), options),
+      ),
+    )
+
+    expect(() => findSkillDirs([skills])).toThrow('too many skills')
+  })
+})
diff --git a/test/unit/shared/utils/package-files.spec.ts b/test/unit/shared/utils/package-files.spec.ts
new file mode 100644
index 0000000000..718723203a
--- /dev/null
+++ b/test/unit/shared/utils/package-files.spec.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getPackageFileUrl,
+  getPackageFileViewerUrl,
+  getPackageMetadataUrl,
+} from '#shared/utils/package-files'
+
+describe('package file URLs', () => {
+  it('builds provider URLs for scoped packages', () => {
+    expect(getPackageMetadataUrl('jsdelivr', '@scope/pkg', '1.2.3')).toBe(
+      'https://data.jsdelivr.com/v1/packages/npm/@scope/pkg@1.2.3',
+    )
+    expect(getPackageMetadataUrl('unpkg', '@scope/pkg', '1.2.3')).toBe(
+      'https://unpkg.com/@scope/pkg@1.2.3/?meta',
+    )
+  })
+
+  it('encodes versions and file path segments without encoding the package slash', () => {
+    expect(getPackageFileUrl('unpkg', '@scope/pkg', '1.2.3+build.1', 'dist/file name?#.js')).toBe(
+      'https://unpkg.com/@scope/pkg@1.2.3%2Bbuild.1/dist/file%20name%3F%23.js',
+    )
+    expect(getPackageFileViewerUrl('@scope/pkg', '1.2.3+build.1', 'dist/file name?#.js')).toBe(
+      'https://app.unpkg.com/@scope/pkg@1.2.3%2Bbuild.1/files/dist/file%20name%3F%23.js',
+    )
+  })
+})

From 098a59b635f984ee47ea028a69133917703e1def Mon Sep 17 00:00:00 2001
From: LubuSeb <187313664+LubuSeb@users.noreply.github.com>
Date: Sun, 9 Aug 2026 12:11:52 +0200
Subject: [PATCH 2/2] fix: address package fetch review feedback

---
 server/api/registry/compare/[...pkg].get.ts  |  3 ++-
 server/api/registry/file/[...pkg].get.ts     |  2 +-
 server/utils/skills.ts                       |  4 ++--
 test/unit/server/utils/package-files.spec.ts | 12 ++++++++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/server/api/registry/compare/[...pkg].get.ts b/server/api/registry/compare/[...pkg].get.ts
index 0825218d50..44960671a3 100644
--- a/server/api/registry/compare/[...pkg].get.ts
+++ b/server/api/registry/compare/[...pkg].get.ts
@@ -21,7 +21,8 @@ async function fetchPackageJson(
       string,
       unknown
     >
-  } catch {
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') throw error
     return null
   }
 }
diff --git a/server/api/registry/file/[...pkg].get.ts b/server/api/registry/file/[...pkg].get.ts
index 3b4b38b70e..67e10e2bf3 100644
--- a/server/api/registry/file/[...pkg].get.ts
+++ b/server/api/registry/file/[...pkg].get.ts
@@ -80,7 +80,7 @@ async function fetchFileContent(
     if (error instanceof PackageResponseTooLargeError) {
       throw createError({
         statusCode: 413,
-        message: `File too large (${(error.sizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_FILE_SIZE / 1024}KB.`,
+        message: `File exceeds the ${MAX_FILE_SIZE / 1024}KB maximum size.`,
       })
     }
     throw error
diff --git a/server/utils/skills.ts b/server/utils/skills.ts
index b1974e139e..190a18b844 100644
--- a/server/utils/skills.ts
+++ b/server/utils/skills.ts
@@ -119,7 +119,7 @@ export function countSkillFiles(children: PackageFileTree[]): SkillFileCounts |
 }
 
 /**
- * Fetch package file content with a size limit.
+ * Fetch package file content through the shared CDN fallback with a fixed size limit.
  */
 export async function fetchSkillFile(
   packageName: string,
@@ -142,7 +142,7 @@ export async function fetchSkillFile(
     if (error instanceof PackageResponseTooLargeError) {
       throw createError({
         statusCode: 413,
-        message: `File too large (${(error.sizeBytes / 1024 / 1024).toFixed(1)}MB). Maximum size is ${MAX_SKILL_FILE_SIZE / 1024}KB.`,
+        message: `File exceeds the ${MAX_SKILL_FILE_SIZE / 1024}KB maximum size.`,
       })
     }
     throw error
diff --git a/test/unit/server/utils/package-files.spec.ts b/test/unit/server/utils/package-files.spec.ts
index ee02f2c635..b8d9bc311b 100644
--- a/test/unit/server/utils/package-files.spec.ts
+++ b/test/unit/server/utils/package-files.spec.ts
@@ -144,4 +144,16 @@ describe('readPackageResponseText', () => {
     } satisfies Partial<PackageResponseTooLargeError>)
     expect(response.bodyUsed).toBe(true)
   })
+
+  it('enforces the byte limit when a response has no readable stream', async () => {
+    const response = {
+      body: null,
+      headers: new Headers(),
+      text: vi.fn().mockResolvedValue('ééé'),
+    } as unknown as Response
+
+    await expect(readPackageResponseText(response, 5)).rejects.toMatchObject({
+      sizeBytes: 6,
+    } satisfies Partial<PackageResponseTooLargeError>)
+  })
 })