diff --git a/packages/rolldown/src/app/components/compare/DeltaValue.vue b/packages/rolldown/src/app/components/compare/DeltaValue.vue
new file mode 100644
index 00000000..1ca4d3ec
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/DeltaValue.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { bytesToHumanSize } from '~/utils/format'
+
+const props = withDefaults(defineProps<{
+  value: number
+  format?: 'bytes' | 'duration' | 'number'
+  signed?: boolean
+}>(), {
+  format: 'number',
+  signed: false,
+})
+
+const sign = computed(() => {
+  if (!props.signed || props.value === 0)
+    return ''
+  return props.value > 0 ? '+' : '-'
+})
+
+const colorClass = computed(() => {
+  if (!props.signed || props.value === 0)
+    return 'text-gray-500'
+  return props.value > 0 ? 'text-red-500' : 'text-green-500'
+})
+
+const formatted = computed(() => {
+  const value = props.signed ? Math.abs(props.value) : props.value
+
+  if (props.format === 'bytes') {
+    if (value === 0) {
+      return {
+        amount: 0,
+        unit: 'B',
+      }
+    }
+    const [amount, unit] = bytesToHumanSize(value)
+    return { amount, unit }
+  }
+
+  if (props.format === 'duration') {
+    if (value >= 1000) {
+      return {
+        amount: +(value / 1000).toFixed(2),
+        unit: 's',
+      }
+    }
+    return {
+      amount: Math.round(value),
+      unit: 'ms',
+    }
+  }
+
+  return {
+    amount: value.toLocaleString(),
+    unit: '',
+  }
+})
+</script>
+
+<template>
+  <span font-mono ws-nowrap :class="colorClass">
+    {{ sign }}{{ formatted.amount }}<span v-if="formatted.unit" text-xs op75 ml-0.5>{{ formatted.unit }}</span>
+  </span>
+</template>
diff --git a/packages/rolldown/src/app/components/compare/SessionMeta.vue b/packages/rolldown/src/app/components/compare/SessionMeta.vue
index 36190f0f..19e3f5fc 100644
--- a/packages/rolldown/src/app/components/compare/SessionMeta.vue
+++ b/packages/rolldown/src/app/components/compare/SessionMeta.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
+export interface CompareSessionSummaryItem {
+  label: string
+  value: string
+  icon: string
+  tone?: 'increase' | 'decrease'
+}
+
 defineProps<{
   sessions: Array<{ id: string, createdAt: Date, title: string }>
+  summaries?: CompareSessionSummaryItem[][]
 }>()
 </script>
 
 <template>
   <div flex="~ gap5" w-full border="b base" pb3>
-    <div v-for="(item) of sessions" :key="item.id" flex-1 border="~ base rounded" p4 grid="~ cols-[max-content_140px_2fr] max-lg:cols-[max-content_80px_2fr] gap-2 items-center">
+    <div v-for="(item, index) of sessions" :key="item.id" flex-1 border="~ base rounded" p4 grid="~ cols-[max-content_140px_2fr] max-lg:cols-[max-content_80px_2fr] gap-2 items-center">
       <!-- session meta -->
       <div class="i-ph-hash-duotone" />
       <div>
@@ -23,6 +31,21 @@ defineProps<{
       <div font-mono>
         <time :datetime="item.createdAt.toISOString()">{{ item.createdAt.toLocaleString() }}</time>
       </div>
+
+      <div v-if="summaries?.[index]?.length" col-span-3 border="t base" mt2 pt3 flex="~ items-center gap-4 wrap">
+        <div v-for="summary of summaries?.[index] || []" :key="summary.label" flex="~ items-center gap-2">
+          <div :class="summary.icon" op50 />
+          <div text-xs op50>
+            {{ summary.label }}
+          </div>
+          <div
+            font-mono font-600
+            :class="summary.tone === 'increase' ? 'text-red-500' : summary.tone === 'decrease' ? 'text-green-500' : undefined"
+          >
+            {{ summary.value }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/rolldown/src/app/components/compare/SingleSideRow.vue b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
new file mode 100644
index 00000000..1580291e
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+
+interface SingleSideDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+}
+
+withDefaults(defineProps<{
+  sessionLabel: string
+  title: string
+  titleMeta?: string
+  delta: number
+  format: 'bytes' | 'duration' | 'number'
+  subtitle?: string
+  badges?: string[]
+  stats?: SingleSideDiffStat[]
+}>(), {
+  subtitle: '',
+  titleMeta: '',
+  badges: () => [],
+  stats: () => [],
+})
+</script>
+
+<template>
+  <div border="~ base rounded" p4 flex="~ col gap-3" hover="bg-active">
+    <div flex="~ items-start gap-3">
+      <div min-w-0 flex-1>
+        <div text-xs op50 mb1>
+          {{ sessionLabel }}
+        </div>
+        <div flex="~ items-baseline gap-2" min-w-0 font-mono :title="titleMeta ? `${title} (${titleMeta})` : title">
+          <span truncate>{{ title }}</span>
+          <span v-if="titleMeta" flex-none op50>({{ titleMeta }})</span>
+        </div>
+        <div v-if="subtitle" truncate text-xs op55 mt1 :title="subtitle">
+          {{ subtitle }}
+        </div>
+      </div>
+      <CompareDeltaValue :value="delta" :format="format" signed />
+    </div>
+
+    <div v-if="badges.length || stats.length" flex="~ items-center gap-2 wrap" text-xs>
+      <DisplayBadge v-for="badge of badges" :key="badge" :text="badge" />
+      <CompareStatsStrip :stats="stats" />
+    </div>
+  </div>
+</template>
diff --git a/packages/rolldown/src/app/components/compare/SplitRow.vue b/packages/rolldown/src/app/components/compare/SplitRow.vue
new file mode 100644
index 00000000..2cbcfaff
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/SplitRow.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import { computed } from 'vue'
+
+interface SplitDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+  hidden?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  previousTitle?: string
+  currentTitle?: string
+  previousTitleMeta?: string
+  currentTitleMeta?: string
+  previousSubtitle?: string
+  currentSubtitle?: string
+  previousStats?: SplitDiffStat[]
+  currentStats?: SplitDiffStat[]
+  previousBadges?: string[]
+  currentBadges?: string[]
+  previous: number
+  current: number
+  delta: number
+  format: 'bytes' | 'duration' | 'number'
+  ratioText?: string
+}>(), {
+  previousStats: () => [],
+  currentStats: () => [],
+  previousBadges: () => [],
+  currentBadges: () => [],
+  ratioText: '',
+})
+
+const ratioClass = computed(() => {
+  if (props.delta > 0)
+    return 'text-red-500'
+  if (props.delta < 0)
+    return 'text-green-500'
+  return 'text-gray-500'
+})
+</script>
+
+<template>
+  <div border="~ base rounded" of-hidden hover="bg-active">
+    <div border="b base" bg-base p3 flex="~ items-center justify-end">
+      <div flex="~ items-center gap-2 wrap justify-end">
+        <CompareDeltaValue :value="delta" :format="format" signed />
+        <span v-if="ratioText" rounded bg-active px2 py0.5 font-mono text-xs :class="ratioClass">
+          {{ ratioText }}
+        </span>
+      </div>
+    </div>
+
+    <div grid="~ cols-2" min-h-30>
+      <div p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !previousTitle }">
+        <template v-if="previousTitle">
+          <div min-w-0>
+            <div flex="~ items-center gap-2" text-xs op50 mb2>
+              <span i-ph-clock-counter-clockwise-duotone />
+              Session A
+            </div>
+            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="previousTitleMeta ? `${previousTitle} (${previousTitleMeta})` : previousTitle">
+              <span truncate>{{ previousTitle }}</span>
+              <span v-if="previousTitleMeta" flex-none font-400 op50>({{ previousTitleMeta }})</span>
+            </div>
+            <div v-if="previousSubtitle" truncate text-xs op50 mt1 :title="previousSubtitle">
+              {{ previousSubtitle }}
+            </div>
+          </div>
+          <div flex="~ items-end gap-3 justify-between">
+            <div min-w-0 flex="~ items-center gap-2 wrap">
+              <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
+              <CompareStatsStrip :stats="previousStats" />
+            </div>
+            <span text-lg font-600>
+              <CompareDeltaValue :value="previous" :format="format" />
+            </span>
+          </div>
+        </template>
+        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+          Not present
+        </div>
+      </div>
+
+      <div border="l base" p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !currentTitle }">
+        <template v-if="currentTitle">
+          <div min-w-0>
+            <div flex="~ items-center gap-2" text-xs op50 mb2>
+              <span i-ph-clock-duotone />
+              Session B
+            </div>
+            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="currentTitleMeta ? `${currentTitle} (${currentTitleMeta})` : currentTitle">
+              <span truncate>{{ currentTitle }}</span>
+              <span v-if="currentTitleMeta" flex-none font-400 op50>({{ currentTitleMeta }})</span>
+            </div>
+            <div v-if="currentSubtitle" truncate text-xs op50 mt1 :title="currentSubtitle">
+              {{ currentSubtitle }}
+            </div>
+          </div>
+          <div flex="~ items-end gap-3 justify-between">
+            <div min-w-0 flex="~ items-center gap-2 wrap">
+              <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
+              <CompareStatsStrip :stats="currentStats" />
+            </div>
+            <span text-lg font-600>
+              <CompareDeltaValue :value="current" :format="format" />
+            </span>
+          </div>
+        </template>
+        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+          Not present
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/rolldown/src/app/components/compare/StatsStrip.vue b/packages/rolldown/src/app/components/compare/StatsStrip.vue
new file mode 100644
index 00000000..d470c47c
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/StatsStrip.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface CompareStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+  hidden?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  stats?: CompareStat[]
+}>(), {
+  stats: () => [],
+})
+
+const visibleStats = computed(() => props.stats.filter(stat => !stat.hidden))
+</script>
+
+<template>
+  <div v-if="visibleStats.length" flex="~ items-baseline gap-1.5 wrap" min-w-0 text-xs>
+    <template v-for="(stat, index) of visibleStats" :key="stat.label">
+      <span v-if="index" op35>&middot;</span>
+      <span inline-flex items-baseline gap-1>
+        <span
+          font-mono font-600
+          :class="stat.tone === 'increase' ? 'text-red-500' : stat.tone === 'decrease' ? 'text-green-500' : 'op85'"
+        >
+          {{ stat.value }}
+        </span>
+        <span op55>{{ stat.label }}</span>
+      </span>
+    </template>
+  </div>
+</template>
diff --git a/packages/rolldown/src/app/components/compare/TabView.vue b/packages/rolldown/src/app/components/compare/TabView.vue
new file mode 100644
index 00000000..b8fbe034
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/TabView.vue
@@ -0,0 +1,679 @@
+<script setup lang="ts">
+import type {
+  SessionCompareChangeStatus,
+  SessionCompareContext,
+  SessionCompareDetails,
+  SessionCompareMetricValue,
+} from '~~/shared/types'
+import { computed, ref, watch } from 'vue'
+import { bytesToHumanSize } from '~/utils/format'
+
+type CompareTab = 'overview' | 'plugins' | 'chunks' | 'assets' | 'packages'
+type DiffMode = 'changed' | 'added' | 'removed'
+type DiffFormat = 'bytes' | 'duration' | 'number'
+type SummaryTone = 'increase' | 'decrease'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+interface SplitDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+  hidden?: boolean
+}
+
+interface SplitDiffRow extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  previousTitle?: string
+  currentTitle?: string
+  previousTitleMeta?: string
+  currentTitleMeta?: string
+  previousSubtitle?: string
+  currentSubtitle?: string
+  previousStats?: SplitDiffStat[]
+  currentStats?: SplitDiffStat[]
+  previousBadges: string[]
+  currentBadges: string[]
+  format: DiffFormat
+  ratioText: string
+}
+
+const props = defineProps<{
+  tab: CompareTab
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+
+const TABLE_LIMIT = 300
+
+const activeDiffMode = ref<DiffMode>('changed')
+const activeTabMeta = computed(() => props.tabs.find(tab => tab.id === props.tab))
+
+const comparisonMetrics = computed(() => {
+  const [sessionA, sessionB] = props.sessions
+  return [
+    {
+      name: 'Bundle Size',
+      description: 'Total file size of the assets',
+      icon: 'i-ph-package-duotone',
+      current: sessionB?.bundle_size ?? 0,
+      previous: sessionA?.bundle_size ?? 0,
+      format: 'bytes',
+    },
+    {
+      name: 'Initial JS',
+      description: 'Total file size of the initial JS chunks',
+      icon: 'i-ph-file-js-duotone',
+      current: sessionB?.initial_js ?? 0,
+      previous: sessionA?.initial_js ?? 0,
+      format: 'bytes',
+    },
+    {
+      name: 'Modules',
+      description: 'Total number of modules',
+      icon: 'i-ph-graph-duotone',
+      current: sessionB?.modules ?? 0,
+      previous: sessionA?.modules ?? 0,
+    },
+    {
+      name: 'Packages',
+      description: 'Total number of packages',
+      icon: 'i-ph-package-duotone',
+      current: props.details?.sessionStats.current.packages ?? 0,
+      previous: props.details?.sessionStats.previous.packages ?? 0,
+    },
+    {
+      name: 'Duplicated Packages',
+      description: 'Total number of duplicated packages',
+      icon: 'i-ph-package-duotone',
+      current: props.details?.sessionStats.current.duplicatedPackages ?? 0,
+      previous: props.details?.sessionStats.previous.duplicatedPackages ?? 0,
+    },
+    {
+      name: 'Plugins',
+      description: 'Total number of plugins',
+      icon: 'i-ph-plugs-duotone',
+      current: sessionB?.meta?.plugins.length ?? 0,
+      previous: sessionA?.meta?.plugins.length ?? 0,
+    },
+    {
+      name: 'Chunks',
+      description: 'Total number of chunks',
+      icon: 'i-ph-shapes-duotone',
+      current: sessionB?.chunks ?? 0,
+      previous: sessionA?.chunks ?? 0,
+    },
+    {
+      name: 'Assets',
+      description: 'Total number of assets',
+      icon: 'i-ph-package-duotone',
+      current: sessionB?.assets ?? 0,
+      previous: sessionA?.assets ?? 0,
+    },
+  ]
+})
+
+const sessionSummaries = computed(() => {
+  const [sessionA] = props.sessions
+
+  switch (props.tab) {
+    case 'assets':
+      return props.sessions.map((session, index) => [
+        {
+          label: 'Assets',
+          value: session.assets.toLocaleString(),
+          icon: 'i-ph-package-duotone',
+          tone: getSummaryTone(index, session.assets, sessionA?.assets),
+        },
+        {
+          label: 'Bundle',
+          value: formatBytesSummary(session.bundle_size),
+          icon: 'i-ph-hard-drives-duotone',
+          tone: getSummaryTone(index, session.bundle_size, sessionA?.bundle_size),
+        },
+        {
+          label: 'Initial JS',
+          value: formatBytesSummary(session.initial_js),
+          icon: 'i-ph-file-js-duotone',
+          tone: getSummaryTone(index, session.initial_js, sessionA?.initial_js),
+        },
+      ])
+    case 'chunks':
+      return props.sessions.map((session, index) => [
+        {
+          label: 'Chunks',
+          value: session.chunks.toLocaleString(),
+          icon: 'i-ph-shapes-duotone',
+          tone: getSummaryTone(index, session.chunks, sessionA?.chunks),
+        },
+        {
+          label: 'Modules',
+          value: session.modules.toLocaleString(),
+          icon: 'i-ph-graph-duotone',
+          tone: getSummaryTone(index, session.modules, sessionA?.modules),
+        },
+        {
+          label: 'Initial JS',
+          value: formatBytesSummary(session.initial_js),
+          icon: 'i-ph-file-js-duotone',
+          tone: getSummaryTone(index, session.initial_js, sessionA?.initial_js),
+        },
+      ])
+    case 'packages': {
+      const packageStatsA = getPackageSummaryStats(0)
+      return props.sessions.map((_session, index) => {
+        const packageStats = getPackageSummaryStats(index)
+        return [
+          {
+            label: 'Packages',
+            value: packageStats.packages.toLocaleString(),
+            icon: 'i-ph-package-duotone',
+            tone: getSummaryTone(index, packageStats.packages, packageStatsA.packages),
+          },
+          {
+            label: 'Duplicated',
+            value: packageStats.duplicatedPackages.toLocaleString(),
+            icon: 'i-ph-copy-duotone',
+            tone: getSummaryTone(index, packageStats.duplicatedPackages, packageStatsA.duplicatedPackages),
+          },
+          {
+            label: 'Code Size',
+            value: formatBytesSummary(packageStats.codeSize),
+            icon: 'i-ph-file-code-duotone',
+            tone: getSummaryTone(index, packageStats.codeSize, packageStatsA.codeSize),
+          },
+        ]
+      })
+    }
+    case 'plugins': {
+      const pluginStatsA = getPluginSummaryStats(0, sessionA)
+      return props.sessions.map((session, index) => {
+        const pluginStats = getPluginSummaryStats(index, session)
+        return [
+          {
+            label: 'Plugins',
+            value: pluginStats.plugins.toLocaleString(),
+            icon: 'i-ph-plugs-duotone',
+            tone: getSummaryTone(index, pluginStats.plugins, pluginStatsA.plugins),
+          },
+          {
+            label: 'Calls',
+            value: pluginStats.calls.toLocaleString(),
+            icon: 'i-ph-arrow-counter-clockwise-duotone',
+            tone: getSummaryTone(index, pluginStats.calls, pluginStatsA.calls),
+          },
+          {
+            label: 'Duration',
+            value: formatValue(pluginStats.duration, 'duration'),
+            icon: 'i-ph-clock-duotone',
+            tone: getSummaryTone(index, pluginStats.duration, pluginStatsA.duration),
+          },
+        ]
+      })
+    }
+    default:
+      return undefined
+  }
+})
+
+const assetDiffs = computed(() => changedEntries(props.details?.assets))
+const chunkDiffs = computed(() => changedEntries(props.details?.chunks))
+const packageDiffs = computed(() => changedEntries(props.details?.packages))
+const pluginDiffs = computed(() => changedEntries(props.details?.plugins))
+
+const assetRows = computed<SplitDiffRow[]>(() => assetDiffs.value.map(item => createSplitRow({
+  key: item.key,
+  status: item.status,
+  previousTitle: item.previousFilename,
+  currentTitle: item.currentFilename,
+  previousTitleMeta: formatAssetTitleMeta(item.chunkName),
+  currentTitleMeta: formatAssetTitleMeta(item.chunkName),
+  previous: item.previous,
+  current: item.current,
+  delta: item.delta,
+  deltaRatio: item.deltaRatio,
+  format: 'bytes',
+  previousBadges: [item.scope],
+  currentBadges: [item.scope],
+})))
+
+const chunkRows = computed<SplitDiffRow[]>(() => chunkDiffs.value.map(item => createSplitRow({
+  key: item.key,
+  status: item.status,
+  previousTitle: item.previousChunkId == null ? undefined : item.name,
+  currentTitle: item.currentChunkId == null ? undefined : item.name,
+  previousStats: createChunkStats(item.previousModules, item.previousImports),
+  currentStats: createChunkStats(item.currentModules, item.currentImports, {
+    modules: item.previousModules,
+    imports: item.previousImports,
+  }),
+  previous: item.previous,
+  current: item.current,
+  delta: item.delta,
+  deltaRatio: item.deltaRatio,
+  format: 'bytes',
+  previousBadges: [
+    item.reason,
+    item.previousInitial ? 'initial' : undefined,
+  ].filter(Boolean) as string[],
+  currentBadges: [
+    item.reason,
+    item.currentInitial ? 'initial' : undefined,
+  ].filter(Boolean) as string[],
+})))
+
+const packageRows = computed<SplitDiffRow[]>(() => packageDiffs.value.map(item => createSplitRow({
+  key: item.key,
+  status: item.status,
+  previousTitle: item.status === 'added' ? undefined : formatPackageTitle(item.name, item.previousVersion ?? item.version),
+  currentTitle: item.status === 'removed' ? undefined : formatPackageTitle(item.name, item.currentVersion ?? item.version),
+  previousStats: createPackageStats(item.previousFiles, item.previousImporters),
+  currentStats: createPackageStats(item.currentFiles, item.currentImporters, {
+    files: item.previousFiles,
+    importers: item.previousImporters,
+  }),
+  previous: item.previous,
+  current: item.current,
+  delta: item.delta,
+  deltaRatio: item.deltaRatio,
+  format: 'bytes',
+  previousBadges: [
+    item.previousType,
+    item.previousDuplicated ? 'duplicated' : undefined,
+  ].filter(Boolean) as string[],
+  currentBadges: [
+    item.currentType,
+    item.currentDuplicated ? 'duplicated' : undefined,
+  ].filter(Boolean) as string[],
+})))
+
+const pluginRows = computed<SplitDiffRow[]>(() => pluginDiffs.value.map(item => createSplitRow({
+  key: item.key,
+  status: item.status,
+  previousTitle: item.previousPluginId == null ? undefined : item.name,
+  currentTitle: item.currentPluginId == null ? undefined : item.name,
+  previousStats: createPluginStats(item.previousCalls, item.previousResolveDuration, item.previousLoadDuration, item.previousTransformDuration),
+  currentStats: createPluginStats(item.currentCalls, item.currentResolveDuration, item.currentLoadDuration, item.currentTransformDuration, {
+    calls: item.previousCalls,
+    resolve: item.previousResolveDuration,
+    load: item.previousLoadDuration,
+    transform: item.previousTransformDuration,
+  }),
+  previous: item.previous,
+  current: item.current,
+  delta: item.delta,
+  deltaRatio: item.deltaRatio,
+  format: 'duration',
+  previousBadges: [],
+  currentBadges: [],
+})))
+
+const activeRows = computed(() => {
+  switch (props.tab) {
+    case 'assets':
+      return assetRows.value
+    case 'chunks':
+      return chunkRows.value
+    case 'packages':
+      return packageRows.value
+    case 'plugins':
+      return pluginRows.value
+    default:
+      return []
+  }
+})
+
+const changedRows = computed(() => activeRows.value.filter(item => item.status === 'changed'))
+const addedRows = computed(() => activeRows.value.filter(item => item.status === 'added'))
+const removedRows = computed(() => activeRows.value.filter(item => item.status === 'removed'))
+
+const activeDiffRows = computed(() => {
+  switch (activeDiffMode.value) {
+    case 'added':
+      return addedRows.value
+    case 'removed':
+      return removedRows.value
+    case 'changed':
+    default:
+      return changedRows.value
+  }
+})
+
+const diffModeOptions = computed<Array<{
+  id: DiffMode
+  label: string
+  description: string
+  icon: string
+  count: number
+  delta: number
+  rows: SplitDiffRow[]
+}>>(() => {
+  return [
+    {
+      id: 'changed',
+      label: 'Changed',
+      icon: 'i-ph-arrows-left-right-duotone',
+      description: 'Matched entries with metric changes on both sides.',
+      count: changedRows.value.length,
+      delta: sumDelta(changedRows.value),
+      rows: changedRows.value.slice(0, TABLE_LIMIT),
+    },
+    {
+      id: 'added',
+      label: 'Added',
+      icon: 'i-ph-plus-circle-duotone',
+      description: 'Entries that only exist in the current session.',
+      count: addedRows.value.length,
+      delta: sumDelta(addedRows.value),
+      rows: addedRows.value.slice(0, TABLE_LIMIT),
+    },
+    {
+      id: 'removed',
+      label: 'Removed',
+      icon: 'i-ph-minus-circle-duotone',
+      description: 'Entries that existed before but are missing now.',
+      count: removedRows.value.length,
+      delta: sumDelta(removedRows.value),
+      rows: removedRows.value.slice(0, TABLE_LIMIT),
+    },
+  ]
+})
+
+const activeDiffOption = computed(() => diffModeOptions.value.find(item => item.id === activeDiffMode.value))
+
+watch(
+  [() => props.tab, () => props.details],
+  () => {
+    activeDiffMode.value = diffModeOptions.value.find(item => item.count > 0)?.id ?? 'changed'
+  },
+  { immediate: true },
+)
+
+const activeDiffFormat = computed(() => activeRows.value[0]?.format || 'bytes')
+
+const activeDiffEmptyText = computed(() => {
+  switch (activeDiffMode.value) {
+    case 'added':
+      return 'No added entries'
+    case 'removed':
+      return 'No removed entries'
+    case 'changed':
+    default:
+      return 'No changed entries'
+  }
+})
+
+function changedEntries<T extends { status: SessionCompareChangeStatus }>(items: T[] | undefined) {
+  return (items ?? [])
+    .filter(item => item.status !== 'unchanged')
+}
+
+function formatAssetTitleMeta(chunkName: string | undefined) {
+  return chunkName?.replace(/[[\]]/g, '')
+}
+
+function formatPackageTitle(name: string, version: string | undefined) {
+  if (!version || version === '(unknown)')
+    return name
+  return `${name}@${version}`
+}
+
+function createChunkStats(modules: number, imports: number, baseline?: { modules: number, imports: number }): SplitDiffStat[] {
+  return [
+    {
+      value: modules.toLocaleString(),
+      label: 'modules',
+      tone: getStatTone(modules, baseline?.modules),
+    },
+    {
+      value: imports.toLocaleString(),
+      label: 'imports',
+      tone: getStatTone(imports, baseline?.imports),
+    },
+  ]
+}
+
+function createPackageStats(files: number, importers: number, baseline?: { files: number, importers: number }): SplitDiffStat[] {
+  return [
+    {
+      value: files.toLocaleString(),
+      label: 'files',
+      tone: getStatTone(files, baseline?.files),
+    },
+    {
+      value: importers.toLocaleString(),
+      label: 'importers',
+      tone: getStatTone(importers, baseline?.importers),
+    },
+  ]
+}
+
+function createPluginStats(
+  calls: number,
+  resolve: number,
+  load: number,
+  transform: number,
+  baseline?: { calls: number, resolve: number, load: number, transform: number },
+): SplitDiffStat[] {
+  return [
+    {
+      value: calls.toLocaleString(),
+      label: 'calls',
+      tone: getStatTone(calls, baseline?.calls),
+    },
+    {
+      value: formatValue(resolve, 'duration'),
+      label: 'resolve',
+      tone: getStatTone(resolve, baseline?.resolve),
+      hidden: shouldHideZeroStat(resolve, baseline?.resolve),
+    },
+    {
+      value: formatValue(load, 'duration'),
+      label: 'load',
+      tone: getStatTone(load, baseline?.load),
+      hidden: shouldHideZeroStat(load, baseline?.load),
+    },
+    {
+      value: formatValue(transform, 'duration'),
+      label: 'transform',
+      tone: getStatTone(transform, baseline?.transform),
+      hidden: shouldHideZeroStat(transform, baseline?.transform),
+    },
+  ].filter(stat => !stat.hidden)
+}
+
+function shouldHideZeroStat(value: number, baseline: number | undefined) {
+  return value === 0 && (baseline == null || baseline === 0)
+}
+
+function getStatTone(value: number, baseline: number | undefined): SplitDiffStat['tone'] {
+  if (baseline == null || value === baseline)
+    return undefined
+  return value > baseline ? 'increase' : 'decrease'
+}
+
+function createSplitRow(row: Omit<SplitDiffRow, 'ratioText'>): SplitDiffRow {
+  return {
+    ...row,
+    ratioText: formatRatio(row),
+  }
+}
+
+function formatRatio(item: SessionCompareMetricValue) {
+  if (item.deltaRatio == null)
+    return item.previous === 0 && item.current > 0 ? 'new' : '-'
+  if (item.deltaRatio === 0)
+    return '0%'
+  const sign = item.deltaRatio > 0 ? '+' : ''
+  return `${sign}${(item.deltaRatio * 100).toFixed(2)}%`
+}
+
+function formatValue(value: number, format: DiffFormat) {
+  if (format === 'duration') {
+    if (value >= 1000)
+      return `${+(value / 1000).toFixed(2)}s`
+    return `${Math.round(value)}ms`
+  }
+
+  return value.toLocaleString()
+}
+
+function formatBytesSummary(value: number) {
+  if (!value)
+    return '0 B'
+  return bytesToHumanSize(value).join(' ')
+}
+
+function getSummaryTone(index: number, value: number, baseline: number | undefined): SummaryTone | undefined {
+  if (index === 0 || baseline == null || value === baseline)
+    return undefined
+  return value > baseline ? 'increase' : 'decrease'
+}
+
+function getPackageSummaryStats(index: number) {
+  const stats = index === 0
+    ? props.details?.sessionStats.previous
+    : props.details?.sessionStats.current
+
+  return {
+    packages: stats?.packages ?? 0,
+    duplicatedPackages: stats?.duplicatedPackages ?? 0,
+    codeSize: sumCompareSide(props.details?.packages, index, item => item.previous, item => item.current),
+  }
+}
+
+function getPluginSummaryStats(index: number, session: NormalizedSessionCompareContext | undefined) {
+  return {
+    plugins: session?.meta?.plugins.length ?? 0,
+    calls: sumCompareSide(props.details?.plugins, index, item => item.previousCalls, item => item.currentCalls),
+    duration: sumCompareSide(props.details?.plugins, index, item => item.previous, item => item.current),
+  }
+}
+
+function sumCompareSide<T>(items: T[] | undefined, index: number, getPrevious: (item: T) => number, getCurrent: (item: T) => number) {
+  return (items ?? []).reduce((total, item) => total + (index === 0 ? getPrevious(item) : getCurrent(item)), 0)
+}
+
+function sumDelta(rows: SplitDiffRow[]) {
+  return rows.reduce((total, row) => total + row.delta, 0)
+}
+</script>
+
+<template>
+  <div flex="~ col" border="~ base rounded-lg" p3 min-h-0 flex-1>
+    <div py3 px2 flex="~ items-center gap-2">
+      <div :class="activeTabMeta?.icon" />
+      {{ activeTabMeta?.label }}
+    </div>
+    <CompareSessionMeta :sessions="props.sessions" :summaries="sessionSummaries" />
+
+    <div flex-1 min-h-0 of-auto pt3>
+      <template v-if="props.tab === 'overview'">
+        <div grid="~ cols-6 gap5" w-full>
+          <div v-for="(item, index) of comparisonMetrics" :key="item.name" :class="index < 2 ? 'col-span-3' : 'col-span-2'" border="~ base rounded" p4 flex="~ col" gap2>
+            <CompareMetricCard v-bind="item" />
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <div flex="~ col gap-4">
+          <div grid="~ cols-3 gap-3">
+            <button
+              v-for="item of diffModeOptions"
+              :key="item.id"
+              type="button"
+              border="~ rounded"
+              p4
+              text-left
+              flex="~ col gap-3"
+              transition
+              :title="item.description"
+              :class="activeDiffMode === item.id ? 'border-active bg-active' : 'border-base hover:bg-active'"
+              @click="activeDiffMode = item.id"
+            >
+              <div flex="~ items-center gap-2" text-sm>
+                <span :class="item.icon" op60 />
+                <span font-600>{{ item.label }}</span>
+              </div>
+              <div flex="~ items-end gap-2">
+                <span text-3xl font-mono font-600>{{ item.count }}</span>
+                <CompareDeltaValue v-if="item.delta" :value="item.delta" :format="activeDiffFormat" signed />
+              </div>
+            </button>
+          </div>
+
+          <section v-if="activeDiffOption" flex="~ col gap-2">
+            <template v-if="activeDiffMode === 'changed'">
+              <CompareSplitRow
+                v-for="row of activeDiffOption.rows"
+                :key="row.key"
+                :previous-title="row.previousTitle"
+                :current-title="row.currentTitle"
+                :previous-title-meta="row.previousTitleMeta"
+                :current-title-meta="row.currentTitleMeta"
+                :previous-subtitle="row.previousSubtitle"
+                :current-subtitle="row.currentSubtitle"
+                :previous-stats="row.previousStats"
+                :current-stats="row.currentStats"
+                :previous-badges="row.previousBadges"
+                :current-badges="row.currentBadges"
+                :previous="row.previous"
+                :current="row.current"
+                :delta="row.delta"
+                :format="row.format"
+                :ratio-text="row.ratioText"
+              />
+            </template>
+
+            <template v-else-if="activeDiffMode === 'added'">
+              <div grid="~ cols-2 gap-3">
+                <CompareSingleSideRow
+                  v-for="row of activeDiffOption.rows"
+                  :key="row.key"
+                  session-label="Session B"
+                  :title="row.currentTitle || row.key"
+                  :title-meta="row.currentTitleMeta"
+                  :subtitle="row.currentSubtitle"
+                  :badges="row.currentBadges"
+                  :stats="row.currentStats"
+                  :delta="row.delta"
+                  :format="row.format"
+                />
+              </div>
+            </template>
+
+            <template v-else>
+              <div grid="~ cols-2 gap-3">
+                <CompareSingleSideRow
+                  v-for="row of activeDiffOption.rows"
+                  :key="row.key"
+                  session-label="Session A"
+                  :title="row.previousTitle || row.key"
+                  :title-meta="row.previousTitleMeta"
+                  :subtitle="row.previousSubtitle"
+                  :badges="row.previousBadges"
+                  :stats="row.previousStats"
+                  :delta="row.delta"
+                  :format="row.format"
+                />
+              </div>
+            </template>
+          </section>
+
+          <div v-if="!activeDiffRows.length" h40 flex="~ items-center justify-center" op50 italic>
+            {{ activeDiffEmptyText }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/packages/rolldown/src/app/components/display/ComparisonMetric.vue b/packages/rolldown/src/app/components/display/ComparisonMetric.vue
index e67bd0d7..eb49059d 100644
--- a/packages/rolldown/src/app/components/display/ComparisonMetric.vue
+++ b/packages/rolldown/src/app/components/display/ComparisonMetric.vue
@@ -16,7 +16,7 @@ const normalizedPercent = computed(() => {
   return Math.abs((props.current - props.previous) / props.previous * 100).toFixed(2)
 })
 const trendSymbol = computed(() => isNotChanged.value ? '' : (props.current > props.previous ? '+' : '-'))
-const comparisonColorClass = computed(() => isNotChanged.value ? 'text-gray-500' : (props.current > props.previous ? 'text-green-500' : 'text-red-500'))
+const comparisonColorClass = computed(() => isNotChanged.value ? 'text-gray-500' : (props.current > props.previous ? 'text-red-500' : 'text-green-500'))
 </script>
 
 <template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions].vue b/packages/rolldown/src/app/pages/compare/[sessions].vue
new file mode 100644
index 00000000..6fb6c58d
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions].vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from '#app/composables/router'
+import { useRpc } from '#imports'
+
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+const params = useRoute().params as {
+  sessions: string
+}
+
+const rpc = useRpc()
+const isLoading = ref(true)
+const sessions = ref<SessionCompareContext[]>([])
+const details = ref<SessionCompareDetails | null>(null)
+const compareTabs = [
+  {
+    id: 'overview',
+    label: 'Overview',
+    icon: 'i-ph-house-duotone',
+  },
+  {
+    id: 'plugins',
+    label: 'Plugins',
+    icon: 'i-ph-plugs-duotone',
+  },
+  {
+    id: 'chunks',
+    label: 'Chunks',
+    icon: 'i-ph-shapes-duotone',
+  },
+  {
+    id: 'assets',
+    label: 'Assets',
+    icon: 'i-ph-files-duotone',
+  },
+  {
+    id: 'packages',
+    label: 'Packages',
+    icon: 'i-ph-package-duotone',
+  },
+]
+
+const normalizedSessions = computed<NormalizedSessionCompareContext[]>(() => {
+  return sessions.value.map((session, index) => ({
+    ...session,
+    // @ts-expect-error missing type
+    createdAt: new Date(session.meta?.timestamp ?? 0),
+    title: index === 0 ? 'Session A' : 'Session B',
+  }))
+})
+
+useSideNav(() => {
+  return compareTabs.map(tab => ({
+    title: tab.label,
+    icon: tab.icon,
+    to: tab.id === 'overview'
+      ? `/compare/${params.sessions}`
+      : `/compare/${params.sessions}/${tab.id}`,
+  }))
+})
+
+onMounted(async () => {
+  const sessionIds = params.sessions.split(',')
+
+  const [summary, compareDetails] = await Promise.all([
+    rpc.value.call(
+      'vite:rolldown:get-session-compare-summary',
+      { sessions: sessionIds },
+    ),
+    rpc.value.call(
+      'vite:rolldown:get-session-compare-details',
+      { sessions: sessionIds },
+    ),
+  ])
+
+  sessions.value = summary
+  details.value = compareDetails
+  isLoading.value = false
+})
+</script>
+
+<template>
+  <VisualLoading v-if="isLoading" />
+  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+    <PanelSideNav />
+    <div of-auto h-screen max-h-screen relative p6 flex="~ col gap-4">
+      <div flex="~ gap-2 items-center">
+        <NuxtLink btn-action :to="{ path: `/` }">
+          <div i-ph-arrow-bend-up-left-duotone />
+          Re-select Session
+        </NuxtLink>
+      </div>
+
+      <NuxtPage
+        :sessions="normalizedSessions"
+        :details="details"
+        :tabs="compareTabs"
+      />
+    </div>
+  </div>
+</template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/assets.vue b/packages/rolldown/src/app/pages/compare/[sessions]/assets.vue
new file mode 100644
index 00000000..962c389f
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/assets.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+</script>
+
+<template>
+  <CompareTabView
+    tab="assets"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
+</template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/chunks.vue b/packages/rolldown/src/app/pages/compare/[sessions]/chunks.vue
new file mode 100644
index 00000000..4963e51a
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/chunks.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+</script>
+
+<template>
+  <CompareTabView
+    tab="chunks"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
+</template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/index.vue b/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
index 0175ca3a..9a39741e 100644
--- a/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
@@ -1,140 +1,28 @@
 <script setup lang="ts">
-import type { SessionCompareContext } from '~~/shared/types'
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from '#app/composables/router'
-import { useRpc } from '#imports'
-
-const isLoading = ref(false)
-const params = useRoute().params as {
-  sessions: string
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
 }
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
 
-const rpc = useRpc()
-const sessions = ref<SessionCompareContext[]>([])
-const packages = ref<{ total: number, duplicated: number }[]>([])
-
-async function getPackages(id: string) {
-  const packageMeta = await rpc.value.call('vite:rolldown:get-packages', { session: id })
-  const packages = packageMeta.packages
-  const duplicatedPackages = packages.filter(p => p.duplicated)
-  return {
-    total: packages.length,
-    duplicated: duplicatedPackages.length,
-  }
-}
-
-onMounted(async () => {
-  isLoading.value = true
-  const sessionIds = params.sessions.split(',')
-
-  const [summary, ..._packages] = await Promise.all([
-    rpc.value.call(
-      'vite:rolldown:get-session-compare-summary',
-      { sessions: sessionIds },
-    ),
-    ...sessionIds.map(id => getPackages(id)),
-  ])
-
-  sessions.value = summary
-  packages.value = _packages
-
-  isLoading.value = false
-})
-
-const normalizedSessions = computed<Array<SessionCompareContext & { createdAt: Date, title: string }>>(() => {
-  return sessions.value.map((session, index) => ({
-    ...session,
-    // @ts-expect-error missing type
-    createdAt: new Date(session.meta?.timestamp ?? 0),
-    title: index === 0 ? 'Session A' : 'Session B',
-  }))
-})
-
-const comparisonMetrics = computed(() => {
-  const [sessionA, sessionB] = normalizedSessions.value
-  return [
-    {
-      name: 'Bundle Size',
-      description: 'Total file size of the assets',
-      icon: 'i-ph-package-duotone',
-      current: sessionB?.bundle_size ?? 0,
-      previous: sessionA?.bundle_size ?? 0,
-      format: 'bytes',
-    },
-    {
-      name: 'Initial JS',
-      description: 'Total file size of the initial JS chunks',
-      icon: 'i-ph-file-js-duotone',
-      current: sessionB?.initial_js ?? 0,
-      previous: sessionA?.initial_js ?? 0,
-      format: 'bytes',
-    },
-    {
-      name: 'Modules',
-      description: 'Total number of modules',
-      icon: 'i-ph-graph-duotone',
-      current: sessionB?.modules ?? 0,
-      previous: sessionA?.modules ?? 0,
-    },
-    {
-      name: 'Packages',
-      description: 'Total number of packages',
-      icon: 'i-ph-package-duotone',
-      current: packages.value?.[1]?.total ?? 0,
-      previous: packages.value?.[0]?.total ?? 0,
-    },
-    {
-      name: 'Duplicated Packages',
-      description: 'Total number of duplicated packages',
-      icon: 'i-ph-package-duotone',
-      current: packages.value?.[1]?.duplicated ?? 0,
-      previous: packages.value?.[0]?.duplicated ?? 0,
-    },
-    {
-      name: 'Plugins',
-      description: 'Total number of plugins',
-      icon: 'i-ph-plugs-duotone',
-      current: sessionB?.meta?.plugins.length ?? 0,
-      previous: sessionA?.meta?.plugins.length ?? 0,
-    },
-    {
-      name: 'Chunks',
-      description: 'Total number of chunks',
-      icon: 'i-ph-shapes-duotone',
-      current: sessionB?.chunks ?? 0,
-      previous: sessionA?.chunks ?? 0,
-    },
-    {
-      name: 'Assets',
-      description: 'Total number of assets',
-      icon: 'i-ph-package-duotone',
-      current: sessionB?.assets ?? 0,
-      previous: sessionA?.assets ?? 0,
-    },
-  ]
-})
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
 </script>
 
 <template>
-  <VisualLoading v-if="isLoading" />
-  <div v-else h-screen w-screen max-w-screen max-h-screen of-hidden p6 flex="~ col gap-2">
-    <div flex="~ gap-2">
-      <NuxtLink btn-action :to="{ path: `/` }">
-        <div i-ph-arrow-bend-up-left-duotone />
-        Re-select Session
-      </NuxtLink>
-    </div>
-    <div flex="~ col" border="~ base rounded-lg" p3 mt10>
-      <div py3 indent-2>
-        Compare Overview
-      </div>
-      <!-- meta info -->
-      <CompareSessionMeta :sessions="normalizedSessions" />
-      <div grid="~ cols-6 gap5" w-full pt3>
-        <div v-for="(item, index) of comparisonMetrics" :key="item.name" :class="index < 2 ? 'col-span-3' : 'col-span-2'" border="~ base rounded" p4 flex="~ col" gap2>
-          <CompareMetricCard v-bind="item" />
-        </div>
-      </div>
-    </div>
-  </div>
+  <CompareTabView
+    tab="overview"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
 </template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/packages.vue b/packages/rolldown/src/app/pages/compare/[sessions]/packages.vue
new file mode 100644
index 00000000..79b56646
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/packages.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+</script>
+
+<template>
+  <CompareTabView
+    tab="packages"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
+</template>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/plugins.vue b/packages/rolldown/src/app/pages/compare/[sessions]/plugins.vue
new file mode 100644
index 00000000..0da81ed5
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/plugins.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+</script>
+
+<template>
+  <CompareTabView
+    tab="plugins"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
+</template>
diff --git a/packages/rolldown/src/node/rolldown/events-reader.ts b/packages/rolldown/src/node/rolldown/events-reader.ts
index 151920e6..66a41ea4 100644
--- a/packages/rolldown/src/node/rolldown/events-reader.ts
+++ b/packages/rolldown/src/node/rolldown/events-reader.ts
@@ -1,6 +1,6 @@
 import type { Event, HookLoadCallEnd, HookTransformCallEnd, HookTransformCallStart, SessionMeta } from '@rolldown/debug'
 import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo, RolldownResolveInfo } from '../../shared/types'
-import type { IndexedHookCall, LineLocation, ModuleEventIndex, PendingHookCallStart, RolldownLogCacheState } from './log-cache'
+import type { IndexedHookCall, LineLocation, ModuleEventIndex, PendingHookCallStart, PluginBuildMetricsSummary, RolldownLogCacheState } from './log-cache'
 import { Buffer } from 'node:buffer'
 import { createHash } from 'node:crypto'
 import fs from 'node:fs'
@@ -172,6 +172,26 @@ function estimateContentByteSizeFromLine(preview: Buffer, location: LineLocation
   return Math.max(0, location.length - contentStart - 128)
 }
 
+function summarizePluginCalls(calls: PluginBuildMetrics['calls']): Pick<PluginBuildMetricsSummary, 'total' | 'resolve' | 'load' | 'transform'> {
+  const summary: Pick<PluginBuildMetricsSummary, 'total' | 'resolve' | 'load' | 'transform'> = {
+    total: { count: 0, duration: 0 },
+    resolve: { count: 0, duration: 0 },
+    load: { count: 0, duration: 0 },
+    transform: { count: 0, duration: 0 },
+  }
+
+  for (const call of calls) {
+    const metric = summary[call.type]
+
+    summary.total.count += 1
+    summary.total.duration += call.duration
+    metric.count += 1
+    metric.duration += call.duration
+  }
+
+  return summary
+}
+
 function pruneReaders() {
   if (readers.size <= MAX_READERS)
     return
@@ -532,6 +552,27 @@ export class RolldownEventsReader {
     return this.pendingPackageSummaryRead
   }
 
+  async readPluginBuildMetricsSummary(): Promise<Map<number, PluginBuildMetricsSummary>> {
+    await this.read()
+
+    const stat = await fs.promises.stat(this.filepath)
+    const cachedSummary = await this.logCache.readPluginSummary(stat)
+    if (cachedSummary.size)
+      return cachedSummary
+
+    return new Map(
+      Array.from(this.manager.plugin_build_metrics.values()).map((metrics) => {
+        const summary: PluginBuildMetricsSummary = {
+          plugin_id: metrics.plugin_id,
+          plugin_name: metrics.plugin_name,
+          ...summarizePluginCalls(metrics.calls),
+        }
+
+        return [metrics.plugin_id, summary] as const
+      }),
+    )
+  }
+
   async ensurePackageSummaryCache() {
     const stat = await fs.promises.stat(this.filepath)
     this.packageSummaryTimestamp = stat.mtime.getTime()
diff --git a/packages/rolldown/src/node/rolldown/log-cache.ts b/packages/rolldown/src/node/rolldown/log-cache.ts
index e66b9e1b..f4efc850 100644
--- a/packages/rolldown/src/node/rolldown/log-cache.ts
+++ b/packages/rolldown/src/node/rolldown/log-cache.ts
@@ -73,12 +73,12 @@ interface RolldownModuleMetricsSummaryCacheSnapshot {
   metrics: Array<[string, ModuleBuildMetrics]>
 }
 
-interface PluginMetricSummary {
+export interface PluginMetricSummary {
   count: number
   duration: number
 }
 
-interface PluginBuildMetricsSummary {
+export interface PluginBuildMetricsSummary {
   plugin_id: number
   plugin_name: string
   total: PluginMetricSummary
@@ -404,6 +404,11 @@ export class RolldownLogCache {
     return true
   }
 
+  async readPluginSummary(stat: Stats) {
+    const cache = await this.pluginSummaryCache?.read(stat)
+    return new Map(cache?.plugins ?? [])
+  }
+
   async writeCompleteSession(stat: Stats, state: RolldownLogCacheState) {
     this.completeSessionWriteAttempted = true
     this.summaryWriteAttempted = true
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
new file mode 100644
index 00000000..51820a8e
--- /dev/null
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
@@ -0,0 +1,440 @@
+import type { PluginItem } from '@rolldown/debug'
+import type {
+  PackageInfo,
+  RolldownAssetInfo,
+  RolldownChunkInfo,
+  SessionCompareAssetDiff,
+  SessionCompareChangeStatus,
+  SessionCompareChunkDiff,
+  SessionCompareDetails,
+  SessionCompareMetricValue,
+  SessionComparePackageDiff,
+  SessionComparePluginDiff,
+} from '../../../shared/types'
+import type { RolldownEventsReader } from '../../rolldown/events-reader'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { extname } from 'pathe'
+import { getLogsManager } from '../utils'
+import { getPackageMeta } from './rolldown-get-packages'
+
+interface SessionCompareSource {
+  reader: RolldownEventsReader
+  assets: RolldownAssetInfo[]
+  chunks: RolldownChunkInfo[]
+  packages: PackageInfo[]
+}
+
+interface PluginProfile {
+  key: string
+  name: string
+  pluginId: number
+  duration: number
+  calls: number
+  resolveDuration: number
+  loadDuration: number
+  transformDuration: number
+}
+
+interface PackageProfile {
+  key: string
+  name: string
+  version: string
+  type?: PackageInfo['type']
+  duplicated: boolean
+  transformedCodeSize: number
+  files: PackageInfo['files']
+}
+
+function createMetric(previous: number, current: number): SessionCompareMetricValue {
+  const delta = current - previous
+
+  return {
+    previous,
+    current,
+    delta,
+    deltaRatio: previous === 0 ? (current === 0 ? 0 : null) : delta / previous,
+  }
+}
+
+function getStatus(previous: unknown, current: unknown, changed: boolean): SessionCompareChangeStatus {
+  if (!previous)
+    return 'added'
+  if (!current)
+    return 'removed'
+  return changed ? 'changed' : 'unchanged'
+}
+
+function compareMaps<TPrevious, TCurrent, TResult>(
+  previous: Map<string, TPrevious>,
+  current: Map<string, TCurrent>,
+  map: (key: string, previousItem: TPrevious | undefined, currentItem: TCurrent | undefined) => TResult,
+) {
+  return Array.from(new Set([...previous.keys(), ...current.keys()]))
+    .map(key => map(key, previous.get(key), current.get(key)))
+}
+
+function sortByDeltaImpact<T extends { delta: number, name?: string, key: string }>(items: T[]) {
+  return items.toSorted((a, b) => {
+    const impact = Math.abs(b.delta) - Math.abs(a.delta)
+    if (impact)
+      return impact
+    return (a.name || a.key).localeCompare(b.name || b.key)
+  })
+}
+
+function createUniqueMap<T>(items: T[], getKey: (item: T) => string) {
+  const seen = new Map<string, number>()
+  const map = new Map<string, T>()
+
+  for (const item of items) {
+    const baseKey = getKey(item)
+    const count = seen.get(baseKey) ?? 0
+    seen.set(baseKey, count + 1)
+    map.set(count === 0 ? baseKey : `${baseKey}#${count + 1}`, item)
+  }
+
+  return map
+}
+
+function normalizeAssetFilename(filename: string) {
+  return filename
+    .replace(/([._-])[a-f0-9]{8,}(?=\.)/gi, '$1[hash]')
+    .replace(/([._-])(?=[\w-]{8,}\.)(?=[\w-]*\d)[\w-]{8,}(?=\.)/g, '$1[hash]')
+}
+
+function getAssetType(filename: string) {
+  return extname(filename).replace(/^\./, '') || 'asset'
+}
+
+function getAssetKey(asset: RolldownAssetInfo, chunks: Map<number, RolldownChunkInfo>) {
+  const type = getAssetType(asset.filename)
+  const chunk = asset.chunk_id == null ? undefined : chunks.get(asset.chunk_id)
+
+  if (chunk) {
+    return `chunk:${chunk.name || chunk.entry_module || normalizeAssetFilename(asset.filename)}:${type}`
+  }
+
+  return `asset:${normalizeAssetFilename(asset.filename)}`
+}
+
+function getAssetScope(asset: RolldownAssetInfo | undefined, chunks: Map<number, RolldownChunkInfo>): SessionCompareAssetDiff['scope'] {
+  if (!asset || asset.chunk_id == null)
+    return 'static'
+  return chunks.get(asset.chunk_id)?.is_initial ? 'initial' : 'async'
+}
+
+function getChunkSize(reader: RolldownEventsReader, chunk: RolldownChunkInfo | undefined) {
+  if (!chunk)
+    return 0
+  const asset = reader.manager.chunkAssetMap.get(chunk.chunk_id)
+  if (asset)
+    return asset.size
+
+  return chunk.modules.reduce((total, id) => {
+    const transforms = reader.manager.modules.get(id)?.build_metrics?.transforms
+    return total + (transforms?.at(-1)?.transformed_code_size ?? 0)
+  }, 0)
+}
+
+function getChunkKey(chunk: RolldownChunkInfo) {
+  if (chunk.name)
+    return `name:${chunk.name}`
+  if (chunk.entry_module)
+    return `entry:${chunk.entry_module}`
+  return `modules:${chunk.modules.toSorted((a, b) => a.localeCompare(b)).join('\0')}`
+}
+
+function getPackageImporters(pkg: { files: PackageInfo['files'] } | undefined) {
+  return pkg?.files.reduce((total, file) => total + file.importers.length, 0) ?? 0
+}
+
+function mergePackageVersions(versions: Set<string>) {
+  return Array.from(versions)
+    .filter(version => version && version !== '(unknown)')
+    .toSorted((a, b) => a.localeCompare(b))
+    .join(', ')
+}
+
+function createPackageProfiles(packages: PackageInfo[]) {
+  const profiles = new Map<string, PackageProfile>()
+  const versionsByName = new Map<string, Set<string>>()
+
+  for (const pkg of packages) {
+    const key = pkg.name
+    const versions = versionsByName.get(key) ?? new Set<string>()
+    versions.add(pkg.version)
+    versionsByName.set(key, versions)
+
+    const existing = profiles.get(key)
+    if (!existing) {
+      profiles.set(key, {
+        key,
+        name: pkg.name,
+        version: pkg.version,
+        type: pkg.type,
+        duplicated: pkg.duplicated ?? false,
+        transformedCodeSize: pkg.transformedCodeSize,
+        files: pkg.files,
+      })
+      continue
+    }
+
+    profiles.set(key, {
+      ...existing,
+      version: mergePackageVersions(versions),
+      type: existing.type === pkg.type ? existing.type : undefined,
+      duplicated: true,
+      transformedCodeSize: existing.transformedCodeSize + pkg.transformedCodeSize,
+      files: [...existing.files, ...pkg.files],
+    })
+  }
+
+  for (const [key, profile] of profiles) {
+    profiles.set(key, {
+      ...profile,
+      version: mergePackageVersions(versionsByName.get(key) ?? new Set([profile.version])) || profile.version,
+      duplicated: profile.duplicated || (versionsByName.get(key)?.size ?? 0) > 1,
+    })
+  }
+
+  return profiles
+}
+
+async function createPluginProfiles(reader: RolldownEventsReader) {
+  const seen = new Map<string, number>()
+  const profiles = new Map<string, PluginProfile>()
+  const pluginSummaries = await reader.readPluginBuildMetricsSummary()
+
+  for (const plugin of reader.meta?.plugins ?? []) {
+    const key = getPluginKey(plugin, seen)
+    const metrics = reader.manager.plugin_build_metrics.get(plugin.plugin_id)
+    const calls = metrics?.calls ?? []
+    const summary = pluginSummaries.get(plugin.plugin_id)
+
+    profiles.set(key, {
+      key,
+      name: plugin.name,
+      pluginId: plugin.plugin_id,
+      duration: summary?.total.duration ?? calls.reduce((total, call) => total + call.duration, 0),
+      calls: summary?.total.count ?? calls.length,
+      resolveDuration: summary?.resolve.duration ?? calls.filter(call => call.type === 'resolve').reduce((total, call) => total + call.duration, 0),
+      loadDuration: summary?.load.duration ?? calls.filter(call => call.type === 'load').reduce((total, call) => total + call.duration, 0),
+      transformDuration: summary?.transform.duration ?? calls.filter(call => call.type === 'transform').reduce((total, call) => total + call.duration, 0),
+    })
+  }
+
+  return profiles
+}
+
+function getPluginKey(plugin: PluginItem, seen: Map<string, number>) {
+  const count = seen.get(plugin.name) ?? 0
+  seen.set(plugin.name, count + 1)
+  return count === 0 ? plugin.name : `${plugin.name}#${count + 1}`
+}
+
+function createCompareSource(reader: RolldownEventsReader): SessionCompareSource {
+  const chunks = Array.from(reader.manager.chunks.values()).map(chunk => ({
+    ...chunk,
+    asset: reader.manager.chunkAssetMap.get(chunk.chunk_id),
+  }))
+
+  return {
+    reader,
+    assets: Array.from(reader.manager.assets.values()),
+    chunks,
+    packages: getPackageMeta(reader).packages,
+  }
+}
+
+function compareAssets(previous: SessionCompareSource, current: SessionCompareSource): SessionCompareAssetDiff[] {
+  const previousChunks = new Map(previous.chunks.map(chunk => [chunk.chunk_id, chunk]))
+  const currentChunks = new Map(current.chunks.map(chunk => [chunk.chunk_id, chunk]))
+  const previousAssets = createUniqueMap(previous.assets, asset => getAssetKey(asset, previousChunks))
+  const currentAssets = createUniqueMap(current.assets, asset => getAssetKey(asset, currentChunks))
+
+  return sortByDeltaImpact(compareMaps(previousAssets, currentAssets, (key, previousAsset, currentAsset) => {
+    const previousSize = previousAsset?.size ?? 0
+    const currentSize = currentAsset?.size ?? 0
+    const metric = createMetric(previousSize, currentSize)
+    const chunk = currentAsset?.chunk_id != null
+      ? currentChunks.get(currentAsset.chunk_id)
+      : previousAsset?.chunk_id != null
+        ? previousChunks.get(previousAsset.chunk_id)
+        : undefined
+
+    return {
+      key,
+      status: getStatus(previousAsset, currentAsset, previousSize !== currentSize),
+      name: currentAsset?.filename ?? previousAsset?.filename ?? key,
+      previousFilename: previousAsset?.filename,
+      currentFilename: currentAsset?.filename,
+      type: getAssetType(currentAsset?.filename ?? previousAsset?.filename ?? ''),
+      scope: getAssetScope(currentAsset ?? previousAsset, currentAsset ? currentChunks : previousChunks),
+      chunkName: chunk?.name ?? undefined,
+      ...metric,
+    }
+  }))
+}
+
+function compareChunks(previous: SessionCompareSource, current: SessionCompareSource): SessionCompareChunkDiff[] {
+  const previousChunks = createUniqueMap(previous.chunks, getChunkKey)
+  const currentChunks = createUniqueMap(current.chunks, getChunkKey)
+
+  return sortByDeltaImpact(compareMaps(previousChunks, currentChunks, (key, previousChunk, currentChunk) => {
+    const previousSize = getChunkSize(previous.reader, previousChunk)
+    const currentSize = getChunkSize(current.reader, currentChunk)
+    const metric = createMetric(previousSize, currentSize)
+    const previousModules = previousChunk?.modules.length ?? 0
+    const currentModules = currentChunk?.modules.length ?? 0
+    const previousImports = previousChunk?.imports.length ?? 0
+    const currentImports = currentChunk?.imports.length ?? 0
+    const previousInitial = previousChunk?.is_initial ?? false
+    const currentInitial = currentChunk?.is_initial ?? false
+
+    return {
+      key,
+      status: getStatus(
+        previousChunk,
+        currentChunk,
+        previousSize !== currentSize
+        || previousModules !== currentModules
+        || previousImports !== currentImports
+        || previousInitial !== currentInitial,
+      ),
+      name: currentChunk?.name ?? previousChunk?.name ?? currentChunk?.entry_module ?? previousChunk?.entry_module ?? key,
+      reason: currentChunk?.reason ?? previousChunk?.reason,
+      previousChunkId: previousChunk?.chunk_id,
+      currentChunkId: currentChunk?.chunk_id,
+      previousModules,
+      currentModules,
+      previousImports,
+      currentImports,
+      previousInitial,
+      currentInitial,
+      ...metric,
+    }
+  }))
+}
+
+function comparePackages(previous: SessionCompareSource, current: SessionCompareSource): SessionComparePackageDiff[] {
+  const previousPackages = createPackageProfiles(previous.packages)
+  const currentPackages = createPackageProfiles(current.packages)
+
+  return sortByDeltaImpact(compareMaps(previousPackages, currentPackages, (key, previousPackage, currentPackage) => {
+    const previousSize = previousPackage?.transformedCodeSize ?? 0
+    const currentSize = currentPackage?.transformedCodeSize ?? 0
+    const previousFiles = previousPackage?.files.length ?? 0
+    const currentFiles = currentPackage?.files.length ?? 0
+    const previousImporters = getPackageImporters(previousPackage)
+    const currentImporters = getPackageImporters(currentPackage)
+    const previousDuplicated = previousPackage?.duplicated ?? false
+    const currentDuplicated = currentPackage?.duplicated ?? false
+    const metric = createMetric(previousSize, currentSize)
+
+    return {
+      key,
+      status: getStatus(
+        previousPackage,
+        currentPackage,
+        previousSize !== currentSize
+        || previousFiles !== currentFiles
+        || previousImporters !== currentImporters
+        || previousDuplicated !== currentDuplicated
+        || previousPackage?.type !== currentPackage?.type,
+      ),
+      name: currentPackage?.name ?? previousPackage?.name ?? key,
+      version: currentPackage?.version ?? previousPackage?.version ?? '',
+      previousVersion: previousPackage?.version,
+      currentVersion: currentPackage?.version,
+      previousType: previousPackage?.type,
+      currentType: currentPackage?.type,
+      previousDuplicated,
+      currentDuplicated,
+      previousFiles,
+      currentFiles,
+      previousImporters,
+      currentImporters,
+      ...metric,
+    }
+  }))
+}
+
+async function comparePlugins(previous: SessionCompareSource, current: SessionCompareSource): Promise<SessionComparePluginDiff[]> {
+  const [previousPlugins, currentPlugins] = await Promise.all([
+    createPluginProfiles(previous.reader),
+    createPluginProfiles(current.reader),
+  ])
+
+  return sortByDeltaImpact(compareMaps(previousPlugins, currentPlugins, (key, previousPlugin, currentPlugin) => {
+    const previousDuration = previousPlugin?.duration ?? 0
+    const currentDuration = currentPlugin?.duration ?? 0
+    const metric = createMetric(previousDuration, currentDuration)
+
+    return {
+      key,
+      status: getStatus(
+        previousPlugin,
+        currentPlugin,
+        previousDuration !== currentDuration
+        || previousPlugin?.calls !== currentPlugin?.calls
+        || previousPlugin?.resolveDuration !== currentPlugin?.resolveDuration
+        || previousPlugin?.loadDuration !== currentPlugin?.loadDuration
+        || previousPlugin?.transformDuration !== currentPlugin?.transformDuration,
+      ),
+      name: currentPlugin?.name ?? previousPlugin?.name ?? key,
+      previousPluginId: previousPlugin?.pluginId,
+      currentPluginId: currentPlugin?.pluginId,
+      previousCalls: previousPlugin?.calls ?? 0,
+      currentCalls: currentPlugin?.calls ?? 0,
+      previousResolveDuration: previousPlugin?.resolveDuration ?? 0,
+      currentResolveDuration: currentPlugin?.resolveDuration ?? 0,
+      previousLoadDuration: previousPlugin?.loadDuration ?? 0,
+      currentLoadDuration: currentPlugin?.loadDuration ?? 0,
+      previousTransformDuration: previousPlugin?.transformDuration ?? 0,
+      currentTransformDuration: currentPlugin?.transformDuration ?? 0,
+      ...metric,
+    }
+  }))
+}
+
+export const rolldownGetSessionCompareDetails = defineRpcFunction({
+  name: 'vite:rolldown:get-session-compare-details',
+  type: 'query',
+  cacheable: true,
+  setup: async (context) => {
+    const manager = getLogsManager(context)
+    return {
+      handler: async ({ sessions }: { sessions: string[] }): Promise<SessionCompareDetails> => {
+        const [previousSession, currentSession] = sessions
+        const [previousReader, currentReader] = await Promise.all([
+          manager.loadAssetSession(previousSession!),
+          manager.loadAssetSession(currentSession!),
+        ])
+        const previous = createCompareSource(previousReader)
+        const current = createCompareSource(currentReader)
+
+        const assets = compareAssets(previous, current)
+        const chunks = compareChunks(previous, current)
+        const packages = comparePackages(previous, current)
+        const plugins = await comparePlugins(previous, current)
+
+        return {
+          sessionStats: {
+            previous: {
+              packages: previous.packages.length,
+              duplicatedPackages: previous.packages.filter(pkg => pkg.duplicated).length,
+            },
+            current: {
+              packages: current.packages.length,
+              duplicatedPackages: current.packages.filter(pkg => pkg.duplicated).length,
+            },
+          },
+          assets,
+          chunks,
+          packages,
+          plugins,
+        }
+      },
+    }
+  },
+})
diff --git a/packages/rolldown/src/node/rpc/index.ts b/packages/rolldown/src/node/rpc/index.ts
index d4ed8a4e..e13418f6 100644
--- a/packages/rolldown/src/node/rpc/index.ts
+++ b/packages/rolldown/src/node/rpc/index.ts
@@ -8,6 +8,7 @@ import { rolldownGetModuleTransforms } from './functions/rolldown-get-module-tra
 import { rolldownGetPackageDetails } from './functions/rolldown-get-package-details'
 import { rolldownGetPackages } from './functions/rolldown-get-packages'
 import { rolldownGetPluginDetails } from './functions/rolldown-get-plugin-details'
+import { rolldownGetSessionCompareDetails } from './functions/rolldown-get-session-compare-details'
 import { rolldownGetSessionCompareSummary } from './functions/rolldown-get-session-compare-summary'
 import { rolldownGetSessionSummary } from './functions/rolldown-get-session-summary'
 import { rolldownListSessions } from './functions/rolldown-list-sessions'
@@ -23,6 +24,7 @@ export const rpcFunctions = [
   rolldownGetAssetDetails,
   rolldownGetPluginDetails,
   rolldownGetSessionCompareSummary,
+  rolldownGetSessionCompareDetails,
   rolldownGetChunkInfo,
   rolldownGetPackages,
   rolldownGetPackageDetails,
diff --git a/packages/rolldown/src/shared/types/data.ts b/packages/rolldown/src/shared/types/data.ts
index 4a74d9d0..4a3907c8 100644
--- a/packages/rolldown/src/shared/types/data.ts
+++ b/packages/rolldown/src/shared/types/data.ts
@@ -64,6 +64,91 @@ export interface SessionCompareContext {
   initial_js: number
 }
 
+export type SessionCompareChangeStatus = 'added' | 'removed' | 'changed' | 'unchanged'
+
+export interface SessionCompareMetricValue {
+  previous: number
+  current: number
+  delta: number
+  deltaRatio: number | null
+}
+
+export interface SessionCompareAssetDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  name: string
+  previousFilename?: string
+  currentFilename?: string
+  type: string
+  scope: 'initial' | 'async' | 'static'
+  chunkName?: string
+}
+
+export interface SessionCompareChunkDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  name: string
+  reason?: RolldownChunkInfo['reason']
+  previousChunkId?: number
+  currentChunkId?: number
+  previousModules: number
+  currentModules: number
+  previousImports: number
+  currentImports: number
+  previousInitial: boolean
+  currentInitial: boolean
+}
+
+export interface SessionComparePackageDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  name: string
+  version: string
+  previousVersion?: string
+  currentVersion?: string
+  previousType?: PackageInfo['type']
+  currentType?: PackageInfo['type']
+  previousDuplicated: boolean
+  currentDuplicated: boolean
+  previousFiles: number
+  currentFiles: number
+  previousImporters: number
+  currentImporters: number
+}
+
+export interface SessionComparePluginDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  name: string
+  previousPluginId?: number
+  currentPluginId?: number
+  previousCalls: number
+  currentCalls: number
+  previousResolveDuration: number
+  currentResolveDuration: number
+  previousLoadDuration: number
+  currentLoadDuration: number
+  previousTransformDuration: number
+  currentTransformDuration: number
+}
+
+export interface SessionCompareDetails {
+  sessionStats: {
+    previous: {
+      packages: number
+      duplicatedPackages: number
+    }
+    current: {
+      packages: number
+      duplicatedPackages: number
+    }
+  }
+  assets: SessionCompareAssetDiff[]
+  chunks: SessionCompareChunkDiff[]
+  packages: SessionComparePackageDiff[]
+  plugins: SessionComparePluginDiff[]
+}
+
 export interface ModuleInfo {
   id: string
   loads: RolldownModuleLoadInfo[]
diff --git a/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts b/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
index 5b860328..c1c48891 100644
--- a/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
+++ b/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { getModuleNameFromPath, isNodeModulePath } from '../filepath'
+import { getModuleNameFromPath, getPackageDirPath, getPnpmPackageInfoFromPath, isNodeModulePath } from '../filepath'
 
 describe('isNodeModulePath', () => {
   it('should return true if includes node_modules path', () => {
@@ -36,6 +36,52 @@ describe('getModuleNameFromPath', () => {
 
   it('should return normal package name', () => {
     expect(getModuleNameFromPath('/foo/bar/node_modules/vite')).toBe('vite')
+    expect(getModuleNameFromPath('node_modules/vite/index.js')).toBe('vite')
     expect(getModuleNameFromPath('C:\\foo\\node_modules\\@vitejs\\devtools')).toBe('@vitejs/devtools')
   })
 })
+
+describe('getPnpmPackageInfoFromPath', () => {
+  it('should parse package locator segments with peer suffixes', () => {
+    expect(getPnpmPackageInfoFromPath('/foo/node_modules/.pnpm/modern-monaco@0.4.0_typescript@5.8.3/node_modules/modern-monaco/index.js')).toEqual({
+      name: 'modern-monaco',
+      version: '0.4.0',
+    })
+    expect(getPnpmPackageInfoFromPath('/foo/node_modules/.pnpm/@vueuse+core@14.2.1_vue@3.5.13/node_modules/@vueuse/core/index.mjs')).toEqual({
+      name: '@vueuse/core',
+      version: '14.2.1',
+    })
+  })
+
+  it('should not depend on the virtual store directory name', () => {
+    expect(getPnpmPackageInfoFromPath('/foo/node_modules/.store/modern-monaco@0.4.0_typescript@5.8.3/index.js')).toEqual({
+      name: 'modern-monaco',
+      version: '0.4.0',
+    })
+  })
+
+  it('should not parse package subpaths as package locators', () => {
+    expect(getPnpmPackageInfoFromPath('/foo/node_modules/vite/foo@1.0.0/index.js')).toBeUndefined()
+  })
+})
+
+describe('getPackageDirPath', () => {
+  it('should return package names as-is', () => {
+    expect(getPackageDirPath('vite')).toBe('vite')
+    expect(getPackageDirPath('@vitejs/devtools')).toBe('@vitejs/devtools')
+    expect(getPackageDirPath('node_modules/vite/index.js')).toBe('node_modules/vite')
+  })
+
+  it('should return package roots for virtual store paths', () => {
+    expect(getPackageDirPath('/foo/node_modules/.pnpm/modern-monaco@0.4.0_typescript@5.8.3/node_modules/modern-monaco/index.js')).toBe('/foo/node_modules/.pnpm/modern-monaco@0.4.0_typescript@5.8.3/node_modules/modern-monaco')
+    expect(getPackageDirPath('/foo/node_modules/.pnpm/@vueuse+core@14.2.1_vue@3.5.13/index.mjs')).toBe('/foo/node_modules/.pnpm/@vueuse+core@14.2.1_vue@3.5.13')
+  })
+
+  it('should not depend on the virtual store directory name', () => {
+    expect(getPackageDirPath('/foo/node_modules/.store/@vueuse+core@14.2.1_vue@3.5.13/index.mjs')).toBe('/foo/node_modules/.store/@vueuse+core@14.2.1_vue@3.5.13')
+  })
+
+  it('should prefer normal package roots over package-like subpaths', () => {
+    expect(getPackageDirPath('/foo/node_modules/vite/foo@1.0.0/index.js')).toBe('/foo/node_modules/vite')
+  })
+})
diff --git a/packages/rolldown/src/shared/utils/filepath.ts b/packages/rolldown/src/shared/utils/filepath.ts
index ed507193..662d9882 100644
--- a/packages/rolldown/src/shared/utils/filepath.ts
+++ b/packages/rolldown/src/shared/utils/filepath.ts
@@ -1,3 +1,11 @@
+const NODE_MODULES = 'node_modules'
+
+export function normalizeModulePath(path: string) {
+  return path
+    .replace(/%2F/gi, '/')
+    .replace(/\\/g, '/')
+}
+
 export function isNodeModulePath(path: string) {
   return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)
 }
@@ -7,23 +15,122 @@ export function isPackageName(name: string) {
 }
 
 export function getModuleNameFromPath(path: string) {
-  if (isPackageName(path))
-    return path
-  const match = path.replace(/\\/g, '/').match(/.*\/node_modules\/(.*)$/)?.[1]
-  if (!match)
-    return undefined
-  if (match.startsWith('@'))
-    return match.split('/').slice(0, 2).join('/')
-  return match.split('/')[0]
+  const normalizedPath = normalizeModulePath(path)
+  if (isPackageName(normalizedPath))
+    return normalizedPath
+
+  const segments = normalizedPath.split('/')
+  const packageRoot = findNodeModulesPackage(segments)
+
+  return packageRoot?.name ?? findPackageLocator(segments)?.name
+}
+
+export function getPnpmPackageInfoFromPath(path: string) {
+  const segments = normalizeModulePath(path).split('/')
+  const packageLocator = findPackageLocator(segments)
+  if (packageLocator)
+    return { name: packageLocator.name, version: packageLocator.version }
+
+  return undefined
 }
 
 export function getPackageDirPath(path: string) {
-  const normalizedPath = path
-    .replace(/%2F/g, '/')
-    .replace(/\\/g, '/')
+  const normalizedPath = normalizeModulePath(path)
+
+  if (isPackageName(normalizedPath))
+    return normalizedPath
+
+  const segments = normalizedPath.split('/')
+  const packageRoot = findNodeModulesPackage(segments)
+
+  if (packageRoot)
+    return segments.slice(0, packageRoot.endIndex).join('/')
+
+  const packageLocator = findPackageLocator(segments)
+  if (packageLocator)
+    return segments.slice(0, packageLocator.index + 1).join('/')
+
+  return normalizedPath
+}
+
+function findNodeModulesPackage(segments: string[]) {
+  for (const nodeModulesIndex of getNodeModulesIndexes(segments)) {
+    const name = getPackageNameFromSegments(segments, nodeModulesIndex + 1)
+    if (!name)
+      continue
+
+    return {
+      name,
+      endIndex: nodeModulesIndex + 1 + (name.startsWith('@') ? 2 : 1),
+    }
+  }
+}
 
-  const nodeModulesPrefix = normalizedPath.match(/^(.+\/node_modules\/)/)?.[1]
-  const packageName = getModuleNameFromPath(path)
+function getPackageNameFromSegments(segments: string[], startIndex: number) {
+  const firstSegment = segments[startIndex]
+  if (!firstSegment)
+    return undefined
+
+  const packageName = firstSegment.startsWith('@')
+    ? `${firstSegment}/${segments[startIndex + 1] ?? ''}`
+    : firstSegment
+
+  return isPackageName(packageName) ? packageName : undefined
+}
+
+function findPackageLocator(segments: string[]) {
+  for (const nodeModulesIndex of getNodeModulesIndexes(segments)) {
+    if (getPackageNameFromSegments(segments, nodeModulesIndex + 1))
+      continue
+
+    const startIndex = nodeModulesIndex + 1
+    const nextNodeModulesIndex = segments.indexOf(NODE_MODULES, startIndex)
+    const boundaryIndex = nextNodeModulesIndex >= 0 ? nextNodeModulesIndex : segments.length
+
+    for (const candidateIndex of [startIndex, startIndex + 1]) {
+      if (candidateIndex >= boundaryIndex)
+        continue
+
+      const segment = segments[candidateIndex]
+      if (!segment)
+        continue
+
+      const packageLocator = parsePackageLocatorSegment(segment)
+      if (packageLocator)
+        return { ...packageLocator, index: candidateIndex }
+    }
+  }
+
+  return undefined
+}
+
+function getNodeModulesIndexes(segments: string[]) {
+  return segments
+    .map((segment, index) => segment === NODE_MODULES ? index : -1)
+    .filter(index => index >= 0)
+    .reverse()
+}
+
+function parsePackageLocatorSegment(segment: string): { name: string, version: string } | undefined {
+  const versionIndex = segment.startsWith('@')
+    ? segment.indexOf('@', 1)
+    : segment.indexOf('@')
+
+  if (versionIndex <= 0)
+    return undefined
+
+  const name = segment
+    .slice(0, versionIndex)
+    .replace(/\+/g, '/')
+  const version = segment
+    .slice(versionIndex + 1)
+    .split('_')[0]
+
+  if (!isPackageName(name) || !version)
+    return undefined
 
-  return nodeModulesPrefix! + packageName
+  return {
+    name,
+    version,
+  }
 }