From 0bf2f5378665245f8a99bde3f65fadd558b683b8 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 20 Mar 2026 00:56:51 +0000
Subject: [PATCH 01/19] feat: add package timeline

---
 app/components/Package/Header.vue             |  34 ++++-
 .../[[org]]/[packageName].vue                 | 137 ++++++++++++++++++
 i18n/locales/en.json                          |   6 +-
 i18n/schema.json                              |  12 ++
 4 files changed, 187 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/package-timeline/[[org]]/[packageName].vue

diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index 76a756b4dc..374184e743 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'timeline'
   versionUrlPattern: string
 }>()
 
@@ -124,6 +124,19 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
+const timelineLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) return null
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'timeline',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.resolvedVersion,
+    },
+  }
+})
+
 const keyboardShortcuts = useKeyboardShortcuts()
 
 onKeyStroke(
@@ -178,6 +191,16 @@ onKeyStroke(
   { dedupe: true },
 )
 
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 't') && !isEditableElement(e.target),
+  e => {
+    if (timelineLink.value === null) return
+    e.preventDefault()
+    navigateTo(timelineLink.value)
+  },
+  { dedupe: true },
+)
+
 //atproto
 // TODO: Maybe set this where it's not loaded here every load?
 const { user } = useAtproto()
@@ -426,6 +449,15 @@ const likeAction = async () => {
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="timelineLink"
+          :to="timelineLink"
+          aria-keyshortcuts="t"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+          :class="page === 'timeline' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.timeline') }}
+        </LinkBase>
       </nav>
     </div>
   </div>
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
new file mode 100644
index 0000000000..4cc6530961
--- /dev/null
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+definePageMeta({
+  name: 'timeline',
+  path: '/package-timeline/:org?/:packageName/v/:version',
+})
+
+const route = useRoute('timeline')
+
+const packageName = computed(() =>
+  route.params.org ? `${route.params.org}/${route.params.packageName}` : route.params.packageName,
+)
+const version = computed(() => route.params.version)
+
+const { data: pkg } = usePackage(packageName)
+
+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
+})
+
+const versionUrlPattern = computed(() => {
+  const split = packageName.value.split('/')
+  const org = split.length === 2 ? split[0] : undefined
+  const name = split.length === 2 ? split[1]! : split[0]!
+  return `/package-timeline/${org ? `${org}/` : ''}${name}/v/{version}`
+})
+
+function timelineRoute(ver: string): RouteLocationRaw {
+  return { name: 'timeline', params: { ...route.params, version: ver } }
+}
+
+// Build chronological version list sorted newest-first
+const PAGE_SIZE = 25
+
+const timelineEntries = computed(() => {
+  if (!pkg.value) return []
+  const time = pkg.value.time
+  const versions = Object.keys(pkg.value.versions)
+
+  return versions
+    .filter(v => time[v])
+    .map(v => ({
+      version: v,
+      time: time[v]!,
+      tags: Object.entries(pkg.value!['dist-tags'] ?? {})
+        .filter(([, ver]) => ver === v)
+        .map(([tag]) => tag),
+    }))
+    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+})
+
+const visibleCount = ref(PAGE_SIZE)
+
+const visibleEntries = computed(() => timelineEntries.value.slice(0, visibleCount.value))
+const hasMore = computed(() => visibleCount.value < timelineEntries.value.length)
+
+function loadMore() {
+  visibleCount.value += PAGE_SIZE
+}
+
+useSeoMeta({
+  title: () => `Timeline - ${packageName.value} - npmx`,
+  description: () => `Version timeline for ${packageName.value}`,
+})
+</script>
+
+<template>
+  <main class="flex-1 flex flex-col min-h-0">
+    <PackageHeader
+      :pkg="pkg"
+      :resolved-version="version"
+      :display-version="pkg?.requestedVersion"
+      :latest-version="latestVersion"
+      :version-url-pattern="versionUrlPattern"
+      page="timeline"
+    />
+
+    <div class="container w-full py-8">
+      <!-- Timeline -->
+      <ol v-if="visibleEntries.length" class="relative border-s border-border ms-4">
+        <li v-for="entry in visibleEntries" :key="entry.version" class="mb-6 ms-6">
+          <!-- Dot -->
+          <span
+            class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
+            :class="entry.version === version ? 'bg-accent border-accent' : 'bg-bg-subtle'"
+          />
+          <!-- Content -->
+          <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+            <LinkBase
+              :to="timelineRoute(entry.version)"
+              class="text-sm font-medium"
+              :class="entry.version === version ? 'text-accent' : ''"
+              dir="ltr"
+            >
+              {{ entry.version }}
+            </LinkBase>
+            <span
+              v-for="tag in entry.tags"
+              :key="tag"
+              class="text-3xs font-semibold uppercase tracking-wide"
+              :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
+            >
+              {{ tag }}
+            </span>
+            <DateTime
+              :datetime="entry.time"
+              class="text-xs text-fg-subtle"
+              year="numeric"
+              month="short"
+              day="numeric"
+            />
+          </div>
+        </li>
+      </ol>
+
+      <!-- Load more -->
+      <div v-if="hasMore" class="mt-4 ms-10">
+        <button
+          type="button"
+          class="text-sm text-accent hover:text-accent/80 transition-colors"
+          @click="loadMore"
+        >
+          {{ $t('package.timeline.load_more') }}
+        </button>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="!pkg" class="py-20 text-center">
+        <span class="i-svg-spinners:ring-resize w-5 h-5 text-fg-subtle" />
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4d241f522d..fd1e5e4d70 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -301,7 +301,8 @@
       "code": "code",
       "docs": "docs",
       "fund": "fund",
-      "compare": "compare"
+      "compare": "compare",
+      "timeline": "timeline"
     },
     "likes": {
       "like": "Like this package",
@@ -420,6 +421,9 @@
       "version_filter_label": "Filter versions",
       "no_match_filter": "No versions match {filter}"
     },
+    "timeline": {
+      "load_more": "Load more"
+    },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
       "list_label": "Package dependencies",
diff --git a/i18n/schema.json b/i18n/schema.json
index ff41df4289..f237809872 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -909,6 +909,9 @@
             },
             "compare": {
               "type": "string"
+            },
+            "timeline": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -1264,6 +1267,15 @@
           },
           "additionalProperties": false
         },
+        "timeline": {
+          "type": "object",
+          "properties": {
+            "load_more": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "dependencies": {
           "type": "object",
           "properties": {

From 97e094aa3658bdaf54ccabac4e93def51b218714 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 20 Mar 2026 05:59:52 +0000
Subject: [PATCH 02/19] feat: add package size and dependency changes

---
 .../[[org]]/[packageName].vue                 | 159 +++++++++++++++++-
 i18n/locales/en.json                          |   6 +-
 i18n/schema.json                              |  12 ++
 3 files changed, 173 insertions(+), 4 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 4cc6530961..38cab480fb 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -41,14 +41,19 @@ const timelineEntries = computed(() => {
   const time = pkg.value.time
   const versions = Object.keys(pkg.value.versions)
 
+  const tagsByVersion = new Map<string, string[]>()
+  for (const [tag, ver] of Object.entries(pkg.value['dist-tags'] ?? {})) {
+    const list = tagsByVersion.get(ver)
+    if (list) list.push(tag)
+    else tagsByVersion.set(ver, [tag])
+  }
+
   return versions
     .filter(v => time[v])
     .map(v => ({
       version: v,
       time: time[v]!,
-      tags: Object.entries(pkg.value!['dist-tags'] ?? {})
-        .filter(([, ver]) => ver === v)
-        .map(([tag]) => tag),
+      tags: tagsByVersion.get(v) ?? [],
     }))
     .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
 })
@@ -62,6 +67,88 @@ function loadMore() {
   visibleCount.value += PAGE_SIZE
 }
 
+const SIZE_INCREASE_THRESHOLD = 0.25
+const DEP_INCREASE_THRESHOLD = 5
+
+const sizeCache = shallowReactive(new Map<string, InstallSizeResult>())
+const fetchingVersions = shallowReactive(new Set<string>())
+
+async function fetchSize(ver: string) {
+  if (sizeCache.has(ver) || fetchingVersions.has(ver)) return
+  fetchingVersions.add(ver)
+  try {
+    const data = await $fetch<InstallSizeResult>(
+      `/api/registry/install-size/${packageName.value}/v/${ver}`,
+    )
+    sizeCache.set(ver, data)
+  } catch {
+    // silently skip — size data is best-effort
+  } finally {
+    fetchingVersions.delete(ver)
+  }
+}
+
+// Fetch sizes for visible version pairs
+if (import.meta.client) {
+  watch(
+    visibleEntries,
+    entries => {
+      for (const entry of entries) {
+        fetchSize(entry.version)
+      }
+    },
+    { immediate: true },
+  )
+}
+
+interface SizeEvent {
+  direction: 'increase' | 'decrease'
+  sizeRatio: number
+  sizeDelta: number
+  depDiff: number
+  sizeThresholdExceeded: boolean
+  depThresholdExceeded: boolean
+}
+
+// Compute size events between consecutive visible versions
+const sizeEvents = computed(() => {
+  const events = new Map<string, SizeEvent>()
+  const entries = visibleEntries.value
+
+  for (let i = 0; i < entries.length - 1; i++) {
+    const current = sizeCache.get(entries[i]!.version)
+    const previous = sizeCache.get(entries[i + 1]!.version)
+    if (!current || !previous) continue
+
+    const sizeRatio =
+      previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0
+    const depDiff = current.dependencyCount - previous.dependencyCount
+
+    const sizeIncreased = sizeRatio > SIZE_INCREASE_THRESHOLD
+    const sizeDecreased = sizeRatio < -SIZE_INCREASE_THRESHOLD
+    const depsIncreased = depDiff > DEP_INCREASE_THRESHOLD
+    const depsDecreased = depDiff < -DEP_INCREASE_THRESHOLD
+
+    if (!sizeIncreased && !sizeDecreased && !depsIncreased && !depsDecreased) continue
+
+    events.set(entries[i]!.version, {
+      direction:
+        (sizeDecreased || depsDecreased) && !sizeIncreased && !depsIncreased
+          ? 'decrease'
+          : 'increase',
+      sizeRatio,
+      sizeDelta: current.totalSize - previous.totalSize,
+      depDiff,
+      sizeThresholdExceeded: sizeIncreased || sizeDecreased,
+      depThresholdExceeded: depsIncreased || depsDecreased,
+    })
+  }
+
+  return events
+})
+
+const bytesFormatter = useBytesFormatter()
+
 useSeoMeta({
   title: () => `Timeline - ${packageName.value} - npmx`,
   description: () => `Version timeline for ${packageName.value}`,
@@ -83,6 +170,72 @@ useSeoMeta({
       <!-- Timeline -->
       <ol v-if="visibleEntries.length" class="relative border-s border-border ms-4">
         <li v-for="entry in visibleEntries" :key="entry.version" class="mb-6 ms-6">
+          <!-- Size event -->
+          <div v-if="sizeEvents.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
+            <span
+              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
+              :class="
+                sizeEvents.get(entry.version)!.direction === 'decrease'
+                  ? 'bg-green-500 border-green-600'
+                  : 'bg-amber-500 border-amber-600'
+              "
+            >
+              <span
+                class="w-2.5 h-2.5 text-white"
+                :class="
+                  sizeEvents.get(entry.version)!.direction === 'decrease'
+                    ? 'i-lucide:trending-down'
+                    : 'i-lucide:trending-up'
+                "
+                aria-hidden="true"
+              />
+            </span>
+            <div
+              class="border rounded-lg px-3 py-2 text-sm"
+              :class="
+                sizeEvents.get(entry.version)!.direction === 'decrease'
+                  ? 'border-green-600/40 bg-green-500/10 text-green-800 dark:text-green-400'
+                  : 'border-amber-600/40 bg-amber-500/10 text-amber-800 dark:text-amber-400'
+              "
+            >
+              <template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
+                {{
+                  sizeEvents.get(entry.version)!.direction === 'decrease'
+                    ? $t('package.timeline.size_decrease', {
+                        percent: Math.abs(
+                          Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
+                        ),
+                        size: bytesFormatter.format(
+                          Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
+                        ),
+                      })
+                    : $t('package.timeline.size_increase', {
+                        percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
+                        size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
+                      })
+                }}
+              </template>
+              <template
+                v-if="
+                  sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
+                  sizeEvents.get(entry.version)!.depThresholdExceeded
+                "
+              >
+                &middot;
+              </template>
+              <template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
+                {{
+                  sizeEvents.get(entry.version)!.depDiff > 0
+                    ? $t('package.timeline.dep_increase', {
+                        count: sizeEvents.get(entry.version)!.depDiff,
+                      })
+                    : $t('package.timeline.dep_decrease', {
+                        count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
+                      })
+                }}
+              </template>
+            </div>
+          </div>
           <!-- Dot -->
           <span
             class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fd1e5e4d70..558038b944 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -422,7 +422,11 @@
       "no_match_filter": "No versions match {filter}"
     },
     "timeline": {
-      "load_more": "Load more"
+      "load_more": "Load more",
+      "size_increase": "Install size increased by {percent}% ({size})",
+      "size_decrease": "Install size decreased by {percent}% ({size})",
+      "dep_increase": "{count} dependencies added",
+      "dep_decrease": "{count} dependencies removed"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index f237809872..abcb272331 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1272,6 +1272,18 @@
           "properties": {
             "load_more": {
               "type": "string"
+            },
+            "size_increase": {
+              "type": "string"
+            },
+            "size_decrease": {
+              "type": "string"
+            },
+            "dep_increase": {
+              "type": "string"
+            },
+            "dep_decrease": {
+              "type": "string"
             }
           },
           "additionalProperties": false

From 245cb325257cef8a2fa19c5fe0676c2fb4e15ce4 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 20 Mar 2026 06:18:45 +0000
Subject: [PATCH 03/19] feat: add license changes

---
 app/composables/npm/usePackage.ts             |  7 +++
 .../[[org]]/[packageName].vue                 | 47 +++++++++++++++++--
 i18n/locales/en.json                          |  3 +-
 i18n/schema.json                              |  3 ++
 shared/types/npm-registry.ts                  |  1 +
 5 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts
index 50a40e6c52..e1244c9f72 100644
--- a/app/composables/npm/usePackage.ts
+++ b/app/composables/npm/usePackage.ts
@@ -86,12 +86,19 @@ export function transformPackument(
       const trustLevel = getTrustLevel(version)
       const hasProvenance = trustLevel !== 'none'
 
+      // Normalize license: some versions use { type: "MIT" } instead of "MIT"
+      let versionLicense = version.license
+      if (versionLicense && typeof versionLicense === 'object' && 'type' in versionLicense) {
+        versionLicense = (versionLicense as { type: string }).type
+      }
+
       filteredVersions[v] = {
         hasProvenance,
         trustLevel,
         version: version.version,
         deprecated: version.deprecated,
         tags: version.tags as string[],
+        license: typeof versionLicense === 'string' ? versionLicense : undefined,
       }
     }
   }
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 38cab480fb..da790662d5 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -147,6 +147,27 @@ const sizeEvents = computed(() => {
   return events
 })
 
+// Detect license changes between consecutive versions
+const licenseChanges = computed(() => {
+  const changes = new Map<string, { from: string; to: string }>()
+  const entries = timelineEntries.value
+
+  for (let i = 0; i < entries.length - 1; i++) {
+    const current = pkg.value?.versions[entries[i]!.version]
+    const previous = pkg.value?.versions[entries[i + 1]!.version]
+    if (!current || !previous) continue
+
+    const currentLicense = current.license ?? 'Unknown'
+    const previousLicense = previous.license ?? 'Unknown'
+
+    if (currentLicense !== previousLicense) {
+      changes.set(entries[i]!.version, { from: previousLicense, to: currentLicense })
+    }
+  }
+
+  return changes
+})
+
 const bytesFormatter = useBytesFormatter()
 
 useSeoMeta({
@@ -190,12 +211,12 @@ useSeoMeta({
                 aria-hidden="true"
               />
             </span>
-            <div
-              class="border rounded-lg px-3 py-2 text-sm"
+            <p
+              class="text-sm"
               :class="
                 sizeEvents.get(entry.version)!.direction === 'decrease'
-                  ? 'border-green-600/40 bg-green-500/10 text-green-800 dark:text-green-400'
-                  : 'border-amber-600/40 bg-amber-500/10 text-amber-800 dark:text-amber-400'
+                  ? 'text-green-700 dark:text-green-400'
+                  : 'text-amber-700 dark:text-amber-400'
               "
             >
               <template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
@@ -234,7 +255,23 @@ useSeoMeta({
                       })
                 }}
               </template>
-            </div>
+            </p>
+          </div>
+          <!-- License change -->
+          <div v-if="licenseChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
+            <span
+              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border bg-amber-500 border-amber-600"
+            >
+              <span class="w-2.5 h-2.5 text-white i-lucide:scale" aria-hidden="true" />
+            </span>
+            <p class="text-sm text-amber-700 dark:text-amber-400">
+              {{
+                $t('package.timeline.license_change', {
+                  from: licenseChanges.get(entry.version)!.from,
+                  to: licenseChanges.get(entry.version)!.to,
+                })
+              }}
+            </p>
           </div>
           <!-- Dot -->
           <span
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 558038b944..7035105184 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -426,7 +426,8 @@
       "size_increase": "Install size increased by {percent}% ({size})",
       "size_decrease": "Install size decreased by {percent}% ({size})",
       "dep_increase": "{count} dependencies added",
-      "dep_decrease": "{count} dependencies removed"
+      "dep_decrease": "{count} dependencies removed",
+      "license_change": "License changed from {from} to {to}"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index abcb272331..823ca88ba1 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1284,6 +1284,9 @@
             },
             "dep_decrease": {
               "type": "string"
+            },
+            "license_change": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 424a84ae7d..012cb5012a 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -47,6 +47,7 @@ export type PublishTrustLevel = 'none' | 'trustedPublisher' | 'provenance'
 export type SlimVersion = Pick<SlimPackumentVersion, 'version' | 'deprecated' | 'tags'> & {
   hasProvenance?: boolean
   trustLevel?: PublishTrustLevel
+  license?: string
 }
 
 /**

From 28bb82d7ef7f396db139c42a876e5778305e7a45 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 20 Mar 2026 18:52:19 +0000
Subject: [PATCH 04/19] feat: add esm change

---
 app/composables/npm/usePackage.ts             |  1 +
 .../[[org]]/[packageName].vue                 | 50 +++++++++++++++++++
 i18n/locales/en.json                          |  4 +-
 i18n/schema.json                              |  6 +++
 shared/types/npm-registry.ts                  |  2 +
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/app/composables/npm/usePackage.ts b/app/composables/npm/usePackage.ts
index e1244c9f72..4223b09bc5 100644
--- a/app/composables/npm/usePackage.ts
+++ b/app/composables/npm/usePackage.ts
@@ -99,6 +99,7 @@ export function transformPackument(
         deprecated: version.deprecated,
         tags: version.tags as string[],
         license: typeof versionLicense === 'string' ? versionLicense : undefined,
+        type: typeof version.type === 'string' ? version.type : undefined,
       }
     }
   }
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index da790662d5..ef5dccc668 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -168,6 +168,29 @@ const licenseChanges = computed(() => {
   return changes
 })
 
+// Detect ESM support changes (package "type" field) between consecutive versions
+const esmChanges = computed(() => {
+  const changes = new Map<string, 'added' | 'removed'>()
+  const entries = timelineEntries.value
+
+  for (let i = 0; i < entries.length - 1; i++) {
+    const current = pkg.value?.versions[entries[i]!.version]
+    const previous = pkg.value?.versions[entries[i + 1]!.version]
+    if (!current || !previous) continue
+
+    const currentIsEsm = current.type === 'module'
+    const previousIsEsm = previous.type === 'module'
+
+    if (currentIsEsm && !previousIsEsm) {
+      changes.set(entries[i]!.version, 'added')
+    } else if (!currentIsEsm && previousIsEsm) {
+      changes.set(entries[i]!.version, 'removed')
+    }
+  }
+
+  return changes
+})
+
 const bytesFormatter = useBytesFormatter()
 
 useSeoMeta({
@@ -273,6 +296,33 @@ useSeoMeta({
               }}
             </p>
           </div>
+          <!-- ESM change -->
+          <div v-if="esmChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
+            <span
+              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
+              :class="
+                esmChanges.get(entry.version) === 'added'
+                  ? 'bg-green-500 border-green-600'
+                  : 'bg-amber-500 border-amber-600'
+              "
+            >
+              <span class="w-2.5 h-2.5 text-white i-lucide:package" aria-hidden="true" />
+            </span>
+            <p
+              class="text-sm"
+              :class="
+                esmChanges.get(entry.version) === 'added'
+                  ? 'text-green-700 dark:text-green-400'
+                  : 'text-amber-700 dark:text-amber-400'
+              "
+            >
+              {{
+                esmChanges.get(entry.version) === 'added'
+                  ? $t('package.timeline.esm_added')
+                  : $t('package.timeline.esm_removed')
+              }}
+            </p>
+          </div>
           <!-- Dot -->
           <span
             class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7035105184..4cea3a7db6 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -427,7 +427,9 @@
       "size_decrease": "Install size decreased by {percent}% ({size})",
       "dep_increase": "{count} dependencies added",
       "dep_decrease": "{count} dependencies removed",
-      "license_change": "License changed from {from} to {to}"
+      "license_change": "License changed from {from} to {to}",
+      "esm_added": "Module type changed to ESM",
+      "esm_removed": "Module type changed from ESM to CJS"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index 823ca88ba1..c0f0c6c05e 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1287,6 +1287,12 @@
             },
             "license_change": {
               "type": "string"
+            },
+            "esm_added": {
+              "type": "string"
+            },
+            "esm_removed": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
index 012cb5012a..eb7729bbea 100644
--- a/shared/types/npm-registry.ts
+++ b/shared/types/npm-registry.ts
@@ -48,6 +48,8 @@ export type SlimVersion = Pick<SlimPackumentVersion, 'version' | 'deprecated' |
   hasProvenance?: boolean
   trustLevel?: PublishTrustLevel
   license?: string
+  /** Package type field — "module" indicates ESM */
+  type?: string
 }
 
 /**

From b27f2b9efb4056856d715fcb069ace15f81021fd Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 20 Mar 2026 18:57:57 +0000
Subject: [PATCH 05/19] chore: rework design to subbranch version info

---
 .../[[org]]/[packageName].vue                 | 224 +++++++++---------
 1 file changed, 115 insertions(+), 109 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index ef5dccc668..1f1f2c5fa1 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -214,115 +214,6 @@ useSeoMeta({
       <!-- Timeline -->
       <ol v-if="visibleEntries.length" class="relative border-s border-border ms-4">
         <li v-for="entry in visibleEntries" :key="entry.version" class="mb-6 ms-6">
-          <!-- Size event -->
-          <div v-if="sizeEvents.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
-            <span
-              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
-              :class="
-                sizeEvents.get(entry.version)!.direction === 'decrease'
-                  ? 'bg-green-500 border-green-600'
-                  : 'bg-amber-500 border-amber-600'
-              "
-            >
-              <span
-                class="w-2.5 h-2.5 text-white"
-                :class="
-                  sizeEvents.get(entry.version)!.direction === 'decrease'
-                    ? 'i-lucide:trending-down'
-                    : 'i-lucide:trending-up'
-                "
-                aria-hidden="true"
-              />
-            </span>
-            <p
-              class="text-sm"
-              :class="
-                sizeEvents.get(entry.version)!.direction === 'decrease'
-                  ? 'text-green-700 dark:text-green-400'
-                  : 'text-amber-700 dark:text-amber-400'
-              "
-            >
-              <template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
-                {{
-                  sizeEvents.get(entry.version)!.direction === 'decrease'
-                    ? $t('package.timeline.size_decrease', {
-                        percent: Math.abs(
-                          Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
-                        ),
-                        size: bytesFormatter.format(
-                          Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
-                        ),
-                      })
-                    : $t('package.timeline.size_increase', {
-                        percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
-                        size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
-                      })
-                }}
-              </template>
-              <template
-                v-if="
-                  sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
-                  sizeEvents.get(entry.version)!.depThresholdExceeded
-                "
-              >
-                &middot;
-              </template>
-              <template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
-                {{
-                  sizeEvents.get(entry.version)!.depDiff > 0
-                    ? $t('package.timeline.dep_increase', {
-                        count: sizeEvents.get(entry.version)!.depDiff,
-                      })
-                    : $t('package.timeline.dep_decrease', {
-                        count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
-                      })
-                }}
-              </template>
-            </p>
-          </div>
-          <!-- License change -->
-          <div v-if="licenseChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
-            <span
-              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border bg-amber-500 border-amber-600"
-            >
-              <span class="w-2.5 h-2.5 text-white i-lucide:scale" aria-hidden="true" />
-            </span>
-            <p class="text-sm text-amber-700 dark:text-amber-400">
-              {{
-                $t('package.timeline.license_change', {
-                  from: licenseChanges.get(entry.version)!.from,
-                  to: licenseChanges.get(entry.version)!.to,
-                })
-              }}
-            </p>
-          </div>
-          <!-- ESM change -->
-          <div v-if="esmChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
-            <span
-              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
-              :class="
-                esmChanges.get(entry.version) === 'added'
-                  ? 'bg-green-500 border-green-600'
-                  : 'bg-amber-500 border-amber-600'
-              "
-            >
-              <span class="w-2.5 h-2.5 text-white i-lucide:package" aria-hidden="true" />
-            </span>
-            <p
-              class="text-sm"
-              :class="
-                esmChanges.get(entry.version) === 'added'
-                  ? 'text-green-700 dark:text-green-400'
-                  : 'text-amber-700 dark:text-amber-400'
-              "
-            >
-              {{
-                esmChanges.get(entry.version) === 'added'
-                  ? $t('package.timeline.esm_added')
-                  : $t('package.timeline.esm_removed')
-              }}
-            </p>
-          </div>
           <!-- Dot -->
           <span
             class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
@@ -354,6 +245,121 @@ useSeoMeta({
               day="numeric"
             />
           </div>
+          <!-- Sub-events branch -->
+          <ol
+            v-if="sizeEvents.has(entry.version) || licenseChanges.has(entry.version) || esmChanges.has(entry.version)"
+            class="relative border-s border-border/50 ms-3 mt-2"
+          >
+            <!-- Size event -->
+            <li v-if="sizeEvents.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
+              <span
+                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                :class="
+                  sizeEvents.get(entry.version)!.direction === 'decrease'
+                    ? 'bg-green-500 border-green-600'
+                    : 'bg-amber-500 border-amber-600'
+                "
+              >
+                <span
+                  class="w-2 h-2 text-white"
+                  :class="
+                    sizeEvents.get(entry.version)!.direction === 'decrease'
+                      ? 'i-lucide:trending-down'
+                      : 'i-lucide:trending-up'
+                  "
+                  aria-hidden="true"
+                />
+              </span>
+              <p
+                class="text-xs"
+                :class="
+                  sizeEvents.get(entry.version)!.direction === 'decrease'
+                    ? 'text-green-700 dark:text-green-400'
+                    : 'text-amber-700 dark:text-amber-400'
+                "
+              >
+                <template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
+                  {{
+                    sizeEvents.get(entry.version)!.direction === 'decrease'
+                      ? $t('package.timeline.size_decrease', {
+                          percent: Math.abs(
+                            Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
+                          ),
+                          size: bytesFormatter.format(
+                            Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
+                          ),
+                        })
+                      : $t('package.timeline.size_increase', {
+                          percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
+                          size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
+                        })
+                  }}
+                </template>
+                <template
+                  v-if="
+                    sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
+                    sizeEvents.get(entry.version)!.depThresholdExceeded
+                  "
+                >
+                  &middot;
+                </template>
+                <template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
+                  {{
+                    sizeEvents.get(entry.version)!.depDiff > 0
+                      ? $t('package.timeline.dep_increase', {
+                          count: sizeEvents.get(entry.version)!.depDiff,
+                        })
+                      : $t('package.timeline.dep_decrease', {
+                          count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
+                        })
+                  }}
+                </template>
+              </p>
+            </li>
+            <!-- License change -->
+            <li v-if="licenseChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
+              <span
+                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-amber-500 border-amber-600"
+              >
+                <span class="w-2 h-2 text-white i-lucide:scale" aria-hidden="true" />
+              </span>
+              <p class="text-xs text-amber-700 dark:text-amber-400">
+                {{
+                  $t('package.timeline.license_change', {
+                    from: licenseChanges.get(entry.version)!.from,
+                    to: licenseChanges.get(entry.version)!.to,
+                  })
+                }}
+              </p>
+            </li>
+            <!-- ESM change -->
+            <li v-if="esmChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
+              <span
+                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                :class="
+                  esmChanges.get(entry.version) === 'added'
+                    ? 'bg-green-500 border-green-600'
+                    : 'bg-amber-500 border-amber-600'
+                "
+              >
+                <span class="w-2 h-2 text-white i-lucide:package" aria-hidden="true" />
+              </span>
+              <p
+                class="text-xs"
+                :class="
+                  esmChanges.get(entry.version) === 'added'
+                    ? 'text-green-700 dark:text-green-400'
+                    : 'text-amber-700 dark:text-amber-400'
+                "
+              >
+                {{
+                  esmChanges.get(entry.version) === 'added'
+                    ? $t('package.timeline.esm_added')
+                    : $t('package.timeline.esm_removed')
+                }}
+              </p>
+            </li>
+          </ol>
         </li>
       </ol>
 

From 949c209feaa5b4441a8e82ebc500b8d34c4b8129 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 05:30:56 +0000
Subject: [PATCH 06/19] feat: rework to use an api

Do the hard work in the api, fake paging just for sake of making the
page nicer.
---
 .../[[org]]/[packageName].vue                 | 437 +++++++++---------
 i18n/locales/en.json                          |   4 +-
 i18n/schema.json                              |   6 +
 server/api/registry/timeline/[...pkg].get.ts  |  94 ++++
 4 files changed, 334 insertions(+), 207 deletions(-)
 create mode 100644 server/api/registry/timeline/[...pkg].get.ts

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 1f1f2c5fa1..0ef5373e4d 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
+import { compare } from 'semver'
+import type { TimelineResponse, TimelineVersion } from '~~/server/api/registry/timeline/[...pkg].get'
 
 definePageMeta({
   name: 'timeline',
@@ -23,9 +25,7 @@ const latestVersion = computed(() => {
 })
 
 const versionUrlPattern = computed(() => {
-  const split = packageName.value.split('/')
-  const org = split.length === 2 ? split[0] : undefined
-  const name = split.length === 2 ? split[1]! : split[0]!
+  const { org, packageName: name } = route.params
   return `/package-timeline/${org ? `${org}/` : ''}${name}/v/{version}`
 })
 
@@ -33,38 +33,46 @@ function timelineRoute(ver: string): RouteLocationRaw {
   return { name: 'timeline', params: { ...route.params, version: ver } }
 }
 
-// Build chronological version list sorted newest-first
+// Paginated timeline data from server
 const PAGE_SIZE = 25
 
-const timelineEntries = computed(() => {
-  if (!pkg.value) return []
-  const time = pkg.value.time
-  const versions = Object.keys(pkg.value.versions)
+const timelineEntries = ref<TimelineVersion[]>([])
+const totalVersions = ref(0)
+const loadingMore = ref(false)
 
-  const tagsByVersion = new Map<string, string[]>()
-  for (const [tag, ver] of Object.entries(pkg.value['dist-tags'] ?? {})) {
-    const list = tagsByVersion.get(ver)
-    if (list) list.push(tag)
-    else tagsByVersion.set(ver, [tag])
-  }
+const hasMore = computed(() => timelineEntries.value.length < totalVersions.value)
 
-  return versions
-    .filter(v => time[v])
-    .map(v => ({
-      version: v,
-      time: time[v]!,
-      tags: tagsByVersion.get(v) ?? [],
-    }))
-    .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
-})
+async function fetchTimeline(offset: number): Promise<TimelineResponse> {
+  return $fetch<TimelineResponse>(
+    `/api/registry/timeline/${packageName.value}`,
+    { query: { offset, limit: PAGE_SIZE } },
+  )
+}
 
-const visibleCount = ref(PAGE_SIZE)
+// Initial load — useAsyncData serializes the full response across SSR → client
+const { data: initialTimeline } = await useAsyncData(
+  () => `timeline:${packageName.value}`,
+  () => fetchTimeline(0),
+)
 
-const visibleEntries = computed(() => timelineEntries.value.slice(0, visibleCount.value))
-const hasMore = computed(() => visibleCount.value < timelineEntries.value.length)
+watch(initialTimeline, (data) => {
+  if (data) {
+    timelineEntries.value = data.versions
+    totalVersions.value = data.total
+  }
+}, { immediate: true })
 
-function loadMore() {
-  visibleCount.value += PAGE_SIZE
+async function loadMore() {
+  if (loadingMore.value) return
+  loadingMore.value = true
+  try {
+    const data = await fetchTimeline(timelineEntries.value.length)
+    timelineEntries.value = [...timelineEntries.value, ...data.versions]
+    totalVersions.value = data.total
+  }
+  finally {
+    loadingMore.value = false
+  }
 }
 
 const SIZE_INCREASE_THRESHOLD = 0.25
@@ -88,10 +96,10 @@ async function fetchSize(ver: string) {
   }
 }
 
-// Fetch sizes for visible version pairs
+// Fetch sizes for visible versions
 if (import.meta.client) {
   watch(
-    visibleEntries,
+    timelineEntries,
     entries => {
       for (const entry of entries) {
         fetchSize(entry.version)
@@ -101,94 +109,93 @@ if (import.meta.client) {
   )
 }
 
-interface SizeEvent {
-  direction: 'increase' | 'decrease'
-  sizeRatio: number
-  sizeDelta: number
-  depDiff: number
-  sizeThresholdExceeded: boolean
-  depThresholdExceeded: boolean
-}
-
-// Compute size events between consecutive visible versions
-const sizeEvents = computed(() => {
-  const events = new Map<string, SizeEvent>()
-  const entries = visibleEntries.value
-
-  for (let i = 0; i < entries.length - 1; i++) {
-    const current = sizeCache.get(entries[i]!.version)
-    const previous = sizeCache.get(entries[i + 1]!.version)
-    if (!current || !previous) continue
-
-    const sizeRatio =
-      previous.totalSize > 0 ? (current.totalSize - previous.totalSize) / previous.totalSize : 0
-    const depDiff = current.dependencyCount - previous.dependencyCount
-
-    const sizeIncreased = sizeRatio > SIZE_INCREASE_THRESHOLD
-    const sizeDecreased = sizeRatio < -SIZE_INCREASE_THRESHOLD
-    const depsIncreased = depDiff > DEP_INCREASE_THRESHOLD
-    const depsDecreased = depDiff < -DEP_INCREASE_THRESHOLD
-
-    if (!sizeIncreased && !sizeDecreased && !depsIncreased && !depsDecreased) continue
-
-    events.set(entries[i]!.version, {
-      direction:
-        (sizeDecreased || depsDecreased) && !sizeIncreased && !depsIncreased
-          ? 'decrease'
-          : 'increase',
-      sizeRatio,
-      sizeDelta: current.totalSize - previous.totalSize,
-      depDiff,
-      sizeThresholdExceeded: sizeIncreased || sizeDecreased,
-      depThresholdExceeded: depsIncreased || depsDecreased,
-    })
+interface VersionEvents {
+  size?: {
+    direction: 'increase' | 'decrease'
+    sizeRatio: number
+    sizeDelta: number
+    depDiff: number
+    sizeThresholdExceeded: boolean
+    depThresholdExceeded: boolean
   }
+  license?: { from: string; to: string }
+  esm?: 'added' | 'removed'
+  types?: 'added' | 'removed'
+}
 
-  return events
-})
-
-// Detect license changes between consecutive versions
-const licenseChanges = computed(() => {
-  const changes = new Map<string, { from: string; to: string }>()
+// Detect notable changes between consecutive versions (size, license, ESM, types)
+// Versions are compared against their semver predecessor, not chronological neighbor,
+// so interleaved legacy releases don't produce misleading cross-line diffs.
+const versionEvents = computed(() => {
+  const events = new Map<string, VersionEvents>()
   const entries = timelineEntries.value
 
-  for (let i = 0; i < entries.length - 1; i++) {
-    const current = pkg.value?.versions[entries[i]!.version]
-    const previous = pkg.value?.versions[entries[i + 1]!.version]
-    if (!current || !previous) continue
+  // Sort by semver to find each version's true predecessor
+  const semverSorted = [...entries].sort((a, b) => compare(b.version, a.version))
+  const prevBySemver = new Map<string, TimelineVersion>()
+  for (let i = 0; i < semverSorted.length - 1; i++) {
+    prevBySemver.set(semverSorted[i]!.version, semverSorted[i + 1]!)
+  }
+
+  for (const current of entries) {
+    const previous = prevBySemver.get(current.version)
+    if (!previous) continue
+
+    const ev: VersionEvents = {}
+
+    // Size changes
+    const currentSize = sizeCache.get(current.version)
+    const previousSize = sizeCache.get(previous.version)
+    if (currentSize && previousSize) {
+      const sizeRatio =
+        previousSize.totalSize > 0
+          ? (currentSize.totalSize - previousSize.totalSize) / previousSize.totalSize
+          : 0
+      const depDiff = currentSize.dependencyCount - previousSize.dependencyCount
+
+      const sizeIncreased = sizeRatio > SIZE_INCREASE_THRESHOLD
+      const sizeDecreased = sizeRatio < -SIZE_INCREASE_THRESHOLD
+      const depsIncreased = depDiff > DEP_INCREASE_THRESHOLD
+      const depsDecreased = depDiff < -DEP_INCREASE_THRESHOLD
+
+      if (sizeIncreased || sizeDecreased || depsIncreased || depsDecreased) {
+        ev.size = {
+          direction:
+            (sizeDecreased || depsDecreased) && !sizeIncreased && !depsIncreased
+              ? 'decrease'
+              : 'increase',
+          sizeRatio,
+          sizeDelta: currentSize.totalSize - previousSize.totalSize,
+          depDiff,
+          sizeThresholdExceeded: sizeIncreased || sizeDecreased,
+          depThresholdExceeded: depsIncreased || depsDecreased,
+        }
+      }
+    }
 
+    // License changes
     const currentLicense = current.license ?? 'Unknown'
     const previousLicense = previous.license ?? 'Unknown'
-
     if (currentLicense !== previousLicense) {
-      changes.set(entries[i]!.version, { from: previousLicense, to: currentLicense })
+      ev.license = { from: previousLicense, to: currentLicense }
     }
-  }
-
-  return changes
-})
-
-// Detect ESM support changes (package "type" field) between consecutive versions
-const esmChanges = computed(() => {
-  const changes = new Map<string, 'added' | 'removed'>()
-  const entries = timelineEntries.value
-
-  for (let i = 0; i < entries.length - 1; i++) {
-    const current = pkg.value?.versions[entries[i]!.version]
-    const previous = pkg.value?.versions[entries[i + 1]!.version]
-    if (!current || !previous) continue
 
+    // ESM support changes
     const currentIsEsm = current.type === 'module'
     const previousIsEsm = previous.type === 'module'
+    if (currentIsEsm && !previousIsEsm) ev.esm = 'added'
+    else if (!currentIsEsm && previousIsEsm) ev.esm = 'removed'
+
+    // TypeScript types changes
+    if (current.hasTypes && !previous.hasTypes) ev.types = 'added'
+    else if (!current.hasTypes && previous.hasTypes) ev.types = 'removed'
 
-    if (currentIsEsm && !previousIsEsm) {
-      changes.set(entries[i]!.version, 'added')
-    } else if (!currentIsEsm && previousIsEsm) {
-      changes.set(entries[i]!.version, 'removed')
+    if (ev.size || ev.license || ev.esm || ev.types) {
+      events.set(current.version, ev)
     }
   }
 
-  return changes
+  return events
 })
 
 const bytesFormatter = useBytesFormatter()
@@ -212,8 +219,8 @@ useSeoMeta({
 
     <div class="container w-full py-8">
       <!-- Timeline -->
-      <ol v-if="visibleEntries.length" class="relative border-s border-border ms-4">
-        <li v-for="entry in visibleEntries" :key="entry.version" class="mb-6 ms-6">
+      <ol v-if="timelineEntries.length" class="relative border-s border-border ms-4">
+        <li v-for="entry in timelineEntries" :key="entry.version" class="mb-6 ms-6">
           <!-- Dot -->
           <span
             class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"
@@ -247,118 +254,136 @@ useSeoMeta({
           </div>
           <!-- Sub-events branch -->
           <ol
-            v-if="sizeEvents.has(entry.version) || licenseChanges.has(entry.version) || esmChanges.has(entry.version)"
+            v-if="versionEvents.has(entry.version)"
             class="relative border-s border-border/50 ms-3 mt-2"
           >
-            <!-- Size event -->
-            <li v-if="sizeEvents.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
-              <span
-                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                :class="
-                  sizeEvents.get(entry.version)!.direction === 'decrease'
-                    ? 'bg-green-500 border-green-600'
-                    : 'bg-amber-500 border-amber-600'
-                "
-              >
+            <template v-for="(ev, _) in [versionEvents.get(entry.version)!]" :key="0">
+              <!-- Size event -->
+              <li v-if="ev.size" class="mb-2 ms-4 relative last:mb-0">
+                <span
+                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.size.direction === 'decrease'
+                      ? 'bg-green-500 border-green-600'
+                      : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span
+                    class="w-2 h-2 text-white"
+                    :class="
+                      ev.size.direction === 'decrease'
+                        ? 'i-lucide:trending-down'
+                        : 'i-lucide:trending-up'
+                    "
+                    aria-hidden="true"
+                  />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    ev.size.direction === 'decrease'
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  "
+                >
+                  <template v-if="ev.size.sizeThresholdExceeded">
+                    {{
+                      ev.size.direction === 'decrease'
+                        ? $t('package.timeline.size_decrease', {
+                            percent: Math.abs(Math.round(ev.size.sizeRatio * 100)),
+                            size: bytesFormatter.format(Math.abs(ev.size.sizeDelta)),
+                          })
+                        : $t('package.timeline.size_increase', {
+                            percent: Math.round(ev.size.sizeRatio * 100),
+                            size: bytesFormatter.format(ev.size.sizeDelta),
+                          })
+                    }}
+                  </template>
+                  <template v-if="ev.size.sizeThresholdExceeded && ev.size.depThresholdExceeded">
+                    &middot;
+                  </template>
+                  <template v-if="ev.size.depThresholdExceeded">
+                    {{
+                      ev.size.depDiff > 0
+                        ? $t('package.timeline.dep_increase', { count: ev.size.depDiff })
+                        : $t('package.timeline.dep_decrease', {
+                            count: Math.abs(ev.size.depDiff),
+                          })
+                    }}
+                  </template>
+                </p>
+              </li>
+              <!-- License change -->
+              <li v-if="ev.license" class="mb-2 ms-4 relative last:mb-0">
+                <span
+                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-amber-500 border-amber-600"
+                >
+                  <span class="w-2 h-2 text-white i-lucide:scale" aria-hidden="true" />
+                </span>
+                <p class="text-xs text-amber-700 dark:text-amber-400">
+                  {{
+                    $t('package.timeline.license_change', {
+                      from: ev.license.from,
+                      to: ev.license.to,
+                    })
+                  }}
+                </p>
+              </li>
+              <!-- ESM change -->
+              <li v-if="ev.esm" class="mb-2 ms-4 relative last:mb-0">
                 <span
-                  class="w-2 h-2 text-white"
+                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.esm === 'added'
+                      ? 'bg-green-500 border-green-600'
+                      : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span class="w-2 h-2 text-white i-lucide:package" aria-hidden="true" />
+                </span>
+                <p
+                  class="text-xs"
                   :class="
-                    sizeEvents.get(entry.version)!.direction === 'decrease'
-                      ? 'i-lucide:trending-down'
-                      : 'i-lucide:trending-up'
+                    ev.esm === 'added'
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
                   "
-                  aria-hidden="true"
-                />
-              </span>
-              <p
-                class="text-xs"
-                :class="
-                  sizeEvents.get(entry.version)!.direction === 'decrease'
-                    ? 'text-green-700 dark:text-green-400'
-                    : 'text-amber-700 dark:text-amber-400'
-                "
-              >
-                <template v-if="sizeEvents.get(entry.version)!.sizeThresholdExceeded">
+                >
                   {{
-                    sizeEvents.get(entry.version)!.direction === 'decrease'
-                      ? $t('package.timeline.size_decrease', {
-                          percent: Math.abs(
-                            Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
-                          ),
-                          size: bytesFormatter.format(
-                            Math.abs(sizeEvents.get(entry.version)!.sizeDelta),
-                          ),
-                        })
-                      : $t('package.timeline.size_increase', {
-                          percent: Math.round(sizeEvents.get(entry.version)!.sizeRatio * 100),
-                          size: bytesFormatter.format(sizeEvents.get(entry.version)!.sizeDelta),
-                        })
+                    ev.esm === 'added'
+                      ? $t('package.timeline.esm_added')
+                      : $t('package.timeline.esm_removed')
                   }}
-                </template>
-                <template
-                  v-if="
-                    sizeEvents.get(entry.version)!.sizeThresholdExceeded &&
-                    sizeEvents.get(entry.version)!.depThresholdExceeded
+                </p>
+              </li>
+              <!-- Types change -->
+              <li v-if="ev.types" class="mb-2 ms-4 relative last:mb-0">
+                <span
+                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.types === 'added'
+                      ? 'bg-green-500 border-green-600'
+                      : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span class="w-2 h-2 text-white i-lucide:braces" aria-hidden="true" />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    ev.types === 'added'
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
                   "
                 >
-                  &middot;
-                </template>
-                <template v-if="sizeEvents.get(entry.version)!.depThresholdExceeded">
                   {{
-                    sizeEvents.get(entry.version)!.depDiff > 0
-                      ? $t('package.timeline.dep_increase', {
-                          count: sizeEvents.get(entry.version)!.depDiff,
-                        })
-                      : $t('package.timeline.dep_decrease', {
-                          count: Math.abs(sizeEvents.get(entry.version)!.depDiff),
-                        })
+                    ev.types === 'added'
+                      ? $t('package.timeline.types_added')
+                      : $t('package.timeline.types_removed')
                   }}
-                </template>
-              </p>
-            </li>
-            <!-- License change -->
-            <li v-if="licenseChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
-              <span
-                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-amber-500 border-amber-600"
-              >
-                <span class="w-2 h-2 text-white i-lucide:scale" aria-hidden="true" />
-              </span>
-              <p class="text-xs text-amber-700 dark:text-amber-400">
-                {{
-                  $t('package.timeline.license_change', {
-                    from: licenseChanges.get(entry.version)!.from,
-                    to: licenseChanges.get(entry.version)!.to,
-                  })
-                }}
-              </p>
-            </li>
-            <!-- ESM change -->
-            <li v-if="esmChanges.has(entry.version)" class="mb-2 ms-4 relative last:mb-0">
-              <span
-                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                :class="
-                  esmChanges.get(entry.version) === 'added'
-                    ? 'bg-green-500 border-green-600'
-                    : 'bg-amber-500 border-amber-600'
-                "
-              >
-                <span class="w-2 h-2 text-white i-lucide:package" aria-hidden="true" />
-              </span>
-              <p
-                class="text-xs"
-                :class="
-                  esmChanges.get(entry.version) === 'added'
-                    ? 'text-green-700 dark:text-green-400'
-                    : 'text-amber-700 dark:text-amber-400'
-                "
-              >
-                {{
-                  esmChanges.get(entry.version) === 'added'
-                    ? $t('package.timeline.esm_added')
-                    : $t('package.timeline.esm_removed')
-                }}
-              </p>
-            </li>
+                </p>
+              </li>
+            </template>
           </ol>
         </li>
       </ol>
@@ -375,7 +400,7 @@ useSeoMeta({
       </div>
 
       <!-- Empty state -->
-      <div v-else-if="!pkg" class="py-20 text-center">
+      <div v-else-if="!timelineEntries.length" class="py-20 text-center">
         <span class="i-svg-spinners:ring-resize w-5 h-5 text-fg-subtle" />
       </div>
     </div>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 2cf65385bf..eac441219c 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -453,7 +453,9 @@
       "dep_decrease": "{count} dependencies removed",
       "license_change": "License changed from {from} to {to}",
       "esm_added": "Module type changed to ESM",
-      "esm_removed": "Module type changed from ESM to CJS"
+      "esm_removed": "Module type changed from ESM to CJS",
+      "types_added": "TypeScript types added",
+      "types_removed": "TypeScript types removed"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index 56f9877fda..a117f703b0 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1365,6 +1365,12 @@
             },
             "esm_removed": {
               "type": "string"
+            },
+            "types_added": {
+              "type": "string"
+            },
+            "types_removed": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
new file mode 100644
index 0000000000..2fcbae0115
--- /dev/null
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -0,0 +1,94 @@
+import { hasBuiltInTypes } from '~~/shared/utils/package-analysis'
+
+const DEFAULT_LIMIT = 25
+
+export interface TimelineVersion {
+  version: string
+  time: string
+  license?: string
+  type?: string
+  hasTypes?: boolean
+  tags: string[]
+}
+
+export interface TimelineResponse {
+  versions: TimelineVersion[]
+  total: number
+}
+
+/**
+ * Returns paginated version timeline data for a package.
+ *
+ * Fetches the full packument server-side, extracts only the fields needed
+ * for the timeline view, sorted by publish time (newest first).
+ *
+ * Query params:
+ * - offset: number of versions to skip (default 0)
+ * - limit: number of versions to return (default 25)
+ *
+ * URL patterns:
+ * - /api/registry/timeline/packageName?offset=0&limit=25
+ * - /api/registry/timeline/@scope/packageName?offset=0&limit=25
+ */
+export default defineCachedEventHandler(
+  async event => {
+    const pkgParam = getRouterParam(event, 'pkg')
+    if (!pkgParam) {
+      throw createError({ statusCode: 404, message: 'Package name is required' })
+    }
+
+    const packageName = decodeURIComponent(pkgParam)
+
+    const query = getQuery(event)
+    const offset = Math.max(0, Number(query.offset) || 0)
+    const limit = Math.max(1, Math.min(100, Number(query.limit) || DEFAULT_LIMIT))
+
+    try {
+      const packument = await fetchNpmPackage(packageName)
+
+      const tagsByVersion = new Map<string, string[]>()
+      for (const [tag, ver] of Object.entries(packument['dist-tags'] ?? {})) {
+        const list = tagsByVersion.get(ver)
+        if (list) list.push(tag)
+        else tagsByVersion.set(ver, [tag])
+      }
+
+      // Build full sorted list
+      const allVersions = Object.keys(packument.versions)
+        .filter(v => packument.time[v])
+        .map(v => {
+          const version = packument.versions[v]!
+          let license = version.license
+          if (license && typeof license === 'object' && 'type' in license) {
+            license = (license as { type: string }).type
+          }
+
+          return {
+            version: v,
+            time: packument.time[v]!,
+            license: typeof license === 'string' ? license : undefined,
+            type: typeof version.type === 'string' ? version.type : undefined,
+            hasTypes: hasBuiltInTypes(version) || undefined,
+            tags: tagsByVersion.get(v) ?? [],
+          }
+        })
+        .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+      return {
+        versions: allVersions.slice(offset, offset + limit),
+        total: allVersions.length,
+      } satisfies TimelineResponse
+    }
+    catch (error: unknown) {
+      handleApiError(error, { statusCode: 502, message: `Failed to fetch timeline for ${packageName}` })
+    }
+  },
+  {
+    maxAge: CACHE_MAX_AGE_FIVE_MINUTES,
+    swr: true,
+    getKey: event => {
+      const query = getQuery(event)
+      return `timeline:v1:${getRouterParam(event, 'pkg')}:${query.offset ?? 0}:${query.limit ?? DEFAULT_LIMIT}`
+    },
+  },
+)

From cdca660ee79adf3a78adf6701277c4b0ea03fb90 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:04:46 +0000
Subject: [PATCH 07/19] fix: split up dependency count and install size

---
 .../[[org]]/[packageName].vue                 | 109 +++++++++++-------
 1 file changed, 67 insertions(+), 42 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 0ef5373e4d..b769b8c04e 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -110,13 +110,14 @@ if (import.meta.client) {
 }
 
 interface VersionEvents {
-  size?: {
+  installSize?: {
     direction: 'increase' | 'decrease'
     sizeRatio: number
     sizeDelta: number
+  }
+  deps?: {
+    direction: 'increase' | 'decrease'
     depDiff: number
-    sizeThresholdExceeded: boolean
-    depThresholdExceeded: boolean
   }
   license?: { from: string; to: string }
   esm?: 'added' | 'removed'
@@ -158,17 +159,18 @@ const versionEvents = computed(() => {
       const depsIncreased = depDiff > DEP_INCREASE_THRESHOLD
       const depsDecreased = depDiff < -DEP_INCREASE_THRESHOLD
 
-      if (sizeIncreased || sizeDecreased || depsIncreased || depsDecreased) {
-        ev.size = {
-          direction:
-            (sizeDecreased || depsDecreased) && !sizeIncreased && !depsIncreased
-              ? 'decrease'
-              : 'increase',
+      if (sizeIncreased || sizeDecreased) {
+        ev.installSize = {
+          direction: sizeDecreased ? 'decrease' : 'increase',
           sizeRatio,
           sizeDelta: currentSize.totalSize - previousSize.totalSize,
+        }
+      }
+
+      if (depsIncreased || depsDecreased) {
+        ev.deps = {
+          direction: depsDecreased ? 'decrease' : 'increase',
           depDiff,
-          sizeThresholdExceeded: sizeIncreased || sizeDecreased,
-          depThresholdExceeded: depsIncreased || depsDecreased,
         }
       }
     }
@@ -190,7 +192,7 @@ const versionEvents = computed(() => {
     if (current.hasTypes && !previous.hasTypes) ev.types = 'added'
     else if (!current.hasTypes && previous.hasTypes) ev.types = 'removed'
 
-    if (ev.size || ev.license || ev.esm || ev.types) {
+    if (ev.installSize || ev.deps || ev.license || ev.esm || ev.types) {
       events.set(current.version, ev)
     }
   }
@@ -258,12 +260,53 @@ useSeoMeta({
             class="relative border-s border-border/50 ms-3 mt-2"
           >
             <template v-for="(ev, _) in [versionEvents.get(entry.version)!]" :key="0">
-              <!-- Size event -->
-              <li v-if="ev.size" class="mb-2 ms-4 relative last:mb-0">
+              <!-- Install size event -->
+              <li v-if="ev.installSize" class="mb-2 ms-4 relative last:mb-0">
+                <span
+                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                  :class="
+                    ev.installSize.direction === 'decrease'
+                      ? 'bg-green-500 border-green-600'
+                      : 'bg-amber-500 border-amber-600'
+                  "
+                >
+                  <span
+                    class="w-2 h-2 text-white"
+                    :class="
+                      ev.installSize.direction === 'decrease'
+                        ? 'i-lucide:trending-down'
+                        : 'i-lucide:trending-up'
+                    "
+                    aria-hidden="true"
+                  />
+                </span>
+                <p
+                  class="text-xs"
+                  :class="
+                    ev.installSize.direction === 'decrease'
+                      ? 'text-green-700 dark:text-green-400'
+                      : 'text-amber-700 dark:text-amber-400'
+                  "
+                >
+                  {{
+                    ev.installSize.direction === 'decrease'
+                      ? $t('package.timeline.size_decrease', {
+                          percent: Math.abs(Math.round(ev.installSize.sizeRatio * 100)),
+                          size: bytesFormatter.format(Math.abs(ev.installSize.sizeDelta)),
+                        })
+                      : $t('package.timeline.size_increase', {
+                          percent: Math.round(ev.installSize.sizeRatio * 100),
+                          size: bytesFormatter.format(ev.installSize.sizeDelta),
+                        })
+                  }}
+                </p>
+              </li>
+              <!-- Dependency count event -->
+              <li v-if="ev.deps" class="mb-2 ms-4 relative last:mb-0">
                 <span
                   class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
                   :class="
-                    ev.size.direction === 'decrease'
+                    ev.deps.direction === 'decrease'
                       ? 'bg-green-500 border-green-600'
                       : 'bg-amber-500 border-amber-600'
                   "
@@ -271,7 +314,7 @@ useSeoMeta({
                   <span
                     class="w-2 h-2 text-white"
                     :class="
-                      ev.size.direction === 'decrease'
+                      ev.deps.direction === 'decrease'
                         ? 'i-lucide:trending-down'
                         : 'i-lucide:trending-up'
                     "
@@ -281,36 +324,18 @@ useSeoMeta({
                 <p
                   class="text-xs"
                   :class="
-                    ev.size.direction === 'decrease'
+                    ev.deps.direction === 'decrease'
                       ? 'text-green-700 dark:text-green-400'
                       : 'text-amber-700 dark:text-amber-400'
                   "
                 >
-                  <template v-if="ev.size.sizeThresholdExceeded">
-                    {{
-                      ev.size.direction === 'decrease'
-                        ? $t('package.timeline.size_decrease', {
-                            percent: Math.abs(Math.round(ev.size.sizeRatio * 100)),
-                            size: bytesFormatter.format(Math.abs(ev.size.sizeDelta)),
-                          })
-                        : $t('package.timeline.size_increase', {
-                            percent: Math.round(ev.size.sizeRatio * 100),
-                            size: bytesFormatter.format(ev.size.sizeDelta),
-                          })
-                    }}
-                  </template>
-                  <template v-if="ev.size.sizeThresholdExceeded && ev.size.depThresholdExceeded">
-                    &middot;
-                  </template>
-                  <template v-if="ev.size.depThresholdExceeded">
-                    {{
-                      ev.size.depDiff > 0
-                        ? $t('package.timeline.dep_increase', { count: ev.size.depDiff })
-                        : $t('package.timeline.dep_decrease', {
-                            count: Math.abs(ev.size.depDiff),
-                          })
-                    }}
-                  </template>
+                  {{
+                    ev.deps.depDiff > 0
+                      ? $t('package.timeline.dep_increase', { count: ev.deps.depDiff })
+                      : $t('package.timeline.dep_decrease', {
+                          count: Math.abs(ev.deps.depDiff),
+                        })
+                  }}
                 </p>
               </li>
               <!-- License change -->

From f1ccaa822f468840c3c150b392b4cf404170f56f Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:12:20 +0000
Subject: [PATCH 08/19] fix: catch some errors

---
 server/api/registry/timeline/[...pkg].get.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index 2fcbae0115..b9989c6a07 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -22,11 +22,7 @@ export interface TimelineResponse {
  * Fetches the full packument server-side, extracts only the fields needed
  * for the timeline view, sorted by publish time (newest first).
  *
- * Query params:
- * - offset: number of versions to skip (default 0)
- * - limit: number of versions to return (default 25)
- *
- * URL patterns:
+ * Examples:
  * - /api/registry/timeline/packageName?offset=0&limit=25
  * - /api/registry/timeline/@scope/packageName?offset=0&limit=25
  */
@@ -37,7 +33,13 @@ export default defineCachedEventHandler(
       throw createError({ statusCode: 404, message: 'Package name is required' })
     }
 
-    const packageName = decodeURIComponent(pkgParam)
+    let packageName: string
+    try {
+      packageName = decodeURIComponent(pkgParam)
+    }
+    catch {
+      throw createError({ statusCode: 400, message: 'Invalid package name encoding' })
+    }
 
     const query = getQuery(event)
     const offset = Math.max(0, Number(query.offset) || 0)
@@ -88,7 +90,9 @@ export default defineCachedEventHandler(
     swr: true,
     getKey: event => {
       const query = getQuery(event)
-      return `timeline:v1:${getRouterParam(event, 'pkg')}:${query.offset ?? 0}:${query.limit ?? DEFAULT_LIMIT}`
+      const offset = Math.max(0, Number(query.offset) || 0)
+      const limit = Math.max(1, Math.min(100, Number(query.limit) || DEFAULT_LIMIT))
+      return `timeline:v1:${getRouterParam(event, 'pkg')}:${offset}:${limit}`
     },
   },
 )

From 06878f0abad7c7b0787411ddb3ed9f736bc6cd97 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:19:16 +0000
Subject: [PATCH 09/19] feat: a big ol' rework

---
 .../[[org]]/[packageName].vue                 | 298 +++++++-----------
 1 file changed, 108 insertions(+), 190 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index b769b8c04e..df973fb056 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -8,6 +8,8 @@ definePageMeta({
   path: '/package-timeline/:org?/:packageName/v/:version',
 })
 
+const { t } = useI18n()
+
 const route = useRoute('timeline')
 
 const packageName = computed(() =>
@@ -39,6 +41,7 @@ const PAGE_SIZE = 25
 const timelineEntries = ref<TimelineVersion[]>([])
 const totalVersions = ref(0)
 const loadingMore = ref(false)
+const loadError = ref(false)
 
 const hasMore = computed(() => timelineEntries.value.length < totalVersions.value)
 
@@ -51,7 +54,7 @@ async function fetchTimeline(offset: number): Promise<TimelineResponse> {
 
 // Initial load — useAsyncData serializes the full response across SSR → client
 const { data: initialTimeline } = await useAsyncData(
-  () => `timeline:${packageName.value}`,
+  `timeline:${packageName.value}`,
   () => fetchTimeline(0),
 )
 
@@ -63,13 +66,17 @@ watch(initialTimeline, (data) => {
 }, { immediate: true })
 
 async function loadMore() {
-  if (loadingMore.value) return
+  if (loadingMore.value || sizesLoading.value) return
   loadingMore.value = true
+  loadError.value = false
   try {
     const data = await fetchTimeline(timelineEntries.value.length)
     timelineEntries.value = [...timelineEntries.value, ...data.versions]
     totalVersions.value = data.total
   }
+  catch {
+    loadError.value = true
+  }
   finally {
     loadingMore.value = false
   }
@@ -81,6 +88,8 @@ const DEP_INCREASE_THRESHOLD = 5
 const sizeCache = shallowReactive(new Map<string, InstallSizeResult>())
 const fetchingVersions = shallowReactive(new Set<string>())
 
+const sizesLoading = computed(() => fetchingVersions.size > 0)
+
 async function fetchSize(ver: string) {
   if (sizeCache.has(ver) || fetchingVersions.has(ver)) return
   fetchingVersions.add(ver)
@@ -109,26 +118,20 @@ if (import.meta.client) {
   )
 }
 
-interface VersionEvents {
-  installSize?: {
-    direction: 'increase' | 'decrease'
-    sizeRatio: number
-    sizeDelta: number
-  }
-  deps?: {
-    direction: 'increase' | 'decrease'
-    depDiff: number
-  }
-  license?: { from: string; to: string }
-  esm?: 'added' | 'removed'
-  types?: 'added' | 'removed'
+const bytesFormatter = useBytesFormatter()
+
+interface SubEvent {
+  key: string
+  positive: boolean
+  icon: string
+  text: string
 }
 
 // Detect notable changes between consecutive versions (size, license, ESM, types)
 // Versions are compared against their semver predecessor, not chronological neighbor,
 // so interleaved legacy releases don't produce misleading cross-line diffs.
-const versionEvents = computed(() => {
-  const events = new Map<string, VersionEvents>()
+const versionSubEvents = computed(() => {
+  const result = new Map<string, SubEvent[]>()
   const entries = timelineEntries.value
 
   // Sort by semver to find each version's true predecessor
@@ -142,7 +145,7 @@ const versionEvents = computed(() => {
     const previous = prevBySemver.get(current.version)
     if (!previous) continue
 
-    const ev: VersionEvents = {}
+    const events: SubEvent[] = []
 
     // Size changes
     const currentSize = sizeCache.get(current.version)
@@ -160,18 +163,32 @@ const versionEvents = computed(() => {
       const depsDecreased = depDiff < -DEP_INCREASE_THRESHOLD
 
       if (sizeIncreased || sizeDecreased) {
-        ev.installSize = {
-          direction: sizeDecreased ? 'decrease' : 'increase',
-          sizeRatio,
-          sizeDelta: currentSize.totalSize - previousSize.totalSize,
-        }
+        const sizeDelta = currentSize.totalSize - previousSize.totalSize
+        events.push({
+          key: 'size',
+          positive: sizeDecreased,
+          icon: sizeDecreased ? 'i-lucide:trending-down' : 'i-lucide:trending-up',
+          text: sizeDecreased
+            ? t('package.timeline.size_decrease', {
+                percent: Math.abs(Math.round(sizeRatio * 100)),
+                size: bytesFormatter.format(Math.abs(sizeDelta)),
+              })
+            : t('package.timeline.size_increase', {
+                percent: Math.round(sizeRatio * 100),
+                size: bytesFormatter.format(sizeDelta),
+              }),
+        })
       }
 
       if (depsIncreased || depsDecreased) {
-        ev.deps = {
-          direction: depsDecreased ? 'decrease' : 'increase',
-          depDiff,
-        }
+        events.push({
+          key: 'deps',
+          positive: depsDecreased,
+          icon: depsDecreased ? 'i-lucide:trending-down' : 'i-lucide:trending-up',
+          text: depDiff > 0
+            ? t('package.timeline.dep_increase', { count: depDiff })
+            : t('package.timeline.dep_decrease', { count: Math.abs(depDiff) }),
+        })
       }
     }
 
@@ -179,29 +196,58 @@ const versionEvents = computed(() => {
     const currentLicense = current.license ?? 'Unknown'
     const previousLicense = previous.license ?? 'Unknown'
     if (currentLicense !== previousLicense) {
-      ev.license = { from: previousLicense, to: currentLicense }
+      events.push({
+        key: 'license',
+        positive: false,
+        icon: 'i-lucide:scale',
+        text: t('package.timeline.license_change', { from: previousLicense, to: currentLicense }),
+      })
     }
 
     // ESM support changes
     const currentIsEsm = current.type === 'module'
     const previousIsEsm = previous.type === 'module'
-    if (currentIsEsm && !previousIsEsm) ev.esm = 'added'
-    else if (!currentIsEsm && previousIsEsm) ev.esm = 'removed'
+    if (currentIsEsm && !previousIsEsm) {
+      events.push({
+        key: 'esm',
+        positive: true,
+        icon: 'i-lucide:package',
+        text: t('package.timeline.esm_added'),
+      })
+    } else if (!currentIsEsm && previousIsEsm) {
+      events.push({
+        key: 'esm',
+        positive: false,
+        icon: 'i-lucide:package',
+        text: t('package.timeline.esm_removed'),
+      })
+    }
 
     // TypeScript types changes
-    if (current.hasTypes && !previous.hasTypes) ev.types = 'added'
-    else if (!current.hasTypes && previous.hasTypes) ev.types = 'removed'
+    if (current.hasTypes && !previous.hasTypes) {
+      events.push({
+        key: 'types',
+        positive: true,
+        icon: 'i-lucide:braces',
+        text: t('package.timeline.types_added'),
+      })
+    } else if (!current.hasTypes && previous.hasTypes) {
+      events.push({
+        key: 'types',
+        positive: false,
+        icon: 'i-lucide:braces',
+        text: t('package.timeline.types_removed'),
+      })
+    }
 
-    if (ev.installSize || ev.deps || ev.license || ev.esm || ev.types) {
-      events.set(current.version, ev)
+    if (events.length) {
+      result.set(current.version, events)
     }
   }
 
-  return events
+  return result
 })
 
-const bytesFormatter = useBytesFormatter()
-
 useSeoMeta({
   title: () => `Timeline - ${packageName.value} - npmx`,
   description: () => `Version timeline for ${packageName.value}`,
@@ -254,161 +300,29 @@ useSeoMeta({
               day="numeric"
             />
           </div>
-          <!-- Sub-events branch -->
+          <!-- Sub-events -->
           <ol
-            v-if="versionEvents.has(entry.version)"
+            v-if="versionSubEvents.has(entry.version)"
             class="relative border-s border-border/50 ms-3 mt-2"
           >
-            <template v-for="(ev, _) in [versionEvents.get(entry.version)!]" :key="0">
-              <!-- Install size event -->
-              <li v-if="ev.installSize" class="mb-2 ms-4 relative last:mb-0">
-                <span
-                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                  :class="
-                    ev.installSize.direction === 'decrease'
-                      ? 'bg-green-500 border-green-600'
-                      : 'bg-amber-500 border-amber-600'
-                  "
-                >
-                  <span
-                    class="w-2 h-2 text-white"
-                    :class="
-                      ev.installSize.direction === 'decrease'
-                        ? 'i-lucide:trending-down'
-                        : 'i-lucide:trending-up'
-                    "
-                    aria-hidden="true"
-                  />
-                </span>
-                <p
-                  class="text-xs"
-                  :class="
-                    ev.installSize.direction === 'decrease'
-                      ? 'text-green-700 dark:text-green-400'
-                      : 'text-amber-700 dark:text-amber-400'
-                  "
-                >
-                  {{
-                    ev.installSize.direction === 'decrease'
-                      ? $t('package.timeline.size_decrease', {
-                          percent: Math.abs(Math.round(ev.installSize.sizeRatio * 100)),
-                          size: bytesFormatter.format(Math.abs(ev.installSize.sizeDelta)),
-                        })
-                      : $t('package.timeline.size_increase', {
-                          percent: Math.round(ev.installSize.sizeRatio * 100),
-                          size: bytesFormatter.format(ev.installSize.sizeDelta),
-                        })
-                  }}
-                </p>
-              </li>
-              <!-- Dependency count event -->
-              <li v-if="ev.deps" class="mb-2 ms-4 relative last:mb-0">
-                <span
-                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                  :class="
-                    ev.deps.direction === 'decrease'
-                      ? 'bg-green-500 border-green-600'
-                      : 'bg-amber-500 border-amber-600'
-                  "
-                >
-                  <span
-                    class="w-2 h-2 text-white"
-                    :class="
-                      ev.deps.direction === 'decrease'
-                        ? 'i-lucide:trending-down'
-                        : 'i-lucide:trending-up'
-                    "
-                    aria-hidden="true"
-                  />
-                </span>
-                <p
-                  class="text-xs"
-                  :class="
-                    ev.deps.direction === 'decrease'
-                      ? 'text-green-700 dark:text-green-400'
-                      : 'text-amber-700 dark:text-amber-400'
-                  "
-                >
-                  {{
-                    ev.deps.depDiff > 0
-                      ? $t('package.timeline.dep_increase', { count: ev.deps.depDiff })
-                      : $t('package.timeline.dep_decrease', {
-                          count: Math.abs(ev.deps.depDiff),
-                        })
-                  }}
-                </p>
-              </li>
-              <!-- License change -->
-              <li v-if="ev.license" class="mb-2 ms-4 relative last:mb-0">
-                <span
-                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border bg-amber-500 border-amber-600"
-                >
-                  <span class="w-2 h-2 text-white i-lucide:scale" aria-hidden="true" />
-                </span>
-                <p class="text-xs text-amber-700 dark:text-amber-400">
-                  {{
-                    $t('package.timeline.license_change', {
-                      from: ev.license.from,
-                      to: ev.license.to,
-                    })
-                  }}
-                </p>
-              </li>
-              <!-- ESM change -->
-              <li v-if="ev.esm" class="mb-2 ms-4 relative last:mb-0">
-                <span
-                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                  :class="
-                    ev.esm === 'added'
-                      ? 'bg-green-500 border-green-600'
-                      : 'bg-amber-500 border-amber-600'
-                  "
-                >
-                  <span class="w-2 h-2 text-white i-lucide:package" aria-hidden="true" />
-                </span>
-                <p
-                  class="text-xs"
-                  :class="
-                    ev.esm === 'added'
-                      ? 'text-green-700 dark:text-green-400'
-                      : 'text-amber-700 dark:text-amber-400'
-                  "
-                >
-                  {{
-                    ev.esm === 'added'
-                      ? $t('package.timeline.esm_added')
-                      : $t('package.timeline.esm_removed')
-                  }}
-                </p>
-              </li>
-              <!-- Types change -->
-              <li v-if="ev.types" class="mb-2 ms-4 relative last:mb-0">
-                <span
-                  class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                  :class="
-                    ev.types === 'added'
-                      ? 'bg-green-500 border-green-600'
-                      : 'bg-amber-500 border-amber-600'
-                  "
-                >
-                  <span class="w-2 h-2 text-white i-lucide:braces" aria-hidden="true" />
-                </span>
-                <p
-                  class="text-xs"
-                  :class="
-                    ev.types === 'added'
-                      ? 'text-green-700 dark:text-green-400'
-                      : 'text-amber-700 dark:text-amber-400'
-                  "
-                >
-                  {{
-                    ev.types === 'added'
-                      ? $t('package.timeline.types_added')
-                      : $t('package.timeline.types_removed')
-                  }}
-                </p>
-              </li>
-            </template>
+            <li
+              v-for="ev in versionSubEvents.get(entry.version)"
+              :key="ev.key"
+              class="mb-2 ms-4 relative last:mb-0"
+            >
+              <span
+                class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
+                :class="ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'"
+              >
+                <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
+              </span>
+              <p
+                class="text-xs"
+                :class="ev.positive ? 'text-green-700 dark:text-green-400' : 'text-amber-700 dark:text-amber-400'"
+              >
+                {{ ev.text }}
+              </p>
+            </li>
           </ol>
         </li>
       </ol>
@@ -417,11 +331,15 @@ useSeoMeta({
       <div v-if="hasMore" class="mt-4 ms-10">
         <button
           type="button"
-          class="text-sm text-accent hover:text-accent/80 transition-colors"
+          class="text-sm text-accent hover:text-accent/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="loadingMore || sizesLoading"
           @click="loadMore"
         >
           {{ $t('package.timeline.load_more') }}
         </button>
+        <p v-if="loadError" class="text-xs text-red-600 dark:text-red-400 mt-1">
+          Failed to load more versions. Try again.
+        </p>
       </div>
 
       <!-- Empty state -->

From 68690ad7c91379111bfde25666a0a4b6901097a1 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:28:55 +0000
Subject: [PATCH 10/19] feat: add trust/provenance

Aw yeah!
---
 .../[[org]]/[packageName].vue                 | 34 +++++++++++++++++++
 i18n/locales/en.json                          |  6 +++-
 i18n/schema.json                              | 12 +++++++
 server/api/registry/timeline/[...pkg].get.ts  |  4 +++
 4 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index df973fb056..ec7071d7d8 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -240,6 +240,40 @@ const versionSubEvents = computed(() => {
       })
     }
 
+    // Trusted publisher changes
+    if (current.hasTrustedPublisher && !previous.hasTrustedPublisher) {
+      events.push({
+        key: 'trustedPublisher',
+        positive: true,
+        icon: 'i-lucide:shield-check',
+        text: t('package.timeline.trusted_publisher_added'),
+      })
+    } else if (!current.hasTrustedPublisher && previous.hasTrustedPublisher) {
+      events.push({
+        key: 'trustedPublisher',
+        positive: false,
+        icon: 'i-lucide:shield-off',
+        text: t('package.timeline.trusted_publisher_removed'),
+      })
+    }
+
+    // Provenance changes
+    if (current.hasProvenance && !previous.hasProvenance) {
+      events.push({
+        key: 'provenance',
+        positive: true,
+        icon: 'i-lucide:fingerprint',
+        text: t('package.timeline.provenance_added'),
+      })
+    } else if (!current.hasProvenance && previous.hasProvenance) {
+      events.push({
+        key: 'provenance',
+        positive: false,
+        icon: 'i-lucide:fingerprint',
+        text: t('package.timeline.provenance_removed'),
+      })
+    }
+
     if (events.length) {
       result.set(current.version, events)
     }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index eac441219c..d6e7b52070 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -455,7 +455,11 @@
       "esm_added": "Module type changed to ESM",
       "esm_removed": "Module type changed from ESM to CJS",
       "types_added": "TypeScript types added",
-      "types_removed": "TypeScript types removed"
+      "types_removed": "TypeScript types removed",
+      "trusted_publisher_added": "Trusted publishing enabled",
+      "trusted_publisher_removed": "Trusted publishing removed",
+      "provenance_added": "Provenance enabled",
+      "provenance_removed": "Provenance removed"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",
diff --git a/i18n/schema.json b/i18n/schema.json
index a117f703b0..912aea1124 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1371,6 +1371,18 @@
             },
             "types_removed": {
               "type": "string"
+            },
+            "trusted_publisher_added": {
+              "type": "string"
+            },
+            "trusted_publisher_removed": {
+              "type": "string"
+            },
+            "provenance_added": {
+              "type": "string"
+            },
+            "provenance_removed": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index b9989c6a07..8d91de85e3 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -8,6 +8,8 @@ export interface TimelineVersion {
   license?: string
   type?: string
   hasTypes?: boolean
+  hasTrustedPublisher?: boolean
+  hasProvenance?: boolean
   tags: string[]
 }
 
@@ -71,6 +73,8 @@ export default defineCachedEventHandler(
             license: typeof license === 'string' ? license : undefined,
             type: typeof version.type === 'string' ? version.type : undefined,
             hasTypes: hasBuiltInTypes(version) || undefined,
+            hasTrustedPublisher: version._npmUser?.trustedPublisher ? true : undefined,
+            hasProvenance: version.dist?.attestations ? true : undefined,
             tags: tagsByVersion.get(v) ?? [],
           }
         })

From 24e9bade0a33b857922f0df96b3ab2fd80fc60a3 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:38:09 +0000
Subject: [PATCH 11/19] [autofix.ci] apply automated fixes

---
 .../[[org]]/[packageName].vue                 | 56 +++++++++++--------
 server/api/registry/timeline/[...pkg].get.ts  | 11 ++--
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index ec7071d7d8..743aa15c8b 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 import { compare } from 'semver'
-import type { TimelineResponse, TimelineVersion } from '~~/server/api/registry/timeline/[...pkg].get'
+import type {
+  TimelineResponse,
+  TimelineVersion,
+} from '~~/server/api/registry/timeline/[...pkg].get'
 
 definePageMeta({
   name: 'timeline',
@@ -46,24 +49,26 @@ const loadError = ref(false)
 const hasMore = computed(() => timelineEntries.value.length < totalVersions.value)
 
 async function fetchTimeline(offset: number): Promise<TimelineResponse> {
-  return $fetch<TimelineResponse>(
-    `/api/registry/timeline/${packageName.value}`,
-    { query: { offset, limit: PAGE_SIZE } },
-  )
+  return $fetch<TimelineResponse>(`/api/registry/timeline/${packageName.value}`, {
+    query: { offset, limit: PAGE_SIZE },
+  })
 }
 
 // Initial load — useAsyncData serializes the full response across SSR → client
-const { data: initialTimeline } = await useAsyncData(
-  `timeline:${packageName.value}`,
-  () => fetchTimeline(0),
+const { data: initialTimeline } = await useAsyncData(`timeline:${packageName.value}`, () =>
+  fetchTimeline(0),
 )
 
-watch(initialTimeline, (data) => {
-  if (data) {
-    timelineEntries.value = data.versions
-    totalVersions.value = data.total
-  }
-}, { immediate: true })
+watch(
+  initialTimeline,
+  data => {
+    if (data) {
+      timelineEntries.value = data.versions
+      totalVersions.value = data.total
+    }
+  },
+  { immediate: true },
+)
 
 async function loadMore() {
   if (loadingMore.value || sizesLoading.value) return
@@ -73,11 +78,9 @@ async function loadMore() {
     const data = await fetchTimeline(timelineEntries.value.length)
     timelineEntries.value = [...timelineEntries.value, ...data.versions]
     totalVersions.value = data.total
-  }
-  catch {
+  } catch {
     loadError.value = true
-  }
-  finally {
+  } finally {
     loadingMore.value = false
   }
 }
@@ -185,9 +188,10 @@ const versionSubEvents = computed(() => {
           key: 'deps',
           positive: depsDecreased,
           icon: depsDecreased ? 'i-lucide:trending-down' : 'i-lucide:trending-up',
-          text: depDiff > 0
-            ? t('package.timeline.dep_increase', { count: depDiff })
-            : t('package.timeline.dep_decrease', { count: Math.abs(depDiff) }),
+          text:
+            depDiff > 0
+              ? t('package.timeline.dep_increase', { count: depDiff })
+              : t('package.timeline.dep_decrease', { count: Math.abs(depDiff) }),
         })
       }
     }
@@ -346,13 +350,19 @@ useSeoMeta({
             >
               <span
                 class="absolute -start-[calc(1rem+0.375rem)] top-0.5 flex items-center justify-center w-3 h-3 rounded-full border"
-                :class="ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'"
+                :class="
+                  ev.positive ? 'bg-green-500 border-green-600' : 'bg-amber-500 border-amber-600'
+                "
               >
                 <span class="w-2 h-2 text-white" :class="ev.icon" aria-hidden="true" />
               </span>
               <p
                 class="text-xs"
-                :class="ev.positive ? 'text-green-700 dark:text-green-400' : 'text-amber-700 dark:text-amber-400'"
+                :class="
+                  ev.positive
+                    ? 'text-green-700 dark:text-green-400'
+                    : 'text-amber-700 dark:text-amber-400'
+                "
               >
                 {{ ev.text }}
               </p>
diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index 8d91de85e3..b298aaaafc 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -38,8 +38,7 @@ export default defineCachedEventHandler(
     let packageName: string
     try {
       packageName = decodeURIComponent(pkgParam)
-    }
-    catch {
+    } catch {
       throw createError({ statusCode: 400, message: 'Invalid package name encoding' })
     }
 
@@ -84,9 +83,11 @@ export default defineCachedEventHandler(
         versions: allVersions.slice(offset, offset + limit),
         total: allVersions.length,
       } satisfies TimelineResponse
-    }
-    catch (error: unknown) {
-      handleApiError(error, { statusCode: 502, message: `Failed to fetch timeline for ${packageName}` })
+    } catch (error: unknown) {
+      handleApiError(error, {
+        statusCode: 502,
+        message: `Failed to fetch timeline for ${packageName}`,
+      })
     }
   },
   {

From dc1ee226f1ca4187f27cc462ad90b2fe6fc9e27a Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:38:08 +0000
Subject: [PATCH 12/19] test: add tests, run format

---
 .../api/registry/timeline/pkg.get.spec.ts     | 355 ++++++++++++++++++
 1 file changed, 355 insertions(+)
 create mode 100644 test/unit/server/api/registry/timeline/pkg.get.spec.ts

diff --git a/test/unit/server/api/registry/timeline/pkg.get.spec.ts b/test/unit/server/api/registry/timeline/pkg.get.spec.ts
new file mode 100644
index 0000000000..f29ab73f55
--- /dev/null
+++ b/test/unit/server/api/registry/timeline/pkg.get.spec.ts
@@ -0,0 +1,355 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { createError, type H3Event } from 'h3'
+import type { Packument, PackumentVersion } from '#shared/types/npm-registry'
+
+const fetchNpmPackageMock = vi.fn()
+vi.stubGlobal('fetchNpmPackage', fetchNpmPackageMock)
+vi.stubGlobal('defineCachedEventHandler', (fn: Function) => fn)
+vi.stubGlobal('CACHE_MAX_AGE_FIVE_MINUTES', 300)
+
+const handleApiErrorMock = vi.fn(
+  (_error: unknown, fallback: { statusCode: number; message: string }) => {
+    throw createError(fallback)
+  },
+) as unknown as typeof handleApiError
+vi.stubGlobal('handleApiError', handleApiErrorMock)
+
+let routerParam: string | undefined
+let queryParams: Record<string, string | number> = {}
+
+vi.stubGlobal('getRouterParam', (_event: unknown, _name: string) => routerParam)
+vi.stubGlobal('getQuery', () => queryParams)
+vi.stubGlobal('createError', createError)
+
+const handler = (await import('#server/api/registry/timeline/[...pkg].get')).default
+
+function makePackument(opts: {
+  versions: Record<string, Partial<PackumentVersion>>
+  time: Record<string, string>
+  distTags?: Record<string, string>
+}): Packument {
+  return {
+    'dist-tags': opts.distTags ?? {},
+    'versions': Object.fromEntries(
+      Object.entries(opts.versions).map(([v, data]) => [v, { version: v, ...data }]),
+    ),
+    'time': opts.time,
+  } as Packument
+}
+
+const fakeEvent = {} as H3Event
+
+describe('timeline API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    routerParam = undefined
+    queryParams = {}
+  })
+
+  it('throws 404 when package name param is missing', async () => {
+    routerParam = undefined
+    await expect(handler(fakeEvent)).rejects.toMatchObject({
+      statusCode: 404,
+    })
+  })
+
+  it('throws 400 for invalid URI encoding', async () => {
+    routerParam = '%E0%A4%A'
+    await expect(handler(fakeEvent)).rejects.toMatchObject({
+      statusCode: 400,
+    })
+  })
+
+  it('returns paginated versions sorted newest-first', async () => {
+    routerParam = 'my-pkg'
+    queryParams = { offset: 0, limit: 10 }
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': { license: 'MIT' },
+          '2.0.0': { license: 'ISC' },
+          '3.0.0': { license: 'MIT' },
+        },
+        time: {
+          '1.0.0': '2024-01-01T00:00:00Z',
+          '2.0.0': '2024-06-01T00:00:00Z',
+          '3.0.0': '2025-01-01T00:00:00Z',
+        },
+        distTags: { latest: '3.0.0' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.total).toBe(3)
+    expect(result.versions).toHaveLength(3)
+    // newest first
+    expect(result.versions[0]!.version).toBe('3.0.0')
+    expect(result.versions[1]!.version).toBe('2.0.0')
+    expect(result.versions[2]!.version).toBe('1.0.0')
+  })
+
+  it('applies offset and limit correctly', async () => {
+    routerParam = 'my-pkg'
+    queryParams = { offset: 1, limit: 1 }
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': {},
+          '2.0.0': {},
+          '3.0.0': {},
+        },
+        time: {
+          '1.0.0': '2024-01-01T00:00:00Z',
+          '2.0.0': '2024-06-01T00:00:00Z',
+          '3.0.0': '2025-01-01T00:00:00Z',
+        },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.total).toBe(3)
+    expect(result.versions).toHaveLength(1)
+    // sorted newest first: 3.0.0, 2.0.0, 1.0.0 → offset 1 = 2.0.0
+    expect(result.versions[0]!.version).toBe('2.0.0')
+  })
+
+  it('defaults offset to 0 and limit to 25', async () => {
+    routerParam = 'my-pkg'
+    queryParams = {}
+
+    const versions: Record<string, {}> = {}
+    const time: Record<string, string> = {}
+    for (let i = 1; i <= 30; i++) {
+      const v = `1.0.${i}`
+      versions[v] = {}
+      time[v] = new Date(2024, 0, i).toISOString()
+    }
+
+    fetchNpmPackageMock.mockResolvedValue(makePackument({ versions, time }))
+
+    const result = await handler(fakeEvent)
+    expect(result.total).toBe(30)
+    expect(result.versions).toHaveLength(25)
+  })
+
+  it('clamps limit to max 100', async () => {
+    routerParam = 'my-pkg'
+    queryParams = { limit: 999 }
+
+    const versions: Record<string, {}> = {}
+    const time: Record<string, string> = {}
+    for (let i = 1; i <= 150; i++) {
+      const v = `1.0.${i}`
+      versions[v] = {}
+      time[v] = new Date(2024, 0, (i % 28) + 1, i).toISOString()
+    }
+
+    fetchNpmPackageMock.mockResolvedValue(makePackument({ versions, time }))
+
+    const result = await handler(fakeEvent)
+    expect(result.versions).toHaveLength(100)
+  })
+
+  it('extracts license string from object format', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': { license: { type: 'Apache-2.0' } as never },
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.license).toBe('Apache-2.0')
+  })
+
+  it('includes tags for versions with dist-tags', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': {},
+          '2.0.0-beta.1': {},
+        },
+        time: {
+          '1.0.0': '2024-01-01T00:00:00Z',
+          '2.0.0-beta.1': '2024-06-01T00:00:00Z',
+        },
+        distTags: { latest: '1.0.0', next: '2.0.0-beta.1' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    const latest = result.versions.find((v: any) => v.version === '1.0.0')
+    const next = result.versions.find((v: any) => v.version === '2.0.0-beta.1')
+    expect(latest?.tags).toEqual(['latest'])
+    expect(next?.tags).toEqual(['next'])
+  })
+
+  it('includes module type when present', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': { type: 'module' },
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.type).toBe('module')
+  })
+
+  it('sets hasTypes when version has types field', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': { types: './index.d.ts' },
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.hasTypes).toBe(true)
+  })
+
+  it('sets hasTrustedPublisher when trustedPublisher is true', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': { _npmUser: { trustedPublisher: true, name: 'bob' } },
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.hasTrustedPublisher).toBe(true)
+  })
+
+  it('sets hasProvenance when attestations exist', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': {
+            dist: {
+              shasum: 'abc123',
+              tarball: 'https://registry.npmjs.org/my-pkg/-/my-pkg-1.0.0.tgz',
+              signatures: [],
+              attestations: {
+                url: 'https://example.com',
+                provenance: {
+                  predicateType: 'https://npmx.dev/provenance/v9.99',
+                },
+              },
+            },
+          },
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.hasProvenance).toBe(true)
+  })
+
+  it('omits optional fields when not present', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': {},
+        },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    const v = result.versions[0]!
+    expect(v.license).toBeUndefined()
+    expect(v.type).toBeUndefined()
+    expect(v.hasTypes).toBeUndefined()
+    expect(v.hasTrustedPublisher).toBeUndefined()
+    expect(v.hasProvenance).toBeUndefined()
+    expect(v.tags).toEqual([])
+  })
+
+  it('skips versions without a time entry', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: {
+          '1.0.0': {},
+          '2.0.0': {},
+        },
+        time: {
+          '1.0.0': '2024-01-01T00:00:00Z',
+          // no time for 2.0.0
+        },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.total).toBe(1)
+    expect(result.versions[0]!.version).toBe('1.0.0')
+  })
+
+  it('decodes scoped package names', async () => {
+    routerParam = '%40scope%2Fmy-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: { '1.0.0': {} },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+      }),
+    )
+
+    await handler(fakeEvent)
+    expect(fetchNpmPackageMock).toHaveBeenCalledWith('@scope/my-pkg')
+  })
+
+  it('calls handleApiError when fetchNpmPackage throws', async () => {
+    routerParam = 'my-pkg'
+    const error = new Error('upstream failure')
+    fetchNpmPackageMock.mockRejectedValue(error)
+
+    await expect(handler(fakeEvent)).rejects.toThrow('Failed to fetch timeline for my-pkg')
+    expect(handleApiErrorMock).toHaveBeenCalledWith(error, {
+      statusCode: 502,
+      message: 'Failed to fetch timeline for my-pkg',
+    })
+  })
+
+  it('supports multiple tags on the same version', async () => {
+    routerParam = 'my-pkg'
+
+    fetchNpmPackageMock.mockResolvedValue(
+      makePackument({
+        versions: { '1.0.0': {} },
+        time: { '1.0.0': '2024-01-01T00:00:00Z' },
+        distTags: { latest: '1.0.0', stable: '1.0.0' },
+      }),
+    )
+
+    const result = await handler(fakeEvent)
+    expect(result.versions[0]!.tags).toEqual(expect.arrayContaining(['latest', 'stable']))
+    expect(result.versions[0]!.tags).toHaveLength(2)
+  })
+})

From 1972967032bead3f88895637bf7fe3f30ed63306 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:43:31 +0000
Subject: [PATCH 13/19] chore: fix some pr comments

---
 app/components/AppFooter.vue                         | 4 ++++
 app/pages/package-timeline/[[org]]/[packageName].vue | 2 +-
 i18n/locales/en.json                                 | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 6955352350..0b763065e9 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -106,6 +106,10 @@ const closeModal = () => modalRef.value?.close?.()
                   <kbd class="kbd">f</kbd>
                   <span>{{ $t('shortcuts.open_diff') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">t</kbd>
+                  <span>{{ $t('shortcuts.open_timeline') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 743aa15c8b..e6c68ecadd 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -20,7 +20,7 @@ const packageName = computed(() =>
 )
 const version = computed(() => route.params.version)
 
-const { data: pkg } = usePackage(packageName)
+const { data: pkg } = usePackage(packageName, version)
 
 const latestVersion = computed(() => {
   if (!pkg.value) return null
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index d6e7b52070..fe739b3f42 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -38,7 +38,8 @@
     "open_docs": "Open docs",
     "disable_shortcuts": "You can disable keyboard shortcuts in {settings}.",
     "open_main": "Open main information",
-    "open_diff": "Open version differences"
+    "open_diff": "Open version differences",
+    "open_timeline": "Open timeline"
   },
   "search": {
     "label": "Search npm packages",

From 03f2a54bb0ed2420b4000459cf5fffcf8259d0da Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:48:40 +0000
Subject: [PATCH 14/19] fix: add initial load error message

---
 .../[[org]]/[packageName].vue                 | 37 ++++++++++++++-----
 i18n/locales/en.json                          |  1 +
 i18n/schema.json                              |  3 ++
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index e6c68ecadd..d7f4dbe7f0 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -55,16 +55,23 @@ async function fetchTimeline(offset: number): Promise<TimelineResponse> {
 }
 
 // Initial load — useAsyncData serializes the full response across SSR → client
-const { data: initialTimeline } = await useAsyncData(`timeline:${packageName.value}`, () =>
-  fetchTimeline(0),
+const initialLoadError = ref(false)
+
+const { data: initialTimeline } = await useAsyncData(
+  `timeline:${packageName.value}`,
+  () => fetchTimeline(0),
+  { watch: [packageName] },
 )
 
 watch(
   initialTimeline,
   data => {
+    initialLoadError.value = false
     if (data) {
       timelineEntries.value = data.versions
       totalVersions.value = data.total
+    } else {
+      initialLoadError.value = true
     }
   },
   { immediate: true },
@@ -93,18 +100,23 @@ const fetchingVersions = shallowReactive(new Set<string>())
 
 const sizesLoading = computed(() => fetchingVersions.size > 0)
 
+function sizeKey(ver: string) {
+  return `${packageName.value}@${ver}`
+}
+
 async function fetchSize(ver: string) {
-  if (sizeCache.has(ver) || fetchingVersions.has(ver)) return
-  fetchingVersions.add(ver)
+  const key = sizeKey(ver)
+  if (sizeCache.has(key) || fetchingVersions.has(key)) return
+  fetchingVersions.add(key)
   try {
     const data = await $fetch<InstallSizeResult>(
       `/api/registry/install-size/${packageName.value}/v/${ver}`,
     )
-    sizeCache.set(ver, data)
+    sizeCache.set(key, data)
   } catch {
     // silently skip — size data is best-effort
   } finally {
-    fetchingVersions.delete(ver)
+    fetchingVersions.delete(key)
   }
 }
 
@@ -151,8 +163,8 @@ const versionSubEvents = computed(() => {
     const events: SubEvent[] = []
 
     // Size changes
-    const currentSize = sizeCache.get(current.version)
-    const previousSize = sizeCache.get(previous.version)
+    const currentSize = sizeCache.get(sizeKey(current.version))
+    const previousSize = sizeCache.get(sizeKey(previous.version))
     if (currentSize && previousSize) {
       const sizeRatio =
         previousSize.totalSize > 0
@@ -386,7 +398,14 @@ useSeoMeta({
         </p>
       </div>
 
-      <!-- Empty state -->
+      <!-- Error state -->
+      <div v-else-if="initialLoadError" class="py-20 text-center">
+        <p class="text-sm text-red-600 dark:text-red-400">
+          {{ $t('package.timeline.load_error') }}
+        </p>
+      </div>
+
+      <!-- Loading state -->
       <div v-else-if="!timelineEntries.length" class="py-20 text-center">
         <span class="i-svg-spinners:ring-resize w-5 h-5 text-fg-subtle" />
       </div>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fe739b3f42..36e2465bda 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -448,6 +448,7 @@
     },
     "timeline": {
       "load_more": "Load more",
+      "load_error": "Failed to load timeline. Please try again later.",
       "size_increase": "Install size increased by {percent}% ({size})",
       "size_decrease": "Install size decreased by {percent}% ({size})",
       "dep_increase": "{count} dependencies added",
diff --git a/i18n/schema.json b/i18n/schema.json
index 912aea1124..79c1e85cbc 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1345,6 +1345,9 @@
             "load_more": {
               "type": "string"
             },
+            "load_error": {
+              "type": "string"
+            },
             "size_increase": {
               "type": "string"
             },

From 8b72a0d66d8ddf9011c38d93751ae0d316622dc7 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:49:46 +0000
Subject: [PATCH 15/19] test: restore stubs

---
 test/unit/server/api/registry/timeline/pkg.get.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/unit/server/api/registry/timeline/pkg.get.spec.ts b/test/unit/server/api/registry/timeline/pkg.get.spec.ts
index f29ab73f55..44fea5a101 100644
--- a/test/unit/server/api/registry/timeline/pkg.get.spec.ts
+++ b/test/unit/server/api/registry/timeline/pkg.get.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { describe, expect, it, vi, beforeEach, afterAll } from 'vitest'
 import { createError, type H3Event } from 'h3'
 import type { Packument, PackumentVersion } from '#shared/types/npm-registry'
 
@@ -39,6 +39,10 @@ function makePackument(opts: {
 
 const fakeEvent = {} as H3Event
 
+afterAll(() => {
+  vi.unstubAllGlobals()
+})
+
 describe('timeline API', () => {
   beforeEach(() => {
     vi.clearAllMocks()

From 6ebe88265a94e9631eb11b70dbd8076577408d2e Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 18:50:45 +0000
Subject: [PATCH 16/19] chore: use i18n

---
 app/pages/package-timeline/[[org]]/[packageName].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index d7f4dbe7f0..21336ee12d 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -394,7 +394,7 @@ useSeoMeta({
           {{ $t('package.timeline.load_more') }}
         </button>
         <p v-if="loadError" class="text-xs text-red-600 dark:text-red-400 mt-1">
-          Failed to load more versions. Try again.
+          {{ $t('package.timeline.load_error') }}
         </p>
       </div>
 

From 99ab9e0b7fad53bc74da95591cb85e49a2ec2775 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Mon, 23 Mar 2026 22:36:33 +0000
Subject: [PATCH 17/19] chore: update schema

---
 i18n/schema.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/i18n/schema.json b/i18n/schema.json
index 79c1e85cbc..8bf91cd014 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -120,6 +120,9 @@
         },
         "open_diff": {
           "type": "string"
+        },
+        "open_timeline": {
+          "type": "string"
         }
       },
       "additionalProperties": false

From 7decccd5d07fd6ad4850aed13014b41d2105e058 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Wed, 25 Mar 2026 01:09:37 +0000
Subject: [PATCH 18/19] Update server/api/registry/timeline/[...pkg].get.ts

---
 server/api/registry/timeline/[...pkg].get.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/registry/timeline/[...pkg].get.ts b/server/api/registry/timeline/[...pkg].get.ts
index b298aaaafc..05ffbecdf6 100644
--- a/server/api/registry/timeline/[...pkg].get.ts
+++ b/server/api/registry/timeline/[...pkg].get.ts
@@ -77,7 +77,7 @@ export default defineCachedEventHandler(
             tags: tagsByVersion.get(v) ?? [],
           }
         })
-        .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+        .sort((a, b) => Date.parse(b.time) - Date.parse(a.time))
 
       return {
         versions: allVersions.slice(offset, offset + limit),

From d458cfeda99d084d599f6244d22036aae82d4bc2 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Wed, 25 Mar 2026 01:19:28 +0000
Subject: [PATCH 19/19] fix: link to package page instead of timeline

---
 app/pages/package-timeline/[[org]]/[packageName].vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index 21336ee12d..0fabd3844d 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -34,8 +34,11 @@ const versionUrlPattern = computed(() => {
   return `/package-timeline/${org ? `${org}/` : ''}${name}/v/{version}`
 })
 
-function timelineRoute(ver: string): RouteLocationRaw {
-  return { name: 'timeline', params: { ...route.params, version: ver } }
+function packageRoute(ver: string): RouteLocationRaw {
+  return {
+    name: 'package-version',
+    params: { org: route.params.org, name: route.params.packageName, version: ver },
+  }
 }
 
 // Paginated timeline data from server
@@ -327,7 +330,7 @@ useSeoMeta({
           <!-- Content -->
           <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
             <LinkBase
-              :to="timelineRoute(entry.version)"
+              :to="packageRoute(entry.version)"
               class="text-sm font-medium"
               :class="entry.version === version ? 'text-accent' : ''"
               dir="ltr"