diff --git a/package.json b/package.json
index 2f62338a..91707340 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@iconify-json/carbon": "catalog:icons",
     "@iconify-json/catppuccin": "catalog:icons",
     "@iconify-json/codicon": "catalog:icons",
+    "@iconify-json/fluent": "catalog:icons",
     "@iconify-json/logos": "catalog:icons",
     "@iconify-json/ph": "catalog:icons",
     "@iconify-json/ri": "catalog:icons",
diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
new file mode 100644
index 00000000..f8c216f9
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { SessionContext } from '~~/shared/types'
+import { useRoute } from '#app/composables/router'
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+import { settings } from '~~/app/state/settings'
+
+const props = defineProps<{
+  session: SessionContext
+}>()
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const route = useRoute()
+const rpc = useRpc()
+const { state, isLoading } = useAsyncState(
+  async () => {
+    const res = await rpc.value!['vite:rolldown:get-plugin-details']?.({
+      session: props.session.id,
+      id: route.query.plugin as string,
+    })
+    return res
+  },
+  null,
+)
+
+const processedModules = computed(() => {
+  const seen = new Set()
+  return state.value?.calls?.filter((call) => {
+    if (seen.has(call.module)) {
+      return false
+    }
+    seen.add(call.module)
+    return true
+  }) ?? []
+})
+
+const hookLoadDuration = computed(() => {
+  const loadMetrics = state.value?.loadMetrics
+  if (!loadMetrics?.length) {
+    return
+  }
+  return loadMetrics[loadMetrics.length - 1]!.timestamp_end - loadMetrics[0]!.timestamp_start
+})
+
+const hookTransformDuration = computed(() => {
+  const transformMetrics = state.value?.transformMetrics
+  if (!transformMetrics?.length) {
+    return
+  }
+  return transformMetrics[transformMetrics.length - 1]!.timestamp_end - transformMetrics[0]!.timestamp_start
+})
+
+const hookResolveIdDuration = computed(() => {
+  const resolveIdMetrics = state.value?.resolveIdMetrics
+  if (!resolveIdMetrics?.length) {
+    return
+  }
+  return resolveIdMetrics[resolveIdMetrics.length - 1]!.timestamp_end - resolveIdMetrics[0]!.timestamp_start
+})
+
+const totalDuration = computed(() => {
+  const calls = state.value?.calls
+  if (!calls?.length) {
+    return
+  }
+  return calls[calls.length - 1]!.timestamp_end - calls[0]!.timestamp_start
+})
+</script>
+
+<template>
+  <VisualLoading v-if="isLoading" />
+  <div v-else-if="state?.calls?.length" relative h-full w-full>
+    <DisplayCloseButton
+      absolute right-2 top-1.5
+      @click="emit('close')"
+    />
+    <div
+      bg-glass absolute left-2 top-2 z-panel-content p2
+      border="~ base rounded-lg"
+      flex="~ col gap-2"
+    >
+      <DisplayPluginName :name="state?.plugin_name!" />
+      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+        <DisplayDuration
+          :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
+          :title="`Resolve Id hooks cost: ${hookResolveIdDuration}ms`"
+        >
+          <span i-ph-magnifying-glass-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="hookLoadDuration" flex="~ gap-1 items-center"
+          :title="`Load hooks cost: ${hookLoadDuration}ms`"
+        >
+          <span i-ph-upload-simple-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="hookTransformDuration" flex="~ gap-1 items-center"
+          :title="`Transform hooks cost: ${hookTransformDuration}ms`"
+        >
+          <span i-ph-magic-wand-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayDuration
+          :duration="totalDuration" flex="~ gap-1 items-center"
+          :title="`Total build cost: ${totalDuration}ms`"
+        >
+          <span i-ph-clock-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="processedModules.length" icon="i-catppuccin-java-class-abstract"
+          color="transparent color-scale-neutral"
+          :title="`Module processed: ${processedModules.length}`"
+        />
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="state?.calls?.length ?? 0" icon="i-ph:arrow-counter-clockwise"
+          color="transparent color-scale-neutral"
+          :title="`Total calls: ${state?.calls?.length ?? 0}`"
+        />
+      </div>
+      <div flex="~ gap-2">
+        <button
+          :class="settings.pluginDetailsViewType === 'flow' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.pluginDetailsViewType = 'flow'"
+        >
+          <div i-ph-git-branch-duotone rotate-180 />
+          Build Flow
+        </button>
+        <button
+          :class="settings.pluginDetailsViewType === 'charts' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.pluginDetailsViewType = 'charts'"
+        >
+          <div i-ph-chart-donut-duotone />
+          Charts
+        </button>
+      </div>
+    </div>
+    <div of-auto h-full pt-30>
+      <FlowmapPluginFlow
+        v-if="settings.pluginDetailsViewType === 'flow'"
+        :session="session"
+        :build-metrics="state"
+      />
+    </div>
+  </div>
+  <div v-else flex="~ items-center justify-center" w-full h-full>
+    <span italic op50>
+      No data
+    </span>
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
new file mode 100644
index 00000000..9be94675
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import type { FilterMatchRule } from '~/utils/icon'
+import { useCycleList } from '@vueuse/core'
+import { Menu as VMenu } from 'floating-vue'
+import { computed, ref } from 'vue'
+import { settings } from '~~/app/state/settings'
+import { parseReadablePath } from '~/utils/filepath'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+const props = defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+  selectedFields: string[]
+}>()
+
+const HOOK_NAME_MAP = {
+  resolve: 'Resolve Id',
+  load: 'Load',
+  transform: 'Transform',
+}
+
+const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
+  const path = parseReadablePath(mod.id, props.session.meta.cwd)
+  const type = getFileTypeFromModuleId(mod.id)
+  return {
+    mod,
+    path,
+    type,
+  }
+}))
+
+const searchFilterTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+
+const filterModuleTypes = ref<string[]>(settings.value.pluginDetailsModuleTypes ?? searchFilterTypes.value.map(i => i.name))
+const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
+  initialValue: settings.value.pluginDetailsDurationSortType,
+})
+const filtered = computed(() => {
+  const sorted = durationSortType.value
+    ? [...props.buildMetrics.calls].sort((a, b) => {
+        if (durationSortType.value === 'asc') {
+          return a.duration - b.duration
+        }
+        return b.duration - a.duration
+      })
+    : props.buildMetrics.calls
+  return sorted.filter((i) => {
+    const matched = getFileTypeFromModuleId(i.module)
+    return filterModuleTypes.value.includes(matched.name)
+  }).filter(settings.value.pluginDetailSelectedHook ? i => i.type === settings.value.pluginDetailSelectedHook : Boolean)
+})
+
+function toggleModuleType(rule: FilterMatchRule) {
+  if (filterModuleTypes.value?.includes(rule.name)) {
+    filterModuleTypes.value = filterModuleTypes.value?.filter(t => t !== rule.name)
+  }
+  else {
+    filterModuleTypes.value?.push(rule.name)
+  }
+  settings.value.pluginDetailsModuleTypes = filterModuleTypes.value
+}
+
+function normalizeTimestamp(timestamp: number) {
+  return new Date(timestamp).toLocaleString(undefined, {
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    fractionalSecondDigits: 3,
+  })
+}
+
+function toggleDurationSortType() {
+  next()
+  settings.value.pluginDetailsDurationSortType = durationSortType.value
+}
+</script>
+
+<template>
+  <table w-full border-separate border-spacing-0>
+    <thead border="b base">
+      <tr px2 class="[&_th]:(sticky top-0 z10 border-b border-base)">
+        <th v-if="selectedFields.includes('hookName')" bg-base w32 ws-nowrap p1 text-center font-600>
+          Hook name
+        </th>
+        <th v-if="selectedFields.includes('module')" bg-base min-w100 ws-nowrap p1 text-left font-600>
+          <button flex="~ row gap1 items-center" w-full>
+            Module
+            <VMenu>
+              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+                <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
+              </span>
+              <template #popper>
+                <div class="p2" flex="~ col gap2">
+                  <label
+                    v-for="rule of searchFilterTypes"
+                    :key="rule.name"
+                    border="~ base rounded-md" px2 py1
+                    flex="~ items-center gap-1"
+                    select-none
+                    :title="rule.description"
+                    class="cursor-pointer module-type-filter"
+                  >
+                    <input
+                      type="checkbox"
+                      mr1
+                      :checked="filterModuleTypes?.includes(rule.name)"
+                      @change="toggleModuleType(rule)"
+                    >
+                    <div :class="rule.icon" icon-catppuccin />
+                    <div text-sm>{{ rule.description || rule.name }}</div>
+                  </label>
+                </div>
+              </template>
+            </VMenu>
+          </button>
+        </th>
+        <th v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
+          Start Time
+        </th>
+        <th v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
+          End Time
+        </th>
+        <th v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
+          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+            Duration
+            <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+              <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+            </span>
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody v-if="filtered.length">
+      <tr v-for="(item, index) in filtered" :key="item.id" class="[&_td]:(border-base border-b-1 border-dashed)" :class="[index === filtered.length - 1 ? '[&_td]:(border-b-0)' : '']">
+        <td v-if="selectedFields.includes('hookName')" w32 ws-nowrap text-center text-sm op80>
+          {{ HOOK_NAME_MAP[item.type] }}
+        </td>
+        <td v-if="selectedFields.includes('module')" min-w100 text-left text-ellipsis line-clamp-2>
+          <DisplayModuleId
+            :id="item.module"
+            w-full border-none
+            :session="session"
+            :link="`/session/${session.id}/graph?module=${item.module}`"
+            hover="bg-active"
+            border="~ base rounded" block px2 py1
+          />
+        </td>
+        <td v-if="selectedFields.includes('startTime')" text-center font-mono text-sm min-w52 op80>
+          <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
+        </td>
+        <td v-if="selectedFields.includes('endTime')" text-center font-mono text-sm min-w52 op80>
+          <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
+        </td>
+        <td v-if="selectedFields.includes('duration')" text-center text-sm>
+          <DisplayDuration :duration="item.duration" />
+        </td>
+      </tr>
+    </tbody>
+    <tbody v-else>
+      <tr>
+        <td :colspan="selectedFields.length" p4>
+          <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+            No data
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/packages/devtools-vite/src/app/components/data/SearchPanel.vue b/packages/devtools-vite/src/app/components/data/SearchPanel.vue
index 6b8cf256..38f6367f 100644
--- a/packages/devtools-vite/src/app/components/data/SearchPanel.vue
+++ b/packages/devtools-vite/src/app/components/data/SearchPanel.vue
@@ -3,18 +3,20 @@ import type { FilterMatchRule } from '~/utils/icon'
 import { useVModel } from '@vueuse/core'
 import { withDefaults } from 'vue'
 
-interface ModelValue { search: string, selected?: string[] | null }
+interface ModelValue { search?: string | false, selected?: string[] | null }
 
 const props = withDefaults(
   defineProps<{
     rules: FilterMatchRule[]
     modelValue?: ModelValue
+    selectedContainerClass?: string
   }>(),
   {
     modelValue: () => ({
       search: '',
       selected: null,
     }),
+    selectedContainerClass: '',
   },
 )
 
@@ -71,7 +73,7 @@ function unselectToggle() {
 
 <template>
   <div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
-    <div>
+    <div v-if="modelValue.search !== false">
       <input
         v-model="model.search"
         p2 px4
@@ -80,7 +82,7 @@ function unselectToggle() {
         placeholder="Search"
       >
     </div>
-    <div v-if="rules.length" flex="~ gap-2 wrap" p2 border="t base">
+    <div v-if="rules.length" :class="selectedContainerClass" flex="~ gap-2 wrap" p2 border="t base">
       <label
         v-for="rule of rules"
         :key="rule.name"
diff --git a/packages/devtools-vite/src/app/components/flowmap/Node.vue b/packages/devtools-vite/src/app/components/flowmap/Node.vue
index 9912c7b0..1d70d36c 100644
--- a/packages/devtools-vite/src/app/components/flowmap/Node.vue
+++ b/packages/devtools-vite/src/app/components/flowmap/Node.vue
@@ -7,6 +7,8 @@ const props = defineProps<{
   classNodeInline?: string
   classNodeOuter?: string
   classNodeInner?: string
+  classLineTop?: string
+  classLineBottom?: string
   active?: boolean
 }>()
 
@@ -17,12 +19,12 @@ const expanded = defineModel<boolean>('expanded', { required: false, default: tr
   <div flex="~ col" relative>
     <div
       v-if="props.lines?.top" absolute top-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
-      :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      :class="[active ? 'border-flow-line-active' : 'border-flow-line', props.classLineTop]"
       :style="typeof props.lines?.top === 'number' ? `height: ${props.lines.top}px` : ''"
     />
     <div
       v-if="props.lines?.bottom" absolute bottom-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
-      :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      :class="[active ? 'border-flow-line-active' : 'border-flow-line', props.classLineBottom]"
       :style="typeof props.lines?.bottom === 'number' ? `height: ${props.lines.bottom}px` : ''"
     />
     <slot name="before" />
diff --git a/packages/devtools-vite/src/app/components/flowmap/NodePluginInfo.vue b/packages/devtools-vite/src/app/components/flowmap/NodePluginInfo.vue
new file mode 100644
index 00000000..7fe7fdc6
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/flowmap/NodePluginInfo.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  modules: number
+  calls: number
+  duration: number | undefined
+}>()
+</script>
+
+<template>
+  <span op50 text-xs flex justify-center items-center>
+    <DisplayNumberBadge
+      :number="modules" icon="i-catppuccin-java-class-abstract"
+      color="transparent color-scale-neutral"
+      :title="`Module processed: ${modules}`"
+    />
+    <span op40>|</span>
+    <DisplayNumberBadge
+      :number="calls" icon="i-ph:arrow-counter-clockwise"
+      color="transparent color-scale-neutral"
+      :title="`Total calls: ${calls}`"
+    />
+    <span op40>|</span>
+    <DisplayDuration
+      :duration="duration" flex="~ gap-1 items-center" px1
+      :title="`Total build cost: ${duration}ms`"
+    >
+      <span i-ph-clock-duotone inline-block />
+    </DisplayDuration>
+  </span>
+</template>
diff --git a/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
new file mode 100644
index 00000000..c2ed201c
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import { useToggle } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { settings } from '~~/app/state/settings'
+
+defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+}>()
+
+const [expanded, toggleExpanded] = useToggle(true)
+const tableFieldFilterRules = [
+  {
+    match: /hookName/,
+    name: 'hookName',
+    description: 'Hook name',
+    icon: 'i-carbon:function',
+  },
+  {
+    match: /module/,
+    name: 'module',
+    description: 'Module',
+    icon: 'i-ph:package-duotone',
+  },
+  {
+    match: /startTime/,
+    name: 'startTime',
+    description: 'Start Time',
+    icon: 'i-carbon:time',
+  },
+  {
+    match: /endTime/,
+    name: 'endTime',
+    description: 'End Time',
+    icon: 'i-carbon:time',
+  },
+  {
+    match: /duration/,
+    name: 'duration',
+    description: 'Duration',
+    icon: 'i-ph:clock-duotone',
+  },
+]
+const searchValue = ref<{ selected: string[] | null, search: false }>({
+  selected: settings.value.pluginDetailsTableFields,
+  search: false,
+})
+const selectedFields = computed(() => settings.value.pluginDetailsTableFields ? settings.value.pluginDetailsTableFields : tableFieldFilterRules.map(rule => rule.name))
+
+watch(() => searchValue.value.selected, (value) => {
+  settings.value.pluginDetailsTableFields = value
+})
+</script>
+
+<template>
+  <div p2 h-full w-full>
+    <div flex="~" border="~ base" rounded-2 h-full relative of-hidden>
+      <div v-if="expanded" of-hidden border="r base">
+        <FlowmapPluginFlowTimeline
+          :session="session"
+          :build-metrics="buildMetrics"
+        >
+          <template #header>
+            <div px2 h10 border="b base" bg-base rounded-t-2 flex="~ items-center justify-end">
+              <button w8 h8 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(false)">
+                <i i-fluent:panel-right-expand-20-regular inline-flex op50 />
+              </button>
+            </div>
+          </template>
+        </FlowmapPluginFlowTimeline>
+      </div>
+      <div flex-1 of-y-auto h-full flex="~ col">
+        <div px2 h10 border="b base" bg-base rounded-t-2 of-x-auto ws-nowrap flex="~ items-center">
+          <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
+            <i i-fluent:panel-left-expand-20-regular inline-flex op50 />
+          </button>
+          <DataSearchPanel
+            v-model="searchValue"
+            h8
+            border-none selected-container-class="p0! border-none bg-none flex-nowrap!"
+            :rules="tableFieldFilterRules"
+            class="[&_[icon-catppuccin]]:(filter-none!)"
+          />
+        </div>
+        <div flex-1 of-y-auto overscroll-contain>
+          <DataPluginDetailsTable
+            :session="session"
+            :build-metrics="buildMetrics"
+            :selected-fields="selectedFields"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
new file mode 100644
index 00000000..9c0f4792
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { SessionContext } from '~~/shared/types'
+import type { PluginBuildInfo, RolldownPluginBuildMetrics } from '~~/shared/types/data'
+import { computed } from 'vue'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+}>()
+
+function normalizeMetrics(metrics: PluginBuildInfo[]) {
+  const info = {
+    duration: 0,
+    calls: metrics.length,
+    modules: 0,
+  }
+  const seen = new Set()
+  metrics.forEach((metric, index) => {
+    if (!seen.has(metric.module)) {
+      seen.add(metric.module)
+      info.modules++
+    }
+    if (index === 0) {
+      info.duration = metric.timestamp_start
+    }
+    if (index === metrics.length - 1) {
+      info.duration = metric.timestamp_end - info.duration
+    }
+  })
+  if (info.duration === 0) {
+    info.duration = null!
+  }
+  return info
+}
+
+const resolveIdMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.resolveIdMetrics))
+
+const loadMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.loadMetrics))
+
+const transformMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.transformMetrics))
+
+const startTime = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length) {
+    return
+  }
+  return calls[0]!.timestamp_start
+})
+
+const endTime = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length) {
+    return
+  }
+  return calls[calls.length - 1]!.timestamp_end
+})
+</script>
+
+<template>
+  <div flex="~ col w-full">
+    <slot name="header" />
+    <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
+      <div flex="~">
+        <FlowmapNode
+          :active="false"
+          class-node-inner="w60"
+        >
+          <template #content>
+            <div p2 w-full text-center @click="settings.pluginDetailSelectedHook = ''">
+              <DisplayPluginName
+                :name="buildMetrics.plugin_name"
+                class="font-mono text-sm ws-nowrap text-ellipsis line-clamp-1"
+              />
+            </div>
+          </template>
+        </FlowmapNode>
+      </div>
+      <div flex="~ items-center justify-center" relative w-60 h14>
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-0 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-10 border="r" z-flowmap-line
+          h4
+        />
+        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
+          <i i-ph:airplane-takeoff-thin text-4 inline-flex />
+          <time v-if="startTime" :datetime="new Date(startTime).toISOString()">{{ new Date(startTime).toLocaleString() }}</time>
+        </span>
+      </div>
+      <FlowmapNode
+        class-node-inner="w60"
+        :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
+        :active="settings.pluginDetailSelectedHook === 'resolve'"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'resolve'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-magnifying-glass-duotone /> Resolve Id
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="resolveIdMetricsInfo.modules"
+                :calls="resolveIdMetricsInfo.calls"
+                :duration="resolveIdMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+
+      <FlowmapNode
+        :active="settings.pluginDetailSelectedHook === 'load'"
+        class-node-inner="w60"
+        :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'load'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-upload-simple-duotone /> Load
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="loadMetricsInfo.modules"
+                :calls="loadMetricsInfo.calls"
+                :duration="loadMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+
+      <FlowmapNode
+        :active="settings.pluginDetailSelectedHook === 'transform'"
+        class-node-inner="w60"
+        :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed!` : ''}`"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'transform'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-magic-wand-duotone /> Transform
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="transformMetricsInfo.modules"
+                :calls="transformMetricsInfo.calls"
+                :duration="transformMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+      <div flex="~ items-center justify-center" relative w-60 h14>
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-0 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-10 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-14 w-2 h-2 border="4" rounded-full
+        />
+        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
+          <i i-ph:airplane-landing-thin text-4 inline-flex />
+          <time v-if="endTime" :datetime="new Date(endTime).toISOString()">{{ new Date(endTime).toLocaleString() }}</time>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/modules/BuildMetrics.vue b/packages/devtools-vite/src/app/components/modules/BuildMetrics.vue
index c53a4571..d7c99417 100644
--- a/packages/devtools-vite/src/app/components/modules/BuildMetrics.vue
+++ b/packages/devtools-vite/src/app/components/modules/BuildMetrics.vue
@@ -44,19 +44,19 @@ const transformedCodeSize = computed(() => {
   <div text-xs font-mono flex="~ items-center gap-3" ml2>
     <DisplayDuration
       :duration="durations.resolveIds" flex="~ gap-1 items-center"
-      :title="`resolveId hooks cost: ${durations.resolveIds}ms`"
+      :title="`Resolve Id hooks cost: ${durations.resolveIds}ms`"
     >
       <span i-ph-magnifying-glass-duotone inline-block />
     </DisplayDuration>
     <DisplayDuration
       :duration="durations.loads" flex="~ gap-1 items-center"
-      :title="`load hooks cost: ${durations.loads}ms`"
+      :title="`Load hooks cost: ${durations.loads}ms`"
     >
       <span i-ph-upload-simple-duotone inline-block />
     </DisplayDuration>
     <DisplayDuration
       :duration="durations.transforms" flex="~ gap-1 items-center"
-      :title="`transform hooks cost: ${durations.transforms}ms`"
+      :title="`Transform hooks cost: ${durations.transforms}ms`"
     >
       <span i-ph-magic-wand-duotone inline-block />
     </DisplayDuration>
diff --git a/packages/devtools-vite/src/app/components/plugins/FlatList.vue b/packages/devtools-vite/src/app/components/plugins/FlatList.vue
index 36a4ba6e..d7d793a2 100644
--- a/packages/devtools-vite/src/app/components/plugins/FlatList.vue
+++ b/packages/devtools-vite/src/app/components/plugins/FlatList.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
 import type { PluginItem } from '~~/shared/types'
+import { useRoute } from '#app/composables/router'
 
 defineProps<{
   plugins: PluginItem[]
 }>()
+
+const route = useRoute()
 </script>
 
 <template>
   <div flex="~ col gap-2" p4>
     <template v-for="plugin of plugins" :key="plugin.id">
-      <div font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+      <NuxtLink :to="{ path: route.path, query: { plugin: plugin.plugin_id } }" font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
         <div w-8 text-right text-xs op50>
           #{{ plugin.plugin_id }}
         </div>
         <span overflow-hidden text-ellipsis break-all line-clamp-2>
           <DisplayPluginName :name="plugin.name" />
         </span>
-      </div>
+      </NuxtLink>
     </template>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/pages/session/[session].vue b/packages/devtools-vite/src/app/pages/session/[session].vue
index a1ab83f6..375a99e6 100644
--- a/packages/devtools-vite/src/app/pages/session/[session].vue
+++ b/packages/devtools-vite/src/app/pages/session/[session].vue
@@ -32,6 +32,10 @@ function closeAssetPanel() {
   router.replace({ query: { ...route.query, asset: undefined } })
 }
 
+function closePluginPanel() {
+  router.replace({ query: { ...route.query, plugin: undefined } })
+}
+
 onKeyDown('Escape', (e) => {
   e.preventDefault()
 
@@ -145,5 +149,22 @@ onMounted(async () => {
         />
       </div>
     </div>
+    <div
+      v-if="route.query.plugin" fixed inset-0
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+    >
+      <div
+        :key="(route.query.plugin as string)"
+        v-on-click-outside="[closePluginPanel, { ignore: ['.module-type-filter'] }]"
+        fixed right-0 bottom-0 top-20 left-20 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+      >
+        <DataPluginDetailsLoader
+          :plugin="(route.query.plugin as string)"
+          :session="session"
+          @close="closePluginPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/packages/devtools-vite/src/app/state/settings.ts b/packages/devtools-vite/src/app/state/settings.ts
index 1cf21321..e3338302 100644
--- a/packages/devtools-vite/src/app/state/settings.ts
+++ b/packages/devtools-vite/src/app/state/settings.ts
@@ -16,6 +16,11 @@ export interface ClientSettings {
   assetViewType: 'list' | 'folder' | 'treemap' | 'sunburst' | 'flamegraph'
   chartAnimation: boolean
   moduleDetailsViewType: 'flow' | 'charts' | 'imports'
+  pluginDetailsViewType: 'flow' | 'charts'
+  pluginDetailsTableFields: string[] | null
+  pluginDetailsModuleTypes: string[] | null
+  pluginDetailsDurationSortType: string
+  pluginDetailSelectedHook: string
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -34,6 +39,11 @@ export const settings = useLocalStorage<ClientSettings>(
     assetViewType: 'list',
     chartAnimation: true,
     moduleDetailsViewType: 'flow',
+    pluginDetailsViewType: 'flow',
+    pluginDetailsTableFields: null,
+    pluginDetailsModuleTypes: null,
+    pluginDetailsDurationSortType: '',
+    pluginDetailSelectedHook: '',
   },
   {
     mergeDefaults: true,
diff --git a/packages/devtools-vite/src/node/rolldown/events-manager.ts b/packages/devtools-vite/src/node/rolldown/events-manager.ts
index 201e4b5f..e5ce4dcc 100644
--- a/packages/devtools-vite/src/node/rolldown/events-manager.ts
+++ b/packages/devtools-vite/src/node/rolldown/events-manager.ts
@@ -1,5 +1,5 @@
 import type { Asset as AssetInfo, Chunk as ChunkInfo, Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
-import type { ModuleBuildMetrics } from '~~/shared/types'
+import type { ModuleBuildMetrics, PluginBuildMetrics } from '~~/shared/types'
 import { getContentByteSize } from '../utils/format'
 
 export type RolldownEvent = Event & {
@@ -20,6 +20,7 @@ export class RolldownEventsManager {
   source_refs: Map<string, string> = new Map()
   module_build_hook_events: Map<string, ModuleBuildHookEvents> = new Map()
   module_build_metrics: Map<string, ModuleBuildMetrics> = new Map()
+  plugin_build_metrics: Map<number, PluginBuildMetrics> = new Map()
   build_start_time: number = 0
   build_end_time: number = 0
 
@@ -34,7 +35,7 @@ export class RolldownEventsManager {
     }
   }
 
-  recordModuleBuildMetrics(event: ModuleBuildHookEvents) {
+  recordBuildMetrics(event: ModuleBuildHookEvents) {
     if (MODULE_BUILD_START_HOOKS.includes(event.action)) {
       this.module_build_hook_events.set(event.call_id, event)
     }
@@ -42,15 +43,21 @@ export class RolldownEventsManager {
       const start = this.module_build_hook_events.get(event.call_id)
       const module_id = event.action === 'HookResolveIdCallEnd' ? event.resolved_id! : (event as HookLoadCallEnd | HookTransformCallEnd).module_id
       if (start) {
+        const pluginId = event.plugin_id
         const info = {
           id: event.event_id,
           timestamp_start: +start.timestamp,
           timestamp_end: +event.timestamp,
           duration: +event.timestamp - +start.timestamp,
-          plugin_id: event.plugin_id,
+          plugin_id: pluginId,
           plugin_name: event.plugin_name,
         }
         const module_build_metrics = this.module_build_metrics.get(module_id) ?? { resolve_ids: [], loads: [], transforms: [] }
+        const plugin_build_metrics = this.plugin_build_metrics.get(pluginId) ?? {
+          plugin_id: pluginId,
+          plugin_name: event.plugin_name,
+          calls: [],
+        }
         if (event.action === 'HookResolveIdCallEnd') {
           module_build_metrics.resolve_ids.push({
             ...info,
@@ -60,6 +67,11 @@ export class RolldownEventsManager {
             import_kind: (start as HookResolveIdCallStart).import_kind,
             resolved_id: event.resolved_id,
           })
+          plugin_build_metrics.calls.push({
+            ...info,
+            type: 'resolve',
+            module: (start as HookResolveIdCallStart).module_request,
+          })
         }
         else if (event.action === 'HookLoadCallEnd') {
           if (!event.content && info.duration < DURATION_THRESHOLD) {
@@ -70,6 +82,11 @@ export class RolldownEventsManager {
             type: 'load',
             content: event.content,
           })
+          plugin_build_metrics.calls.push({
+            ...info,
+            type: 'load',
+            module: event.module_id,
+          })
         }
         else if (event.action === 'HookTransformCallEnd') {
           const _start = start as HookTransformCallStart
@@ -87,7 +104,13 @@ export class RolldownEventsManager {
             source_code_size: getContentByteSize(_start.content!),
             transformed_code_size: getContentByteSize(_end.content!),
           })
+          plugin_build_metrics.calls.push({
+            ...info,
+            type: 'transform',
+            module: event.module_id,
+          })
         }
+        this.plugin_build_metrics.set(pluginId, plugin_build_metrics)
         this.module_build_metrics.set(module_id, module_build_metrics)
       }
     }
@@ -121,7 +144,7 @@ export class RolldownEventsManager {
     }
 
     this.interpretSourceRefs(event, 'content')
-    this.recordModuleBuildMetrics(event as ModuleBuildHookEvents)
+    this.recordBuildMetrics(event as ModuleBuildHookEvents)
 
     if ('module_id' in event) {
       if (this.modules.has(event.module_id))
diff --git a/packages/devtools-vite/src/node/rpc/functions/rolldown-get-plugin-details.ts b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-plugin-details.ts
new file mode 100644
index 00000000..9f8b6460
--- /dev/null
+++ b/packages/devtools-vite/src/node/rpc/functions/rolldown-get-plugin-details.ts
@@ -0,0 +1,37 @@
+import type { RolldownPluginBuildMetrics } from '~~/shared/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getLogsManager } from '../utils'
+
+export const rolldownGetPluginDetails = defineRpcFunction({
+  name: 'vite:rolldown:get-plugin-details',
+  type: 'query',
+  setup: (context) => {
+    const manager = getLogsManager(context)
+    return {
+      handler: async ({ session, id }: { session: string, id: string }) => {
+        const reader = await manager.loadSession(session)
+        const pluginBuildMetrics = reader.manager.plugin_build_metrics.get(+id)!
+        if (!pluginBuildMetrics) {
+          const plugin = reader.meta!.plugins!.find(p => p.plugin_id === +id)!
+          return {
+            plugin_name: plugin?.name,
+            plugin_id: +id,
+            calls: [],
+            loadMetrics: [],
+            resolveIdMetrics: [],
+            transformMetrics: [],
+          } satisfies RolldownPluginBuildMetrics
+        }
+        const resolveIdMetrics = pluginBuildMetrics.calls.filter(c => c.type === 'resolve')!
+        const loadMetrics = pluginBuildMetrics.calls.filter(c => c.type === 'load')!
+        const transformMetrics = pluginBuildMetrics.calls.filter(c => c.type === 'transform')!
+        return {
+          ...pluginBuildMetrics,
+          resolveIdMetrics,
+          loadMetrics,
+          transformMetrics,
+        } satisfies RolldownPluginBuildMetrics
+      },
+    }
+  },
+})
diff --git a/packages/devtools-vite/src/node/rpc/index.ts b/packages/devtools-vite/src/node/rpc/index.ts
index ad23f62a..8236cda4 100644
--- a/packages/devtools-vite/src/node/rpc/index.ts
+++ b/packages/devtools-vite/src/node/rpc/index.ts
@@ -8,6 +8,7 @@ import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
 import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'
 import { rolldownGetModuleTransforms } from './functions/rolldown-get-module-transforms'
+import { rolldownGetPluginDetails } from './functions/rolldown-get-plugin-details'
 import { rolldownGetRawEvents } from './functions/rolldown-get-raw-events'
 import { rolldownGetSessionSummary } from './functions/rolldown-get-session-summary'
 import { rolldownListSessions } from './functions/rolldown-list-sessions'
@@ -25,6 +26,7 @@ export const rpcFunctions = [
   rolldownGetChunksGraph,
   rolldownGetAssetsList,
   rolldownGetAssetDetails,
+  rolldownGetPluginDetails,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
diff --git a/packages/devtools-vite/src/shared/types/data.ts b/packages/devtools-vite/src/shared/types/data.ts
index da66e12f..b2df94c6 100644
--- a/packages/devtools-vite/src/shared/types/data.ts
+++ b/packages/devtools-vite/src/shared/types/data.ts
@@ -17,6 +17,24 @@ export interface ModuleBuildMetrics {
   loads: RolldownModuleLoadInfo[]
   transforms: Array<Omit<RolldownModuleTransformInfo, 'diff_added' | 'diff_removed'> & { source_code_size: number, transformed_code_size: number }>
 }
+
+export interface PluginBuildInfo {
+  type: 'resolve' | 'load' | 'transform'
+  id: string
+  duration: number
+  plugin_id: number
+  plugin_name: string
+  module: string
+  timestamp_start: number
+  timestamp_end: number
+}
+
+export interface PluginBuildMetrics {
+  plugin_name: string
+  plugin_id: number
+  calls: PluginBuildInfo[]
+}
+
 export type { PluginItem }
 
 export interface ModuleListItem {
@@ -57,6 +75,12 @@ export interface ModuleTreeNode {
   items: ModuleDest[]
 }
 
+export type RolldownPluginBuildMetrics = PluginBuildMetrics & {
+  resolveIdMetrics: PluginBuildInfo[]
+  loadMetrics: PluginBuildInfo[]
+  transformMetrics: PluginBuildInfo[]
+}
+
 export interface RolldownResolveInfo {
   type: 'resolve'
   id: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d79e8d56..5a8b399e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -181,6 +181,9 @@ catalogs:
     '@iconify-json/codicon':
       specifier: ^1.2.25
       version: 1.2.25
+    '@iconify-json/fluent':
+      specifier: ^1.2.28
+      version: 1.2.28
     '@iconify-json/logos':
       specifier: ^1.2.5
       version: 1.2.5
@@ -263,6 +266,9 @@ importers:
       '@iconify-json/codicon':
         specifier: catalog:icons
         version: 1.2.25
+      '@iconify-json/fluent':
+        specifier: catalog:icons
+        version: 1.2.28
       '@iconify-json/logos':
         specifier: catalog:icons
         version: 1.2.5
@@ -1047,6 +1053,9 @@ packages:
   '@iconify-json/codicon@1.2.25':
     resolution: {integrity: sha512-Kp9GIuqZ/eGjYyR2JfrjwsvkTnNgtSEYw1oxmgSuULQkAZzZdh0XBlY0mqNtY5TdfCgG5GMHKe/PltGt5tU+IQ==}
 
+  '@iconify-json/fluent@1.2.28':
+    resolution: {integrity: sha512-Lnaf38ruWopJv8PdEsK8vXgxKpFSsKED2kI0/575ZXg6XHUMvzSuLlldAVAOEWZmMVPJFC0MXe07Ybnh1ziLvw==}
+
   '@iconify-json/logos@1.2.5':
     resolution: {integrity: sha512-WR8+9kFwx1tIR+hWpKYC+rpVkAuzHyaVxZRfhGGIjqCfgbodK7rS4+OZhktdKtZKKcdmhpLZKvlmRm4IA4dKRg==}
 
@@ -7224,6 +7233,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/fluent@1.2.28':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/logos@1.2.5':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 81faf6e3..3a4d8d84 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -72,6 +72,7 @@ catalogs:
     '@iconify-json/carbon': ^1.2.11
     '@iconify-json/catppuccin': ^1.2.13
     '@iconify-json/codicon': ^1.2.25
+    '@iconify-json/fluent': ^1.2.28
     '@iconify-json/logos': ^1.2.5
     '@iconify-json/ph': ^1.2.2
     '@iconify-json/ri': ^1.2.5