feat: add provenance to end of README and provenance badge

README.md

@@ -40,7 +40,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Fast search** – quick package search with instant results
 - **Package details** – READMEs, versions, dependencies, and metadata
 - **Code viewer** – browse package source code with syntax highlighting and permalink to specific lines
-- **Provenance indicators** – verified build badges for packages with npm provenance
+- **Provenance indicators** – verified build badges and provenance section below the README
 - **Multi-provider repository support** – stars/forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, Sourcehut, Forgejo, Gitea, Radicle, and Tangled
 - **JSR availability** – see if scoped packages are also available on JSR
 - **Package badges** – module format (ESM/CJS/dual), TypeScript types (with `@types/*` links), and engine constraints

app/components/AppPopover.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Position of the popover panel: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}>()
+
+const isOpen = shallowRef(false)
+const popoverId = useId()
+let closeTimeout: NodeJS.Timeout | null = null
+
+const closeDelayMs = 500
+
+// Panel placement relative to trigger
+const panelPositionClasses: Record<string, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2',
+  bottom: 'top-full left-1/2 -translate-x-1/2',
+  left: 'right-full top-1/2 -translate-y-1/2',
+  right: 'left-full top-1/2 -translate-y-1/2',
+}
+
+const panelPosition = computed(() => panelPositionClasses[props.position ?? 'bottom'])
+
+function clearCloseTimeout() {
+  if (closeTimeout !== null) {
+    clearTimeout(closeTimeout)
+    closeTimeout = null
+  }
+}
+
+function open() {
+  clearCloseTimeout()
+  isOpen.value = true
+}
+
+function close() {
+  clearCloseTimeout()
+  closeTimeout = setTimeout(() => {
+    closeTimeout = null
+    isOpen.value = false
+  }, closeDelayMs)
+}
+
+onBeforeUnmount(clearCloseTimeout)
+</script>
+
+<template>
+  <div
+    class="relative inline-flex"
+    @mouseenter="open"
+    @mouseleave="close"
+    @focusin="open"
+    @focusout="close"
+  >
+    <slot :popover-visible="isOpen" :popover-id="popoverId" />
+
+    <Transition
+      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        :id="popoverId"
+        role="dialog"
+        aria-modal="false"
+        class="absolute font-mono text-xs text-fg bg-bg-subtle border border-border rounded-lg shadow-lg z-[100] pointer-events-auto px-4 py-3 min-w-[14rem] max-w-[22rem] whitespace-normal"
+        :class="panelPosition"
+        @mouseenter="open"
+        @mouseleave="close"
+      >
+        <slot name="content" />
+      </div>
+    </Transition>
+  </div>
+</template>

app/components/PackageProvenanceSection.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { ProvenanceDetails } from '#shared/types'
+
+defineProps<{
+  /** Parsed provenance details from the API */
+  details: ProvenanceDetails
+  /** Optional: link "View on npm" to package provenance page */
+  packageName?: string
+  version?: string
+}>()
+</script>
+
+<template>
+  <section id="provenance" aria-labelledby="provenance-heading" class="scroll-mt-20">
+    <h2 id="provenance-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      <a
+        href="#provenance"
+        class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
+      >
+        {{ $t('package.provenance_section.title') }}
+        <span
+          class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+          aria-hidden="true"
+        />
+      </a>
+    </h2>
+
+    <div class="space-y-3 border border-border rounded-lg p-5">
+      <p class="flex items-center gap-2 text-sm text-fg m-0">
+        <span
+          class="i-solar-shield-check-outline w-4 h-4 shrink-0 text-emerald-500"
+          aria-hidden="true"
+        />
+        <span
+          v-html="
+            $t('package.provenance_section.built_and_signed_on', {
+              provider: `<b>${details.providerLabel}</b>`,
+            })
+          "
+        />
+      </p>
+      <a
+        v-if="details.buildSummaryUrl"
+        :href="details.buildSummaryUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link text-sm text-fg-muted block mt-1"
+      >
+        {{ $t('package.provenance_section.view_build_summary') }}
+      </a>
+
+      <dl class="m-0 mt-4 flex justify-between">
+        <div v-if="details.sourceCommitUrl" class="flex flex-col gap-0.5">
+          <dt class="font-mono text-xs text-fg-muted m-0">
+            {{ $t('package.provenance_section.source_commit') }}
+          </dt>
+          <dd class="m-0">
+            <a
+              :href="details.sourceCommitUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link font-mono text-sm break-all"
+            >
+              {{
+                details.sourceCommitSha
+                  ? `${details.sourceCommitSha.slice(0, 12)}`
+                  : details.sourceCommitUrl
+              }}
+            </a>
+          </dd>
+        </div>
+        <div v-if="details.buildFileUrl" class="flex flex-col gap-0.5">
+          <dt class="font-mono text-xs text-fg-muted m-0">
+            {{ $t('package.provenance_section.build_file') }}
+          </dt>
+          <dd class="m-0">
+            <a
+              :href="details.buildFileUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link font-mono text-sm break-all"
+            >
+              {{ details.buildFilePath ?? details.buildFileUrl }}
+            </a>
+          </dd>
+        </div>
+        <div v-if="details.publicLedgerUrl" class="flex flex-col gap-0.5">
+          <dt class="font-mono text-xs text-fg-muted m-0">
+            {{ $t('package.provenance_section.public_ledger') }}
+          </dt>
+          <dd class="m-0">
+            <a
+              :href="details.publicLedgerUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link text-sm"
+            >
+              {{ $t('package.provenance_section.transparency_log_entry') }}
+            </a>
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <p v-if="packageName && version" class="mt-4 m-0">
+      <a
+        :href="`https://www.npmjs.com/package/${packageName}/v/${version}#provenance`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link-subtle font-mono text-sm"
+      >
+        {{ $t('common.view_on_npm') }}
+      </a>
+    </p>
+  </section>
+</template>

app/pages/[...package].vue

@@ -2,6 +2,7 @@
 import type {
   NpmVersionDist,
   PackumentVersion,
+  ProvenanceDetails,
   ReadmeResponse,
   SkillsListResponse,
 } from '#shared/types'
@@ -141,6 +142,35 @@ const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
   () => displayVersion.value?.version ?? '',
 )
 
+const {
+  data: provenanceData,
+  status: provenanceStatus,
+  execute: fetchProvenance,
+} = useLazyFetch<ProvenanceDetails | null>(
+  () => {
+    const v = displayVersion.value
+    if (!v || !hasProvenance(v)) return ''
+    return `/api/registry/provenance/${packageName.value}/v/${v.version}`
+  },
+  {
+    default: () => null,
+    server: false,
+    immediate: false,
+  },
+)
+if (import.meta.client) {
+  watchEffect(() => {
+    if (displayVersion.value && hasProvenance(displayVersion.value)) {
+      fetchProvenance()
+    }
+  })
+}
+
+const provenanceBadgeMounted = shallowRef(false)
+onMounted(() => {
+  provenanceBadgeMounted.value = true
+})
+
 // Keep latestVersion for comparison (to show "(latest)" badge)
 const latestVersion = computed(() => {
   if (!pkg.value) return null
@@ -294,8 +324,6 @@ function getDependencyCount(version: PackumentVersion | null): number {
   return Object.keys(version.dependencies).length
 }
 
-// Check if a version has provenance/attestations
-// The dist object may have attestations that aren't in the base type
 function hasProvenance(version: PackumentVersion | null): boolean {
   if (!version?.dist) return false
   const dist = version.dist as NpmVersionDist
@@ -996,6 +1024,30 @@ function handleClick(event: MouseEvent) {
             $t('package.readme.view_on_github')
           }}</a>
         </p>
+
+        <section
+          v-if="hasProvenance(displayVersion) && provenanceBadgeMounted"
+          id="provenance"
+          class="scroll-mt-20"
+        >
+          <div
+            v-if="provenanceStatus === 'pending'"
+            class="mt-8 flex items-center gap-2 text-fg-subtle text-sm"
+          >
+            <span
+              class="i-carbon-circle-dash w-4 h-4 motion-safe:animate-spin"
+              aria-hidden="true"
+            />
+            <span>{{ $t('package.provenance_section.title') }}…</span>
+          </div>
+          <PackageProvenanceSection
+            v-else-if="provenanceData"
+            :details="provenanceData"
+            :package-name="pkg.name"
+            :version="displayVersion?.version"
+            class="mt-8"
+          />
+        </section>
       </section>
 
       <div class="area-sidebar">

i18n/locales/en.json

@@ -202,6 +202,16 @@
       "no_readme": "No README available.",
       "view_on_github": "View on GitHub"
     },
+    "provenance_section": {
+      "title": "Provenance",
+      "built_and_signed_on": "Built and signed on {provider}",
+      "view_build_summary": "View build summary",
+      "source_commit": "Source Commit",
+      "build_file": "Build File",
+      "public_ledger": "Public Ledger",
+      "transparency_log_entry": "Transparency log entry",
+      "view_more_details": "View more details"
+    },
     "keywords_title": "Keywords",
     "compatibility": "Compatibility",
     "card": {
@@ -600,7 +610,8 @@
     "provenance": {
       "verified": "verified",
       "verified_title": "Verified provenance",
-      "verified_via": "Verified: published via {provider}"
+      "verified_via": "Verified: published via {provider}",
+      "view_more_details": "View more details"
     },
     "jsr": {
       "title": "also available on JSR",

lunaria/files/en-US.json

@@ -202,6 +202,16 @@
       "no_readme": "No README available.",
       "view_on_github": "View on GitHub"
     },
+    "provenance_section": {
+      "title": "Provenance",
+      "built_and_signed_on": "Built and signed on {provider}",
+      "view_build_summary": "View build summary",
+      "source_commit": "Source Commit",
+      "build_file": "Build File",
+      "public_ledger": "Public Ledger",
+      "transparency_log_entry": "Transparency log entry",
+      "view_more_details": "View more details"
+    },
     "keywords_title": "Keywords",
     "compatibility": "Compatibility",
     "card": {
@@ -600,7 +610,8 @@
     "provenance": {
       "verified": "verified",
       "verified_title": "Verified provenance",
-      "verified_via": "Verified: published via {provider}"
+      "verified_via": "Verified: published via {provider}",
+      "view_more_details": "View more details"
     },
     "jsr": {
       "title": "also available on JSR",