diff --git a/app/assets/main.css b/app/assets/main.css
index bbc667d53f..8897b7da18 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -114,7 +114,7 @@
 
   --badge-blue: oklch(0.579 0.191 252);
   --badge-yellow: oklch(0.588 0.183 91);
-  --badge-green: oklch(0.566 0.202 165);
+  --badge-green: oklch(0.49 0.15 161.08);
   --badge-indigo: oklch(0.457 0.24 277.023);
   --badge-purple: oklch(0.495 0.172 295);
   --badge-orange: oklch(0.67 0.185 55);
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 818168f1ba..d0cb8c6337 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -88,13 +88,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
               <ul class="mb-8 flex flex-col gap-2">
                 <li class="flex gap-2 items-center">
-                  <kbd class="kbd">.</kbd>
-                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                  <kbd class="kbd">m</kbd>
+                  <span>{{ $t('shortcuts.open_main') }}</span>
                 </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">d</kbd>
                   <span>{{ $t('shortcuts.open_docs') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">.</kbd>
+                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">f</kbd>
+                  <span>{{ $t('shortcuts.open_diff') }}</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/components/Link/Base.vue b/app/components/Link/Base.vue
index 5bc5328364..ba62e47ca8 100644
--- a/app/components/Link/Base.vue
+++ b/app/components/Link/Base.vue
@@ -124,7 +124,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
     <kbd
       v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
       data-kbd-hint
-      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 hidden sm:inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ ariaKeyshortcuts }}
diff --git a/app/components/Package/Header.vue b/app/components/Package/Header.vue
index b0fb55425d..579034c9fe 100644
--- a/app/components/Package/Header.vue
+++ b/app/components/Package/Header.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { PackumentVersion, ProvenanceDetails, SlimVersion } from '#shared/types'
+import type { PackumentVersion, ProvenanceDetails, SlimVersion, SlimPackument } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import { SCROLL_TO_TOP_THRESHOLD } from '~/composables/useScrollToTop'
 import { useModal } from '~/composables/useModal'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { togglePackageLike } from '~/utils/atproto/likes'
+import { isEditableElement } from '~/utils/input'
 
 const props = defineProps<{
-  pkg: { name: string } | null
+  pkg: Pick<SlimPackument, 'name' | 'versions' | 'dist-tags'> | null
   resolvedVersion?: string | null
   displayVersion: PackumentVersion | null
   latestVersion: SlimVersion | null
   provenanceData: ProvenanceDetails | null
   provenanceStatus: string
-  docsLink: RouteLocationRaw | null
-  codeLink: RouteLocationRaw | null
-  isBinaryOnly: boolean
+  page: 'main' | 'docs' | 'code' | 'diff'
 }>()
 
 const { requestedVersion, orgName } = usePackageRoute()
@@ -74,16 +73,118 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
   copiedDuring: 2000,
 })
 
-const { copied: copiedVersion, copy: copyVersion } = useClipboard({
-  source: () => props.resolvedVersion ?? '',
-  copiedDuring: 2000,
-})
-
 function hasProvenance(version: PackumentVersion | null): boolean {
   if (!version?.dist) return false
   return !!(version.dist as { attestations?: unknown }).attestations
 }
 
+const router = useRouter()
+// Docs URL: use our generated API docs
+const docsLink = computed(() => {
+  if (!props.resolvedVersion) return null
+
+  return {
+    name: 'docs' as const,
+    params: {
+      path: [props.pkg?.name ?? '', 'v', props.resolvedVersion] satisfies [string, string, string],
+    },
+  }
+})
+
+const codeLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'code',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.resolvedVersion,
+      filePath: '',
+    },
+  }
+})
+
+const mainLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) {
+    return null
+  }
+  return packageRoute(props.pkg.name, props.resolvedVersion)
+})
+
+const diffLink = computed((): RouteLocationRaw | null => {
+  if (
+    props.pkg == null ||
+    props.resolvedVersion == null ||
+    props.latestVersion == null ||
+    props.latestVersion.version === props.resolvedVersion
+  ) {
+    return null
+  }
+  return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
+})
+
+// URL pattern for version selector - includes file path if present
+const versionUrlPattern = computed(
+  () => `/package/${props.pkg?.name || packageName.value}/v/{version}`,
+)
+
+const keyboardShortcuts = useKeyboardShortcuts()
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
+  e => {
+    if (codeLink.value === null) return
+    e.preventDefault()
+
+    navigateTo(codeLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'm') && !isEditableElement(e.target),
+  e => {
+    if (mainLink.value === null) return
+    e.preventDefault()
+
+    navigateTo(mainLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
+  e => {
+    if (!docsLink.value) return
+    e.preventDefault()
+    navigateTo(docsLink.value)
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
+  e => {
+    if (!props.pkg) return
+    e.preventDefault()
+    router.push({ name: 'compare', query: { packages: props.pkg.name } })
+  },
+  { dedupe: true },
+)
+
+onKeyStroke(
+  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'f') && !isEditableElement(e.target),
+  e => {
+    if (diffLink.value === null) return
+    e.preventDefault()
+    navigateTo(diffLink.value)
+  },
+  { dedupe: true },
+)
+
 //atproto
 // TODO: Maybe set this where it's not loaded here every load?
 const { user } = useAtproto()
@@ -151,13 +252,9 @@ const likeAction = async () => {
 
 <template>
   <!-- Package header -->
-  <header
-    class="sticky top-14 z-1 bg-bg py-2 border-border"
-    ref="header"
-    :class="[$style.packageHeader, { 'border-b': isHeaderPinned }]"
-  >
+  <header class="bg-bg pt-2">
     <!-- Package name and version -->
-    <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
+    <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
       <CopyToClipboardButton
         :copied="copiedPkgName"
         :copy-text="$t('package.copy_name')"
@@ -165,7 +262,7 @@ const likeAction = async () => {
         @click="copyPkgName()"
       >
         <h1
-          class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
+          class="font-mono text-lg sm:text-3xl font-medium min-w-0 break-words"
           :title="pkg?.name"
           dir="ltr"
         >
@@ -178,84 +275,8 @@ const likeAction = async () => {
           </span>
         </h1>
       </CopyToClipboardButton>
-
-      <CopyToClipboardButton
-        v-if="resolvedVersion"
-        :copied="copiedVersion"
-        :copy-text="$t('package.copy_version')"
-        class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
-        @click="copyVersion()"
-      >
-        <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
-        <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
-          <span class="font-mono text-fg-muted text-sm" dir="ltr">{{ requestedVersion }}</span>
-          <span class="i-lucide:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
-        </template>
-
-        <LinkBase
-          v-if="requestedVersion && resolvedVersion !== requestedVersion"
-          :to="packageRoute(packageName, resolvedVersion)"
-          :title="$t('package.view_permalink')"
-          dir="ltr"
-          >{{ resolvedVersion }}</LinkBase
-        >
-        <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
-
-        <template v-if="hasProvenance(displayVersion)">
-          <TooltipApp
-            :text="
-              provenanceData && provenanceStatus !== 'pending'
-                ? $t('package.provenance_section.built_and_signed_on', {
-                    provider: provenanceData.providerLabel,
-                  })
-                : $t('package.verified_provenance')
-            "
-            position="bottom"
-            strategy="fixed"
-          >
-            <LinkBase
-              variant="button-secondary"
-              size="small"
-              to="#provenance"
-              :aria-label="$t('package.provenance_section.view_more_details')"
-              classicon="i-lucide:shield-check"
-            />
-          </TooltipApp>
-        </template>
-        <span
-          v-if="requestedVersion && latestVersion && resolvedVersion !== latestVersion.version"
-          class="text-fg-subtle text-sm shrink-0"
-          >{{ $t('package.not_latest') }}</span
-        >
-      </CopyToClipboardButton>
-
-      <!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
-      <ButtonGroup
-        v-if="resolvedVersion"
-        as="nav"
-        :aria-label="$t('package.navigation')"
-        class="hidden sm:flex max-sm:flex max-sm:fixed max-sm:z-40 max-sm:inset-is-1/2 max-sm:-translate-x-1/2 max-sm:rtl:translate-x-1/2 max-sm:bg-[--bg]/90 max-sm:backdrop-blur-md max-sm:border max-sm:border-border max-sm:rounded-md max-sm:shadow-md ms-auto"
-        :style="navExtraOffsetStyle"
-        :class="$style.packageNav"
-      >
-        <LinkBase
-          variant="button-secondary"
-          v-if="docsLink"
-          :to="docsLink"
-          aria-keyshortcuts="d"
-          classicon="i-lucide:file-text"
-        >
-          <span class="max-sm:sr-only">{{ $t('package.links.docs') }}</span>
-        </LinkBase>
-        <LinkBase
-          v-if="codeLink"
-          variant="button-secondary"
-          :to="codeLink"
-          aria-keyshortcuts="."
-          classicon="i-lucide:code"
-        >
-          <span class="max-sm:sr-only">{{ $t('package.links.code') }}</span>
-        </LinkBase>
+      <!-- Package metrics -->
+      <div class="flex gap-2 flex-wrap items-stretch">
         <LinkBase
           variant="button-secondary"
           :to="{ name: 'compare', query: { packages: packageName } }"
@@ -264,35 +285,6 @@ const likeAction = async () => {
         >
           <span class="max-sm:sr-only">{{ $t('package.links.compare') }}</span>
         </LinkBase>
-        <LinkBase
-          v-if="displayVersion && latestVersion && displayVersion.version !== latestVersion.version"
-          variant="button-secondary"
-          :to="diffRoute(packageName, displayVersion.version, latestVersion.version)"
-          classicon="i-lucide:diff"
-          :title="$t('compare.compare_versions_title')"
-        >
-          <span class="max-sm:sr-only">{{ $t('compare.compare_versions') }}</span>
-        </LinkBase>
-        <ButtonBase
-          v-if="showScrollToTop"
-          variant="secondary"
-          :aria-label="$t('common.scroll_to_top')"
-          @click="scrollToTop"
-          classicon="i-lucide:arrow-up"
-          class="sm:p-2.75"
-        />
-      </ButtonGroup>
-
-      <!-- Package metrics -->
-      <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch">
-        <PackageMetricsBadges
-          v-if="resolvedVersion"
-          :package-name="packageName"
-          :version="resolvedVersion"
-          :is-binary="isBinaryOnly"
-          class="self-baseline"
-        />
-
         <!-- Package likes -->
         <TooltipApp
           :text="
@@ -308,7 +300,7 @@ const likeAction = async () => {
         >
           <ButtonBase
             @click="likeAction"
-            size="small"
+            size="medium"
             :aria-label="
               likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
             "
@@ -330,6 +322,115 @@ const likeAction = async () => {
       </div>
     </div>
   </header>
+  <div
+    ref="header"
+    class="bg-bg sticky top-14 z-1 border-b border-border flex flex-col md:flex-row-reverse items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0 pt-2"
+    :class="[$style.packageHeader]"
+    data-testid="package-subheader"
+  >
+    <div
+      class="flex items-center max-md:justify-between max-md:w-full max-md:flex-row-reverse gap-2"
+    >
+      <ButtonBase
+        variant="secondary"
+        :aria-label="$t('common.scroll_to_top')"
+        @click="scrollToTop"
+        classicon="i-lucide:arrow-up"
+        :class="showScrollToTop ? '' : 'opacity-0 pointer-events-none select-none'"
+        class="py-1.5 px-2.5 sm:me-2"
+        :tabindex="showScrollToTop ? 0 : -1"
+      />
+      <div class="flex-inline items-center flex-nowrap gap-1 font-mono text-fg-muted">
+        <template v-if="hasProvenance(displayVersion)">
+          <TooltipApp
+            :text="
+              provenanceData && provenanceStatus !== 'pending'
+                ? $t('package.provenance_section.built_and_signed_on', {
+                    provider: provenanceData.providerLabel,
+                  })
+                : $t('package.verified_provenance')
+            "
+            position="bottom"
+            strategy="fixed"
+          >
+            <LinkBase
+              variant="button-secondary"
+              :to="packageRoute(packageName, resolvedVersion, '#provenance')"
+              :aria-label="$t('package.provenance_section.view_more_details')"
+              classicon="i-lucide:shield-check"
+              class="py-1.5 px-2.5 me-2"
+            />
+          </TooltipApp>
+        </template>
+        <!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
+        <template v-if="requestedVersion && resolvedVersion !== requestedVersion">
+          <TooltipApp
+            :text="requestedVersion"
+            position="bottom"
+            strategy="fixed"
+            class="vertical-middle"
+          >
+            <span class="i-lucide:cable rtl-flip min-w-3 w-3 h-3 mx-1" aria-hidden="true" />
+          </TooltipApp>
+        </template>
+        <!-- Version selector -->
+        <VersionSelector
+          v-if="resolvedVersion && pkg?.versions && pkg?.['dist-tags']"
+          :package-name="packageName"
+          :current-version="resolvedVersion"
+          :versions="pkg.versions"
+          :dist-tags="pkg['dist-tags']"
+          :url-pattern="versionUrlPattern"
+        />
+      </div>
+    </div>
+    <!-- Docs + Code — inline on desktop, floating bottom bar on mobile -->
+    <nav
+      v-if="resolvedVersion"
+      :aria-label="$t('package.navigation')"
+      class="flex gap-4 me-auto -mb-px"
+      :style="navExtraOffsetStyle"
+      :class="$style.packageNav"
+    >
+      <LinkBase
+        v-if="mainLink"
+        :to="mainLink"
+        aria-keyshortcuts="m"
+        class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+        :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
+      >
+        {{ $t('package.links.main') }}
+      </LinkBase>
+      <LinkBase
+        v-if="docsLink"
+        :to="docsLink"
+        aria-keyshortcuts="d"
+        class="decoration-none border-b-2 p-1 hover:border-accent/50"
+        :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
+      >
+        {{ $t('package.links.docs') }}
+      </LinkBase>
+      <LinkBase
+        v-if="codeLink"
+        :to="codeLink"
+        aria-keyshortcuts="."
+        class="decoration-none border-b-2 p-1 hover:border-accent/50"
+        :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
+      >
+        {{ $t('package.links.code') }}
+      </LinkBase>
+      <LinkBase
+        v-if="diffLink"
+        :to="diffLink"
+        :title="$t('compare.compare_versions_title')"
+        aria-keyshortcuts="f"
+        class="decoration-none border-b-2 p-1 hover:border-accent/50"
+        :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
+      >
+        {{ $t('compare.compare_versions') }}
+      </LinkBase>
+    </nav>
+  </div>
 </template>
 
 <style module>
diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 910a25aade..a6b33c619e 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -144,6 +144,7 @@ function handleKeydown(event: KeyboardEvent) {
         :id="listboxId"
         ref="listRef"
         role="listbox"
+        data-testid="package-manager-dropdown"
         :aria-activedescendant="
           highlightedIndex >= 0
             ? `${listboxId}-${packageManagers[highlightedIndex]?.id}`
diff --git a/app/components/Package/Sidebar.vue b/app/components/Package/Sidebar.vue
index 32c3f755ba..261297ea4e 100644
--- a/app/components/Package/Sidebar.vue
+++ b/app/components/Package/Sidebar.vue
@@ -23,6 +23,10 @@ const offset = computed(() => {
     ? content.value.offsetTop
     : container.value.offsetHeight - content.value.offsetTop - content.value.offsetHeight
 })
+const packageHeaderHeight = usePackageHeaderHeight()
+const stickyStyle = computed(() =>
+  direction.value === 'up' ? { top: `${60 + packageHeaderHeight.value}px` } : { bottom: `32px` },
+)
 
 const style = computed(() => {
   return direction.value === 'down'
@@ -42,6 +46,7 @@ const style = computed(() => {
     <div
       ref="content"
       class="sticky w-full group-data-[direction=up]:(self-start top-30 xl:top-14) group-data-[direction=down]:(self-end bottom-8)"
+      :style="stickyStyle"
     >
       <slot />
     </div>
diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 061767735b..b41b755308 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -1,51 +1,45 @@
 <script setup lang="ts"></script>
 
 <template>
+  <!-- Package header — matches area-header in [...name].vue -->
+  <header class="bg-[--bg] pt-2">
+    <div class="min-w-0">
+      <!-- Package name -->
+      <div class="min-w-0 flex items-center gap-2 justify-between">
+        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
+          <SkeletonInline class="block! h-9 w-48" />
+        </h1>
+        <div class="flex gap-1">
+          <!-- Compare placeholder -->
+          <SkeletonBlock class="w-9 md:w-40 h-9 rounded self-baseline" />
+          <!-- Likes button placeholder -->
+          <SkeletonBlock class="w-14 h-9 rounded self-baseline" />
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div
+    class="sticky top-14 z-1 pt-2 bg-bg border-b border-border flex flex-col md:flex-row-reverse flex-wrap gap-2 justify-between"
+  >
+    <!-- Version -->
+    <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
+      <SkeletonInline class="h-6 w-20" />
+    </span>
+    <!-- Docs + Code + Compare nav placeholder (hidden on mobile) -->
+    <div class="flex items-center gap-0.5 p-0.5">
+      <SkeletonInline class="h-7 w-22 rounded" />
+      <SkeletonInline class="h-7 w-20 rounded" />
+      <SkeletonInline class="h-7 w-26 rounded" />
+    </div>
+  </div>
   <article
     aria-busy="true"
     :aria-label="$t('package.skeleton.loading')"
     class="package-page motion-safe:animate-fade-in"
   >
-    <!-- Package header — matches area-header in [...name].vue -->
-    <header class="area-header sticky top-14 z-1 bg-[--bg] py-2">
-      <div class="flex items-baseline gap-x-2 gap-y-1 sm:gap-x-3 flex-wrap min-w-0">
-        <!-- Package name -->
-        <div class="min-w-0">
-          <h1 class="font-mono text-2xl sm:text-3xl font-medium">
-            <SkeletonInline class="h-9 w-48" />
-          </h1>
-        </div>
-        <!-- Version -->
-        <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
-          <SkeletonInline class="h-6 w-20" />
-        </span>
-
-        <!-- Docs + Code + Compare nav placeholder (hidden on mobile) -->
-        <div
-          class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
-        >
-          <SkeletonInline class="h-7 w-22 rounded" />
-          <SkeletonInline class="h-7 w-20 rounded" />
-          <SkeletonInline class="h-7 w-26 rounded" />
-        </div>
-
-        <!-- Metrics badges + likes — matches basis-full flex row -->
-        <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch">
-          <!-- Badge row (Types, ESM, CJS, CJS-ghost) -->
-          <div class="flex items-center gap-1.5 self-baseline">
-            <SkeletonBlock class="w-16 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded" />
-            <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
-          </div>
-          <!-- Likes button placeholder -->
-          <SkeletonBlock class="w-14 h-5.5 rounded self-baseline" />
-        </div>
-      </div>
-    </header>
-
     <!-- Package details — matches area-details in [...name].vue -->
-    <section class="area-details">
+    <section class="area-details pt-4">
       <div class="mb-4">
         <!-- Description -->
         <div class="max-w-2xl">
@@ -65,6 +59,17 @@
           <li><SkeletonInline class="h-5 w-16" /></li>
           <li><SkeletonInline class="h-5 w-10" /></li>
         </ul>
+
+        <!-- Metrics badges + likes — matches basis-full flex row -->
+        <div class="basis-full flex gap-2 sm:gap-3 flex-wrap items-stretch mt-4">
+          <!-- Badge row (Types, ESM, CJS, CJS-ghost) -->
+          <div class="flex items-center gap-1.5 self-baseline">
+            <SkeletonBlock class="w-16 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded" />
+            <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
+          </div>
+        </div>
       </div>
 
       <!-- Stats grid — matches dl in [...name].vue -->
@@ -200,7 +205,7 @@
       <div
         class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(pt-2 max-h-[calc(100dvh-6rem)])"
       >
-        <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
+        <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->
           <section>
             <div class="flex items-center justify-between mb-3 px-1">
@@ -382,7 +387,6 @@
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    'header'
     'details'
     'install'
     'vulns'
@@ -390,12 +394,11 @@
     'readme';
 }
 
-/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+/* Tablet/medium: install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
   .package-page {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'header  header'
       'details details'
       'install install'
       'vulns   vulns'
@@ -409,7 +412,6 @@
   .package-page {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'header  sidebar'
       'details sidebar'
       'install sidebar'
       'vulns   sidebar'
@@ -417,10 +419,6 @@
   }
 }
 
-.area-header {
-  grid-area: header;
-}
-
 .area-details {
   grid-area: details;
 }
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
index 5a0867ee8a..a38ddb40f0 100644
--- a/app/components/VersionSelector.vue
+++ b/app/components/VersionSelector.vue
@@ -472,19 +472,20 @@ watch(
       type="button"
       aria-haspopup="listbox"
       :aria-expanded="isOpen"
-      class="flex items-center gap-1.5 text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
+      class="break-all text-start text-fg-subtle font-mono text-sm hover:text-fg transition-[color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded"
       @click="isOpen = !isOpen"
       @keydown="handleButtonKeydown"
+      data-testid="version-selector-button"
     >
-      <span dir="ltr">{{ currentVersion }}</span>
+      <span dir="ltr" class="me-1.5">{{ currentVersion }}</span>
       <span
         v-if="currentVersion === latestVersion"
-        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
+        class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium me-1.5"
       >
         latest
       </span>
       <span
-        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none"
+        class="i-lucide:chevron-down w-3.5 h-3.5 transition-[transform] duration-200 motion-reduce:transition-none vertical-middle"
         :class="{ 'rotate-180': isOpen }"
         aria-hidden="true"
       />
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 92ee712790..858dc9b512 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -14,12 +14,10 @@ import type { IconClass } from '~/types'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
-import { isEditableElement } from '~/utils/input'
 import { getDependencyCount } from '~/utils/npm/dependency-count'
 import { detectPublishSecurityDowngradeForVersion } from '~/utils/publish-security'
 import { useInstallSizeDiff } from '~/composables/useInstallSizeDiff'
 import { useViewOnGitProvider } from '~/composables/useViewOnGitProvider'
-import type { RouteLocationRaw } from 'vue-router'
 
 defineOgImageComponent('Package', {
   name: () => packageName.value,
@@ -27,8 +25,6 @@ defineOgImageComponent('Package', {
   primaryColor: '#60a5fa',
 })
 
-const router = useRouter()
-
 const readmeHeader = useTemplateRef('readmeHeader')
 const isReadmeHeaderPinned = shallowRef(false)
 const packageHeaderHeight = usePackageHeaderHeight()
@@ -449,18 +445,6 @@ const homepageUrl = computed(() => {
   return homepage
 })
 
-// Docs URL: use our generated API docs
-const docsLink = computed(() => {
-  if (!resolvedVersion.value) return null
-
-  return {
-    name: 'docs' as const,
-    params: {
-      path: [pkg.value!.name, 'v', resolvedVersion.value] satisfies [string, string, string],
-    },
-  }
-})
-
 const fundingUrl = computed(() => {
   let funding = displayVersion.value?.funding
   if (Array.isArray(funding)) funding = funding[0]
@@ -552,54 +536,6 @@ useSeoMeta({
   twitterDescription: () => pkg.value?.description ?? '',
 })
 
-const codeLink = computed((): RouteLocationRaw | null => {
-  if (pkg.value == null || resolvedVersion.value == null) {
-    return null
-  }
-  const split = pkg.value.name.split('/')
-  return {
-    name: 'code',
-    params: {
-      org: split.length === 2 ? split[0] : undefined,
-      packageName: split.length === 2 ? split[1]! : split[0]!,
-      version: resolvedVersion.value,
-      filePath: '',
-    },
-  }
-})
-
-const keyboardShortcuts = useKeyboardShortcuts()
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
-  e => {
-    if (codeLink.value === null) return
-    e.preventDefault()
-
-    navigateTo(codeLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
-  e => {
-    if (!docsLink.value) return
-    e.preventDefault()
-    navigateTo(docsLink.value)
-  },
-  { dedupe: true },
-)
-
-onKeyStroke(
-  e => keyboardShortcuts.value && isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
-  e => {
-    if (!pkg.value) return
-    e.preventDefault()
-    router.push({ name: 'compare', query: { packages: pkg.value.name } })
-  },
-)
-
 const showSkeleton = shallowRef(false)
 </script>
 
@@ -616,7 +552,7 @@ const showSkeleton = shallowRef(false)
       <span class="text-xs">Skeleton</span>
     </ButtonBase>
   </DevOnly>
-  <main class="container flex-1 w-full py-8">
+  <main class="container flex-1 w-full pb-8">
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR with missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
@@ -639,7 +575,7 @@ const showSkeleton = shallowRef(false)
       v-html="serverRenderedHtml"
     />
 
-    <article v-else-if="pkg" id="package-article" :class="$style.packagePage">
+    <template v-else-if="pkg">
       <PackageHeader
         :pkg="pkg"
         :resolved-version="resolvedVersion"
@@ -647,611 +583,584 @@ const showSkeleton = shallowRef(false)
         :latest-version="latestVersion"
         :provenance-data="provenanceData"
         :provenance-status="provenanceStatus"
-        :is-binary-only="isBinaryOnly"
-        :docs-link="docsLink"
-        :code-link="codeLink"
         :class="$style.areaHeader"
+        page="main"
       />
-
-      <!-- Package details -->
-      <section :class="$style.areaDetails">
-        <div class="mb-4">
-          <!-- Description container with min-height to prevent CLS -->
-          <div class="max-w-2xl">
-            <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
-              <span v-html="pkgDescription" />
-            </p>
-            <p v-else class="text-fg-subtle text-base m-0 italic">
-              {{ $t('package.no_description') }}
-            </p>
-          </div>
-
-          <!-- External links -->
-          <ul
-            class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
-          >
-            <li v-if="repositoryUrl">
-              <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
-                <span v-if="repoRef">
-                  {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
-                </span>
-                <span v-else>{{ $t('package.links.repo') }}</span>
-              </LinkBase>
-            </li>
-            <li v-if="repositoryUrl && repoMeta && starsLink">
-              <LinkBase :to="starsLink" classicon="i-lucide:star">
-                {{ compactNumberFormatter.format(stars) }}
-              </LinkBase>
-            </li>
-            <li v-if="forks && forksLink">
-              <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
-                {{ compactNumberFormatter.format(forks) }}
-              </LinkBase>
-            </li>
-            <li class="basis-full sm:hidden" />
-            <li v-if="homepageUrl">
-              <LinkBase :to="homepageUrl" classicon="i-lucide:link">
-                {{ $t('package.links.homepage') }}
-              </LinkBase>
-            </li>
-            <li v-if="displayVersion?.bugs?.url">
-              <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
-                {{ $t('package.links.issues') }}
-              </LinkBase>
-            </li>
-            <li>
-              <LinkBase
-                :to="`https://www.npmjs.com/package/${pkg.name}`"
-                :title="$t('common.view_on.npm')"
-                classicon="i-simple-icons:npm"
-              >
-                npm
-              </LinkBase>
-            </li>
-            <li v-if="jsrInfo?.exists && jsrInfo.url">
-              <LinkBase
-                :to="jsrInfo.url"
-                :title="$t('badges.jsr.title')"
-                classicon="i-simple-icons:jsr"
-              >
-                {{ $t('package.links.jsr') }}
-              </LinkBase>
-            </li>
-            <li v-if="fundingUrl">
-              <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
-                {{ $t('package.links.fund') }}
-              </LinkBase>
-            </li>
-            <!-- Mobile-only: Docs + Code + Compare links -->
-            <li v-if="docsLink && displayVersion" class="sm:hidden">
-              <LinkBase :to="docsLink" classicon="i-lucide:file-text">
-                {{ $t('package.links.docs') }}
-              </LinkBase>
-            </li>
-            <li v-if="resolvedVersion && codeLink" class="sm:hidden">
-              <LinkBase :to="codeLink" classicon="i-lucide:code">
-                {{ $t('package.links.code') }}
-              </LinkBase>
-            </li>
-            <li class="sm:hidden">
-              <LinkBase
-                :to="{ name: 'compare', query: { packages: pkg.name } }"
-                classicon="i-lucide:git-compare"
-              >
-                {{ $t('package.links.compare') }}
-              </LinkBase>
-            </li>
-            <li
-              v-if="
-                displayVersion && latestVersion && displayVersion.version !== latestVersion.version
-              "
-              class="sm:hidden"
+      <article id="package-article" :class="$style.packagePage">
+        <!-- Package details -->
+        <section :class="$style.areaDetails">
+          <div class="mb-4 pt-4">
+            <!-- Description container with min-height to prevent CLS -->
+            <div class="max-w-2xl">
+              <p v-if="pkgDescription" class="text-fg-muted text-base m-0">
+                <span v-html="pkgDescription" />
+              </p>
+              <p v-else class="text-fg-subtle text-base m-0 italic">
+                {{ $t('package.no_description') }}
+              </p>
+            </div>
+
+            <!-- External links -->
+            <ul
+              class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3 text-sm"
             >
-              <NuxtLink
-                :to="diffRoute(pkg.name, displayVersion.version, latestVersion.version)"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-lucide:diff w-4 h-4" aria-hidden="true" />
-                {{ $t('compare.compare_versions') }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-
-        <div
-          v-if="deprecationNotice"
-          class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
-        >
-          <h2 class="font-medium mb-2">
-            {{
-              deprecationNotice.type === 'package'
-                ? $t('package.deprecation.package')
-                : $t('package.deprecation.version')
-            }}
-          </h2>
-          <p v-if="deprecationNoticeMessage" class="text-base m-0">
-            <span v-html="deprecationNoticeMessage" />
-          </p>
-          <p v-else class="text-base m-0 italic">
-            {{ $t('package.deprecation.no_reason') }}
-          </p>
-        </div>
-
-        <!-- Stats grid -->
-        <dl
-          class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
-        >
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.license') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
-              <span v-else>{{ $t('package.license.none') }}</span>
-            </dd>
-          </div>
-
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.deps') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
-              <span class="flex items-center gap-1">
-                <!-- Direct deps (muted) -->
-                <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
-
-                <!-- Separator and total transitive deps -->
-                <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
-                  <span class="text-fg-subtle">/</span>
-
-                  <ClientOnly>
-                    <span
-                      v-if="
-                        vulnTreeStatus === 'pending' ||
-                        (installSizeStatus === 'pending' && !vulnTree)
-                      "
-                      class="inline-flex items-center gap-1 text-fg-subtle"
-                    >
-                      <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-                    </span>
-                    <span v-else-if="totalDepsCount !== null">{{
-                      numberFormatter.format(totalDepsCount)
-                    }}</span>
-                    <span v-else class="text-fg-subtle">-</span>
-                    <template #fallback>
-                      <span class="text-fg-subtle">-</span>
-                    </template>
-                  </ClientOnly>
-                </template>
-              </span>
-              <ButtonGroup v-if="dependencyCount > 0" class="ms-auto">
+              <li v-if="repositoryUrl">
+                <LinkBase :to="repositoryUrl" :classicon="repoProviderIcon">
+                  <span v-if="repoRef">
+                    {{ repoRef.owner }}<span class="opacity-50">/</span>{{ repoRef.repo }}
+                  </span>
+                  <span v-else>{{ $t('package.links.repo') }}</span>
+                </LinkBase>
+              </li>
+              <li v-if="repositoryUrl && repoMeta && starsLink">
+                <LinkBase :to="starsLink" classicon="i-lucide:star">
+                  {{ compactNumberFormatter.format(stars) }}
+                </LinkBase>
+              </li>
+              <li v-if="forks && forksLink">
+                <LinkBase :to="forksLink" classicon="i-lucide:git-fork">
+                  {{ compactNumberFormatter.format(forks) }}
+                </LinkBase>
+              </li>
+              <li class="basis-full sm:hidden" />
+              <li v-if="homepageUrl">
+                <LinkBase :to="homepageUrl" classicon="i-lucide:link">
+                  {{ $t('package.links.homepage') }}
+                </LinkBase>
+              </li>
+              <li v-if="displayVersion?.bugs?.url">
+                <LinkBase :to="displayVersion.bugs.url" classicon="i-lucide:circle-alert">
+                  {{ $t('package.links.issues') }}
+                </LinkBase>
+              </li>
+              <li>
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
-                  :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                  :title="$t('package.stats.view_dependency_graph')"
-                  classicon="i-lucide:network -rotate-90"
+                  :to="`https://www.npmjs.com/package/${pkg.name}`"
+                  :title="$t('common.view_on.npm')"
+                  classicon="i-simple-icons:npm"
                 >
-                  <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                  npm
                 </LinkBase>
-
+              </li>
+              <li v-if="jsrInfo?.exists && jsrInfo.url">
                 <LinkBase
-                  variant="button-secondary"
-                  size="small"
-                  :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
-                  :title="$t('package.stats.inspect_dependency_tree')"
-                  classicon="i-lucide:table"
+                  :to="jsrInfo.url"
+                  :title="$t('badges.jsr.title')"
+                  classicon="i-simple-icons:jsr"
                 >
-                  <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                  {{ $t('package.links.jsr') }}
+                </LinkBase>
+              </li>
+              <li v-if="fundingUrl">
+                <LinkBase :to="fundingUrl" classicon="i-lucide:heart">
+                  {{ $t('package.links.fund') }}
                 </LinkBase>
-              </ButtonGroup>
-            </dd>
+              </li>
+            </ul>
+            <PackageMetricsBadges
+              v-if="resolvedVersion"
+              :package-name="packageName"
+              :version="resolvedVersion"
+              :is-binary="isBinaryOnly"
+              class="self-baseline mt-4"
+            />
           </div>
 
-          <div class="space-y-1 sm:col-span-3">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
-              {{ $t('package.stats.install_size') }}
-              <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
-                <span
-                  tabindex="0"
-                  class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
-                >
-                  <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+          <div
+            v-if="deprecationNotice"
+            class="border border-red-700 dark:border-red-400 bg-red-400/10 rounded-lg px-3 py-2 text-base text-red-700 dark:text-red-400"
+          >
+            <h2 class="font-medium mb-2">
+              {{
+                deprecationNotice.type === 'package'
+                  ? $t('package.deprecation.package')
+                  : $t('package.deprecation.version')
+              }}
+            </h2>
+            <p v-if="deprecationNoticeMessage" class="text-base m-0">
+              <span v-html="deprecationNoticeMessage" />
+            </p>
+            <p v-else class="text-base m-0 italic">
+              {{ $t('package.deprecation.no_reason') }}
+            </p>
+          </div>
+
+          <!-- Stats grid -->
+          <dl
+            class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
+          >
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.license') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <LicenseDisplay v-if="pkg.license" :license="pkg.license" />
+                <span v-else>{{ $t('package.license.none') }}</span>
+              </dd>
+            </div>
+
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.deps') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg flex items-center justify-start gap-2">
+                <span class="flex items-center gap-1">
+                  <!-- Direct deps (muted) -->
+                  <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
+
+                  <!-- Separator and total transitive deps -->
+                  <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
+                    <span class="text-fg-subtle">/</span>
+
+                    <ClientOnly>
+                      <span
+                        v-if="
+                          vulnTreeStatus === 'pending' ||
+                          (installSizeStatus === 'pending' && !vulnTree)
+                        "
+                        class="inline-flex items-center gap-1 text-fg-subtle"
+                      >
+                        <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                      </span>
+                      <span v-else-if="totalDepsCount !== null">{{
+                        numberFormatter.format(totalDepsCount)
+                      }}</span>
+                      <span v-else class="text-fg-subtle">-</span>
+                      <template #fallback>
+                        <span class="text-fg-subtle">-</span>
+                      </template>
+                    </ClientOnly>
+                  </template>
                 </span>
-              </TooltipApp>
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <!-- Package size (greyed out) -->
-              <span class="text-fg-muted" dir="ltr">
-                <span v-if="displayVersion?.dist?.unpackedSize">
-                  {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
+                <ButtonGroup v-if="dependencyCount > 0" class="ms-auto">
+                  <LinkBase
+                    variant="button-secondary"
+                    size="small"
+                    :to="`https://npmgraph.js.org/?q=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                    :title="$t('package.stats.view_dependency_graph')"
+                    classicon="i-lucide:network -rotate-90"
+                  >
+                    <span class="sr-only">{{ $t('package.stats.view_dependency_graph') }}</span>
+                  </LinkBase>
+
+                  <LinkBase
+                    variant="button-secondary"
+                    size="small"
+                    :to="`https://node-modules.dev/grid/depth#install=${pkg.name}${resolvedVersion ? `@${resolvedVersion}` : ''}`"
+                    :title="$t('package.stats.inspect_dependency_tree')"
+                    classicon="i-lucide:table"
+                  >
+                    <span class="sr-only">{{ $t('package.stats.inspect_dependency_tree') }}</span>
+                  </LinkBase>
+                </ButtonGroup>
+              </dd>
+            </div>
+
+            <div class="space-y-1 sm:col-span-3">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
+                {{ $t('package.stats.install_size') }}
+                <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
+                  <span
+                    tabindex="0"
+                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+                  >
+                    <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
+                  </span>
+                </TooltipApp>
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <!-- Package size (greyed out) -->
+                <span class="text-fg-muted" dir="ltr">
+                  <span v-if="displayVersion?.dist?.unpackedSize">
+                    {{ bytesFormatter.format(displayVersion.dist.unpackedSize) }}
+                  </span>
+                  <span v-else>-</span>
                 </span>
-                <span v-else>-</span>
-              </span>
-
-              <!-- Separator and install size -->
-              <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
-                <span class="text-fg-subtle mx-1">/</span>
 
+                <!-- Separator and install size -->
+                <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
+                  <span class="text-fg-subtle mx-1">/</span>
+
+                  <span
+                    v-if="installSizeStatus === 'pending'"
+                    class="inline-flex items-center gap-1 text-fg-subtle"
+                  >
+                    <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                  </span>
+                  <span v-else-if="installSize?.totalSize" dir="ltr">
+                    {{ bytesFormatter.format(installSize.totalSize) }}
+                  </span>
+                  <span v-else class="text-fg-subtle">-</span>
+                </template>
+              </dd>
+            </div>
+
+            <!-- Vulnerabilities count -->
+            <div class="space-y-1 sm:col-span-2">
+              <dt class="text-xs text-fg-subtle uppercase tracking-wider">
+                {{ $t('package.stats.vulns') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
                 <span
-                  v-if="installSizeStatus === 'pending'"
+                  v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
                   class="inline-flex items-center gap-1 text-fg-subtle"
                 >
                   <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
                 </span>
-                <span v-else-if="installSize?.totalSize" dir="ltr">
-                  {{ bytesFormatter.format(installSize.totalSize) }}
+                <span v-else-if="vulnTreeStatus === 'success'">
+                  <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
+                    {{ numberFormatter.format(vulnCount) }}
+                  </span>
+                  <span v-else class="inline-flex items-center gap-1 text-fg-muted">
+                    <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
+                    {{ numberFormatter.format(0) }}
+                  </span>
                 </span>
                 <span v-else class="text-fg-subtle">-</span>
-              </template>
-            </dd>
-          </div>
+              </dd>
+            </div>
 
-          <!-- Vulnerabilities count -->
-          <div class="space-y-1 sm:col-span-2">
-            <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-              {{ $t('package.stats.vulns') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <span
-                v-if="vulnTreeStatus === 'pending' || vulnTreeStatus === 'idle'"
-                class="inline-flex items-center gap-1 text-fg-subtle"
+            <div
+              v-if="resolvedVersion && pkg.time?.[resolvedVersion]"
+              class="space-y-1 sm:col-span-2"
+            >
+              <dt
+                class="text-xs text-fg-subtle uppercase tracking-wider"
+                :title="
+                  $t('package.stats.published_tooltip', {
+                    package: pkg.name,
+                    version: resolvedVersion,
+                  })
+                "
               >
-                <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-              </span>
-              <span v-else-if="vulnTreeStatus === 'success'">
-                <span v-if="hasVulnerabilities" class="text-amber-700 dark:text-amber-500">
-                  {{ numberFormatter.format(vulnCount) }}
-                </span>
-                <span v-else class="inline-flex items-center gap-1 text-fg-muted">
-                  <span class="i-lucide:check w-3 h-3" aria-hidden="true" />
-                  {{ numberFormatter.format(0) }}
-                </span>
-              </span>
-              <span v-else class="text-fg-subtle">-</span>
-            </dd>
+                {{ $t('package.stats.published') }}
+              </dt>
+              <dd class="font-mono text-sm text-fg">
+                <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
+              </dd>
+            </div>
+          </dl>
+
+          <!-- Skills Modal -->
+          <ClientOnly>
+            <PackageSkillsModal
+              :skills="skillsData?.skills ?? []"
+              :package-name="pkg.name"
+              :version="resolvedVersion || undefined"
+            />
+          </ClientOnly>
+        </section>
+
+        <!-- Binary-only packages: Show only execute command (no install) -->
+        <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
+          <div class="flex flex-wrap items-center justify-between mb-3">
+            <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
+              {{ $t('package.run.title') }}
+            </h2>
+            <!-- Package manager dropdown -->
+            <PackageManagerSelect />
+          </div>
+          <div>
+            <TerminalExecute
+              :package-name="pkg.name"
+              :jsr-info="jsrInfo"
+              :is-create-package="isCreatePkg"
+            />
           </div>
+        </section>
 
-          <div
-            v-if="resolvedVersion && pkg.time?.[resolvedVersion]"
-            class="space-y-1 sm:col-span-2"
-          >
-            <dt
-              class="text-xs text-fg-subtle uppercase tracking-wider"
-              :title="
-                $t('package.stats.published_tooltip', {
-                  package: pkg.name,
-                  version: resolvedVersion,
-                })
-              "
+        <!-- Regular packages: Install command with optional run command -->
+        <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
+          <div class="flex flex-wrap items-center justify-between mb-3">
+            <h2
+              id="get-started-heading"
+              class="group text-xs text-fg-subtle uppercase tracking-wider"
             >
-              {{ $t('package.stats.published') }}
-            </dt>
-            <dd class="font-mono text-sm text-fg">
-              <DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
-            </dd>
-          </div>
-        </dl>
-
-        <!-- Skills Modal -->
-        <ClientOnly>
-          <PackageSkillsModal
-            :skills="skillsData?.skills ?? []"
-            :package-name="pkg.name"
-            :version="resolvedVersion || undefined"
-          />
-        </ClientOnly>
-      </section>
-
-      <!-- Binary-only packages: Show only execute command (no install) -->
-      <section v-if="isBinaryOnly" class="scroll-mt-20" :class="$style.areaInstall">
-        <div class="flex flex-wrap items-center justify-between mb-3">
-          <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.run.title') }}
-          </h2>
-          <!-- Package manager dropdown -->
-          <PackageManagerSelect />
-        </div>
-        <div>
-          <TerminalExecute
-            :package-name="pkg.name"
-            :jsr-info="jsrInfo"
-            :is-create-package="isCreatePkg"
-          />
-        </div>
-      </section>
-
-      <!-- Regular packages: Install command with optional run command -->
-      <section v-else id="get-started" class="scroll-mt-20" :class="$style.areaInstall">
-        <div class="flex flex-wrap items-center justify-between mb-3">
-          <h2
-            id="get-started-heading"
-            class="group text-xs text-fg-subtle uppercase tracking-wider"
-          >
-            <LinkBase to="#get-started">
-              {{ $t('package.get_started.title') }}
-            </LinkBase>
-          </h2>
-          <!-- Package manager dropdown -->
-          <PackageManagerSelect />
-        </div>
-        <div>
-          <div
-            v-if="publishSecurityDowngrade"
-            role="alert"
-            class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
-          >
-            <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
-              <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
-              {{ $t('package.security_downgrade.title') }}
-            </h3>
-            <p class="mt-2 mb-0 text-sm">
-              <i18n-t
-                v-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'provenance'
-                "
-                keypath="package.security_downgrade.description_to_none_provenance"
-                tag="span"
-                scope="global"
-              >
-                <template #provenance>
-                  <a
-                    href="https://docs.npmjs.com/generating-provenance-statements"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              <i18n-t
-                v-else-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
-                "
-                keypath="package.security_downgrade.description_to_none_trustedPublisher"
-                tag="span"
-                scope="global"
-              >
-                <template #trustedPublishing>
-                  <a
-                    href="https://docs.npmjs.com/trusted-publishers"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              <i18n-t
-                v-else-if="
-                  publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
-                  publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
-                "
-                keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
-                tag="span"
-                scope="global"
-              >
-                <template #provenance>
-                  <a
-                    href="https://docs.npmjs.com/generating-provenance-statements"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.provenance_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-                <template #trustedPublishing>
-                  <a
-                    href="https://docs.npmjs.com/trusted-publishers"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
-                    >{{ $t('package.security_downgrade.trusted_publishing_link_text')
-                    }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
-                  /></a>
-                </template>
-              </i18n-t>
-              {{ ' ' }}
-              <template v-if="downgradeFallbackInstallText">
-                {{ downgradeFallbackInstallText }}
-              </template>
-            </p>
+              <LinkBase to="#get-started">
+                {{ $t('package.get_started.title') }}
+              </LinkBase>
+            </h2>
+            <!-- Package manager dropdown -->
+            <PackageManagerSelect />
           </div>
-          <TerminalInstall
-            :package-name="pkg.name"
-            :requested-version="resolvedVersion"
-            :install-version-override="installVersionOverride"
-            :jsr-info="jsrInfo"
-            :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
-            :types-package-name="typesPackageName"
-            :executable-info="executableInfo"
-            :create-package-info="createPackageInfo"
-          />
-        </div>
-      </section>
-
-      <div class="space-y-6" :class="$style.areaVulns">
-        <!-- Bad package warning -->
-        <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
-        <!-- Size / dependency increase notice -->
-        <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
-        <!-- Vulnerability scan -->
-        <ClientOnly>
-          <PackageVulnerabilityTree
-            v-if="resolvedVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-          />
-          <PackageDeprecatedTree
-            v-if="resolvedVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-            class="mt-3"
-          />
-        </ClientOnly>
-      </div>
-
-      <!-- README -->
-      <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
-        <div
-          ref="readmeHeader"
-          class="flex sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
-          :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
-          :style="{ top: readmeStickyTop }"
-        >
-          <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider">
-            <LinkBase to="#readme">
-              {{ $t('package.readme.title') }}
-            </LinkBase>
-          </h2>
-          <div class="flex gap-2">
-            <!-- Copy readme as Markdown button -->
-            <TooltipApp
-              v-if="readmeData?.mdExists"
-              :text="$t('package.readme.copy_as_markdown')"
-              position="bottom"
+          <div>
+            <div
+              v-if="publishSecurityDowngrade"
+              role="alert"
+              class="mb-4 rounded-lg border border-amber-600/40 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-400"
             >
-              <ButtonBase
-                @mouseenter="prefetchReadmeMarkdown"
-                @focus="prefetchReadmeMarkdown"
-                @click="copyReadmeHandler()"
-                :aria-pressed="copiedReadme"
-                :aria-label="
-                  copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
-                "
-                :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
-              >
-                {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
-              </ButtonBase>
-            </TooltipApp>
-            <ReadmeTocDropdown
-              v-if="readmeData?.toc && readmeData.toc.length > 1"
-              :toc="readmeData.toc"
-              :active-id="activeTocId"
+              <h3 class="m-0 flex items-center gap-2 font-mono text-sm font-medium">
+                <span class="i-lucide:circle-alert w-4 h-4 shrink-0" aria-hidden="true" />
+                {{ $t('package.security_downgrade.title') }}
+              </h3>
+              <p class="mt-2 mb-0 text-sm">
+                <i18n-t
+                  v-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'provenance'
+                  "
+                  keypath="package.security_downgrade.description_to_none_provenance"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #provenance>
+                    <a
+                      href="https://docs.npmjs.com/generating-provenance-statements"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                <i18n-t
+                  v-else-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'none' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                  "
+                  keypath="package.security_downgrade.description_to_none_trustedPublisher"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #trustedPublishing>
+                    <a
+                      href="https://docs.npmjs.com/trusted-publishers"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                <i18n-t
+                  v-else-if="
+                    publishSecurityDowngrade.downgradedTrustLevel === 'provenance' &&
+                    publishSecurityDowngrade.trustedTrustLevel === 'trustedPublisher'
+                  "
+                  keypath="package.security_downgrade.description_to_provenance_trustedPublisher"
+                  tag="span"
+                  scope="global"
+                >
+                  <template #provenance>
+                    <a
+                      href="https://docs.npmjs.com/generating-provenance-statements"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.provenance_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                  <template #trustedPublishing>
+                    <a
+                      href="https://docs.npmjs.com/trusted-publishers"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1 rounded-sm underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg focus-visible:decoration-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 transition-colors"
+                      >{{ $t('package.security_downgrade.trusted_publishing_link_text')
+                      }}<span class="i-lucide:external-link w-3 h-3" aria-hidden="true"
+                    /></a>
+                  </template>
+                </i18n-t>
+                {{ ' ' }}
+                <template v-if="downgradeFallbackInstallText">
+                  {{ downgradeFallbackInstallText }}
+                </template>
+              </p>
+            </div>
+            <TerminalInstall
+              :package-name="pkg.name"
+              :requested-version="resolvedVersion"
+              :install-version-override="installVersionOverride"
+              :jsr-info="jsrInfo"
+              :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
+              :types-package-name="typesPackageName"
+              :executable-info="executableInfo"
+              :create-package-info="createPackageInfo"
             />
           </div>
-        </div>
+        </section>
 
-        <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
-        <Readme v-if="readmeData?.html" :html="readmeData.html" />
-        <p v-else class="text-fg-muted italic">
-          {{ $t('package.readme.no_readme') }}
-          <a
-            v-if="repositoryUrl"
-            :href="repositoryUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
-          >
-            {{ viewOnGitProvider }}</a
-          >
-        </p>
+        <div class="space-y-6" :class="$style.areaVulns">
+          <!-- Bad package warning -->
+          <PackageReplacement v-if="moduleReplacement" :replacement="moduleReplacement" />
+          <!-- Size / dependency increase notice -->
+          <PackageSizeIncrease v-if="sizeDiff" :diff="sizeDiff" />
+          <!-- Vulnerability scan -->
+          <ClientOnly>
+            <PackageVulnerabilityTree
+              v-if="resolvedVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+            />
+            <PackageDeprecatedTree
+              v-if="resolvedVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+              class="mt-3"
+            />
+          </ClientOnly>
+        </div>
 
-        <section
-          v-if="hasProvenance(displayVersion) && isMounted"
-          id="provenance"
-          class="scroll-mt-20"
-        >
+        <!-- README -->
+        <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
           <div
-            v-if="provenanceStatus === 'pending'"
-            class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            ref="readmeHeader"
+            class="flex [@media(min-height:800px)]:sticky z-10 flex-wrap items-center justify-between mb-3 py-2 -mx-1 px-2 transition-shadow duration-200"
+            :class="{ 'bg-bg border-border border-b': isReadmeHeaderPinned }"
+            :style="{ top: readmeStickyTop }"
           >
-            <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
-            <span>{{ $t('package.provenance_section.title') }}…</span>
+            <h2 id="readme-heading" class="group text-fg-subtle uppercase font-medium">
+              <LinkBase to="#readme">
+                {{ $t('package.readme.title') }}
+              </LinkBase>
+            </h2>
+            <div class="flex gap-2">
+              <!-- Copy readme as Markdown button -->
+              <TooltipApp
+                v-if="readmeData?.mdExists"
+                :text="$t('package.readme.copy_as_markdown')"
+                position="bottom"
+              >
+                <ButtonBase
+                  @mouseenter="prefetchReadmeMarkdown"
+                  @focus="prefetchReadmeMarkdown"
+                  @click="copyReadmeHandler()"
+                  :aria-pressed="copiedReadme"
+                  :aria-label="
+                    copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
+                  "
+                  :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
+                >
+                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+                </ButtonBase>
+              </TooltipApp>
+              <ReadmeTocDropdown
+                v-if="readmeData?.toc && readmeData.toc.length > 1"
+                :toc="readmeData.toc"
+                :active-id="activeTocId"
+              />
+            </div>
           </div>
-          <PackageProvenanceSection
-            v-else-if="provenanceData"
-            :details="provenanceData"
-            class="mt-8"
-          />
-          <!-- Error state: provenance exists but details failed to load -->
-          <div
-            v-else-if="provenanceStatus === 'error'"
-            class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+
+          <!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
+          <Readme v-if="readmeData?.html" :html="readmeData.html" />
+          <p v-else class="text-fg-muted italic">
+            {{ $t('package.readme.no_readme') }}
+            <a
+              v-if="repositoryUrl"
+              :href="repositoryUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
+            >
+              {{ viewOnGitProvider }}</a
+            >
+          </p>
+
+          <section
+            v-if="hasProvenance(displayVersion) && isMounted"
+            id="provenance"
+            class="scroll-mt-20"
           >
-            <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
-            <span>{{ $t('package.provenance_section.error_loading') }}</span>
-          </div>
+            <div
+              v-if="provenanceStatus === 'pending'"
+              class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            >
+              <span class="i-svg-spinners:ring-resize w-4 h-4" aria-hidden="true" />
+              <span>{{ $t('package.provenance_section.title') }}…</span>
+            </div>
+            <PackageProvenanceSection
+              v-else-if="provenanceData"
+              :details="provenanceData"
+              class="mt-8"
+            />
+            <!-- Error state: provenance exists but details failed to load -->
+            <div
+              v-else-if="provenanceStatus === 'error'"
+              class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+            >
+              <span class="i-lucide:circle-alert w-4 h-4" aria-hidden="true" />
+              <span>{{ $t('package.provenance_section.error_loading') }}</span>
+            </div>
+          </section>
         </section>
-      </section>
 
-      <PackageSidebar :class="$style.areaSidebar">
-        <div class="flex flex-col gap-4 sm:gap-6 xl:(pt-2)">
-          <!-- Team access controls (for scoped packages when connected) -->
-          <ClientOnly>
-            <PackageAccessControls :package-name="pkg.name" />
-            <template #fallback>
-              <!-- Show skeleton loaders when SSR or access controls are loading -->
-            </template>
-          </ClientOnly>
+        <PackageSidebar :class="$style.areaSidebar">
+          <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
+            <!-- Team access controls (for scoped packages when connected) -->
+            <ClientOnly>
+              <PackageAccessControls :package-name="pkg.name" />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
+
+            <!-- Agent Skills -->
+            <ClientOnly>
+              <PackageSkillsCard
+                v-if="skillsData?.skills?.length"
+                :skills="skillsData.skills"
+                :package-name="pkg.name"
+                :version="resolvedVersion || undefined"
+              />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
 
-          <!-- Agent Skills -->
-          <ClientOnly>
-            <PackageSkillsCard
-              v-if="skillsData?.skills?.length"
-              :skills="skillsData.skills"
+            <!-- Download stats -->
+            <PackageWeeklyDownloadStats
+              :packageName
+              :createdIso="pkg?.time?.created ?? null"
+              :repoRef="repoRef"
+            />
+
+            <!-- Playground links -->
+            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
+
+            <PackageCompatibility :engines="displayVersion?.engines" />
+
+            <!-- Versions (grouped by release channel) -->
+            <PackageVersions
+              v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
               :package-name="pkg.name"
-              :version="resolvedVersion || undefined"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags'] ?? {}"
+              :time="pkg.time"
+              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
             />
-            <template #fallback>
-              <!-- Show skeleton loaders when SSR or access controls are loading -->
-            </template>
-          </ClientOnly>
 
-          <!-- Download stats -->
-          <PackageWeeklyDownloadStats
-            :packageName
-            :createdIso="pkg?.time?.created ?? null"
-            :repoRef="repoRef"
-          />
-
-          <!-- Playground links -->
-          <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
-
-          <PackageCompatibility :engines="displayVersion?.engines" />
-
-          <!-- Versions (grouped by release channel) -->
-          <PackageVersions
-            v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
-            :package-name="pkg.name"
-            :versions="pkg.versions"
-            :dist-tags="pkg['dist-tags'] ?? {}"
-            :time="pkg.time"
-            :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
-          />
-
-          <!-- Install Scripts Warning -->
-          <PackageInstallScripts
-            v-if="displayVersion?.installScripts"
-            :package-name="pkg.name"
-            :version="displayVersion.version"
-            :install-scripts="displayVersion.installScripts"
-          />
-
-          <!-- Dependencies -->
-          <PackageDependencies
-            v-if="hasDependencies && resolvedVersion && displayVersion"
-            :package-name="pkg.name"
-            :version="resolvedVersion"
-            :dependencies="displayVersion.dependencies"
-            :peer-dependencies="displayVersion.peerDependencies"
-            :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
-            :optional-dependencies="displayVersion.optionalDependencies"
-          />
-
-          <!-- Keywords -->
-          <PackageKeywords :keywords="displayVersion?.keywords" />
-
-          <!-- Maintainers (with admin actions when connected) -->
-          <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
-        </div>
-      </PackageSidebar>
-    </article>
+            <!-- Install Scripts Warning -->
+            <PackageInstallScripts
+              v-if="displayVersion?.installScripts"
+              :package-name="pkg.name"
+              :version="displayVersion.version"
+              :install-scripts="displayVersion.installScripts"
+            />
+
+            <!-- Dependencies -->
+            <PackageDependencies
+              v-if="hasDependencies && resolvedVersion && displayVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+              :dependencies="displayVersion.dependencies"
+              :peer-dependencies="displayVersion.peerDependencies"
+              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
+              :optional-dependencies="displayVersion.optionalDependencies"
+            />
+
+            <!-- Keywords -->
+            <PackageKeywords :keywords="displayVersion?.keywords" />
+
+            <!-- Maintainers (with admin actions when connected) -->
+            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+          </div>
+        </PackageSidebar>
+      </article>
+    </template>
 
     <!-- Error state -->
     <div
@@ -1283,7 +1192,6 @@ const showSkeleton = shallowRef(false)
   /* Mobile: single column, sidebar above readme */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    'header'
     'details'
     'install'
     'vulns'
@@ -1291,12 +1199,11 @@ const showSkeleton = shallowRef(false)
     'readme';
 }
 
-/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+/* Tablet/medium: install/vulns full width, readme+sidebar side by side */
 @media (min-width: 1024px) {
   .packagePage {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
-      'header  header'
       'details details'
       'install install'
       'vulns   vulns'
@@ -1310,7 +1217,6 @@ const showSkeleton = shallowRef(false)
   .packagePage {
     grid-template-columns: 1fr 20rem;
     grid-template-areas:
-      'header  sidebar'
       'details sidebar'
       'install sidebar'
       'vulns   sidebar'
@@ -1324,10 +1230,6 @@ const showSkeleton = shallowRef(false)
   min-width: 0;
 }
 
-.areaHeader {
-  grid-area: header;
-}
-
 .areaDetails {
   grid-area: details;
 }
diff --git a/app/utils/router.ts b/app/utils/router.ts
index 0e7362a8fa..0c22d92860 100644
--- a/app/utils/router.ts
+++ b/app/utils/router.ts
@@ -1,6 +1,10 @@
 import type { RouteLocationRaw } from 'vue-router'
 
-export function packageRoute(packageName: string, version?: string | null): RouteLocationRaw {
+export function packageRoute(
+  packageName: string,
+  version?: string | null,
+  hash?: string,
+): RouteLocationRaw {
   const [org, name = ''] = packageName.startsWith('@') ? packageName.split('/') : ['', packageName]
 
   if (version) {
@@ -12,6 +16,7 @@ export function packageRoute(packageName: string, version?: string | null): Rout
         // remove spaces to be correctly resolved by router
         version: version.replace(/\s+/g, ''),
       },
+      hash,
     }
   }
 
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index f29b3137d6..1e34d310d0 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -149,12 +149,9 @@
     "not_found": "لم يتم العثور على الحزمة",
     "not_found_message": "تعذّر العثور على الحزمة.",
     "no_description": "لا يوجد وصف",
-    "not_latest": "(ليست الأحدث)",
     "verified_provenance": "مصدر موثّق",
-    "view_permalink": "عرض الرابط الدائم لهذا الإصدار",
     "navigation": "تصفح الحزمة",
     "copy_name": "نسخ اسم الحزمة",
-    "copy_version": "نسخ إصدار الحزمة",
     "deprecation": {
       "package": "تم إهمال هذه الحزمة.",
       "version": "تم إهمال هذا الإصدار.",
diff --git a/i18n/locales/az-AZ.json b/i18n/locales/az-AZ.json
index e0d7893f73..1af6f4efd7 100644
--- a/i18n/locales/az-AZ.json
+++ b/i18n/locales/az-AZ.json
@@ -216,12 +216,9 @@
     "not_found": "Paket Tapılmadı",
     "not_found_message": "Paket tapıla bilmədi.",
     "no_description": "Təsvir verilməyib",
-    "not_latest": "(son deyil)",
     "verified_provenance": "Təsdiqlənmiş mənşə",
-    "view_permalink": "Bu versiya üçün daimi keçidə bax",
     "navigation": "Paket",
     "copy_name": "Paket adını kopyala",
-    "copy_version": "Paket versiyasını kopyala",
     "deprecation": {
       "package": "Bu paket köhnəlmişdir.",
       "version": "Bu versiya köhnəlmişdir.",
diff --git a/i18n/locales/bg-BG.json b/i18n/locales/bg-BG.json
index c2865f990f..9418f4e718 100644
--- a/i18n/locales/bg-BG.json
+++ b/i18n/locales/bg-BG.json
@@ -179,12 +179,9 @@
     "not_found": "Пакетът не е намерен",
     "not_found_message": "Пакетът не може да бъде намерен.",
     "no_description": "Няма предоставено описание",
-    "not_latest": "(не е последна)",
     "verified_provenance": "Потвърден произход",
-    "view_permalink": "Преглед на постоянна връзка за тази версия",
     "navigation": "Пакет",
     "copy_name": "Копиране на името на пакета",
-    "copy_version": "Копиране на версията на пакета",
     "deprecation": {
       "package": "Този пакет е остарял.",
       "version": "Тази версия е остаряла.",
diff --git a/i18n/locales/bn-IN.json b/i18n/locales/bn-IN.json
index 1700971fb7..3888c49dee 100644
--- a/i18n/locales/bn-IN.json
+++ b/i18n/locales/bn-IN.json
@@ -116,9 +116,7 @@
     "not_found": "প্যাকেজ পাওয়া যায়নি",
     "not_found_message": "প্যাকেজ পাওয়া যায়নি।",
     "no_description": "কোনো বর্ণনা দেওয়া হয়নি",
-    "not_latest": "(সর্বশেষ নয়)",
     "verified_provenance": "যাচাইকৃত প্রোভেন্স",
-    "view_permalink": "এই ভার্সনের পার্মালিংক দেখুন",
     "navigation": "প্যাকেজ",
     "copy_name": "প্যাকেজের নাম কপি করুন",
     "deprecation": {
diff --git a/i18n/locales/cs-CZ.json b/i18n/locales/cs-CZ.json
index 59aae4e8d7..456be0e288 100644
--- a/i18n/locales/cs-CZ.json
+++ b/i18n/locales/cs-CZ.json
@@ -226,12 +226,9 @@
     "not_found": "Balíček nenalezen",
     "not_found_message": "Balíček nebyl nalezen.",
     "no_description": "Není k dispozici žádný popis",
-    "not_latest": "(není nejnovější)",
     "verified_provenance": "Ověřený původ",
-    "view_permalink": "Zobrazit trvalý odkaz na tuto verzi",
     "navigation": "Navigace balíčku",
     "copy_name": "Zkopírovat název balíčku",
-    "copy_version": "Zkopírovat verzi balíčku",
     "deprecation": {
       "package": "Tento balíček byl označen jako zastaralý.",
       "version": "Tato verze byla označena jako zastaralá.",
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
index eb81ebdec8..44f75880b0 100644
--- a/i18n/locales/de-DE.json
+++ b/i18n/locales/de-DE.json
@@ -216,12 +216,9 @@
     "not_found": "Paket nicht gefunden",
     "not_found_message": "Das Paket konnte nicht gefunden werden.",
     "no_description": "Keine Beschreibung vorhanden",
-    "not_latest": "(nicht aktuell)",
     "verified_provenance": "Verifizierte Herkunft",
-    "view_permalink": "Permalink für diese Version anzeigen",
     "navigation": "Paket",
     "copy_name": "Paketnamen kopieren",
-    "copy_version": "Paketversion kopieren",
     "deprecation": {
       "package": "Dieses Paket ist veraltet.",
       "version": "Diese Version ist veraltet.",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c187265c73..909498ab21 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -36,7 +36,9 @@
     "go_to_result": "Go to result",
     "open_code_view": "Open code view",
     "open_docs": "Open docs",
-    "disable_shortcuts": "You can disable keyboard shortcuts in {settings}."
+    "disable_shortcuts": "You can disable keyboard shortcuts in {settings}.",
+    "open_main": "Open main information",
+    "open_diff": "Open version differences"
   },
   "search": {
     "label": "Search npm packages",
@@ -226,12 +228,9 @@
     "not_found": "Package Not Found",
     "not_found_message": "The package could not be found.",
     "no_description": "No description provided",
-    "not_latest": "(not latest)",
     "verified_provenance": "Verified provenance",
-    "view_permalink": "View permalink for this version",
     "navigation": "Package",
     "copy_name": "Copy package name",
-    "copy_version": "Copy package version",
     "deprecation": {
       "package": "This package has been deprecated.",
       "version": "This version has been deprecated.",
@@ -288,6 +287,7 @@
       "view_source": "View source"
     },
     "links": {
+      "main": "main",
       "repo": "repo",
       "homepage": "homepage",
       "issues": "issues",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 87f719488c..2cf9b9e0fb 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -179,12 +179,9 @@
     "not_found": "Paquete no encontrado",
     "not_found_message": "No se pudo encontrar el paquete.",
     "no_description": "Sin descripción proporcionada",
-    "not_latest": "(no es la última versión)",
     "verified_provenance": "Procedencia verificada",
-    "view_permalink": "Ver enlace permanente para esta versión",
     "navigation": "Navegación del paquete",
     "copy_name": "Copiar nombre del paquete",
-    "copy_version": "Copiar versión del paquete",
     "deprecation": {
       "package": "Este paquete está obsoleto.",
       "version": "Esta versión está obsoleta.",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index add6ac7b0b..1d32bb73dd 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -216,12 +216,9 @@
     "not_found": "Paquet introuvable",
     "not_found_message": "Le paquet n'a pas pu être trouvé.",
     "no_description": "Aucune description fournie",
-    "not_latest": "(pas la dernière)",
     "verified_provenance": "Provenance vérifiée",
-    "view_permalink": "Voir le lien permanent pour cette version",
     "navigation": "Paquet",
     "copy_name": "Copier le nom du paquet",
-    "copy_version": "Copier le numéro de version du paquet",
     "deprecation": {
       "package": "Ce paquet a été déprécié.",
       "version": "Cette version a été dépréciée.",
diff --git a/i18n/locales/hi-IN.json b/i18n/locales/hi-IN.json
index 603e7d7b93..cd1660e067 100644
--- a/i18n/locales/hi-IN.json
+++ b/i18n/locales/hi-IN.json
@@ -117,9 +117,7 @@
     "not_found": "पैकेज नहीं मिला",
     "not_found_message": "पैकेज नहीं मिल सका।",
     "no_description": "कोई विवरण प्रदान नहीं किया गया",
-    "not_latest": "(नवीनतम नहीं)",
     "verified_provenance": "सत्यापित प्रोवेनेंस",
-    "view_permalink": "इस संस्करण का परमालिंक देखें",
     "navigation": "पैकेज",
     "copy_name": "पैकेज नाम अनुकरण करें",
     "deprecation": {
diff --git a/i18n/locales/hu-HU.json b/i18n/locales/hu-HU.json
index 87b645f334..23d385778f 100644
--- a/i18n/locales/hu-HU.json
+++ b/i18n/locales/hu-HU.json
@@ -179,12 +179,9 @@
     "not_found": "Csomag Nem Található",
     "not_found_message": "A csomag nem található.",
     "no_description": "Nincs leírás",
-    "not_latest": "(nem a legfrissebb)",
     "verified_provenance": "Hitelesített eredet",
-    "view_permalink": "Verzió permalinkjének megtekintése",
     "navigation": "Csomag",
     "copy_name": "Csomagnév másolása",
-    "copy_version": "Csomag verziójának másolása",
     "deprecation": {
       "package": "Ez a csomag elavult (deprecated).",
       "version": "Ez a verzió elavult (deprecated).",
diff --git a/i18n/locales/id-ID.json b/i18n/locales/id-ID.json
index 1ddcf9a3f5..cfd66c3016 100644
--- a/i18n/locales/id-ID.json
+++ b/i18n/locales/id-ID.json
@@ -161,12 +161,9 @@
     "not_found": "Paket Tidak Ditemukan",
     "not_found_message": "Paket tidak dapat ditemukan.",
     "no_description": "Tidak ada deskripsi",
-    "not_latest": "(bukan versi terbaru)",
     "verified_provenance": "Provenans terverifikasi",
-    "view_permalink": "Lihat permalink untuk versi ini",
     "navigation": "Paket",
     "copy_name": "Salin nama paket",
-    "copy_version": "Salin versi paket",
     "deprecation": {
       "package": "Paket ini telah usang (deprecated).",
       "version": "Versi ini telah usang (deprecated).",
diff --git a/i18n/locales/it-IT.json b/i18n/locales/it-IT.json
index 8648542dbf..5155400809 100644
--- a/i18n/locales/it-IT.json
+++ b/i18n/locales/it-IT.json
@@ -149,12 +149,9 @@
     "not_found": "Pacchetto Non Trovato",
     "not_found_message": "Impossibile trovare il pacchetto.",
     "no_description": "Nessuna descrizione fornita",
-    "not_latest": "(non recente)",
     "verified_provenance": "Provenienza verificata",
-    "view_permalink": "Vedi il link permanente per questa versione",
     "navigation": "Pacchetto",
     "copy_name": "Copia nome pacchetto",
-    "copy_version": "Copia versione pacchetto",
     "deprecation": {
       "package": "Questo pacchetto è stato deprecato.",
       "version": "Questa versione è stata deprecata.",
diff --git a/i18n/locales/ja-JP.json b/i18n/locales/ja-JP.json
index ff5d8ca528..093eb80c25 100644
--- a/i18n/locales/ja-JP.json
+++ b/i18n/locales/ja-JP.json
@@ -216,12 +216,9 @@
     "not_found": "パッケージが見つかりません",
     "not_found_message": "パッケージが見つかりませんでした。",
     "no_description": "説明はありません",
-    "not_latest": "（最新ではありません）",
     "verified_provenance": "検証済みprovenance",
-    "view_permalink": "このバージョンのパーマリンクを表示",
     "navigation": "パッケージナビゲーション",
     "copy_name": "パッケージ名をコピー",
-    "copy_version": "パッケージのバージョンをコピー",
     "deprecation": {
       "package": "このパッケージは非推奨になりました。",
       "version": "このバージョンは非推奨になりました。",
diff --git a/i18n/locales/kn-IN.json b/i18n/locales/kn-IN.json
index af41145ff4..23ac3c680a 100644
--- a/i18n/locales/kn-IN.json
+++ b/i18n/locales/kn-IN.json
@@ -117,9 +117,7 @@
     "not_found": "ಪ್ಯಾಕೇಜ್ ಕಂಡುಬಂದಿಲ್ಲ",
     "not_found_message": "ಪ್ಯಾಕೇಜ್ ಕಂಡುಬಂದಿಲ್ಲ.",
     "no_description": "ವಿವರಣೆ ನೀಡಲಾಗಿಲ್ಲ",
-    "not_latest": "(ಇದು ಇತ್ತೀಚಿನದು ಅಲ್ಲ)",
     "verified_provenance": "ಪರಿಶೀಲಿತ ಮೂಲ (Provenance)",
-    "view_permalink": "ಈ ಆವೃತ್ತಿಯ ಶಾಶ್ವತ ಲಿಂಕ್ ನೋಡಿ",
     "navigation": "ಪ್ಯಾಕೇಜ್",
     "copy_name": "ಪ್ಯಾಕೇಜ್ ಹೆಸರನ್ನು ನಕಲಿಸಿ",
     "deprecation": {
diff --git a/i18n/locales/mr-IN.json b/i18n/locales/mr-IN.json
index ed0b989ded..5c1692f0d7 100644
--- a/i18n/locales/mr-IN.json
+++ b/i18n/locales/mr-IN.json
@@ -114,9 +114,7 @@
     "not_found": "पॅकेज सापडले नाही",
     "not_found_message": "पॅकेज सापडले नाही.",
     "no_description": "कोणतेही वर्णन प्रदान केलेले नाही",
-    "not_latest": "(नवीनतम नाही)",
     "verified_provenance": "सत्यापित उत्पत्ती",
-    "view_permalink": "या आवृत्तीसाठी परमालिंक पहा",
     "navigation": "पॅकेज",
     "copy_name": "पॅकेज नाव कॉपी करा",
     "deprecation": {
diff --git a/i18n/locales/nb-NO.json b/i18n/locales/nb-NO.json
index a8736fcb9c..94658e4eb4 100644
--- a/i18n/locales/nb-NO.json
+++ b/i18n/locales/nb-NO.json
@@ -148,9 +148,7 @@
     "not_found": "Pakke ikke funnet",
     "not_found_message": "Pakken kunne ikke finnes.",
     "no_description": "Ingen beskrivelse gitt",
-    "not_latest": "(ikke nyeste)",
     "verified_provenance": "Verifisert opprinnelse",
-    "view_permalink": "Vis permalenke for denne versjonen",
     "navigation": "Pakke",
     "copy_name": "Kopier pakkenavn",
     "deprecation": {
diff --git a/i18n/locales/ne-NP.json b/i18n/locales/ne-NP.json
index c29f249374..dc1e7710d6 100644
--- a/i18n/locales/ne-NP.json
+++ b/i18n/locales/ne-NP.json
@@ -117,9 +117,7 @@
     "not_found": "प्याकेज फेला परेन",
     "not_found_message": "प्याकेज फेला पार्न सकिएन।",
     "no_description": "विवरण उपलब्ध छैन",
-    "not_latest": "(नवीनतम होइन)",
     "verified_provenance": "प्रमाणित प्रुभेनेन्स",
-    "view_permalink": "यस संस्करणको पर्मालिङ्क हेर्नुहोस्",
     "navigation": "प्याकेज",
     "copy_name": "प्याकेज नाम कपी गर्नुहोस्",
     "deprecation": {
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 601b98abbf..c3c3daed6d 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -226,12 +226,9 @@
     "not_found": "Nie znaleziono pakietu",
     "not_found_message": "Nie udało się znaleźć pakietu.",
     "no_description": "Brak opisu",
-    "not_latest": "(nie najnowsza)",
     "verified_provenance": "Zweryfikowane pochodzenie",
-    "view_permalink": "Zobacz stały link do tej wersji",
     "navigation": "Pakiet",
     "copy_name": "Kopiuj nazwę pakietu",
-    "copy_version": "Kopiuj wersję pakietu",
     "deprecation": {
       "package": "Ten pakiet został oznaczony jako przestarzały.",
       "version": "Ta wersja została oznaczona jako przestarzała.",
diff --git a/i18n/locales/pt-BR.json b/i18n/locales/pt-BR.json
index e625bc277f..cd9a3793f7 100644
--- a/i18n/locales/pt-BR.json
+++ b/i18n/locales/pt-BR.json
@@ -118,9 +118,7 @@
     "not_found": "Pacote não encontrado",
     "not_found_message": "O pacote não pôde ser encontrado.",
     "no_description": "Nenhuma descrição fornecida",
-    "not_latest": "(não é a mais recente)",
     "verified_provenance": "Proveniência verificada",
-    "view_permalink": "Ver link permanente para esta versão",
     "navigation": "Pacote",
     "copy_name": "Copiar nome do pacote",
     "deprecation": {
diff --git a/i18n/locales/ru-RU.json b/i18n/locales/ru-RU.json
index 11e6c3336a..fdc82e5051 100644
--- a/i18n/locales/ru-RU.json
+++ b/i18n/locales/ru-RU.json
@@ -216,12 +216,9 @@
     "not_found": "Пакет не найден",
     "not_found_message": "Пакет не удалось найти.",
     "no_description": "Описание отсутствует",
-    "not_latest": "(не последняя)",
     "verified_provenance": "Подтвержденное происхождение",
-    "view_permalink": "Посмотреть постоянную ссылку на эту версию",
     "navigation": "Навигация по пакету",
     "copy_name": "Скопировать имя пакета",
-    "copy_version": "Скопировать версию пакета",
     "deprecation": {
       "package": "Этот пакет устарел.",
       "version": "Эта версия устарела.",
diff --git a/i18n/locales/ta-IN.json b/i18n/locales/ta-IN.json
index 15533bd844..0eb176818f 100644
--- a/i18n/locales/ta-IN.json
+++ b/i18n/locales/ta-IN.json
@@ -148,9 +148,7 @@
     "not_found": "தொகுப்பு கிடைக்கவில்லை",
     "not_found_message": "தொகுப்பைக் கண்டுபிடிக்க இயலவில்லை.",
     "no_description": "விளக்கம் வழங்கப்படவில்லை",
-    "not_latest": "(சமீபத்தியது அல்ல)",
     "verified_provenance": "சரிபார்க்கப்பட்ட மூலநிலை",
-    "view_permalink": "இந்தப் பதிப்பின் நிரந்தர இணைப்பைக் காண்க",
     "navigation": "தொகுப்பு",
     "copy_name": "தொகுப்புப் பெயரை நகலெடு",
     "deprecation": {
diff --git a/i18n/locales/te-IN.json b/i18n/locales/te-IN.json
index 967e06ed27..c2d82b8d3e 100644
--- a/i18n/locales/te-IN.json
+++ b/i18n/locales/te-IN.json
@@ -117,9 +117,7 @@
     "not_found": "ప్యాకేజ్ కనుగొనబడలేదు",
     "not_found_message": "ప్యాకేజ్ కనుగొనబడలేదు.",
     "no_description": "వివరణ అందించబడలేదు",
-    "not_latest": "(తాజాది కాదు)",
     "verified_provenance": "ధృవీకరించబడిన ప్రోవెనెన్స్",
-    "view_permalink": "ఈ వెర్షన్ యొక్క పర్మాలింక్‌ను వీక్షించండి",
     "navigation": "ప్యాకేజ్",
     "copy_name": "ప్యాకేజ్ పేరును కాపీ చేయండి",
     "deprecation": {
diff --git a/i18n/locales/tr-TR.json b/i18n/locales/tr-TR.json
index a761262ae4..911f0076ee 100644
--- a/i18n/locales/tr-TR.json
+++ b/i18n/locales/tr-TR.json
@@ -216,12 +216,9 @@
     "not_found": "Paket Bulunamadı",
     "not_found_message": "Paket bulunamadı.",
     "no_description": "Açıklama verilmemiş",
-    "not_latest": "(en son değil)",
     "verified_provenance": "Doğrulanmış köken",
-    "view_permalink": "Bu sürüm için kalıcı bağlantıya bak",
     "navigation": "Paket",
     "copy_name": "Paket adını kopyala",
-    "copy_version": "Paket sürümünü kopyala",
     "deprecation": {
       "package": "Bu paket kullanımdan kaldırılmıştır.",
       "version": "Bu sürüm kullanımdan kaldırılmıştır.",
diff --git a/i18n/locales/uk-UA.json b/i18n/locales/uk-UA.json
index 1c46738e7b..bdee6c1b56 100644
--- a/i18n/locales/uk-UA.json
+++ b/i18n/locales/uk-UA.json
@@ -216,12 +216,9 @@
     "not_found": "Пакет не знайдено",
     "not_found_message": "Пакет не вдалося знайти.",
     "no_description": "Опис не надано",
-    "not_latest": "(не найновіший)",
     "verified_provenance": "Перевірене походження",
-    "view_permalink": "Переглянути постійне посилання на цю версію",
     "navigation": "Пакет",
     "copy_name": "Скопіювати назву пакета",
-    "copy_version": "Скопіювати версію пакета",
     "deprecation": {
       "package": "Цей пакет більше не підтримується.",
       "version": "Ця версія більше не підтримується.",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index 4e91d82823..068e079899 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -216,12 +216,9 @@
     "not_found": "未找到包",
     "not_found_message": "找不到此包。",
     "no_description": "未提供描述",
-    "not_latest": "（非最新）",
     "verified_provenance": "已验证来源",
-    "view_permalink": "查看此版本的链接",
     "navigation": "包导航",
     "copy_name": "复制包名",
-    "copy_version": "复制版本号",
     "deprecation": {
       "package": "此包已废弃。",
       "version": "此版本已废弃。",
diff --git a/i18n/locales/zh-TW.json b/i18n/locales/zh-TW.json
index 231abb7f48..3604bc4817 100644
--- a/i18n/locales/zh-TW.json
+++ b/i18n/locales/zh-TW.json
@@ -179,12 +179,9 @@
     "not_found": "找不到套件",
     "not_found_message": "找不到此套件。",
     "no_description": "未提供描述",
-    "not_latest": "（非最新）",
     "verified_provenance": "已驗證的來源",
-    "view_permalink": "檢視此版本的永久連結",
     "navigation": "套件導覽",
     "copy_name": "複製套件名稱",
-    "copy_version": "複製套件版本",
     "deprecation": {
       "package": "此套件已被棄用。",
       "version": "此版本已被棄用。",
diff --git a/i18n/schema.json b/i18n/schema.json
index 1ee624a990..cce07ee592 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -114,6 +114,12 @@
         },
         "disable_shortcuts": {
           "type": "string"
+        },
+        "open_main": {
+          "type": "string"
+        },
+        "open_diff": {
+          "type": "string"
         }
       },
       "additionalProperties": false
@@ -682,24 +688,15 @@
         "no_description": {
           "type": "string"
         },
-        "not_latest": {
-          "type": "string"
-        },
         "verified_provenance": {
           "type": "string"
         },
-        "view_permalink": {
-          "type": "string"
-        },
         "navigation": {
           "type": "string"
         },
         "copy_name": {
           "type": "string"
         },
-        "copy_version": {
-          "type": "string"
-        },
         "deprecation": {
           "type": "object",
           "properties": {
@@ -868,6 +865,9 @@
         "links": {
           "type": "object",
           "properties": {
+            "main": {
+              "type": "string"
+            },
             "repo": {
               "type": "string"
             },
diff --git a/test/e2e/create-command.spec.ts b/test/e2e/create-command.spec.ts
index 15f00ee4ce..8615df22d5 100644
--- a/test/e2e/create-command.spec.ts
+++ b/test/e2e/create-command.spec.ts
@@ -61,67 +61,6 @@ test.describe('Create Command', () => {
     })
   })
 
-  test.describe('Copy Functionality', () => {
-    test('hovering create command shows copy button', async ({ page, goto }) => {
-      await goto('/package/vite', { waitUntil: 'hydration' })
-
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      // Find the create command container (wait longer for API response)
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      // Copy button should initially be hidden (opacity-0)
-      const copyButton = createCommandContainer.locator('button')
-      await expect(copyButton).toHaveCSS('opacity', '0')
-
-      // Hover over the container
-      await createCommandContainer.hover()
-
-      // Copy button should become visible
-      await expect(copyButton).toHaveCSS('opacity', '1')
-    })
-
-    test('clicking copy button copies create command and shows confirmation', async ({
-      page,
-      goto,
-      context,
-    }) => {
-      // Grant clipboard permissions
-      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
-
-      await goto('/package/vite', { waitUntil: 'hydration' })
-      await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
-
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
-        timeout: 15000,
-      })
-
-      const createCommandContainer = page.locator('.group\\/createcmd').first()
-      await expect(createCommandContainer).toBeVisible({ timeout: 20000 })
-
-      await createCommandContainer.hover()
-
-      // Click the copy button
-      const copyButton = createCommandContainer.locator('button')
-      await copyButton.click()
-
-      // Button text should change to "copied!"
-      await expect(copyButton).toContainText(/copied/i)
-
-      // Verify clipboard content contains the create command
-      const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
-      expect(clipboardContent).toMatch(/create vite/i)
-
-      await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
-      await expect(copyButton).not.toContainText(/copied/i)
-    })
-  })
-
   test.describe('Install Command Copy', () => {
     test('hovering install command shows copy button', async ({ page, goto }) => {
       await goto('/package/is-odd', { waitUntil: 'hydration' })
diff --git a/test/e2e/package-manager-select.spec.ts b/test/e2e/package-manager-select.spec.ts
index e5a185f741..8b418dae28 100644
--- a/test/e2e/package-manager-select.spec.ts
+++ b/test/e2e/package-manager-select.spec.ts
@@ -6,12 +6,12 @@ test.describe('Package Page', () => {
 
     await expect(page.locator('h1')).toContainText('vue', { timeout: 15000 })
 
-    const packageManagerButton = page.locator('button[aria-haspopup="listbox"]').first()
+    const packageManagerButton = page.locator('article button[aria-haspopup="listbox"]').first()
     await expect(packageManagerButton).toBeVisible()
 
     // Open dropdown
     await packageManagerButton.click()
-    const packageManagerDropdown = page.locator('[role="listbox"]')
+    const packageManagerDropdown = page.locator('[data-testid="package-manager-dropdown"]')
     await expect(packageManagerDropdown).toBeVisible({ timeout: 5000 })
 
     // Arrow keys navigate the listbox
diff --git a/test/e2e/url-compatibility.spec.ts b/test/e2e/url-compatibility.spec.ts
index b555d7605e..ce5e403bcd 100644
--- a/test/e2e/url-compatibility.spec.ts
+++ b/test/e2e/url-compatibility.spec.ts
@@ -8,7 +8,11 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should have version badge
-      await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible()
+      await expect(
+        page
+          .locator('[data-testid="version-selector-button"]')
+          .locator('text=/\\d+\\.\\d+\\.\\d+/'),
+      ).toBeVisible()
     })
 
     test('/package/@nuxt/kit → scoped package page', async ({ page, goto }) => {
@@ -24,7 +28,9 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show package name
       await expect(page.locator('h1')).toContainText('vue')
       // Should show the specific version
-      await expect(page.locator('text=v3.5.27')).toBeVisible()
+      await expect(
+        page.locator('[data-testid="version-selector-button"]').locator('text=3.5.27'),
+      ).toBeVisible()
     })
 
     test('/package/@nuxt/kit/v/3.20.0 → scoped package specific version', async ({
@@ -36,7 +42,7 @@ test.describe('npmjs.com URL Compatibility', () => {
       // Should show scoped package name
       await expect(page.locator('h1')).toContainText('@nuxt/kit')
       // Should show the specific version (or "not latest" indicator)
-      await expect(page.locator('text=v3.20.0').first()).toBeVisible()
+      await expect(page.locator('text=3.20.0').first()).toBeVisible()
     })
 
     test('/package/nonexistent-pkg-12345 → 404 handling', async ({ page, goto }) => {
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 452a7c931b..ad236ca1e3 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -731,7 +731,11 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageHeader, {
         props: {
-          pkg: { name: 'vue' },
+          pkg: {
+            'name': 'vue',
+            'dist-tags': {},
+            'versions': {},
+          },
           resolvedVersion: '3.5.0',
           displayVersion: {
             _id: '1234567890',
@@ -747,9 +751,7 @@ describe('component accessibility audits', () => {
           latestVersion: { version: '3.5.0', tags: [] },
           provenanceData: null,
           provenanceStatus: 'idle',
-          docsLink: null,
-          codeLink: null,
-          isBinaryOnly: false,
+          page: 'docs',
         },
       })
       const results = await runAxe(component)