From a7db856806ce5f1b91ae34cde1ec8d63ca423bc2 Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Thu, 14 Aug 2025 14:22:53 +0800
Subject: [PATCH 1/4] feat: add plugin flamegraph

---
 .../app/components/chart/PluginFlamegraph.vue | 170 ++++++++++++++++++
 .../components/data/PluginDetailsLoader.vue   |   5 +
 2 files changed, 175 insertions(+)
 create mode 100644 packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue

diff --git a/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
new file mode 100644
index 00000000..5ca24db7
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { TreeNodeInput } from 'nanovis'
+import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types'
+import { Flamegraph, normalizeTreeNode } from 'nanovis'
+import { computed, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
+import { parseReadablePath } from '~/utils/filepath'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+const props = defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+}>()
+
+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,
+  }
+}))
+
+// filter current module list existed module type
+const existedModuleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+
+const n = (node: TreeNodeInput<any>) => normalizeTreeNode(node, undefined, false)
+
+const tree = computed(() => {
+  // build children: module group by module type
+  const resolveIds = existedModuleTypes.value.map((type, idx) => n({
+    id: `resolveId-${type.name}-${idx}`,
+    text: type.name,
+    children: props.buildMetrics.resolveIdMetrics.filter((item) => {
+      return getFileTypeFromModuleId(item.module).name === type.name
+    }).map((id, idx) => n({
+      id: `resolveId-${idx}`,
+      text: id.module,
+      size: id.duration,
+    })),
+  }))
+
+  const loads = existedModuleTypes.value.map((type, idx) => n({
+    id: `loads-${type.name}-${idx}`,
+    text: type.name,
+    children: props.buildMetrics.loadMetrics.filter((item) => {
+      return getFileTypeFromModuleId(item.module).name === type.name
+    }).map((id, idx) => n({
+      id: `resolveId-${idx}`,
+      text: id.module,
+      size: id.duration,
+    })),
+  }))
+
+  const transforms = existedModuleTypes.value.map((type, idx) => n({
+    id: `transforms-${type.name}-${idx}`,
+    text: type.name,
+    children: props.buildMetrics.transformMetrics.filter((item) => {
+      return getFileTypeFromModuleId(item.module).name === type.name
+    }).map((id, idx) => n({
+      id: `resolveId-${idx}`,
+      text: id.module,
+      size: id.duration,
+    })),
+  }))
+
+  // resolve/load/transform -> module type -> module
+  const children = [
+    n({
+      id: '~resolves',
+      text: 'resolve',
+      children: resolveIds,
+    }),
+    n({
+      id: '~loads',
+      text: 'load',
+      children: loads,
+    }),
+    n({
+      id: '~transforms',
+      text: 'transform',
+      children: transforms,
+    }),
+  ]
+
+  return n({
+    id: '~root',
+    text: 'Plugin Flamegraph',
+    children,
+  })
+})
+
+const hoverNode = ref<{
+  plugin_name: string
+  duration: number
+} | null>(null)
+const hoverX = ref<number>(0)
+const hoverY = ref<number>(0)
+const el = useTemplateRef<HTMLDivElement>('el')
+const flamegraph = shallowRef<Flamegraph | null>(null)
+
+function buildFlamegraph() {
+  flamegraph.value = new Flamegraph(tree.value, {
+    animate: true,
+    palette: {
+      fg: '#888',
+    },
+    getSubtext: (node) => {
+      const p = node.size / tree.value.size * 100
+      if (p > 15 && p !== 100) {
+        return `${p.toFixed(1)}%`
+      }
+      return undefined
+    },
+    onHover(node, e) {
+      if (!node) {
+        hoverNode.value = null
+        return
+      }
+      if (e) {
+        hoverX.value = e.clientX
+        hoverY.value = e.clientY
+      }
+      hoverNode.value = {
+        plugin_name: node.text!,
+        duration: node.size,
+      }
+    },
+  })
+  el.value!.appendChild(flamegraph.value!.el)
+}
+
+function disposeFlamegraph() {
+  flamegraph.value?.dispose()
+}
+
+onMounted(() => {
+  buildFlamegraph()
+})
+
+onUnmounted(() => {
+  disposeFlamegraph()
+})
+
+watch(tree, async () => {
+  disposeFlamegraph()
+  buildFlamegraph()
+}, {
+  deep: true,
+})
+</script>
+
+<template>
+  <div relative border="t base" pb10 py1 mt4>
+    <Teleport to="body">
+      <div
+        v-if="hoverNode"
+        border="~ base" rounded shadow px2 py1 fixed
+        z-panel-content bg-glass pointer-events-none text-sm
+        :style="{ left: `${hoverX}px`, top: `${hoverY}px` }"
+      >
+        <div font-bold font-mono>
+          {{ hoverNode.plugin_name }}
+        </div>
+        <DisplayDuration :duration="hoverNode.duration" />
+      </div>
+    </Teleport>
+    <div ref="el" min-h-30 />
+  </div>
+</template>
diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
index f8c216f9..936395ae 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
@@ -153,6 +153,11 @@ const totalDuration = computed(() => {
         :session="session"
         :build-metrics="state"
       />
+      <ChartPluginFlamegraph
+        v-if="settings.pluginDetailsViewType === 'charts'"
+        :session="session"
+        :build-metrics="state"
+      />
     </div>
   </div>
   <div v-else flex="~ items-center justify-center" w-full h-full>

From 7a35785f8b35b60677c2788304abdf1b4831cc90 Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Thu, 14 Aug 2025 19:48:37 +0800
Subject: [PATCH 2/4] chore: extract `normalizeTimestamp` function to common
 utils

---
 .../src/app/components/data/PluginDetailsTable.vue | 14 +-------------
 packages/devtools-vite/src/app/utils/format.ts     | 13 +++++++++++++
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index f012e73a..d961859d 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -6,6 +6,7 @@ import { Menu as VMenu } from 'floating-vue'
 import { computed, ref } from 'vue'
 import { settings } from '~~/app/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
+import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
@@ -63,19 +64,6 @@ function toggleModuleType(rule: FilterMatchRule) {
   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
diff --git a/packages/devtools-vite/src/app/utils/format.ts b/packages/devtools-vite/src/app/utils/format.ts
index d43162c2..1e528fea 100644
--- a/packages/devtools-vite/src/app/utils/format.ts
+++ b/packages/devtools-vite/src/app/utils/format.ts
@@ -57,3 +57,16 @@ export function toTree(modules: ModuleDest[], name: string) {
 
   return node
 }
+
+export 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,
+  })
+}

From 0ce9328e8f8954a35e27f1451671c2edd5063ce2 Mon Sep 17 00:00:00 2001
From: CrabSAMA <71915282@qq.com>
Date: Thu, 14 Aug 2025 19:58:59 +0800
Subject: [PATCH 3/4] feat: add more information in plugin flamegraph hover
 content

---
 .../app/components/chart/PluginFlamegraph.vue | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
index 5ca24db7..b9fc09da 100644
--- a/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
+++ b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { TreeNodeInput } from 'nanovis'
-import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types'
+import type { PluginBuildInfo, RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
 import { computed, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { parseReadablePath } from '~/utils/filepath'
+import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
@@ -24,7 +25,7 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
 // filter current module list existed module type
 const existedModuleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
 
-const n = (node: TreeNodeInput<any>) => normalizeTreeNode(node, undefined, false)
+const n = (node: TreeNodeInput<PluginBuildInfo>) => normalizeTreeNode(node, undefined, false)
 
 const tree = computed(() => {
   // build children: module group by module type
@@ -37,6 +38,7 @@ const tree = computed(() => {
       id: `resolveId-${idx}`,
       text: id.module,
       size: id.duration,
+      meta: id,
     })),
   }))
 
@@ -49,6 +51,7 @@ const tree = computed(() => {
       id: `resolveId-${idx}`,
       text: id.module,
       size: id.duration,
+      meta: id,
     })),
   }))
 
@@ -61,6 +64,7 @@ const tree = computed(() => {
       id: `resolveId-${idx}`,
       text: id.module,
       size: id.duration,
+      meta: id,
     })),
   }))
 
@@ -93,11 +97,12 @@ const tree = computed(() => {
 const hoverNode = ref<{
   plugin_name: string
   duration: number
+  meta: PluginBuildInfo | undefined
 } | null>(null)
 const hoverX = ref<number>(0)
 const hoverY = ref<number>(0)
 const el = useTemplateRef<HTMLDivElement>('el')
-const flamegraph = shallowRef<Flamegraph | null>(null)
+const flamegraph = shallowRef<Flamegraph<PluginBuildInfo> | null>(null)
 
 function buildFlamegraph() {
   flamegraph.value = new Flamegraph(tree.value, {
@@ -124,6 +129,7 @@ function buildFlamegraph() {
       hoverNode.value = {
         plugin_name: node.text!,
         duration: node.size,
+        meta: node.meta,
       }
     },
   })
@@ -159,10 +165,24 @@ watch(tree, async () => {
         z-panel-content bg-glass pointer-events-none text-sm
         :style="{ left: `${hoverX}px`, top: `${hoverY}px` }"
       >
-        <div font-bold font-mono>
+        <div flex="~" font-bold font-mono>
+          <DisplayFileIcon v-if="hoverNode.meta" :filename="hoverNode.meta.module" mr1.5 />
           {{ hoverNode.plugin_name }}
         </div>
-        <DisplayDuration :duration="hoverNode.duration" />
+        <div v-if="hoverNode.meta">
+          <div>
+            <label>Start Time: </label>
+            <time :datetime="new Date(hoverNode.meta.timestamp_start).toISOString()">{{ normalizeTimestamp(hoverNode.meta.timestamp_start) }}</time>
+          </div>
+          <div>
+            <label>End Time: </label>
+            <time :datetime="new Date(hoverNode.meta.timestamp_end).toISOString()">{{ normalizeTimestamp(hoverNode.meta.timestamp_end) }}</time>
+          </div>
+        </div>
+        <div flex="~ gap-1">
+          <label>Duration: </label>
+          <DisplayDuration :duration="hoverNode.duration" />
+        </div>
       </div>
     </Teleport>
     <div ref="el" min-h-30 />

From 075cd096649263311df919d3947b55b33cc829ca Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 16 Aug 2025 14:31:56 +0800
Subject: [PATCH 4/4] chore: update

---
 .../app/components/chart/ModuleFlamegraph.vue |  6 +--
 .../app/components/chart/PluginFlamegraph.vue | 48 +++++++++++--------
 .../app/pages/session/[session]/plugins.vue   |  7 ---
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/packages/devtools-vite/src/app/components/chart/ModuleFlamegraph.vue b/packages/devtools-vite/src/app/components/chart/ModuleFlamegraph.vue
index bed78059..35c27051 100644
--- a/packages/devtools-vite/src/app/components/chart/ModuleFlamegraph.vue
+++ b/packages/devtools-vite/src/app/components/chart/ModuleFlamegraph.vue
@@ -31,17 +31,17 @@ const tree = computed(() => {
   const children = [
     n({
       id: '~resolves',
-      text: 'resolve',
+      text: 'Resolve Id',
       children: resolveIds,
     }),
     n({
       id: '~loads',
-      text: 'load',
+      text: 'Load',
       children: loads,
     }),
     n({
       id: '~transforms',
-      text: 'transform',
+      text: 'Transform',
       children: transforms,
     }),
   ]
diff --git a/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
index b9fc09da..acbfaf71 100644
--- a/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
+++ b/packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue
@@ -2,6 +2,7 @@
 import type { TreeNodeInput } from 'nanovis'
 import type { PluginBuildInfo, RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
+import { relative } from 'pathe'
 import { computed, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
 import { parseReadablePath } from '~/utils/filepath'
 import { normalizeTimestamp } from '~/utils/format'
@@ -21,50 +22,55 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
     type,
   }
 }))
-
-// filter current module list existed module type
-const existedModuleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+const moduleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
 
 const n = (node: TreeNodeInput<PluginBuildInfo>) => normalizeTreeNode(node, undefined, false)
 
+function normalizeModulePath(path: string) {
+  const normalized = path.replace(/%2F/g, '/')
+  const cwd = props.session!.meta.cwd
+  let relate = cwd ? relative(cwd, normalized) : normalized
+  if (!relate.startsWith('.'))
+    relate = `./${relate}`
+  if (relate.startsWith('./'))
+    return relate
+  if (relate.match(/^(?:\.\.\/){1,3}[^.]/))
+    return relate
+  return normalized
+}
+
 const tree = computed(() => {
-  // build children: module group by module type
-  const resolveIds = existedModuleTypes.value.map((type, idx) => n({
+  const resolveIds = moduleTypes.value.map((type, idx) => n({
     id: `resolveId-${type.name}-${idx}`,
-    text: type.name,
+    text: type.description,
     children: props.buildMetrics.resolveIdMetrics.filter((item) => {
       return getFileTypeFromModuleId(item.module).name === type.name
     }).map((id, idx) => n({
       id: `resolveId-${idx}`,
-      text: id.module,
+      text: normalizeModulePath(id.module),
       size: id.duration,
-      meta: id,
     })),
   }))
-
-  const loads = existedModuleTypes.value.map((type, idx) => n({
+  const loads = moduleTypes.value.map((type, idx) => n({
     id: `loads-${type.name}-${idx}`,
-    text: type.name,
+    text: type.description,
     children: props.buildMetrics.loadMetrics.filter((item) => {
       return getFileTypeFromModuleId(item.module).name === type.name
     }).map((id, idx) => n({
       id: `resolveId-${idx}`,
-      text: id.module,
+      text: normalizeModulePath(id.module),
       size: id.duration,
-      meta: id,
     })),
   }))
-
-  const transforms = existedModuleTypes.value.map((type, idx) => n({
+  const transforms = moduleTypes.value.map((type, idx) => n({
     id: `transforms-${type.name}-${idx}`,
-    text: type.name,
+    text: type.description,
     children: props.buildMetrics.transformMetrics.filter((item) => {
       return getFileTypeFromModuleId(item.module).name === type.name
     }).map((id, idx) => n({
       id: `resolveId-${idx}`,
-      text: id.module,
+      text: normalizeModulePath(id.module),
       size: id.duration,
-      meta: id,
     })),
   }))
 
@@ -72,17 +78,17 @@ const tree = computed(() => {
   const children = [
     n({
       id: '~resolves',
-      text: 'resolve',
+      text: 'Resolve Id',
       children: resolveIds,
     }),
     n({
       id: '~loads',
-      text: 'load',
+      text: 'Load',
       children: loads,
     }),
     n({
       id: '~transforms',
-      text: 'transform',
+      text: 'Transform',
       children: transforms,
     }),
   ]
diff --git a/packages/devtools-vite/src/app/pages/session/[session]/plugins.vue b/packages/devtools-vite/src/app/pages/session/[session]/plugins.vue
index b135eea9..fab53069 100644
--- a/packages/devtools-vite/src/app/pages/session/[session]/plugins.vue
+++ b/packages/devtools-vite/src/app/pages/session/[session]/plugins.vue
@@ -90,10 +90,3 @@ debouncedWatch(
     </div>
   </div>
 </template>
-
-<!--
-TODO: plugins framegraph
-  Two different views direction:
-    - plugins -> hooks -> modules
-    - modules -> hooks -> plugins
--->