feat: add provenance badges

danielroe · danielroe · commit 9fe53bd3a59f · 2026-01-22T21:43:33.000Z
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  /** Provider ID (e.g., "github", "gitlab") */
+  provider?: string
+  /** Package name for linking to npmjs.com provenance page */
+  packageName?: string
+  /** Package version for linking */
+  version?: string
+  /** Whether to show as compact (icon only) or full (with text) */
+  compact?: boolean
+}>()
+
+const providerLabels: Record<string, string> = {
+  github: 'GitHub Actions',
+  gitlab: 'GitLab CI',
+}
+</script>
+
+<template>
+  <a
+    v-if="packageName && version"
+    :href="`https://www.npmjs.com/package/${packageName}/v/${version}#provenance`"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200"
+    :title="provider ? `Verified: published via ${providerLabels[provider] ?? provider}` : 'Verified provenance'"
+  >
+    <span
+      class="i-solar-shield-check-outline shrink-0"
+      :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
+    />
+    <span
+      v-if="!compact"
+      class="sr-only sm:not-sr-only"
+    >verified</span>
+  </a>
+  <span
+    v-else
+    class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
+    :title="provider ? `Verified: published via ${providerLabels[provider] ?? provider}` : 'Verified provenance'"
+  >
+    <span
+      class="i-solar-shield-check-outline shrink-0"
+      :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'"
+    />
+    <span
+      v-if="!compact"
+      class="sr-only sm:not-sr-only"
+    >verified</span>
+  </span>
+</template>
diff --git a/app/pages/package/[...name].vue b/app/pages/package/[...name].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PackumentVersion } from '#shared/types'
+import type { PackumentVersion, NpmVersionDist } from '#shared/types'
 
 const route = useRoute('package-name')
 
@@ -124,6 +124,14 @@ 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
+  return !!dist.attestations
+}
+
 // Package manager install commands
 const packageManagers = [
   { id: 'npm', label: 'npm', action: 'install' },
@@ -229,16 +237,26 @@ defineOgImageComponent('Package', {
             <h1 class="font-mono text-2xl sm:text-3xl font-medium">
               {{ pkg.name }}
             </h1>
-            <span
+            <a
               v-if="displayVersion"
-              class="shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md"
+              :href="hasProvenance(displayVersion) ? `https://www.npmjs.com/package/${pkg.name}/v/${displayVersion.version}#provenance` : undefined"
+              :target="hasProvenance(displayVersion) ? '_blank' : undefined"
+              :rel="hasProvenance(displayVersion) ? 'noopener noreferrer' : undefined"
+              class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md transition-colors duration-200"
+              :class="hasProvenance(displayVersion) ? 'hover:border-border-hover cursor-pointer' : 'cursor-default'"
+              :title="hasProvenance(displayVersion) ? 'Verified provenance' : undefined"
             >
               v{{ displayVersion.version }}
               <span
                 v-if="requestedVersion && latestVersion && displayVersion.version !== latestVersion.version"
                 class="text-fg-subtle"
               >(not latest)</span>
-            </span>
+              <span
+                v-if="hasProvenance(displayVersion)"
+                class="i-solar-shield-check-outline w-4 h-4 text-fg-muted"
+                aria-label="Verified provenance"
+              />
+            </a>
           </div>
           <!-- Fixed height description container to prevent CLS -->
           <div
@@ -479,7 +497,7 @@ defineOgImageComponent('Package', {
             </div>
             <div class="flex items-center gap-2 px-4 pt-3 pb-4">
               <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-              <code class="font-mono text-sm"><ClientOnly><span class="text-fg">{{ selectedPMLabel }}</span> <span class="text-fg-muted">{{ selectedPMAction }}</span><span
+              <code class="font-mono text-sm"><ClientOnly><span class="text-fg">{{ selectedPMLabel }}</span> <span class="text-fg-muted">{{ selectedPMAction }}</span> <span
                 v-if="selectedPM !== 'deno'"
                 class="text-fg-muted"
               > {{ pkg.name }}</span><span
@@ -609,25 +627,33 @@ defineOgImageComponent('Package', {
               <div
                 v-for="version in sortedVersions.slice(0, 10)"
                 :key="version"
-                class="flex items-center justify-between py-1.5 text-sm"
+                class="flex items-center justify-between py-1.5 text-sm gap-2"
               >
                 <NuxtLink
                   :to="`/package/${pkg.name}/v/${version}`"
-                  class="font-mono text-fg-muted hover:text-fg transition-colors duration-200"
+                  class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-0"
                 >
                   {{ version }}
                   <span
                     v-if="pkg['dist-tags']?.latest === version"
                     class="ml-1 text-xs text-fg-subtle"
                   >(latest)</span>
                 </NuxtLink>
-                <time
-                  v-if="pkg.time[version]"
-                  :datetime="pkg.time[version]"
-                  class="text-xs text-fg-subtle"
-                >
-                  {{ formatDate(pkg.time[version]) }}
-                </time>
+                <div class="flex items-center gap-2 shrink-0">
+                  <time
+                    v-if="pkg.time[version]"
+                    :datetime="pkg.time[version]"
+                    class="text-xs text-fg-subtle"
+                  >
+                    {{ formatDate(pkg.time[version]) }}
+                  </time>
+                  <ProvenanceBadge
+                    v-if="pkg.versions[version] && hasProvenance(pkg.versions[version])"
+                    :package-name="pkg.name"
+                    :version="version"
+                    compact
+                  />
+                </div>
               </div>
             </div>
           </section>
@@ -648,11 +674,13 @@ defineOgImageComponent('Package', {
                 :href="`https://npmgraph.js.org/?q=${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle"
+                class="link-subtle text-fg-subtle"
                 aria-label="View dependency graph"
                 title="View dependency graph"
               >
-                <span class="i-carbon-network-3 w-4 h-4 inline-block" />
+                <span class="text-xs uppercase tracking-wider">
+                  Graph
+                </span>
               </a>
             </div>
             <ul class="space-y-1 list-none m-0 p-0">
diff --git a/app/pages/search.vue b/app/pages/search.vue
@@ -320,12 +320,21 @@ defineOgImageComponent('Default', {
                   <h2 class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all">
                     {{ result.package.name }}
                   </h2>
-                  <span
-                    v-if="result.package.version"
-                    class="font-mono text-xs text-fg-subtle shrink-0"
-                  >
-                    v{{ result.package.version }}
-                  </span>
+                  <div class="flex items-center gap-1.5 shrink-0">
+                    <span
+                      v-if="result.package.version"
+                      class="font-mono text-xs text-fg-subtle"
+                    >
+                      v{{ result.package.version }}
+                    </span>
+                    <ProvenanceBadge
+                      v-if="result.package.publisher?.trustedPublisher"
+                      :provider="result.package.publisher.trustedPublisher.id"
+                      :package-name="result.package.name"
+                      :version="result.package.version"
+                      compact
+                    />
+                  </div>
                 </header>
 
                 <p
diff --git a/app/pages/~[username].vue b/app/pages/~[username].vue
@@ -142,12 +142,21 @@ defineOgImageComponent('Default', {
                 <h3 class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all">
                   {{ result.package.name }}
                 </h3>
-                <span
-                  v-if="result.package.version"
-                  class="font-mono text-xs text-fg-subtle shrink-0"
-                >
-                  v{{ result.package.version }}
-                </span>
+                <div class="flex items-center gap-1.5 shrink-0">
+                  <span
+                    v-if="result.package.version"
+                    class="font-mono text-xs text-fg-subtle"
+                  >
+                    v{{ result.package.version }}
+                  </span>
+                  <ProvenanceBadge
+                    v-if="result.package.publisher?.trustedPublisher"
+                    :provider="result.package.publisher.trustedPublisher.id"
+                    :package-name="result.package.name"
+                    :version="result.package.version"
+                    compact
+                  />
+                </div>
               </header>
 
               <p
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -40,6 +40,7 @@ export default defineNuxtConfig({
   routeRules: {
     '/': { prerender: true },
     '/package/**': { isr: 60 },
+    '/~**': { isr: 60 },
     '/api/**': { isr: 60 },
     '/_v/script.js': { proxy: 'https://npmx.dev/_vercel/insights/script.js' },
     '/_v/view': { proxy: 'https://npmx.dev/_vercel/insights/view' },
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.18",
+    "@iconify-json/solar": "^1.2.5",
     "@npm/types": "^2.1.0",
     "@nuxt/test-utils": "3.23.0",
     "@playwright/test": "1.57.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/shared/types/npm-registry.ts b/shared/types/npm-registry.ts
@@ -41,6 +41,31 @@ export interface NpmSearchResult {
   }
 }
 
+/**
+ * Trusted publisher info from search API
+ * Present when package was published via OIDC (e.g., GitHub Actions)
+ */
+export interface NpmSearchTrustedPublisher {
+  /** OIDC provider identifier (e.g., "github", "gitlab") */
+  id: string
+  /** OIDC config ID */
+  oidcConfigId?: string
+}
+
+/**
+ * Publisher info with optional trusted publisher and actor details
+ */
+export interface NpmSearchPublisher extends NpmPerson {
+  /** Trusted publisher info (present if published via OIDC) */
+  trustedPublisher?: NpmSearchTrustedPublisher
+  /** Actor who triggered the publish (for trusted publishing) */
+  actor?: {
+    name: string
+    type: 'user' | 'team'
+    email?: string
+  }
+}
+
 export interface NpmSearchPackage {
   name: string
   scope?: string
@@ -55,7 +80,7 @@ export interface NpmSearchPackage {
     bugs?: string
   }
   author?: NpmPerson
-  publisher?: NpmPerson
+  publisher?: NpmSearchPublisher
   maintainers?: NpmPerson[]
 }
 
@@ -68,6 +93,39 @@ export interface NpmSearchScore {
   }
 }
 
+/**
+ * Attestations/provenance info on package version dist
+ * Present when package was published with provenance
+ * Note: Not covered by @npm/types
+ */
+export interface NpmVersionAttestations {
+  /** URL to fetch full attestation details */
+  url: string
+  /** Provenance info */
+  provenance: {
+    /** SLSA predicate type URL */
+    predicateType: string
+  }
+}
+
+/**
+ * Extended dist info that may include attestations
+ * The base PackumentVersion.dist doesn't include attestations
+ */
+export interface NpmVersionDist {
+  shasum: string
+  tarball: string
+  integrity?: string
+  fileCount?: number
+  unpackedSize?: number
+  signatures?: Array<{
+    keyid: string
+    sig: string
+  }>
+  /** Attestations/provenance (present if published with provenance) */
+  attestations?: NpmVersionAttestations
+}
+
 /**
  * Download counts API response
  * From https://api.npmjs.org/downloads/
