From 602ede892575e1b0676483835e8499cb9f6a5555 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 30 Apr 2026 15:27:57 +0800
Subject: [PATCH 1/2] feat: init

---
 .../app/components/compare/ChangeBadge.vue    |  47 ++
 .../src/app/components/compare/DeltaBar.vue   |  46 ++
 .../src/app/components/compare/DeltaValue.vue |  64 ++
 .../app/components/compare/SessionMeta.vue    |  21 +-
 .../app/components/compare/SingleSideRow.vue  |  62 ++
 .../src/app/components/compare/SplitRow.vue   | 134 ++++
 .../components/display/ComparisonMetric.vue   |   2 +-
 .../app/pages/compare/[sessions]/index.vue    | 642 +++++++++++++++++-
 .../rpc/functions/rolldown-get-packages.ts    | 102 +--
 .../rolldown-get-session-compare-details.ts   | 534 +++++++++++++++
 packages/rolldown/src/node/rpc/index.ts       |   2 +
 packages/rolldown/src/shared/types/data.ts    | 115 ++++
 .../shared/utils/__tests__/filepath.test.ts   |  27 +-
 .../rolldown/src/shared/utils/filepath.ts     |  51 +-
 packages/ui/src/components/PanelSideNav.vue   |   1 +
 packages/ui/src/composables/nav.ts            |   1 +
 16 files changed, 1765 insertions(+), 86 deletions(-)
 create mode 100644 packages/rolldown/src/app/components/compare/ChangeBadge.vue
 create mode 100644 packages/rolldown/src/app/components/compare/DeltaBar.vue
 create mode 100644 packages/rolldown/src/app/components/compare/DeltaValue.vue
 create mode 100644 packages/rolldown/src/app/components/compare/SingleSideRow.vue
 create mode 100644 packages/rolldown/src/app/components/compare/SplitRow.vue
 create mode 100644 packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts

diff --git a/packages/rolldown/src/app/components/compare/ChangeBadge.vue b/packages/rolldown/src/app/components/compare/ChangeBadge.vue
new file mode 100644
index 00000000..91898621
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/ChangeBadge.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { SessionCompareChangeStatus } from '~~/shared/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: SessionCompareChangeStatus
+}>()
+
+const badge = computed(() => {
+  switch (props.status) {
+    case 'added':
+      return {
+        label: 'Added',
+        icon: 'i-ph-plus-circle-duotone',
+        class: 'text-red-500 bg-red-500/10',
+      }
+    case 'removed':
+      return {
+        label: 'Removed',
+        icon: 'i-ph-minus-circle-duotone',
+        class: 'text-green-500 bg-green-500/10',
+      }
+    case 'changed':
+      return {
+        label: 'Changed',
+        icon: 'i-ph-arrows-clockwise-duotone',
+        class: 'text-amber-500 bg-amber-500/10',
+      }
+    default:
+      return {
+        label: 'Unchanged',
+        icon: 'i-ph-check-circle-duotone',
+        class: 'text-gray-500 bg-gray-500/10',
+      }
+  }
+})
+</script>
+
+<template>
+  <span
+    inline-flex items-center gap-1 rounded px2 py1 text-xs font-500
+    :class="badge.class"
+  >
+    <span :class="badge.icon" />
+    {{ badge.label }}
+  </span>
+</template>
diff --git a/packages/rolldown/src/app/components/compare/DeltaBar.vue b/packages/rolldown/src/app/components/compare/DeltaBar.vue
new file mode 100644
index 00000000..4f0b99e3
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/DeltaBar.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  delta: number
+  maxDelta?: number
+}>(), {
+  maxDelta: 1,
+})
+
+const width = computed(() => {
+  if (!props.maxDelta)
+    return 0
+  return Math.min(Math.abs(props.delta) / props.maxDelta * 50, 50)
+})
+
+const style = computed(() => {
+  if (props.delta >= 0) {
+    return {
+      left: '50%',
+      width: `${width.value}%`,
+    }
+  }
+
+  return {
+    left: `${50 - width.value}%`,
+    width: `${width.value}%`,
+  }
+})
+
+const barClass = computed(() => {
+  if (props.delta > 0)
+    return 'bg-red-500/80'
+  if (props.delta < 0)
+    return 'bg-green-500/80'
+  return 'bg-gray-500/50'
+})
+</script>
+
+<template>
+  <div h-7 relative flex="~ items-center">
+    <div absolute inset-x-0 h-1 rounded-full bg-base />
+    <div absolute left="1/2" top-0 bottom-0 w-px bg-base />
+    <div absolute h-2 rounded-full :class="barClass" :style="style" />
+  </div>
+</template>
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..b27d939c 100644
--- a/packages/rolldown/src/app/components/compare/SessionMeta.vue
+++ b/packages/rolldown/src/app/components/compare/SessionMeta.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+export interface CompareSessionSummaryItem {
+  label: string
+  value: string
+  icon: string
+}
+
 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 +30,18 @@ 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>
+            {{ 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..c9b7aa39
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+
+interface SingleSideDiffStat {
+  value: string
+  label: string
+  tone?: 'increase' | 'decrease'
+}
+
+withDefaults(defineProps<{
+  status: 'added' | 'removed'
+  sessionLabel: string
+  title: string
+  titleMeta?: string
+  value: number
+  delta: number
+  format: 'bytes' | 'duration' | 'number'
+  subtitle?: string
+  badges?: string[]
+  stats?: SingleSideDiffStat[]
+  ratioText?: string
+}>(), {
+  subtitle: '',
+  titleMeta: '',
+  badges: () => [],
+  stats: () => [],
+  ratioText: '',
+})
+</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" />
+      <span v-if="stats.length" flex="~ items-baseline gap-1" op55>
+        <span>(</span>
+        <template v-for="(stat, index) of stats" :key="stat.label">
+          <span v-if="index" op70>|</span>
+          <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
+          <span>{{ stat.label }}</span>
+        </template>
+        <span>)</span>
+      </span>
+    </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..8e999897
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/SplitRow.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { SessionCompareChangeStatus } from '~~/shared/types'
+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<{
+  status: SessionCompareChangeStatus
+  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-center gap-2 wrap">
+            <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
+            <span v-if="previousStats.length" flex="~ items-baseline gap-1" text-xs op55>
+              <span>(</span>
+              <template v-for="(stat, index) of previousStats" :key="stat.label">
+                <span v-if="index" op70>|</span>
+                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
+                <span>{{ stat.label }}</span>
+              </template>
+              <span>)</span>
+            </span>
+            <span flex-1 />
+            <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-center gap-2 wrap">
+            <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
+            <span v-if="currentStats.length" flex="~ items-baseline gap-1" text-xs op55>
+              <span>(</span>
+              <template v-for="(stat, index) of currentStats" :key="stat.label">
+                <span v-if="index" op70>|</span>
+                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
+                <span>{{ stat.label }}</span>
+              </template>
+              <span>)</span>
+            </span>
+            <span flex-1 />
+            <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/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]/index.vue b/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
index 0dee7855..235a3457 100644
--- a/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
@@ -1,8 +1,45 @@
 <script setup lang="ts">
-import type { SessionCompareContext } from '~~/shared/types'
+import type {
+  SessionCompareChangeStatus,
+  SessionCompareContext,
+  SessionCompareDetails,
+  SessionCompareMetricValue,
+} from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
-import { computed, onMounted, ref } from 'vue'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { bytesToHumanSize } from '~/utils/format'
+
+type CompareTab = 'overview' | 'assets' | 'chunks' | 'packages' | 'plugins' | 'modules'
+type DiffMode = 'changed' | 'added' | 'removed'
+type DiffFormat = 'bytes' | 'duration' | 'number'
+
+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 TABLE_LIMIT = 300
 
 const isLoading = ref(false)
 const params = useRoute().params as {
@@ -11,31 +48,27 @@ const params = useRoute().params as {
 
 const rpc = useRpc()
 const sessions = ref<SessionCompareContext[]>([])
-const packages = ref<{ total: number, duplicated: number }[]>([])
-
-async function getPackages(id: string) {
-  const packages = await rpc.value.call('vite:rolldown:get-packages', { session: id })
-  const duplicatedPackages = packages.filter(p => p.duplicated)
-  return {
-    total: packages.length,
-    duplicated: duplicatedPackages.length,
-  }
-}
+const details = ref<SessionCompareDetails | null>(null)
+const activeTab = ref<CompareTab>('overview')
+const activeDiffMode = ref<DiffMode>('changed')
 
 onMounted(async () => {
   isLoading.value = true
   const sessionIds = params.sessions.split(',')
 
-  const [summary, ..._packages] = await Promise.all([
+  const [summary, compareDetails] = await Promise.all([
     rpc.value.call(
       'vite:rolldown:get-session-compare-summary',
       { sessions: sessionIds },
     ),
-    ...sessionIds.map(id => getPackages(id)),
+    rpc.value.call(
+      'vite:rolldown:get-session-compare-details',
+      { sessions: sessionIds },
+    ),
   ])
 
   sessions.value = summary
-  packages.value = _packages
+  details.value = compareDetails
 
   isLoading.value = false
 })
@@ -79,15 +112,15 @@ const comparisonMetrics = computed(() => {
       name: 'Packages',
       description: 'Total number of packages',
       icon: 'i-ph-package-duotone',
-      current: packages.value?.[1]?.total ?? 0,
-      previous: packages.value?.[0]?.total ?? 0,
+      current: details.value?.sessionStats.current.packages ?? 0,
+      previous: details.value?.sessionStats.previous.packages ?? 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,
+      current: details.value?.sessionStats.current.duplicatedPackages ?? 0,
+      previous: details.value?.sessionStats.previous.duplicatedPackages ?? 0,
     },
     {
       name: 'Plugins',
@@ -112,26 +145,567 @@ const comparisonMetrics = computed(() => {
     },
   ]
 })
+
+const sessionSummaries = computed(() => {
+  switch (activeTab.value) {
+    case 'assets':
+      return normalizedSessions.value.map(session => [
+        {
+          label: 'Assets',
+          value: session.assets.toLocaleString(),
+          icon: 'i-ph-package-duotone',
+        },
+        {
+          label: 'Bundle',
+          value: formatBytesSummary(session.bundle_size),
+          icon: 'i-ph-hard-drives-duotone',
+        },
+        {
+          label: 'Initial JS',
+          value: formatBytesSummary(session.initial_js),
+          icon: 'i-ph-file-js-duotone',
+        },
+      ])
+    case 'chunks':
+      return normalizedSessions.value.map(session => [
+        {
+          label: 'Chunks',
+          value: session.chunks.toLocaleString(),
+          icon: 'i-ph-shapes-duotone',
+        },
+        {
+          label: 'Modules',
+          value: session.modules.toLocaleString(),
+          icon: 'i-ph-graph-duotone',
+        },
+        {
+          label: 'Initial JS',
+          value: formatBytesSummary(session.initial_js),
+          icon: 'i-ph-file-js-duotone',
+        },
+      ])
+    default:
+      return undefined
+  }
+})
+
+const tabs = computed<Array<{ id: CompareTab, label: string, icon: string, count?: number }>>(() => [
+  {
+    id: 'overview',
+    label: 'Overview',
+    icon: 'i-ph-squares-four-duotone',
+  },
+  {
+    id: 'assets',
+    label: 'Assets',
+    icon: 'i-ph-package-duotone',
+    count: getChangedCount(details.value?.summary.assets),
+  },
+  {
+    id: 'chunks',
+    label: 'Chunks',
+    icon: 'i-ph-shapes-duotone',
+    count: getChangedCount(details.value?.summary.chunks),
+  },
+  {
+    id: 'packages',
+    label: 'Packages',
+    icon: 'i-ph-package-duotone',
+    count: getChangedCount(details.value?.summary.packages),
+  },
+  {
+    id: 'plugins',
+    label: 'Plugins',
+    icon: 'i-ph-plugs-duotone',
+    count: getChangedCount(details.value?.summary.plugins),
+  },
+  {
+    id: 'modules',
+    label: 'Modules',
+    icon: 'i-ph-graph-duotone',
+    count: getChangedCount(details.value?.summary.modules),
+  },
+])
+
+const compareSideNavItems = computed(() => tabs.value.map(tab => ({
+  title: tab.count ? `${tab.label} (${tab.count})` : tab.label,
+  icon: tab.icon,
+  active: activeTab.value === tab.id,
+  action: () => {
+    activeTab.value = tab.id
+  },
+})))
+
+watch(activeTab, () => {
+  activeDiffMode.value = 'changed'
+})
+
+const changedAssets = computed(() => changedOnly(details.value?.assets))
+const changedChunks = computed(() => changedOnly(details.value?.chunks))
+const changedPackages = computed(() => changedOnly(details.value?.packages))
+const changedPlugins = computed(() => changedOnly(details.value?.plugins))
+const changedModules = computed(() => changedOnly(details.value?.modules))
+
+const assetRows = computed<SplitDiffRow[]>(() => changedAssets.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[]>(() => changedChunks.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[]>(() => changedPackages.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[]>(() => changedPlugins.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: ['plugin'],
+  currentBadges: ['plugin'],
+})))
+
+const moduleRows = computed<SplitDiffRow[]>(() => changedModules.value.map(item => createSplitRow({
+  key: item.key,
+  status: item.status,
+  previousTitle: item.status === 'added' ? undefined : item.id,
+  currentTitle: item.status === 'removed' ? undefined : item.id,
+  previousSubtitle: [
+    item.kind,
+    item.fileType,
+    `chunks ${item.previousChunks.length}`,
+    `imports ${item.previousImports}`,
+    `importers ${item.previousImporters}`,
+  ].join(' · '),
+  currentSubtitle: [
+    item.kind,
+    item.fileType,
+    `chunks ${item.currentChunks.length}`,
+    `imports ${item.currentImports}`,
+    `importers ${item.currentImporters}`,
+  ].join(' · '),
+  previous: item.previous,
+  current: item.current,
+  delta: item.delta,
+  deltaRatio: item.deltaRatio,
+  format: 'bytes',
+  previousBadges: [item.kind, item.fileType],
+  currentBadges: [item.kind, item.fileType],
+})))
+
+const activeRows = computed(() => {
+  switch (activeTab.value) {
+    case 'assets':
+      return assetRows.value
+    case 'chunks':
+      return chunkRows.value
+    case 'packages':
+      return packageRows.value
+    case 'plugins':
+      return pluginRows.value
+    case 'modules':
+      return moduleRows.value
+    default:
+      return []
+  }
+})
+
+const changedRows = computed(() => activeRows.value.filter(item => item.status === 'changed' && item.delta !== 0))
+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
+  title: string
+  description: string
+  icon: string
+  count: number
+  delta: number
+  rows: SplitDiffRow[]
+}>>(() => {
+  return [
+    {
+      id: 'changed',
+      label: 'Changed',
+      title: 'Changed in Both Sessions',
+      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,
+    },
+    {
+      id: 'added',
+      label: 'Added',
+      title: 'Added to Session B',
+      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,
+    },
+    {
+      id: 'removed',
+      label: 'Removed',
+      title: 'Removed from Session A',
+      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,
+    },
+  ]
+})
+
+const activeDiffOption = computed(() => diffModeOptions.value.find(item => item.id === activeDiffMode.value))
+
+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 getChangedCount(summary?: { added: number, removed: number, changed: number }) {
+  if (!summary)
+    return 0
+  return summary.added + summary.removed + summary.changed
+}
+
+function changedOnly<T extends { status: SessionCompareChangeStatus }>(items: T[] | undefined) {
+  return (items ?? [])
+    .filter(item => item.status !== 'unchanged')
+    .slice(0, TABLE_LIMIT)
+}
+
+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: resolve === 0 && baseline?.resolve === 0,
+    },
+    {
+      value: formatValue(load, 'duration'),
+      label: 'load',
+      tone: getStatTone(load, baseline?.load),
+      hidden: load === 0 && baseline?.load === 0,
+    },
+    {
+      value: formatValue(transform, 'duration'),
+      label: 'transform',
+      tone: getStatTone(transform, baseline?.transform),
+      hidden: transform === 0 && baseline?.transform === 0,
+    },
+  ].filter(stat => !stat.hidden)
+}
+
+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 sumDelta(rows: SplitDiffRow[]) {
+  return rows.reduce((total, row) => total + row.delta, 0)
+}
 </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 v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+    <PanelSideNav :items="compareSideNavItems" />
+    <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>
-      <!-- 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 flex="~ col" border="~ base rounded-lg" p3 min-h-0 flex-1>
+        <div py3 px2 flex="~ items-center gap-2">
+          <div :class="tabs.find(tab => tab.id === activeTab)?.icon" />
+          {{ tabs.find(tab => tab.id === activeTab)?.label }}
+        </div>
+        <CompareSessionMeta :sessions="normalizedSessions" :summaries="sessionSummaries" />
+
+        <div flex-1 min-h-0 of-auto pt3>
+          <template v-if="activeTab === '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
+                  :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 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"
+                    :status="row.status"
+                    :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"
+                      status="added"
+                      session-label="Session B"
+                      :title="row.currentTitle || row.key"
+                      :title-meta="row.currentTitleMeta"
+                      :subtitle="row.currentSubtitle"
+                      :badges="row.currentBadges"
+                      :stats="row.currentStats"
+                      :value="row.current"
+                      :delta="row.delta"
+                      :format="row.format"
+                      :ratio-text="row.ratioText"
+                    />
+                  </div>
+                </template>
+
+                <template v-else>
+                  <div grid="~ cols-2 gap-3">
+                    <CompareSingleSideRow
+                      v-for="row of activeDiffOption.rows"
+                      :key="row.key"
+                      status="removed"
+                      session-label="Session A"
+                      :title="row.previousTitle || row.key"
+                      :title-meta="row.previousTitleMeta"
+                      :subtitle="row.previousSubtitle"
+                      :badges="row.previousBadges"
+                      :stats="row.previousStats"
+                      :value="row.previous"
+                      :delta="row.delta"
+                      :format="row.format"
+                      :ratio-text="row.ratioText"
+                    />
+                  </div>
+                </template>
+              </section>
+
+              <div v-if="!activeDiffRows.length" h40 flex="~ items-center justify-center" op50 italic>
+                {{ activeDiffEmptyText }}
+              </div>
+            </div>
+          </template>
         </div>
       </div>
     </div>
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
index c7b8f5b5..82e627b0 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
@@ -2,7 +2,7 @@ import type { PackageInfo } from '../../../shared/types'
 import type { RolldownEventsReader } from '../../rolldown/events-reader'
 import { readProjectManifestOnly } from '@pnpm/read-project-manifest'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { getPackageDirPath, isNodeModulePath } from '../../../shared/utils/filepath'
+import { getPackageDirPath, getPnpmPackageInfoFromPath, isNodeModulePath } from '../../../shared/utils/filepath'
 import { getLogsManager } from '../utils'
 
 export async function getPackagesManifest(reader: RolldownEventsReader) {
@@ -44,6 +44,7 @@ export async function getPackagesManifest(reader: RolldownEventsReader) {
   await Promise.all(packages.map(async (p) => {
     let packageKey = ''
     let manifest = null
+    const fallbackPackage = getPnpmPackageInfoFromPath(p.path) ?? getPnpmPackageInfoFromPath(p.dir)
 
     try {
       manifest = await readProjectManifestOnly(p.dir)
@@ -51,7 +52,9 @@ export async function getPackagesManifest(reader: RolldownEventsReader) {
     }
     catch (err: any) {
       if (err?.code === 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
-        packageKey = `${p.dir}`
+        packageKey = fallbackPackage
+          ? `${fallbackPackage.name}@${fallbackPackage.version}`
+          : `${p.dir}`
       }
       else {
         throw err
@@ -72,8 +75,8 @@ export async function getPackagesManifest(reader: RolldownEventsReader) {
     }
     else {
       packagesManifest.set(packageKey, {
-        name: manifest?.name || p.dir,
-        version: manifest?.version || '(unknown)',
+        name: manifest?.name || fallbackPackage?.name || p.dir,
+        version: manifest?.version || fallbackPackage?.version || '(unknown)',
         dir: p.dir,
         files: [{
           path: p.path,
@@ -87,6 +90,53 @@ export async function getPackagesManifest(reader: RolldownEventsReader) {
   return packagesManifest
 }
 
+export async function getNormalizedPackages(reader: RolldownEventsReader) {
+  const modulesMap = reader.manager.modules
+  const duplicatePackagesMap = new Map<string, number>()
+  const packagesManifest = await getPackagesManifest(reader)
+
+  const normalizedPackages = await Promise.all(
+    Array.from<PackageInfo>(packagesManifest.values())
+      .map((p) => {
+        duplicatePackagesMap.set(p.name, (duplicatePackagesMap.get(p.name) ?? 0) + 1)
+        return {
+          ...p,
+          type: p.files.some(f => modulesMap.get(f.path)?.importers?.some(i => i.includes(reader.meta!.cwd))) ? 'direct' : 'transitive',
+        }
+      })
+      .map(async (p) => {
+        const duplicated = duplicatePackagesMap.get(p.name)! > 1
+        let files = p.files
+        if (duplicated) {
+          files = await Promise.all(files.map(async (f) => {
+            const importers = await Promise.all(f.importers.map(async (i) => {
+              let manifest = null
+              try {
+                if (isNodeModulePath(i.path)) {
+                  manifest = await readProjectManifestOnly(getPackageDirPath(i.path))
+                }
+              }
+              catch (err: any) {
+                if (err?.code !== 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
+                  throw err
+                }
+              }
+              const fallbackPackage = getPnpmPackageInfoFromPath(i.path)
+              return { ...i, version: manifest?.version ?? fallbackPackage?.version ?? '' }
+            }))
+            return { ...f, importers }
+          }))
+        }
+        return {
+          ...p,
+          duplicated,
+          files,
+        }
+      }),
+  )
+  return normalizedPackages.filter(i => !!i.transformedCodeSize)
+}
+
 export const rolldownGetPackages = defineRpcFunction({
   name: 'vite:rolldown:get-packages',
   type: 'query',
@@ -96,49 +146,7 @@ export const rolldownGetPackages = defineRpcFunction({
     return {
       handler: async ({ session }: { session: string }) => {
         const reader = await manager.loadSession(session)
-        const modulesMap = reader.manager.modules
-        const duplicatePackagesMap = new Map<string, number>()
-        const packagesManifest = await getPackagesManifest(reader)
-
-        const normalizedPackages = await Promise.all(
-          Array.from<PackageInfo>(packagesManifest.values())
-            .map((p) => {
-              duplicatePackagesMap.set(p.name, (duplicatePackagesMap.get(p.name) ?? 0) + 1)
-              return {
-                ...p,
-                type: p.files.some(f => modulesMap.get(f.path)?.importers?.some(i => i.includes(reader.meta!.cwd))) ? 'direct' : 'transitive',
-              }
-            })
-            .map(async (p) => {
-              const duplicated = duplicatePackagesMap.get(p.name)! > 1
-              let files = p.files
-              if (duplicated) {
-                files = await Promise.all(files.map(async (f) => {
-                  const importers = await Promise.all(f.importers.map(async (i) => {
-                    let manifest = null
-                    try {
-                      if (isNodeModulePath(i.path)) {
-                        manifest = await readProjectManifestOnly(getPackageDirPath(i.path))
-                      }
-                    }
-                    catch (err: any) {
-                      if (err?.code !== 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
-                        throw err
-                      }
-                    }
-                    return { ...i, version: manifest?.version ?? '' }
-                  }))
-                  return { ...f, importers }
-                }))
-              }
-              return {
-                ...p,
-                duplicated,
-                files,
-              }
-            }),
-        )
-        return normalizedPackages.filter(i => !!i.transformedCodeSize)
+        return await getNormalizedPackages(reader)
       },
     }
   },
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..dd6e9aed
--- /dev/null
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
@@ -0,0 +1,534 @@
+import type { PluginItem } from '@rolldown/debug'
+import type {
+  PackageInfo,
+  RolldownAssetInfo,
+  RolldownChunkInfo,
+  SessionCompareAssetDiff,
+  SessionCompareChangeStatus,
+  SessionCompareChangeSummary,
+  SessionCompareChunkDiff,
+  SessionCompareDetails,
+  SessionCompareMetricValue,
+  SessionCompareModuleDiff,
+  SessionComparePackageDiff,
+  SessionComparePluginDiff,
+} from '../../../shared/types'
+import type { RolldownEventsReader } from '../../rolldown/events-reader'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { extname } from 'pathe'
+import { isNodeModulePath } from '../../../shared/utils/filepath'
+import { getLogsManager } from '../utils'
+import { getNormalizedPackages } 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 summarize<T extends { status: SessionCompareChangeStatus }>(items: T[]): SessionCompareChangeSummary {
+  return {
+    added: items.filter(item => item.status === 'added').length,
+    removed: items.filter(item => item.status === 'removed').length,
+    changed: items.filter(item => item.status === 'changed').length,
+    unchanged: items.filter(item => item.status === 'unchanged').length,
+    total: items.length,
+  }
+}
+
+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 getModuleSize(reader: RolldownEventsReader, id: string | undefined) {
+  if (!id)
+    return 0
+  const transforms = reader.manager.modules.get(id)?.build_metrics?.transforms
+  return transforms?.at(-1)?.transformed_code_size ?? 0
+}
+
+function getModuleFileType(id: string) {
+  const normalized = id.split('?')[0]!
+  return extname(normalized).replace(/^\./, '') || 'module'
+}
+
+function getModuleKind(reader: RolldownEventsReader, id: string): SessionCompareModuleDiff['kind'] {
+  if (reader.manager.modules.get(id)?.is_external)
+    return 'external'
+  return isNodeModulePath(id) ? 'dependency' : 'source'
+}
+
+function getModuleChunkMap(chunks: RolldownChunkInfo[]) {
+  const map = new Map<string, string[]>()
+
+  for (const chunk of chunks) {
+    const name = chunk.name || chunk.entry_module || `chunk-${chunk.chunk_id}`
+    for (const moduleId of chunk.modules) {
+      const existing = map.get(moduleId) ?? []
+      existing.push(name)
+      map.set(moduleId, existing)
+    }
+  }
+
+  return map
+}
+
+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
+}
+
+function createPluginProfiles(reader: RolldownEventsReader) {
+  const seen = new Map<string, number>()
+  const profiles = new Map<string, PluginProfile>()
+
+  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 ?? []
+
+    profiles.set(key, {
+      key,
+      name: plugin.name,
+      pluginId: plugin.plugin_id,
+      duration: calls.reduce((total, call) => total + call.duration, 0),
+      calls: calls.length,
+      resolveDuration: calls.filter(call => call.type === 'resolve').reduce((total, call) => total + call.duration, 0),
+      loadDuration: calls.filter(call => call.type === 'load').reduce((total, call) => total + call.duration, 0),
+      transformDuration: 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}`
+}
+
+async function createCompareSource(reader: RolldownEventsReader): Promise<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: await getNormalizedPackages(reader),
+  }
+}
+
+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,
+    }
+  }))
+}
+
+function comparePlugins(previous: SessionCompareSource, current: SessionCompareSource): SessionComparePluginDiff[] {
+  const previousPlugins = createPluginProfiles(previous.reader)
+  const currentPlugins = 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,
+    }
+  }))
+}
+
+function compareModules(previous: SessionCompareSource, current: SessionCompareSource): SessionCompareModuleDiff[] {
+  const previousModules = previous.reader.manager.modules
+  const currentModules = current.reader.manager.modules
+  const previousChunkMap = getModuleChunkMap(previous.chunks)
+  const currentChunkMap = getModuleChunkMap(current.chunks)
+
+  return sortByDeltaImpact(compareMaps(previousModules, currentModules, (key, previousModule, currentModule) => {
+    const previousSize = getModuleSize(previous.reader, previousModule?.id)
+    const currentSize = getModuleSize(current.reader, currentModule?.id)
+    const previousChunks = previousChunkMap.get(key) ?? []
+    const currentChunks = currentChunkMap.get(key) ?? []
+    const previousImports = previousModule?.imports?.length ?? 0
+    const currentImports = currentModule?.imports?.length ?? 0
+    const previousImporters = previousModule?.importers?.length ?? 0
+    const currentImporters = currentModule?.importers?.length ?? 0
+    const metric = createMetric(previousSize, currentSize)
+
+    return {
+      key,
+      status: getStatus(
+        previousModule,
+        currentModule,
+        previousSize !== currentSize
+        || previousChunks.join('\0') !== currentChunks.join('\0')
+        || previousImports !== currentImports
+        || previousImporters !== currentImporters,
+      ),
+      id: currentModule?.id ?? previousModule?.id ?? key,
+      fileType: getModuleFileType(currentModule?.id ?? previousModule?.id ?? key),
+      kind: getModuleKind(currentModule ? current.reader : previous.reader, currentModule?.id ?? previousModule?.id ?? key),
+      previousChunks,
+      currentChunks,
+      previousImports,
+      currentImports,
+      previousImporters,
+      currentImporters,
+      ...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.loadSession(previousSession!),
+          manager.loadSession(currentSession!),
+        ])
+        const [previous, current] = await Promise.all([
+          createCompareSource(previousReader),
+          createCompareSource(currentReader),
+        ])
+
+        const assets = compareAssets(previous, current)
+        const chunks = compareChunks(previous, current)
+        const packages = comparePackages(previous, current)
+        const plugins = comparePlugins(previous, current)
+        const modules = compareModules(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,
+            },
+          },
+          summary: {
+            assets: summarize(assets),
+            chunks: summarize(chunks),
+            packages: summarize(packages),
+            plugins: summarize(plugins),
+            modules: summarize(modules),
+          },
+          assets,
+          chunks,
+          packages,
+          plugins,
+          modules,
+        }
+      },
+    }
+  },
+})
diff --git a/packages/rolldown/src/node/rpc/index.ts b/packages/rolldown/src/node/rpc/index.ts
index 583fa4dd..c03ea280 100644
--- a/packages/rolldown/src/node/rpc/index.ts
+++ b/packages/rolldown/src/node/rpc/index.ts
@@ -10,6 +10,7 @@ import { rolldownGetPackageDetails } from './functions/rolldown-get-package-deta
 import { rolldownGetPackages } from './functions/rolldown-get-packages'
 import { rolldownGetPluginDetails } from './functions/rolldown-get-plugin-details'
 import { rolldownGetRawEvents } from './functions/rolldown-get-raw-events'
+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'
@@ -27,6 +28,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 745bade8..96027e09 100644
--- a/packages/rolldown/src/shared/types/data.ts
+++ b/packages/rolldown/src/shared/types/data.ts
@@ -64,6 +64,121 @@ 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 SessionCompareChangeSummary {
+  added: number
+  removed: number
+  changed: number
+  unchanged: number
+  total: number
+}
+
+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 SessionCompareModuleDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  id: string
+  fileType: string
+  kind: 'source' | 'dependency' | 'external'
+  previousChunks: string[]
+  currentChunks: string[]
+  previousImports: number
+  currentImports: number
+  previousImporters: number
+  currentImporters: number
+}
+
+export interface SessionCompareDetails {
+  sessionStats: {
+    previous: {
+      packages: number
+      duplicatedPackages: number
+    }
+    current: {
+      packages: number
+      duplicatedPackages: number
+    }
+  }
+  summary: {
+    assets: SessionCompareChangeSummary
+    chunks: SessionCompareChangeSummary
+    packages: SessionCompareChangeSummary
+    plugins: SessionCompareChangeSummary
+    modules: SessionCompareChangeSummary
+  }
+  assets: SessionCompareAssetDiff[]
+  chunks: SessionCompareChunkDiff[]
+  packages: SessionComparePackageDiff[]
+  plugins: SessionComparePluginDiff[]
+  modules: SessionCompareModuleDiff[]
+}
+
 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..bf41bc3c 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', () => {
@@ -39,3 +39,28 @@ describe('getModuleNameFromPath', () => {
     expect(getModuleNameFromPath('C:\\foo\\node_modules\\@vitejs\\devtools')).toBe('@vitejs/devtools')
   })
 })
+
+describe('getPnpmPackageInfoFromPath', () => {
+  it('should parse pnpm package 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',
+    })
+  })
+})
+
+describe('getPackageDirPath', () => {
+  it('should return package names as-is', () => {
+    expect(getPackageDirPath('vite')).toBe('vite')
+    expect(getPackageDirPath('@vitejs/devtools')).toBe('@vitejs/devtools')
+  })
+
+  it('should return package roots for pnpm 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')
+  })
+})
diff --git a/packages/rolldown/src/shared/utils/filepath.ts b/packages/rolldown/src/shared/utils/filepath.ts
index ed507193..9688779b 100644
--- a/packages/rolldown/src/shared/utils/filepath.ts
+++ b/packages/rolldown/src/shared/utils/filepath.ts
@@ -17,13 +17,60 @@ export function getModuleNameFromPath(path: string) {
   return match.split('/')[0]
 }
 
+export function getPnpmPackageInfoFromPath(path: string) {
+  const normalizedPath = path
+    .replace(/%2F/g, '/')
+    .replace(/\\/g, '/')
+
+  const packageSegment = normalizedPath.match(/\/node_modules\/\.pnpm\/([^/]+)/)?.[1]
+  if (!packageSegment)
+    return undefined
+
+  const versionIndex = packageSegment.startsWith('@')
+    ? packageSegment.indexOf('@', 1)
+    : packageSegment.indexOf('@')
+  if (versionIndex <= 0)
+    return undefined
+
+  const name = packageSegment
+    .slice(0, versionIndex)
+    .replace(/\+/g, '/')
+  const version = packageSegment
+    .slice(versionIndex + 1)
+    .split('_')[0]
+
+  if (!name || !version)
+    return undefined
+
+  return {
+    name,
+    version,
+  }
+}
+
 export function getPackageDirPath(path: string) {
   const normalizedPath = path
     .replace(/%2F/g, '/')
     .replace(/\\/g, '/')
 
+  if (isPackageName(normalizedPath))
+    return normalizedPath
+
+  const pnpmNestedNodeModules = normalizedPath.match(/^(.+\/node_modules\/\.pnpm\/[^/]+\/node_modules\/)/)?.[1]
+  if (pnpmNestedNodeModules) {
+    const packageName = getModuleNameFromPath(normalizedPath)
+    if (packageName)
+      return `${pnpmNestedNodeModules}${packageName}`
+  }
+
+  const pnpmPackagePath = normalizedPath.match(/^(.+\/node_modules\/\.pnpm\/[^/]+)(?:\/|$)/)?.[1]
+  if (pnpmPackagePath)
+    return pnpmPackagePath
+
   const nodeModulesPrefix = normalizedPath.match(/^(.+\/node_modules\/)/)?.[1]
-  const packageName = getModuleNameFromPath(path)
+  const packageName = getModuleNameFromPath(normalizedPath)
+  if (!nodeModulesPrefix || !packageName)
+    return normalizedPath
 
-  return nodeModulesPrefix! + packageName
+  return nodeModulesPrefix + packageName
 }
diff --git a/packages/ui/src/components/PanelSideNav.vue b/packages/ui/src/components/PanelSideNav.vue
index 85683411..a42a7740 100644
--- a/packages/ui/src/components/PanelSideNav.vue
+++ b/packages/ui/src/components/PanelSideNav.vue
@@ -45,6 +45,7 @@ const items = computed<SideNavItem[]>(() => {
           p2 hover:bg-active op-fade hover:op100
           flex="~ items-center justify-center"
           exact-active-class="text-primary op100!"
+          :class="item.active ? 'bg-active text-primary op100!' : undefined"
           @click="item.action?.()"
         >
           <div :class="item.icon" text-lg />
diff --git a/packages/ui/src/composables/nav.ts b/packages/ui/src/composables/nav.ts
index 3439f5dc..b29d0620 100644
--- a/packages/ui/src/composables/nav.ts
+++ b/packages/ui/src/composables/nav.ts
@@ -4,6 +4,7 @@ import { computed, onScopeDispose, reactive, toRef, watch } from 'vue'
 export interface SideNavItem {
   icon: string
   title: string
+  active?: boolean
   category?: string
   to?: string
   action?: () => void

From 5c8e3a89e02073bff9b35cf1a589a71c22296754 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Thu, 7 May 2026 12:48:25 +0800
Subject: [PATCH 2/2] chore: update

---
 .../app/components/compare/ChangeBadge.vue    |  47 --
 .../src/app/components/compare/DeltaBar.vue   |  46 --
 .../app/components/compare/SessionMeta.vue    |   6 +-
 .../app/components/compare/SingleSideRow.vue  |  14 +-
 .../src/app/components/compare/SplitRow.vue   |  36 +-
 .../src/app/components/compare/StatsStrip.vue |  35 +
 .../src/app/components/compare/TabView.vue    | 675 +++++++++++++++++
 .../src/app/pages/compare/[sessions].vue      | 108 +++
 .../app/pages/compare/[sessions]/assets.vue   |  28 +
 .../app/pages/compare/[sessions]/chunks.vue   |  28 +
 .../app/pages/compare/[sessions]/index.vue    | 713 +-----------------
 .../app/pages/compare/[sessions]/packages.vue |  28 +
 .../app/pages/compare/[sessions]/plugins.vue  |  28 +
 .../rolldown-get-session-compare-details.ts   |  96 ---
 packages/rolldown/src/shared/types/data.ts    |  30 -
 .../shared/utils/__tests__/filepath.test.ts   |  25 +-
 .../rolldown/src/shared/utils/filepath.ts     | 152 ++--
 packages/ui/src/components/PanelSideNav.vue   |   1 -
 packages/ui/src/composables/nav.ts            |   1 -
 19 files changed, 1089 insertions(+), 1008 deletions(-)
 delete mode 100644 packages/rolldown/src/app/components/compare/ChangeBadge.vue
 delete mode 100644 packages/rolldown/src/app/components/compare/DeltaBar.vue
 create mode 100644 packages/rolldown/src/app/components/compare/StatsStrip.vue
 create mode 100644 packages/rolldown/src/app/components/compare/TabView.vue
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions].vue
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions]/assets.vue
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions]/chunks.vue
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions]/packages.vue
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions]/plugins.vue

diff --git a/packages/rolldown/src/app/components/compare/ChangeBadge.vue b/packages/rolldown/src/app/components/compare/ChangeBadge.vue
deleted file mode 100644
index 91898621..00000000
--- a/packages/rolldown/src/app/components/compare/ChangeBadge.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import type { SessionCompareChangeStatus } from '~~/shared/types'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  status: SessionCompareChangeStatus
-}>()
-
-const badge = computed(() => {
-  switch (props.status) {
-    case 'added':
-      return {
-        label: 'Added',
-        icon: 'i-ph-plus-circle-duotone',
-        class: 'text-red-500 bg-red-500/10',
-      }
-    case 'removed':
-      return {
-        label: 'Removed',
-        icon: 'i-ph-minus-circle-duotone',
-        class: 'text-green-500 bg-green-500/10',
-      }
-    case 'changed':
-      return {
-        label: 'Changed',
-        icon: 'i-ph-arrows-clockwise-duotone',
-        class: 'text-amber-500 bg-amber-500/10',
-      }
-    default:
-      return {
-        label: 'Unchanged',
-        icon: 'i-ph-check-circle-duotone',
-        class: 'text-gray-500 bg-gray-500/10',
-      }
-  }
-})
-</script>
-
-<template>
-  <span
-    inline-flex items-center gap-1 rounded px2 py1 text-xs font-500
-    :class="badge.class"
-  >
-    <span :class="badge.icon" />
-    {{ badge.label }}
-  </span>
-</template>
diff --git a/packages/rolldown/src/app/components/compare/DeltaBar.vue b/packages/rolldown/src/app/components/compare/DeltaBar.vue
deleted file mode 100644
index 4f0b99e3..00000000
--- a/packages/rolldown/src/app/components/compare/DeltaBar.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  delta: number
-  maxDelta?: number
-}>(), {
-  maxDelta: 1,
-})
-
-const width = computed(() => {
-  if (!props.maxDelta)
-    return 0
-  return Math.min(Math.abs(props.delta) / props.maxDelta * 50, 50)
-})
-
-const style = computed(() => {
-  if (props.delta >= 0) {
-    return {
-      left: '50%',
-      width: `${width.value}%`,
-    }
-  }
-
-  return {
-    left: `${50 - width.value}%`,
-    width: `${width.value}%`,
-  }
-})
-
-const barClass = computed(() => {
-  if (props.delta > 0)
-    return 'bg-red-500/80'
-  if (props.delta < 0)
-    return 'bg-green-500/80'
-  return 'bg-gray-500/50'
-})
-</script>
-
-<template>
-  <div h-7 relative flex="~ items-center">
-    <div absolute inset-x-0 h-1 rounded-full bg-base />
-    <div absolute left="1/2" top-0 bottom-0 w-px bg-base />
-    <div absolute h-2 rounded-full :class="barClass" :style="style" />
-  </div>
-</template>
diff --git a/packages/rolldown/src/app/components/compare/SessionMeta.vue b/packages/rolldown/src/app/components/compare/SessionMeta.vue
index b27d939c..19e3f5fc 100644
--- a/packages/rolldown/src/app/components/compare/SessionMeta.vue
+++ b/packages/rolldown/src/app/components/compare/SessionMeta.vue
@@ -3,6 +3,7 @@ export interface CompareSessionSummaryItem {
   label: string
   value: string
   icon: string
+  tone?: 'increase' | 'decrease'
 }
 
 defineProps<{
@@ -37,7 +38,10 @@ defineProps<{
           <div text-xs op50>
             {{ summary.label }}
           </div>
-          <div font-mono font-600>
+          <div
+            font-mono font-600
+            :class="summary.tone === 'increase' ? 'text-red-500' : summary.tone === 'decrease' ? 'text-green-500' : undefined"
+          >
             {{ summary.value }}
           </div>
         </div>
diff --git a/packages/rolldown/src/app/components/compare/SingleSideRow.vue b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
index c9b7aa39..1580291e 100644
--- a/packages/rolldown/src/app/components/compare/SingleSideRow.vue
+++ b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
@@ -8,23 +8,19 @@ interface SingleSideDiffStat {
 }
 
 withDefaults(defineProps<{
-  status: 'added' | 'removed'
   sessionLabel: string
   title: string
   titleMeta?: string
-  value: number
   delta: number
   format: 'bytes' | 'duration' | 'number'
   subtitle?: string
   badges?: string[]
   stats?: SingleSideDiffStat[]
-  ratioText?: string
 }>(), {
   subtitle: '',
   titleMeta: '',
   badges: () => [],
   stats: () => [],
-  ratioText: '',
 })
 </script>
 
@@ -48,15 +44,7 @@ withDefaults(defineProps<{
 
     <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" />
-      <span v-if="stats.length" flex="~ items-baseline gap-1" op55>
-        <span>(</span>
-        <template v-for="(stat, index) of stats" :key="stat.label">
-          <span v-if="index" op70>|</span>
-          <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-          <span>{{ stat.label }}</span>
-        </template>
-        <span>)</span>
-      </span>
+      <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
index 8e999897..2cbcfaff 100644
--- a/packages/rolldown/src/app/components/compare/SplitRow.vue
+++ b/packages/rolldown/src/app/components/compare/SplitRow.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { SessionCompareChangeStatus } from '~~/shared/types'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computed } from 'vue'
 
@@ -11,7 +10,6 @@ interface SplitDiffStat {
 }
 
 const props = withDefaults(defineProps<{
-  status: SessionCompareChangeStatus
   previousTitle?: string
   currentTitle?: string
   previousTitleMeta?: string
@@ -71,18 +69,11 @@ const ratioClass = computed(() => {
               {{ previousSubtitle }}
             </div>
           </div>
-          <div flex="~ items-center gap-2 wrap">
-            <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
-            <span v-if="previousStats.length" flex="~ items-baseline gap-1" text-xs op55>
-              <span>(</span>
-              <template v-for="(stat, index) of previousStats" :key="stat.label">
-                <span v-if="index" op70>|</span>
-                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-                <span>{{ stat.label }}</span>
-              </template>
-              <span>)</span>
-            </span>
-            <span flex-1 />
+          <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>
@@ -108,18 +99,11 @@ const ratioClass = computed(() => {
               {{ currentSubtitle }}
             </div>
           </div>
-          <div flex="~ items-center gap-2 wrap">
-            <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
-            <span v-if="currentStats.length" flex="~ items-baseline gap-1" text-xs op55>
-              <span>(</span>
-              <template v-for="(stat, index) of currentStats" :key="stat.label">
-                <span v-if="index" op70>|</span>
-                <span font-mono font-600 :class="stat.tone === 'increase' ? 'text-green-500' : stat.tone === 'decrease' ? 'text-red-500' : 'op85'">{{ stat.value }}</span>
-                <span>{{ stat.label }}</span>
-              </template>
-              <span>)</span>
-            </span>
-            <span flex-1 />
+          <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>
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..123cd0d6
--- /dev/null
+++ b/packages/rolldown/src/app/components/compare/TabView.vue
@@ -0,0 +1,675 @@
+<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
+  }
+})
+
+watch(() => props.tab, () => {
+  activeDiffMode.value = 'changed'
+})
+
+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))
+
+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/pages/compare/[sessions].vue b/packages/rolldown/src/app/pages/compare/[sessions].vue
new file mode 100644
index 00000000..6f72a2b8
--- /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 { useRoute } from '#app/composables/router'
+import { useRpc } from '#imports'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { computed, onMounted, ref } from 'vue'
+
+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 235a3457..9a39741e 100644
--- a/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/index.vue
@@ -1,713 +1,28 @@
 <script setup lang="ts">
 import type {
-  SessionCompareChangeStatus,
   SessionCompareContext,
   SessionCompareDetails,
-  SessionCompareMetricValue,
 } from '~~/shared/types'
-import { useRoute } from '#app/composables/router'
-import { useRpc } from '#imports'
-import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { bytesToHumanSize } from '~/utils/format'
 
-type CompareTab = 'overview' | 'assets' | 'chunks' | 'packages' | 'plugins' | 'modules'
-type DiffMode = 'changed' | 'added' | 'removed'
-type DiffFormat = 'bytes' | 'duration' | 'number'
-
-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 TABLE_LIMIT = 300
-
-const isLoading = ref(false)
-const params = useRoute().params as {
-  sessions: string
-}
-
-const rpc = useRpc()
-const sessions = ref<SessionCompareContext[]>([])
-const details = ref<SessionCompareDetails | null>(null)
-const activeTab = ref<CompareTab>('overview')
-const activeDiffMode = ref<DiffMode>('changed')
-
-onMounted(async () => {
-  isLoading.value = true
-  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
-})
-
-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: details.value?.sessionStats.current.packages ?? 0,
-      previous: details.value?.sessionStats.previous.packages ?? 0,
-    },
-    {
-      name: 'Duplicated Packages',
-      description: 'Total number of duplicated packages',
-      icon: 'i-ph-package-duotone',
-      current: details.value?.sessionStats.current.duplicatedPackages ?? 0,
-      previous: details.value?.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(() => {
-  switch (activeTab.value) {
-    case 'assets':
-      return normalizedSessions.value.map(session => [
-        {
-          label: 'Assets',
-          value: session.assets.toLocaleString(),
-          icon: 'i-ph-package-duotone',
-        },
-        {
-          label: 'Bundle',
-          value: formatBytesSummary(session.bundle_size),
-          icon: 'i-ph-hard-drives-duotone',
-        },
-        {
-          label: 'Initial JS',
-          value: formatBytesSummary(session.initial_js),
-          icon: 'i-ph-file-js-duotone',
-        },
-      ])
-    case 'chunks':
-      return normalizedSessions.value.map(session => [
-        {
-          label: 'Chunks',
-          value: session.chunks.toLocaleString(),
-          icon: 'i-ph-shapes-duotone',
-        },
-        {
-          label: 'Modules',
-          value: session.modules.toLocaleString(),
-          icon: 'i-ph-graph-duotone',
-        },
-        {
-          label: 'Initial JS',
-          value: formatBytesSummary(session.initial_js),
-          icon: 'i-ph-file-js-duotone',
-        },
-      ])
-    default:
-      return undefined
-  }
-})
-
-const tabs = computed<Array<{ id: CompareTab, label: string, icon: string, count?: number }>>(() => [
-  {
-    id: 'overview',
-    label: 'Overview',
-    icon: 'i-ph-squares-four-duotone',
-  },
-  {
-    id: 'assets',
-    label: 'Assets',
-    icon: 'i-ph-package-duotone',
-    count: getChangedCount(details.value?.summary.assets),
-  },
-  {
-    id: 'chunks',
-    label: 'Chunks',
-    icon: 'i-ph-shapes-duotone',
-    count: getChangedCount(details.value?.summary.chunks),
-  },
-  {
-    id: 'packages',
-    label: 'Packages',
-    icon: 'i-ph-package-duotone',
-    count: getChangedCount(details.value?.summary.packages),
-  },
-  {
-    id: 'plugins',
-    label: 'Plugins',
-    icon: 'i-ph-plugs-duotone',
-    count: getChangedCount(details.value?.summary.plugins),
-  },
-  {
-    id: 'modules',
-    label: 'Modules',
-    icon: 'i-ph-graph-duotone',
-    count: getChangedCount(details.value?.summary.modules),
-  },
-])
-
-const compareSideNavItems = computed(() => tabs.value.map(tab => ({
-  title: tab.count ? `${tab.label} (${tab.count})` : tab.label,
-  icon: tab.icon,
-  active: activeTab.value === tab.id,
-  action: () => {
-    activeTab.value = tab.id
-  },
-})))
-
-watch(activeTab, () => {
-  activeDiffMode.value = 'changed'
-})
-
-const changedAssets = computed(() => changedOnly(details.value?.assets))
-const changedChunks = computed(() => changedOnly(details.value?.chunks))
-const changedPackages = computed(() => changedOnly(details.value?.packages))
-const changedPlugins = computed(() => changedOnly(details.value?.plugins))
-const changedModules = computed(() => changedOnly(details.value?.modules))
-
-const assetRows = computed<SplitDiffRow[]>(() => changedAssets.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[]>(() => changedChunks.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[]>(() => changedPackages.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[]>(() => changedPlugins.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: ['plugin'],
-  currentBadges: ['plugin'],
-})))
-
-const moduleRows = computed<SplitDiffRow[]>(() => changedModules.value.map(item => createSplitRow({
-  key: item.key,
-  status: item.status,
-  previousTitle: item.status === 'added' ? undefined : item.id,
-  currentTitle: item.status === 'removed' ? undefined : item.id,
-  previousSubtitle: [
-    item.kind,
-    item.fileType,
-    `chunks ${item.previousChunks.length}`,
-    `imports ${item.previousImports}`,
-    `importers ${item.previousImporters}`,
-  ].join(' · '),
-  currentSubtitle: [
-    item.kind,
-    item.fileType,
-    `chunks ${item.currentChunks.length}`,
-    `imports ${item.currentImports}`,
-    `importers ${item.currentImporters}`,
-  ].join(' · '),
-  previous: item.previous,
-  current: item.current,
-  delta: item.delta,
-  deltaRatio: item.deltaRatio,
-  format: 'bytes',
-  previousBadges: [item.kind, item.fileType],
-  currentBadges: [item.kind, item.fileType],
-})))
-
-const activeRows = computed(() => {
-  switch (activeTab.value) {
-    case 'assets':
-      return assetRows.value
-    case 'chunks':
-      return chunkRows.value
-    case 'packages':
-      return packageRows.value
-    case 'plugins':
-      return pluginRows.value
-    case 'modules':
-      return moduleRows.value
-    default:
-      return []
-  }
-})
-
-const changedRows = computed(() => activeRows.value.filter(item => item.status === 'changed' && item.delta !== 0))
-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
+interface CompareTabItem {
+  id: string
   label: string
-  title: string
-  description: string
   icon: string
-  count: number
-  delta: number
-  rows: SplitDiffRow[]
-}>>(() => {
-  return [
-    {
-      id: 'changed',
-      label: 'Changed',
-      title: 'Changed in Both Sessions',
-      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,
-    },
-    {
-      id: 'added',
-      label: 'Added',
-      title: 'Added to Session B',
-      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,
-    },
-    {
-      id: 'removed',
-      label: 'Removed',
-      title: 'Removed from Session A',
-      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,
-    },
-  ]
-})
-
-const activeDiffOption = computed(() => diffModeOptions.value.find(item => item.id === activeDiffMode.value))
-
-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 getChangedCount(summary?: { added: number, removed: number, changed: number }) {
-  if (!summary)
-    return 0
-  return summary.added + summary.removed + summary.changed
-}
-
-function changedOnly<T extends { status: SessionCompareChangeStatus }>(items: T[] | undefined) {
-  return (items ?? [])
-    .filter(item => item.status !== 'unchanged')
-    .slice(0, TABLE_LIMIT)
-}
-
-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: resolve === 0 && baseline?.resolve === 0,
-    },
-    {
-      value: formatValue(load, 'duration'),
-      label: 'load',
-      tone: getStatTone(load, baseline?.load),
-      hidden: load === 0 && baseline?.load === 0,
-    },
-    {
-      value: formatValue(transform, 'duration'),
-      label: 'transform',
-      tone: getStatTone(transform, baseline?.transform),
-      hidden: transform === 0 && baseline?.transform === 0,
-    },
-  ].filter(stat => !stat.hidden)
-}
-
-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(' ')
 }
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
 
-function sumDelta(rows: SplitDiffRow[]) {
-  return rows.reduce((total, row) => total + row.delta, 0)
-}
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
 </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 :items="compareSideNavItems" />
-    <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>
-
-      <div flex="~ col" border="~ base rounded-lg" p3 min-h-0 flex-1>
-        <div py3 px2 flex="~ items-center gap-2">
-          <div :class="tabs.find(tab => tab.id === activeTab)?.icon" />
-          {{ tabs.find(tab => tab.id === activeTab)?.label }}
-        </div>
-        <CompareSessionMeta :sessions="normalizedSessions" :summaries="sessionSummaries" />
-
-        <div flex-1 min-h-0 of-auto pt3>
-          <template v-if="activeTab === '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
-                  :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 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"
-                    :status="row.status"
-                    :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"
-                      status="added"
-                      session-label="Session B"
-                      :title="row.currentTitle || row.key"
-                      :title-meta="row.currentTitleMeta"
-                      :subtitle="row.currentSubtitle"
-                      :badges="row.currentBadges"
-                      :stats="row.currentStats"
-                      :value="row.current"
-                      :delta="row.delta"
-                      :format="row.format"
-                      :ratio-text="row.ratioText"
-                    />
-                  </div>
-                </template>
-
-                <template v-else>
-                  <div grid="~ cols-2 gap-3">
-                    <CompareSingleSideRow
-                      v-for="row of activeDiffOption.rows"
-                      :key="row.key"
-                      status="removed"
-                      session-label="Session A"
-                      :title="row.previousTitle || row.key"
-                      :title-meta="row.previousTitleMeta"
-                      :subtitle="row.previousSubtitle"
-                      :badges="row.previousBadges"
-                      :stats="row.previousStats"
-                      :value="row.previous"
-                      :delta="row.delta"
-                      :format="row.format"
-                      :ratio-text="row.ratioText"
-                    />
-                  </div>
-                </template>
-              </section>
-
-              <div v-if="!activeDiffRows.length" h40 flex="~ items-center justify-center" op50 italic>
-                {{ activeDiffEmptyText }}
-              </div>
-            </div>
-          </template>
-        </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/rpc/functions/rolldown-get-session-compare-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
index dd6e9aed..d2b11d72 100644
--- 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
@@ -5,18 +5,15 @@ import type {
   RolldownChunkInfo,
   SessionCompareAssetDiff,
   SessionCompareChangeStatus,
-  SessionCompareChangeSummary,
   SessionCompareChunkDiff,
   SessionCompareDetails,
   SessionCompareMetricValue,
-  SessionCompareModuleDiff,
   SessionComparePackageDiff,
   SessionComparePluginDiff,
 } from '../../../shared/types'
 import type { RolldownEventsReader } from '../../rolldown/events-reader'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
 import { extname } from 'pathe'
-import { isNodeModulePath } from '../../../shared/utils/filepath'
 import { getLogsManager } from '../utils'
 import { getNormalizedPackages } from './rolldown-get-packages'
 
@@ -67,16 +64,6 @@ function getStatus(previous: unknown, current: unknown, changed: boolean): Sessi
   return changed ? 'changed' : 'unchanged'
 }
 
-function summarize<T extends { status: SessionCompareChangeStatus }>(items: T[]): SessionCompareChangeSummary {
-  return {
-    added: items.filter(item => item.status === 'added').length,
-    removed: items.filter(item => item.status === 'removed').length,
-    changed: items.filter(item => item.status === 'changed').length,
-    unchanged: items.filter(item => item.status === 'unchanged').length,
-    total: items.length,
-  }
-}
-
 function compareMaps<TPrevious, TCurrent, TResult>(
   previous: Map<string, TPrevious>,
   current: Map<string, TCurrent>,
@@ -157,39 +144,6 @@ function getChunkKey(chunk: RolldownChunkInfo) {
   return `modules:${chunk.modules.toSorted((a, b) => a.localeCompare(b)).join('\0')}`
 }
 
-function getModuleSize(reader: RolldownEventsReader, id: string | undefined) {
-  if (!id)
-    return 0
-  const transforms = reader.manager.modules.get(id)?.build_metrics?.transforms
-  return transforms?.at(-1)?.transformed_code_size ?? 0
-}
-
-function getModuleFileType(id: string) {
-  const normalized = id.split('?')[0]!
-  return extname(normalized).replace(/^\./, '') || 'module'
-}
-
-function getModuleKind(reader: RolldownEventsReader, id: string): SessionCompareModuleDiff['kind'] {
-  if (reader.manager.modules.get(id)?.is_external)
-    return 'external'
-  return isNodeModulePath(id) ? 'dependency' : 'source'
-}
-
-function getModuleChunkMap(chunks: RolldownChunkInfo[]) {
-  const map = new Map<string, string[]>()
-
-  for (const chunk of chunks) {
-    const name = chunk.name || chunk.entry_module || `chunk-${chunk.chunk_id}`
-    for (const moduleId of chunk.modules) {
-      const existing = map.get(moduleId) ?? []
-      existing.push(name)
-      map.set(moduleId, existing)
-    }
-  }
-
-  return map
-}
-
 function getPackageImporters(pkg: { files: PackageInfo['files'] } | undefined) {
   return pkg?.files.reduce((total, file) => total + file.importers.length, 0) ?? 0
 }
@@ -439,47 +393,6 @@ function comparePlugins(previous: SessionCompareSource, current: SessionCompareS
   }))
 }
 
-function compareModules(previous: SessionCompareSource, current: SessionCompareSource): SessionCompareModuleDiff[] {
-  const previousModules = previous.reader.manager.modules
-  const currentModules = current.reader.manager.modules
-  const previousChunkMap = getModuleChunkMap(previous.chunks)
-  const currentChunkMap = getModuleChunkMap(current.chunks)
-
-  return sortByDeltaImpact(compareMaps(previousModules, currentModules, (key, previousModule, currentModule) => {
-    const previousSize = getModuleSize(previous.reader, previousModule?.id)
-    const currentSize = getModuleSize(current.reader, currentModule?.id)
-    const previousChunks = previousChunkMap.get(key) ?? []
-    const currentChunks = currentChunkMap.get(key) ?? []
-    const previousImports = previousModule?.imports?.length ?? 0
-    const currentImports = currentModule?.imports?.length ?? 0
-    const previousImporters = previousModule?.importers?.length ?? 0
-    const currentImporters = currentModule?.importers?.length ?? 0
-    const metric = createMetric(previousSize, currentSize)
-
-    return {
-      key,
-      status: getStatus(
-        previousModule,
-        currentModule,
-        previousSize !== currentSize
-        || previousChunks.join('\0') !== currentChunks.join('\0')
-        || previousImports !== currentImports
-        || previousImporters !== currentImporters,
-      ),
-      id: currentModule?.id ?? previousModule?.id ?? key,
-      fileType: getModuleFileType(currentModule?.id ?? previousModule?.id ?? key),
-      kind: getModuleKind(currentModule ? current.reader : previous.reader, currentModule?.id ?? previousModule?.id ?? key),
-      previousChunks,
-      currentChunks,
-      previousImports,
-      currentImports,
-      previousImporters,
-      currentImporters,
-      ...metric,
-    }
-  }))
-}
-
 export const rolldownGetSessionCompareDetails = defineRpcFunction({
   name: 'vite:rolldown:get-session-compare-details',
   type: 'query',
@@ -502,7 +415,6 @@ export const rolldownGetSessionCompareDetails = defineRpcFunction({
         const chunks = compareChunks(previous, current)
         const packages = comparePackages(previous, current)
         const plugins = comparePlugins(previous, current)
-        const modules = compareModules(previous, current)
 
         return {
           sessionStats: {
@@ -515,18 +427,10 @@ export const rolldownGetSessionCompareDetails = defineRpcFunction({
               duplicatedPackages: current.packages.filter(pkg => pkg.duplicated).length,
             },
           },
-          summary: {
-            assets: summarize(assets),
-            chunks: summarize(chunks),
-            packages: summarize(packages),
-            plugins: summarize(plugins),
-            modules: summarize(modules),
-          },
           assets,
           chunks,
           packages,
           plugins,
-          modules,
         }
       },
     }
diff --git a/packages/rolldown/src/shared/types/data.ts b/packages/rolldown/src/shared/types/data.ts
index 96027e09..bae329c3 100644
--- a/packages/rolldown/src/shared/types/data.ts
+++ b/packages/rolldown/src/shared/types/data.ts
@@ -73,14 +73,6 @@ export interface SessionCompareMetricValue {
   deltaRatio: number | null
 }
 
-export interface SessionCompareChangeSummary {
-  added: number
-  removed: number
-  changed: number
-  unchanged: number
-  total: number
-}
-
 export interface SessionCompareAssetDiff extends SessionCompareMetricValue {
   key: string
   status: SessionCompareChangeStatus
@@ -140,20 +132,6 @@ export interface SessionComparePluginDiff extends SessionCompareMetricValue {
   currentTransformDuration: number
 }
 
-export interface SessionCompareModuleDiff extends SessionCompareMetricValue {
-  key: string
-  status: SessionCompareChangeStatus
-  id: string
-  fileType: string
-  kind: 'source' | 'dependency' | 'external'
-  previousChunks: string[]
-  currentChunks: string[]
-  previousImports: number
-  currentImports: number
-  previousImporters: number
-  currentImporters: number
-}
-
 export interface SessionCompareDetails {
   sessionStats: {
     previous: {
@@ -165,18 +143,10 @@ export interface SessionCompareDetails {
       duplicatedPackages: number
     }
   }
-  summary: {
-    assets: SessionCompareChangeSummary
-    chunks: SessionCompareChangeSummary
-    packages: SessionCompareChangeSummary
-    plugins: SessionCompareChangeSummary
-    modules: SessionCompareChangeSummary
-  }
   assets: SessionCompareAssetDiff[]
   chunks: SessionCompareChunkDiff[]
   packages: SessionComparePackageDiff[]
   plugins: SessionComparePluginDiff[]
-  modules: SessionCompareModuleDiff[]
 }
 
 export interface ModuleInfo {
diff --git a/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts b/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
index bf41bc3c..c1c48891 100644
--- a/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
+++ b/packages/rolldown/src/shared/utils/__tests__/filepath.test.ts
@@ -36,12 +36,13 @@ 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 pnpm package segments with peer suffixes', () => {
+  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',
@@ -51,16 +52,36 @@ describe('getPnpmPackageInfoFromPath', () => {
       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 pnpm virtual store paths', () => {
+  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 9688779b..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,39 +15,118 @@ 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 normalizedPath = path
-    .replace(/%2F/g, '/')
-    .replace(/\\/g, '/')
+  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 = normalizeModulePath(path)
 
-  const packageSegment = normalizedPath.match(/\/node_modules\/\.pnpm\/([^/]+)/)?.[1]
-  if (!packageSegment)
+  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),
+    }
+  }
+}
+
+function getPackageNameFromSegments(segments: string[], startIndex: number) {
+  const firstSegment = segments[startIndex]
+  if (!firstSegment)
     return undefined
 
-  const versionIndex = packageSegment.startsWith('@')
-    ? packageSegment.indexOf('@', 1)
-    : packageSegment.indexOf('@')
+  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 = packageSegment
+  const name = segment
     .slice(0, versionIndex)
     .replace(/\+/g, '/')
-  const version = packageSegment
+  const version = segment
     .slice(versionIndex + 1)
     .split('_')[0]
 
-  if (!name || !version)
+  if (!isPackageName(name) || !version)
     return undefined
 
   return {
@@ -47,30 +134,3 @@ export function getPnpmPackageInfoFromPath(path: string) {
     version,
   }
 }
-
-export function getPackageDirPath(path: string) {
-  const normalizedPath = path
-    .replace(/%2F/g, '/')
-    .replace(/\\/g, '/')
-
-  if (isPackageName(normalizedPath))
-    return normalizedPath
-
-  const pnpmNestedNodeModules = normalizedPath.match(/^(.+\/node_modules\/\.pnpm\/[^/]+\/node_modules\/)/)?.[1]
-  if (pnpmNestedNodeModules) {
-    const packageName = getModuleNameFromPath(normalizedPath)
-    if (packageName)
-      return `${pnpmNestedNodeModules}${packageName}`
-  }
-
-  const pnpmPackagePath = normalizedPath.match(/^(.+\/node_modules\/\.pnpm\/[^/]+)(?:\/|$)/)?.[1]
-  if (pnpmPackagePath)
-    return pnpmPackagePath
-
-  const nodeModulesPrefix = normalizedPath.match(/^(.+\/node_modules\/)/)?.[1]
-  const packageName = getModuleNameFromPath(normalizedPath)
-  if (!nodeModulesPrefix || !packageName)
-    return normalizedPath
-
-  return nodeModulesPrefix + packageName
-}
diff --git a/packages/ui/src/components/PanelSideNav.vue b/packages/ui/src/components/PanelSideNav.vue
index a42a7740..85683411 100644
--- a/packages/ui/src/components/PanelSideNav.vue
+++ b/packages/ui/src/components/PanelSideNav.vue
@@ -45,7 +45,6 @@ const items = computed<SideNavItem[]>(() => {
           p2 hover:bg-active op-fade hover:op100
           flex="~ items-center justify-center"
           exact-active-class="text-primary op100!"
-          :class="item.active ? 'bg-active text-primary op100!' : undefined"
           @click="item.action?.()"
         >
           <div :class="item.icon" text-lg />
diff --git a/packages/ui/src/composables/nav.ts b/packages/ui/src/composables/nav.ts
index b29d0620..3439f5dc 100644
--- a/packages/ui/src/composables/nav.ts
+++ b/packages/ui/src/composables/nav.ts
@@ -4,7 +4,6 @@ import { computed, onScopeDispose, reactive, toRef, watch } from 'vue'
 export interface SideNavItem {
   icon: string
   title: string
-  active?: boolean
   category?: string
   to?: string
   action?: () => void