feat: configurable provenance badge and dependency provenance donut (#165)

Author: antfu

CLAUDE.md

@@ -25,6 +25,7 @@ Migrate the Node Modules Inspector to use `devframe` as the underlying framework
 - [2026-05-19] Enhance maintainer actions view with catalog resolution and filtering - Resolve catalogs for workspace packages (e.g., "catalog:deps -> v0.2.16"), group results by package, and add filtering capability by package maintainers to improve actionability and organization of the view.
 - [2026-05-21] Refactor dependency upgrade view UI - Replace side panel with right-drawer layout, display version changes in table format for better alignment, remove "Message to Maintainer" feature, and refocus details page on dependency upgrade decisions rather than package-centric view.
 - [2026-05-21] Ignore monorepo dependencies in deps update actions - Exclude dependencies that share the same repository link from dependency update actions (e.g., nuxt and @nuxt/kit from the same monorepo) to avoid redundant or confusing update suggestions.
+- [2026-05-23] Consolidate provenance badge UI strategy - Move provenance indicator from main package view to "deps on" tab; replace donut visualization with progress bar (matching ESM/CJS style); add packageSpec badge slot for inline badge placement within version indicator parts; display provenance badge in the dependency tree within "deps on" tab for better information density and consistency.
 
 ### Open Questions
 - Which parts of the codebase need to be refactored vs. kept as-is?

packages/node-modules-inspector/src/app/components/display/PackageSpec.vue

@@ -41,5 +41,6 @@ const vulnerability = computed(() => getVulnerability(props.pkg))
         'op-fade': !deprecation?.current && !vulnerability,
       }"
     />
+    <slot />
   </span>
 </template>

packages/node-modules-inspector/src/app/components/display/ProvenanceBadge.vue

@@ -3,20 +3,32 @@ import type { PackageNode } from 'node-modules-tools'
 import { Tooltip } from 'floating-vue'
 import { computed } from 'vue'
 import { getNpmMeta } from '../../state/payload'
+import { settings } from '../../state/settings'
 
 const props = defineProps<{
   pkg: PackageNode
+  class?: string
 }>()
 
 const meta = computed(() => getNpmMeta(props.pkg))
 </script>
 
 <template>
-  <Tooltip v-if="meta?.provenance">
-    <div i-ph:circle-wavy-check-duotone text-primary-400 text-sm />
-    <template #popper>
-      This package is built and signed
-      {{ meta.provenance === 'trustedPublisher' ? 'by trusted publisher' : 'with provenance' }}
-    </template>
-  </Tooltip>
+  <template v-if="settings.showProvenanceBadge === 'present'">
+    <Tooltip v-if="meta?.provenance" inline-flex :class="props.class">
+      <div i-ph:circle-wavy-check-duotone ma h-1.1em text-primary-400 />
+      <template #popper>
+        This package is built and signed
+        {{ meta.provenance === 'trustedPublisher' ? 'by trusted publisher' : 'with provenance' }}
+      </template>
+    </Tooltip>
+  </template>
+  <template v-else-if="settings.showProvenanceBadge === 'absent'">
+    <Tooltip v-if="meta && !meta.provenance" inline-flex :class="props.class">
+      <div i-ph:circle-wavy-warning-duotone ma h-1.1em text-amber-400 />
+      <template #popper>
+        This package is not signed with provenance
+      </template>
+    </Tooltip>
+  </template>
 </template>

packages/node-modules-inspector/src/app/components/grid/Item.vue

@@ -18,8 +18,9 @@ defineProps<{
     @click="selectedNode = pkg === selectedNode ? undefined : pkg"
   >
     <div flex="~ gap-2 items-center" text-left>
-      <DisplayPackageSpec :pkg />
-      <DisplayProvenanceBadge :pkg />
+      <DisplayPackageSpec :pkg>
+        <DisplayProvenanceBadge :pkg class="translate-x-1 translate-y-0.55" />
+      </DisplayPackageSpec>
     </div>
     <div flex="~ wrap gap-2 items-center" text-sm>
       <DisplayModuleType :pkg />

packages/node-modules-inspector/src/app/components/panel/PackageDetails.vue

@@ -420,6 +420,13 @@ const thirdPartyServices = computed(() => {
             :pkg="pkg"
             :flat="settings.deepDependenciesTree"
           />
+          <div op-fade text-sm mt2>
+            Dependency Provenance
+          </div>
+          <UiPercentageProvenance
+            :pkg="pkg"
+            :flat="settings.deepDependenciesTree"
+          />
         </div>
 
         <template v-if="payloads.available.flatDependencies(pkg).length">

packages/node-modules-inspector/src/app/components/panel/PackageDetailsInfo.vue

@@ -49,7 +49,6 @@ function showDuplicatedGraph(pkgs: PackageNode[]) {
         font-mono text-2xl flex="~ wrap items-center gap-2"
         :class="deprecation?.latest ? deprecation.type === 'future' ? 'text-orange line-through' : 'text-red line-through' : ''"
       />
-
       <DisplayProvenanceBadge :pkg />
     </div>
 

packages/node-modules-inspector/src/app/components/panel/Settings.vue

@@ -28,6 +28,13 @@ const backend = getBackend()
       <OptionItem title="Show publish time badge" description="Show publish time badge on package list">
         <OptionCheckbox v-model="settings.showPublishTimeBadge" />
       </OptionItem>
+      <OptionItem title="Provenance badge" description="Show provenance indicator on packages">
+        <OptionSelectGroup
+          v-model="settings.showProvenanceBadge"
+          :options="['present', 'absent', 'none']"
+          :titles="['Present', 'Absent', 'None']"
+        />
+      </OptionItem>
       <OptionItem title="Colorize size badge" description="Colorize package size badge">
         <OptionCheckbox v-model="settings.colorizePackageSize" />
       </OptionItem>

packages/node-modules-inspector/src/app/components/tree/Item.vue

@@ -26,7 +26,9 @@ withDefaults(
     <slot name="before" />
     <DisplayModuleType v-if="showModuleType" :pkg />
     <DisplaySourceTypeBadge v-if="showSourceType" :pkg />
-    <DisplayPackageSpec :pkg />
+    <DisplayPackageSpec :pkg>
+      <DisplayProvenanceBadge :pkg class="translate-x-1 translate-y-0.55" />
+    </DisplayPackageSpec>
     <slot name="after" />
   </button>
 </template>

packages/node-modules-inspector/src/app/components/ui/PercentageProvenance.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PackageNode } from 'node-modules-tools'
+import { computed } from 'vue'
+import { getNpmMeta, payloads } from '../../state/payload'
+
+const props = withDefaults(
+  defineProps<{
+    pkg?: PackageNode
+    packages?: PackageNode[]
+    flat?: boolean
+    rounded?: boolean
+  }>(),
+  {
+    flat: false,
+    rounded: true,
+  },
+)
+
+const nodes = computed(() => {
+  const pkgs = props.pkg
+    ? [
+        props.pkg,
+        ...props.flat
+          ? payloads.available.flatDependencies(props.pkg)
+          : payloads.available.dependencies(props.pkg),
+      ]
+    : props.packages ?? []
+
+  let signed = 0
+  let unsigned = 0
+  for (const p of pkgs) {
+    if (getNpmMeta(p)?.provenance)
+      signed++
+    else
+      unsigned++
+  }
+
+  return [
+    { value: signed, name: 'SIGNED', class: 'badge-color-green', title: `${signed} dependencies signed with provenance` },
+    { value: unsigned, name: 'UNSIGNED', class: 'badge-color-gray', title: `${unsigned} dependencies not signed with provenance` },
+  ].filter(n => n.value > 0)
+})
+</script>
+
+<template>
+  <UiPercentage :nodes :rounded />
+</template>

packages/node-modules-inspector/src/app/state/settings.ts

@@ -12,6 +12,7 @@ export const settings = useLocalStorage<SettingsOptions>(
     colorizePackageSize: true,
     showInstallSizeBadge: true,
     showPublishTimeBadge: false,
+    showProvenanceBadge: 'present',
     showFileComposition: false,
     showDependencySourceBadge: 'dev',
     showPublintMessages: false,