From ea89e702b828cc34d20c5e66187dfb11a808fb14 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 29 Jul 2025 22:58:01 +0800
Subject: [PATCH 1/4] feat: init

---
 .../src/app/components/data/PluginDetails.vue |  13 ++
 .../components/data/PluginDetailsLoader.vue   | 113 ++++++++++++++++++
 .../src/app/components/plugins/FlatList.vue   |   7 +-
 .../src/app/pages/session/[session].vue       |  22 ++++
 packages/devtools/src/app/state/settings.ts   |   2 +
 .../functions/rolldown-get-plugin-details.ts  |  22 ++++
 packages/devtools/src/node/rpc/index.ts       |   2 +
 7 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 packages/devtools/src/app/components/data/PluginDetails.vue
 create mode 100644 packages/devtools/src/app/components/data/PluginDetailsLoader.vue
 create mode 100644 packages/devtools/src/node/rpc/functions/rolldown-get-plugin-details.ts

diff --git a/packages/devtools/src/app/components/data/PluginDetails.vue b/packages/devtools/src/app/components/data/PluginDetails.vue
new file mode 100644
index 00000000..582cb225
--- /dev/null
+++ b/packages/devtools/src/app/components/data/PluginDetails.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SessionContext } from '~~/shared/types'
+
+defineProps<{
+  session: SessionContext
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-3">
+    Detail
+  </div>
+</template>
diff --git a/packages/devtools/src/app/components/data/PluginDetailsLoader.vue b/packages/devtools/src/app/components/data/PluginDetailsLoader.vue
new file mode 100644
index 00000000..5cbabdd0
--- /dev/null
+++ b/packages/devtools/src/app/components/data/PluginDetailsLoader.vue
@@ -0,0 +1,113 @@
+<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 { settings } from '~~/app/state/settings'
+
+const props = defineProps<{
+  session: SessionContext
+}>()
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const route = useRoute()
+const rpc = useRpc()
+const { state } = 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,
+)
+</script>
+
+<template>
+  <div v-if="state" 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?.name!" />
+      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+        <DisplayDuration
+          :duration="10" flex="~ gap-1 items-center"
+          :title="`resolveId hooks cost: ${10}ms`"
+        >
+          <span i-ph-magnifying-glass-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="10" flex="~ gap-1 items-center"
+          :title="`load hooks cost: ${10}ms`"
+        >
+          <span i-ph-upload-simple-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="10" flex="~ gap-1 items-center"
+          :title="`transform hooks cost: ${10}ms`"
+        >
+          <span i-ph-magic-wand-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayDuration
+          :duration="50" flex="~ gap-1 items-center"
+          :title="`Total build cost: ${50}ms`"
+        >
+          <span i-ph-clock-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="11" icon="i-catppuccin-java-class-abstract"
+          color="transparent color-scale-neutral"
+          title="Module processed: 11"
+        />
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="11" icon="i-ph:arrow-counter-clockwise"
+          color="transparent color-scale-neutral"
+          title="Total calls: 11"
+        />
+      </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>
+      <DataPluginDetails :session="session" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/packages/devtools/src/app/components/plugins/FlatList.vue b/packages/devtools/src/app/components/plugins/FlatList.vue
index 36a4ba6e..d7d793a2 100644
--- a/packages/devtools/src/app/components/plugins/FlatList.vue
+++ b/packages/devtools/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/src/app/pages/session/[session].vue b/packages/devtools/src/app/pages/session/[session].vue
index 28825084..ec69df23 100644
--- a/packages/devtools/src/app/pages/session/[session].vue
+++ b/packages/devtools/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()
 
@@ -144,5 +148,23 @@ 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"
+        fixed right-0 bottom-0 top-30 z-panel-content of-auto
+        bg-glass border="l t base rounded-tl-xl"
+        class="left-20 xl:left-100 2xl:left-150"
+      >
+        <DataPluginDetailsLoader
+          :plugin="(route.query.plugin as string)"
+          :session="session"
+          @close="closePluginPanel"
+        />
+      </div>
+    </div>
   </div>
 </template>
diff --git a/packages/devtools/src/app/state/settings.ts b/packages/devtools/src/app/state/settings.ts
index 65194074..f459d0d4 100644
--- a/packages/devtools/src/app/state/settings.ts
+++ b/packages/devtools/src/app/state/settings.ts
@@ -16,6 +16,7 @@ export interface ClientSettings {
   assetViewType: 'list' | 'folder' | 'treemap' | 'sunburst' | 'flamegraph'
   chartAnimation: boolean
   moduleDetailsViewType: 'flow' | 'charts' | 'imports'
+  pluginDetailsViewType: 'flow' | 'charts'
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -34,6 +35,7 @@ export const settings = useLocalStorage<ClientSettings>(
     assetViewType: 'list',
     chartAnimation: true,
     moduleDetailsViewType: 'flow',
+    pluginDetailsViewType: 'flow',
   },
   {
     mergeDefaults: true,
diff --git a/packages/devtools/src/node/rpc/functions/rolldown-get-plugin-details.ts b/packages/devtools/src/node/rpc/functions/rolldown-get-plugin-details.ts
new file mode 100644
index 00000000..79f92e3e
--- /dev/null
+++ b/packages/devtools/src/node/rpc/functions/rolldown-get-plugin-details.ts
@@ -0,0 +1,22 @@
+import { defineRpcFunction } from '../utils'
+
+export const rolldownGetPluginDetails = defineRpcFunction({
+  name: 'vite:rolldown:get-plugin-details',
+  type: 'query',
+  setup: ({ manager }) => {
+    return {
+      handler: async ({ session, id }: { session: string, id: string }) => {
+        const reader = await manager.loadSession(session)
+        const plugins = reader.meta?.plugins || []
+        const events = reader.manager.events
+        // @ts-expect-error skip type check
+        const matched = events.filter(e => e.plugin_id === +id)
+        const plugin = plugins.find(p => p.plugin_id === +id)
+        return {
+          name: plugin?.name,
+          matched: matched.length,
+        }
+      },
+    }
+  },
+})
diff --git a/packages/devtools/src/node/rpc/index.ts b/packages/devtools/src/node/rpc/index.ts
index 027b6859..43040e9f 100644
--- a/packages/devtools/src/node/rpc/index.ts
+++ b/packages/devtools/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 = DefinitionsToFunctions<typeof rpcFunctions>

From 3330b4872a9b4b1e09cc3e3bd2301cf730db1cbd Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Fri, 8 Aug 2025 17:54:27 +0800
Subject: [PATCH 2/4] chore: update

---
 .../components/data/PluginDetailsLoader.vue   |  72 +++++--
 .../components/data/PluginDetailsTable.vue    | 140 +++++++++++++
 .../src/app/components/flowmap/Node.vue       |   6 +-
 .../app/components/flowmap/NodePluginInfo.vue |  30 +++
 .../src/app/components/flowmap/PluginFlow.vue |  29 +++
 .../components/flowmap/PluginFlowTimeline.vue | 184 ++++++++++++++++++
 .../src/app/pages/session/[session].vue       |   5 +-
 .../functions/rolldown-get-plugin-details.ts  |  35 ++--
 .../devtools-vite/src/shared/types/data.ts    |   9 +
 9 files changed, 476 insertions(+), 34 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
 create mode 100644 packages/devtools-vite/src/app/components/flowmap/NodePluginInfo.vue
 create mode 100644 packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
 create mode 100644 packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
index 98c858b5..ce46f57b 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 
 const route = useRoute()
 const rpc = useRpc()
-const { state } = useAsyncState(
+const { state, isLoading } = useAsyncState(
   async () => {
     const res = await rpc.value!['vite:rolldown:get-plugin-details']?.({
       session: props.session.id,
@@ -28,7 +28,7 @@ const { state } = useAsyncState(
 
 const processedModules = computed(() => {
   const seen = new Set()
-  return state.value?.buildMetrics?.calls?.filter((call) => {
+  return state.value?.calls?.filter((call) => {
     if (seen.has(call.module)) {
       return false
     }
@@ -36,10 +36,43 @@ const processedModules = computed(() => {
     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>
-  <div v-if="state" relative h-full w-full>
+  <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')"
@@ -49,30 +82,30 @@ const processedModules = computed(() => {
       border="~ base rounded-lg"
       flex="~ col gap-2"
     >
-      <DisplayPluginName :name="state?.name!" />
+      <DisplayPluginName :name="state?.plugin_name!" />
       <div text-xs font-mono flex="~ items-center gap-3" ml2>
         <DisplayDuration
-          :duration="10" flex="~ gap-1 items-center"
-          :title="`resolveId hooks cost: ${10}ms`"
+          :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
+          :title="`resolveId hooks cost: ${hookResolveIdDuration}ms`"
         >
           <span i-ph-magnifying-glass-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
-          :duration="10" flex="~ gap-1 items-center"
-          :title="`load hooks cost: ${10}ms`"
+          :duration="hookLoadDuration" flex="~ gap-1 items-center"
+          :title="`load hooks cost: ${hookLoadDuration}ms`"
         >
           <span i-ph-upload-simple-duotone inline-block />
         </DisplayDuration>
         <DisplayDuration
-          :duration="10" flex="~ gap-1 items-center"
-          :title="`transform hooks cost: ${10}ms`"
+          :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="50" flex="~ gap-1 items-center"
-          :title="`Total build cost: ${50}ms`"
+          :duration="totalDuration" flex="~ gap-1 items-center"
+          :title="`Total build cost: ${totalDuration}ms`"
         >
           <span i-ph-clock-duotone inline-block />
         </DisplayDuration>
@@ -84,9 +117,9 @@ const processedModules = computed(() => {
         />
         <span op40>|</span>
         <DisplayNumberBadge
-          :number="state.buildMetrics?.calls?.length ?? 0" icon="i-ph:arrow-counter-clockwise"
+          :number="state?.calls?.length ?? 0" icon="i-ph:arrow-counter-clockwise"
           color="transparent color-scale-neutral"
-          :title="`Total calls: ${state.buildMetrics?.calls?.length ?? 0}`"
+          :title="`Total calls: ${state?.calls?.length ?? 0}`"
         />
       </div>
       <div flex="~ gap-2">
@@ -115,9 +148,18 @@ const processedModules = computed(() => {
       </div>
     </div>
     <div of-auto h-full pt-30>
-      <DataPluginDetails :session="session" />
+      <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>
 
 <style scoped>
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..b647c670
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import type { FilterMatchRule } from '~/utils/icon'
+import { useRoute, useRouter } from '#app/composables/router'
+import { useCycleList } from '@vueuse/core'
+import { Menu as VMenu } from 'floating-vue'
+import { computed, ref } from 'vue'
+import { parseReadablePath } from '~/utils/filepath'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+const props = defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+}>()
+
+const route = useRoute()
+const router = useRouter()
+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(() => {
+  return ModuleTypeRules.filter((rule) => {
+    return parsedPaths.value.some(mod => rule.match.test(mod.mod.id))
+  })
+})
+
+const filterModuleTypes = ref<string[]>((route.query.module_types ? (route.query.module_types as string).split(',') : searchFilterTypes.value.map(i => i.name)) as string[])
+const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'])
+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)
+  })
+})
+
+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)
+  }
+  router.replace({
+    query: {
+      ...route.query,
+      module_types: filterModuleTypes.value?.join(','),
+    },
+  })
+}
+
+function toggleDurationSortType() {
+  next()
+  router.replace({
+    query: { ...route.query, duration_sort: durationSortType.value ? durationSortType.value : undefined },
+  })
+}
+</script>
+
+<template>
+  <table w-full border-separate border-spacing-0>
+    <thead border="b base">
+      <tr px2>
+        <th sticky top-0 z10 border="b base" bg-base w32 ws-nowrap p1 text-center font-600>
+          Hook name
+        </th>
+        <th sticky top-0 z10 border="b base" bg-base w160 ws-nowrap p1 text-left font-600>
+          <button flex="~ row gap2 items-center" w-full>
+            Module
+            <VMenu>
+              <div text-xs class=" i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op20'" />
+              <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 sticky top-0 z10 border="b base" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
+          <button flex="~ row gap2 items-center justify-center" w-full @click="toggleDurationSortType">
+            Duration
+            <div text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op20']" />
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item in filtered" :key="item.id" border="b dashed transparent hover:base">
+        <td w32 ws-nowrap text-center text-sm op25>
+          {{ item.type }}
+        </td>
+        <td w160 ws-nowrap text-left text-ellipsi line-clamp-1>
+          <DisplayModuleId
+            :id="item.module"
+            w-full border-none
+            :session
+            :link="true"
+            hover="bg-active"
+            border="~ base rounded" block px2 py1
+          />
+        </td>
+        <td text-center text-sm>
+          <DisplayDuration :duration="item.duration" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/packages/devtools-vite/src/app/components/flowmap/Node.vue b/packages/devtools-vite/src/app/components/flowmap/Node.vue
index b81d6817..d02a6601 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..64cb34fe
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { RolldownPluginBuildMetrics, SessionContext } from '../../../shared/types/data'
+
+defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+}>()
+</script>
+
+<template>
+  <div p2 h-full w-full>
+    <div flex="~" border="~ base" rounded-2 h-full>
+      <div p2 of-hidden border="r base">
+        <FlowmapPluginFlowTimeline
+          :session="session"
+          :build-metrics="buildMetrics"
+        />
+      </div>
+      <div flex-1 of-y-scroll h-full>
+        <div>
+          <DataPluginDetailsTable
+            :session="session"
+            :build-metrics="buildMetrics"
+          />
+        </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..a9ca82f6
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import type { SessionContext } from '~~/shared/types'
+import type { PluginBuildMetrics, RolldownPluginBuildMetrics } from '../../../shared/types/data'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  session: SessionContext
+  buildMetrics: RolldownPluginBuildMetrics
+  selected?: PluginBuildMetrics['calls'][0] | null
+}>()
+
+const _emit = defineEmits<{
+  (e: 'select', value: PluginBuildMetrics['calls'][0] | null): void
+}>()
+
+function normalizeMetrics(metrics: PluginBuildMetrics['calls']) {
+  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 startedAt = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length) {
+    return
+  }
+  return calls[0]!.timestamp_start
+})
+
+const endedAt = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length) {
+    return
+  }
+  return calls[calls.length - 1]!.timestamp_end
+})
+</script>
+
+<template>
+  <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>
+            <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="startedAt" :datetime="new Date(startedAt).toISOString()">{{ new Date(startedAt).toLocaleString() }}</time>
+      </span>
+    </div>
+    <FlowmapNode
+      :active="false"
+      class-node-inner="w60"
+      class-line-bottom="left-50%! translate-x--1/2"
+      pb4 w60
+      :lines="{ bottom: true }"
+    >
+      <template #content>
+        <div flex="~ col gap1" w-full>
+          <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="false"
+      class-node-inner="w60"
+      class-line-bottom="left-50%! translate-x--1/2"
+      pb4 w60
+      :lines="{ bottom: true }"
+    >
+      <template #content>
+        <div flex="~ col gap1" w-full>
+          <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="false"
+      class-node-inner="w60"
+      :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+    >
+      <template #content>
+        <div flex="~ col gap1" w-full>
+          <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="endedAt" :datetime="new Date(endedAt).toISOString()">{{ new Date(endedAt).toLocaleString() }}</time>
+      </span>
+    </div>
+  </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 7aa23d21..375a99e6 100644
--- a/packages/devtools-vite/src/app/pages/session/[session].vue
+++ b/packages/devtools-vite/src/app/pages/session/[session].vue
@@ -155,10 +155,9 @@ onMounted(async () => {
     >
       <div
         :key="(route.query.plugin as string)"
-        v-on-click-outside="closePluginPanel"
-        fixed right-0 bottom-0 top-30 z-panel-content of-auto
+        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"
-        class="left-20 xl:left-100 2xl:left-150"
       >
         <DataPluginDetailsLoader
           :plugin="(route.query.plugin as string)"
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
index 6488a7c2..9f8b6460 100644
--- 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
@@ -1,3 +1,4 @@
+import type { RolldownPluginBuildMetrics } from '~~/shared/types'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
 import { getLogsManager } from '../utils'
 
@@ -9,21 +10,27 @@ export const rolldownGetPluginDetails = defineRpcFunction({
     return {
       handler: async ({ session, id }: { session: string, id: string }) => {
         const reader = await manager.loadSession(session)
-        const plugins = reader.meta?.plugins || []
-        const pluginBuildMetrics = reader.manager.plugin_build_metrics.get(+id)
-        const plugin = plugins.find(p => p.plugin_id === +id)
-        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 {
-          name: plugin?.name,
-          buildMetrics: {
-            ...pluginBuildMetrics,
-            resolveIdMetrics,
-            loadMetrics,
-            transformMetrics,
-          },
+        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/shared/types/data.ts b/packages/devtools-vite/src/shared/types/data.ts
index 9fa451ec..0983f4f8 100644
--- a/packages/devtools-vite/src/shared/types/data.ts
+++ b/packages/devtools-vite/src/shared/types/data.ts
@@ -28,8 +28,11 @@ export interface PluginBuildMetrics {
     plugin_id: number
     plugin_name: string
     module: string
+    timestamp_start: number
+    timestamp_end: number
   }[]
 }
+
 export type { PluginItem }
 
 export interface ModuleListItem {
@@ -70,6 +73,12 @@ export interface ModuleTreeNode {
   items: ModuleDest[]
 }
 
+export type RolldownPluginBuildMetrics = PluginBuildMetrics & {
+  resolveIdMetrics: PluginBuildMetrics['calls']
+  loadMetrics: PluginBuildMetrics['calls']
+  transformMetrics: PluginBuildMetrics['calls']
+}
+
 export interface RolldownResolveInfo {
   type: 'resolve'
   id: string

From f7658767db29c61b3660fc0c1c1c01aeba5dc8ff Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sun, 10 Aug 2025 23:24:38 +0800
Subject: [PATCH 3/4] chore: update

---
 package.json                                  |   1 +
 .../components/data/PluginDetailsLoader.vue   |   4 -
 .../components/data/PluginDetailsTable.vue    |  20 +-
 .../src/app/components/flowmap/PluginFlow.vue |  16 +-
 .../components/flowmap/PluginFlowTimeline.vue | 218 +++++++++---------
 pnpm-lock.yaml                                |  13 ++
 pnpm-workspace.yaml                           |   1 +
 7 files changed, 153 insertions(+), 120 deletions(-)

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
index ce46f57b..e932fade 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
@@ -161,7 +161,3 @@ const totalDuration = computed(() => {
     </span>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index b647c670..0f02f318 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -32,7 +32,9 @@ const searchFilterTypes = computed(() => {
 })
 
 const filterModuleTypes = ref<string[]>((route.query.module_types ? (route.query.module_types as string).split(',') : searchFilterTypes.value.map(i => i.name)) as string[])
-const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'])
+const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
+  initialValue: route.query.duration_sort ?? '',
+})
 const filtered = computed(() => {
   const sorted = durationSortType.value
     ? [...props.buildMetrics.calls].sort((a, b) => {
@@ -79,10 +81,12 @@ function toggleDurationSortType() {
           Hook name
         </th>
         <th sticky top-0 z10 border="b base" bg-base w160 ws-nowrap p1 text-left font-600>
-          <button flex="~ row gap2 items-center" w-full>
+          <button flex="~ row gap1 items-center" w-full>
             Module
             <VMenu>
-              <div text-xs class=" i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op20'" />
+              <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
@@ -109,9 +113,11 @@ function toggleDurationSortType() {
           </button>
         </th>
         <th sticky top-0 z10 border="b base" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          <button flex="~ row gap2 items-center justify-center" w-full @click="toggleDurationSortType">
+          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
             Duration
-            <div text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op20']" />
+            <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>
@@ -125,8 +131,8 @@ function toggleDurationSortType() {
           <DisplayModuleId
             :id="item.module"
             w-full border-none
-            :session
-            :link="true"
+            :session="session"
+            :link="`/session/${session.id}/graph?module=${item.module}`"
             hover="bg-active"
             border="~ base rounded" block px2 py1
           />
diff --git a/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
index 64cb34fe..67f055cc 100644
--- a/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
@@ -1,21 +1,31 @@
 <script setup lang="ts">
 import type { RolldownPluginBuildMetrics, SessionContext } from '../../../shared/types/data'
+import { useToggle } from '@vueuse/core'
 
 defineProps<{
   session: SessionContext
   buildMetrics: RolldownPluginBuildMetrics
 }>()
+
+const [expanded, toggleExpanded] = useToggle(true)
 </script>
 
 <template>
   <div p2 h-full w-full>
-    <div flex="~" border="~ base" rounded-2 h-full>
-      <div p2 of-hidden border="r base">
+    <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"
-        />
+        >
+          <button w-7 h-7 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>
+        </FlowmapPluginFlowTimeline>
       </div>
+      <button v-else inline-flex absolute z1 left--1 class="top-1/2 translate-y--1/2" border="~ base" rounded-r-4 p1 hover="bg-active" @click="toggleExpanded(true)">
+        <i i-fluent:panel-left-expand-20-regular cursor-pointer op-50 text-4 />
+      </button>
       <div flex-1 of-y-scroll h-full>
         <div>
           <DataPluginDetailsTable
diff --git a/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
index a9ca82f6..f1a39686 100644
--- a/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -12,7 +12,6 @@ const props = defineProps<{
 const _emit = defineEmits<{
   (e: 'select', value: PluginBuildMetrics['calls'][0] | null): void
 }>()
-
 function normalizeMetrics(metrics: PluginBuildMetrics['calls']) {
   const info = {
     duration: 0,
@@ -62,123 +61,130 @@ const endedAt = computed(() => {
 </script>
 
 <template>
-  <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
-    <div flex="~">
+  <div flex="~ col w-full">
+    <div px2 h8 border="b base" box-content bg-base rounded-t-2 flex="~ items-center justify-end">
+      <slot />
+    </div>
+    <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>
+              <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="startedAt" :datetime="new Date(startedAt).toISOString()">{{ new Date(startedAt).toLocaleString() }}</time>
+        </span>
+      </div>
       <FlowmapNode
         :active="false"
         class-node-inner="w60"
+        :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
       >
         <template #content>
-          <div p2 w-full text-center>
-            <DisplayPluginName
-              :name="buildMetrics.plugin_name"
-              class="font-mono text-sm ws-nowrap text-ellipsis line-clamp-1"
-            />
+          <div flex="~ col gap1" w-full>
+            <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>
-    </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="startedAt" :datetime="new Date(startedAt).toISOString()">{{ new Date(startedAt).toLocaleString() }}</time>
-      </span>
-    </div>
-    <FlowmapNode
-      :active="false"
-      class-node-inner="w60"
-      class-line-bottom="left-50%! translate-x--1/2"
-      pb4 w60
-      :lines="{ bottom: true }"
-    >
-      <template #content>
-        <div flex="~ col gap1" w-full>
-          <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="false"
-      class-node-inner="w60"
-      class-line-bottom="left-50%! translate-x--1/2"
-      pb4 w60
-      :lines="{ bottom: true }"
-    >
-      <template #content>
-        <div flex="~ col gap1" w-full>
-          <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"
-            />
+      <FlowmapNode
+        :active="false"
+        class-node-inner="w60"
+        :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full>
+            <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>
-        </div>
-      </template>
-    </FlowmapNode>
+        </template>
+      </FlowmapNode>
 
-    <FlowmapNode
-      :active="false"
-      class-node-inner="w60"
-      :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
-    >
-      <template #content>
-        <div flex="~ col gap1" w-full>
-          <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"
-            />
+      <FlowmapNode
+        :active="false"
+        class-node-inner="w60"
+        :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full>
+            <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>
-        </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="endedAt" :datetime="new Date(endedAt).toISOString()">{{ new Date(endedAt).toLocaleString() }}</time>
-      </span>
+        </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="endedAt" :datetime="new Date(endedAt).toISOString()">{{ new Date(endedAt).toLocaleString() }}</time>
+        </span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 064c2c5f..e4ccef3f 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
@@ -1044,6 +1050,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==}
 
@@ -7218,6 +7227,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 3cf67467..27c2d82f 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.12
     '@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

From cf57d8730e033ee220d23bf0fa5e4076f20f776d Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Mon, 11 Aug 2025 22:18:31 +0800
Subject: [PATCH 4/4] chore: update

---
 .../src/app/components/data/PluginDetails.vue | 13 ---
 .../components/data/PluginDetailsLoader.vue   |  6 +-
 .../components/data/PluginDetailsTable.vue    | 86 ++++++++++++-------
 .../src/app/components/data/SearchPanel.vue   |  8 +-
 .../src/app/components/flowmap/PluginFlow.vue | 73 ++++++++++++++--
 .../components/flowmap/PluginFlowTimeline.vue | 29 +++----
 .../app/components/modules/BuildMetrics.vue   |  6 +-
 .../devtools-vite/src/app/state/settings.ts   |  8 ++
 8 files changed, 153 insertions(+), 76 deletions(-)
 delete mode 100644 packages/devtools-vite/src/app/components/data/PluginDetails.vue

diff --git a/packages/devtools-vite/src/app/components/data/PluginDetails.vue b/packages/devtools-vite/src/app/components/data/PluginDetails.vue
deleted file mode 100644
index 582cb225..00000000
--- a/packages/devtools-vite/src/app/components/data/PluginDetails.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import type { SessionContext } from '~~/shared/types'
-
-defineProps<{
-  session: SessionContext
-}>()
-</script>
-
-<template>
-  <div flex="~ col gap-3">
-    Detail
-  </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 e932fade..f8c216f9 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsLoader.vue
@@ -86,19 +86,19 @@ const totalDuration = computed(() => {
       <div text-xs font-mono flex="~ items-center gap-3" ml2>
         <DisplayDuration
           :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
-          :title="`resolveId hooks cost: ${hookResolveIdDuration}ms`"
+          :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`"
+          :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`"
+          :title="`Transform hooks cost: ${hookTransformDuration}ms`"
         >
           <span i-ph-magic-wand-duotone inline-block />
         </DisplayDuration>
diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index 0f02f318..1fe876ce 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
 import type { FilterMatchRule } from '~/utils/icon'
-import { useRoute, useRouter } from '#app/composables/router'
 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 route = useRoute()
-const router = useRouter()
+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)
@@ -25,15 +30,11 @@ const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
   }
 }))
 
-const searchFilterTypes = computed(() => {
-  return ModuleTypeRules.filter((rule) => {
-    return parsedPaths.value.some(mod => rule.match.test(mod.mod.id))
-  })
-})
+const searchFilterTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
 
-const filterModuleTypes = ref<string[]>((route.query.module_types ? (route.query.module_types as string).split(',') : searchFilterTypes.value.map(i => i.name)) as string[])
+const filterModuleTypes = ref<string[]>(settings.value.pluginDetailsModuleTypes ?? searchFilterTypes.value.map(i => i.name))
 const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
-  initialValue: route.query.duration_sort ?? '',
+  initialValue: settings.value.pluginDetailsDurationSortType,
 })
 const filtered = computed(() => {
   const sorted = durationSortType.value
@@ -47,7 +48,7 @@ const filtered = computed(() => {
   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) {
@@ -57,30 +58,36 @@ function toggleModuleType(rule: FilterMatchRule) {
   else {
     filterModuleTypes.value?.push(rule.name)
   }
-  router.replace({
-    query: {
-      ...route.query,
-      module_types: filterModuleTypes.value?.join(','),
-    },
+  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()
-  router.replace({
-    query: { ...route.query, duration_sort: durationSortType.value ? durationSortType.value : undefined },
-  })
+  settings.value.pluginDetailsDurationSortType = durationSortType.value
 }
 </script>
 
 <template>
   <table w-full border-separate border-spacing-0>
     <thead border="b base">
-      <tr px2>
-        <th sticky top-0 z10 border="b base" bg-base w32 ws-nowrap p1 text-center font-600>
+      <tr px2 class="[&_th]:(sticky top-10 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 sticky top-0 z10 border="b base" bg-base w160 ws-nowrap p1 text-left font-600>
+        <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>
@@ -112,7 +119,13 @@ function toggleDurationSortType() {
             </VMenu>
           </button>
         </th>
-        <th sticky top-0 z10 border="b base" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
+        <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">
@@ -122,12 +135,12 @@ function toggleDurationSortType() {
         </th>
       </tr>
     </thead>
-    <tbody>
-      <tr v-for="item in filtered" :key="item.id" border="b dashed transparent hover:base">
-        <td w32 ws-nowrap text-center text-sm op25>
-          {{ item.type }}
+    <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 w160 ws-nowrap text-left text-ellipsi line-clamp-1>
+        <td v-if="selectedFields.includes('module')" min-w100 text-left text-ellipsis line-clamp-2>
           <DisplayModuleId
             :id="item.module"
             w-full border-none
@@ -137,10 +150,25 @@ function toggleDurationSortType() {
             border="~ base rounded" block px2 py1
           />
         </td>
-        <td text-center text-sm>
+        <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/PluginFlow.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
index 67f055cc..7cd8a48e 100644
--- a/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import type { RolldownPluginBuildMetrics, SessionContext } from '../../../shared/types/data'
+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
@@ -8,6 +10,47 @@ defineProps<{
 }>()
 
 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>
@@ -18,19 +61,33 @@ const [expanded, toggleExpanded] = useToggle(true)
           :session="session"
           :build-metrics="buildMetrics"
         >
-          <button w-7 h-7 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>
+          <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>
-      <button v-else inline-flex absolute z1 left--1 class="top-1/2 translate-y--1/2" border="~ base" rounded-r-4 p1 hover="bg-active" @click="toggleExpanded(true)">
-        <i i-fluent:panel-left-expand-20-regular cursor-pointer op-50 text-4 />
-      </button>
-      <div flex-1 of-y-scroll h-full>
+      <div flex-1 of-y-auto h-full>
+        <div px2 h10 border="b base" sticky z1 left-0 top-0 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>
           <DataPluginDetailsTable
             :session="session"
             :build-metrics="buildMetrics"
+            :selected-fields="selectedFields"
           />
         </div>
       </div>
diff --git a/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
index f1a39686..d3c33ce6 100644
--- a/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
+++ b/packages/devtools-vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -2,16 +2,13 @@
 import type { SessionContext } from '~~/shared/types'
 import type { PluginBuildMetrics, RolldownPluginBuildMetrics } from '../../../shared/types/data'
 import { computed } from 'vue'
+import { settings } from '~/state/settings'
 
 const props = defineProps<{
   session: SessionContext
   buildMetrics: RolldownPluginBuildMetrics
-  selected?: PluginBuildMetrics['calls'][0] | null
 }>()
 
-const _emit = defineEmits<{
-  (e: 'select', value: PluginBuildMetrics['calls'][0] | null): void
-}>()
 function normalizeMetrics(metrics: PluginBuildMetrics['calls']) {
   const info = {
     duration: 0,
@@ -62,9 +59,7 @@ const endedAt = computed(() => {
 
 <template>
   <div flex="~ col w-full">
-    <div px2 h8 border="b base" box-content bg-base rounded-t-2 flex="~ items-center justify-end">
-      <slot />
-    </div>
+    <slot name="header" />
     <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
       <div flex="~">
         <FlowmapNode
@@ -72,7 +67,7 @@ const endedAt = computed(() => {
           class-node-inner="w60"
         >
           <template #content>
-            <div p2 w-full text-center>
+            <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"
@@ -98,15 +93,15 @@ const endedAt = computed(() => {
         </span>
       </div>
       <FlowmapNode
-        :active="false"
         class-node-inner="w60"
-        :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+        :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>
+          <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>
@@ -122,15 +117,15 @@ const endedAt = computed(() => {
       </FlowmapNode>
 
       <FlowmapNode
-        :active="false"
+        :active="settings.pluginDetailSelectedHook === 'load'"
         class-node-inner="w60"
-        :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+        :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>
+          <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>
@@ -146,12 +141,12 @@ const endedAt = computed(() => {
       </FlowmapNode>
 
       <FlowmapNode
-        :active="false"
+        :active="settings.pluginDetailSelectedHook === 'transform'"
         class-node-inner="w60"
-        :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed! cursor-default!` : ''}`"
+        :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed!` : ''}`"
       >
         <template #content>
-          <div flex="~ col gap1" w-full>
+          <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>
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/state/settings.ts b/packages/devtools-vite/src/app/state/settings.ts
index 7343f4d9..e3338302 100644
--- a/packages/devtools-vite/src/app/state/settings.ts
+++ b/packages/devtools-vite/src/app/state/settings.ts
@@ -17,6 +17,10 @@ export interface ClientSettings {
   chartAnimation: boolean
   moduleDetailsViewType: 'flow' | 'charts' | 'imports'
   pluginDetailsViewType: 'flow' | 'charts'
+  pluginDetailsTableFields: string[] | null
+  pluginDetailsModuleTypes: string[] | null
+  pluginDetailsDurationSortType: string
+  pluginDetailSelectedHook: string
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -36,6 +40,10 @@ export const settings = useLocalStorage<ClientSettings>(
     chartAnimation: true,
     moduleDetailsViewType: 'flow',
     pluginDetailsViewType: 'flow',
+    pluginDetailsTableFields: null,
+    pluginDetailsModuleTypes: null,
+    pluginDetailsDurationSortType: '',
+    pluginDetailSelectedHook: '',
   },
   {
     mergeDefaults: true,