diff --git a/src/client/components/Container.vue b/src/client/components/Container.vue
index 9a04b5c..1e163c7 100644
--- a/src/client/components/Container.vue
+++ b/src/client/components/Container.vue
@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const emit = defineEmits(['element'])
+</script>
+
 <template>
-  <div class="h-[calc(100vh-55px)]">
+  <div :ref="el => emit('element', el)" class="h-[calc(100vh-55px)]">
     <slot />
   </div>
 </template>
diff --git a/src/client/logic/rpc-static.ts b/src/client/logic/rpc-static.ts
index 06db1e0..3f750d1 100644
--- a/src/client/logic/rpc-static.ts
+++ b/src/client/logic/rpc-static.ts
@@ -22,5 +22,8 @@ export function createStaticRpcClient(): RpcFunctions {
     resolveId: (query, id) => getModuleTransformInfo(query, id).then(r => r.resolvedId),
     onModuleUpdated: async () => undefined,
     getServerMetrics: async () => ({}),
+    getWaterfallInfo: async () => ({}),
+    getHmrEvents: async () => [],
+    list: () => null!,
   }
 }
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 28134df..e7bd6ea 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -55,6 +55,9 @@ const isRoot = computed(() => route.path === '/')
     <RouterLink text-lg icon-btn :to="{ path: '/metric', query: route.query }" title="Metrics">
       <span i-carbon-meter />
     </RouterLink>
+    <RouterLink text-lg icon-btn to="/waterfall" title="Waterfall">
+      <div i-carbon-chart-waterfall />
+    </RouterLink>
     <RouterLink text-lg icon-btn :to="{ path: '/plugins', query: route.query }" title="Plugins">
       <span i-carbon-microservices-1 />
     </RouterLink>
diff --git a/src/client/pages/index/waterfall.vue b/src/client/pages/index/waterfall.vue
new file mode 100644
index 0000000..1fcfba1
--- /dev/null
+++ b/src/client/pages/index/waterfall.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import type { init } from 'echarts/core'
+import type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams, CustomSeriesRenderItemReturn, TopLevelFormatterParams } from 'echarts/types/dist/shared'
+import { BarChart, CustomChart } from 'echarts/charts'
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from 'echarts/components'
+import { graphic, use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { createFilter, generatorHashColorByString } from '../../../node/utils'
+import { getHot } from '../../logic/hot'
+import { onModuleUpdated, rpc } from '../../logic/rpc'
+import { useOptionsStore } from '../../stores/options'
+import { usePayloadStore } from '../../stores/payload'
+
+use([
+  VisualMapComponent,
+  CanvasRenderer,
+  BarChart,
+  TooltipComponent,
+  TitleComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+  CustomChart,
+])
+
+const options = useOptionsStore()
+const payload = usePayloadStore()
+
+const container = ref<HTMLDivElement | null>()
+
+const dataZoomBar = 100
+const zoomBarOffset = 100
+
+const { height } = useElementSize(container)
+
+const data = shallowRef(await rpc.getWaterfallInfo(payload.query))
+const hmrEvents = shallowRef(await rpc.getHmrEvents(payload.query))
+const startTime = computed(() => Math.min(...Object.values(data.value).map(i => i[0]?.start ?? Infinity)))
+const endTime = computed(() => Math.max(...Object.values(data.value).map(i => i[i.length - 1]?.end ?? -Infinity)) + 1000)
+
+const paused = ref(false)
+const pluginFilter = ref('')
+const idFilter = ref('')
+const pluginFilterFn = computed(() => createFilter(pluginFilter.value))
+const idFilterFn = computed(() => createFilter(idFilter.value))
+
+async function refetch() {
+  if (!paused.value) {
+    data.value = await rpc.getWaterfallInfo(payload.query)
+    hmrEvents.value = await rpc.getHmrEvents(payload.query)
+  }
+}
+
+onModuleUpdated.on(refetch)
+
+watch(
+  () => [paused.value, payload.query],
+  () => refetch(),
+  { deep: true },
+)
+
+getHot().then((hot) => {
+  if (hot) {
+    hot.on('vite-plugin-inspect:update', () => {
+      refetch()
+    })
+  }
+})
+
+const sortedData = computed(() => {
+  return Object.entries(data.value)
+    .sort(([_, a], [__, b]) => {
+      const aStart = a[0]?.start ?? 0
+      const bStart = b[0]?.start ?? 0
+      return aStart - bStart
+    })
+})
+
+const moduleIds = computed(() => sortedData.value.filter(([k]) => idFilterFn.value(k)).reverse())
+
+const chartDataById = computed(() => {
+  const result: any[] = []
+  for (const [index, [id, steps]] of moduleIds.value.entries()) {
+    for (const s of steps) {
+      if (pluginFilterFn.value(s.name)) {
+        const duration = s.end - s.start
+        result.push({
+          name: id,
+          value: [index, s.start, duration < 1 ? s.start + 1 : s.end, duration],
+          itemStyle: {
+            normal: {
+              color: generatorHashColorByString(id),
+            },
+          },
+        })
+      }
+    }
+  }
+  return result
+})
+
+interface WaterfallSpan {
+  kind: 'resolve' | 'transform' | 'group'
+  fade: boolean
+  start: number
+  end: number
+  id: string
+  name: string
+}
+
+const chartDataStacked = computed(() => {
+  const rows: WaterfallSpan[][] = []
+  const rowsEnd: number[] = []
+  for (let [id, steps] of sortedData.value) {
+    if (!options.view.waterfallShowResolveId) {
+      steps = steps.filter(i => !i.isResolveId)
+    }
+    if (steps.length === 0) {
+      continue
+    }
+    const start = steps[0].start
+    const end = steps[steps.length - 1].end
+    const spans: WaterfallSpan[] = steps.map(v => ({
+      kind: v.isResolveId ? 'resolve' : 'transform',
+      start: v.start,
+      end: v.end,
+      name: v.name,
+      id,
+      fade: !pluginFilterFn.value(v.name) && !idFilterFn.value(id),
+    }))
+    const row = rowsEnd.findIndex((rowEnd, i) => {
+      if (rowEnd <= start) {
+        rowsEnd[i] = end
+        rows[i].push(...spans)
+        return true
+      }
+      return false
+    })
+    if (row === -1) {
+      rows.push(spans)
+      rowsEnd.push(end)
+    }
+  }
+  return rows.reverse().map((spans, index) => spans.map((s) => {
+    const duration = s.end - s.start
+    return {
+      name: s.id,
+      value: [index, s.start, duration < 1 ? s.start + 1 : s.end, duration],
+      itemStyle: {
+        normal: {
+          color: generatorHashColorByString(s.id),
+          opacity: s.fade ? 0.2 : 1,
+        },
+      },
+    }
+  }))
+})
+
+function renderItem(params: CustomSeriesRenderItemParams | any, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn {
+  const index = api.value(0)
+  const start = api.coord([api.value(1), index])
+  const end = api.coord([api.value(2), index])
+  const height = (api.size?.([0, 1]) as number[])[1]
+
+  const rectShape = graphic.clipRectByRect(
+    {
+      x: start[0],
+      y: start[1] - height / 2,
+      width: end[0] - start[0],
+      height,
+    },
+    {
+      x: params.coordSys.x,
+      y: params.coordSys.y,
+      width: params.coordSys.width,
+      height: params.coordSys.height,
+    },
+  )
+
+  return (
+    rectShape && {
+      type: 'rect',
+      transition: ['shape'],
+      shape: rectShape,
+      style: api.style(),
+    }
+  )
+}
+
+type ChartOption = ReturnType<ReturnType<typeof init>['getOption']>
+const chartOption = computed<ChartOption>(() => ({
+  tooltip: {
+    formatter(params: TopLevelFormatterParams | any) {
+      return `${params.marker}${params.name}: ${params.value[3] <= 1 ? '<1' : params.value[3]}ms}`
+    },
+  },
+  legendData: {
+    top: 'center',
+    data: ['c'],
+  },
+  title: {
+    text: 'Waterfall',
+  },
+  visualMap: {
+    type: 'piecewise',
+    // show: false,
+    orient: 'horizontal',
+    left: 'center',
+    bottom: 10,
+    pieces: [
+
+    ],
+    seriesIndex: 1,
+    dimension: 1,
+  },
+  dataZoom: [
+    {
+      type: 'slider',
+      filterMode: 'weakFilter',
+      showDataShadow: false,
+      top: height.value - dataZoomBar,
+      labelFormatter: '',
+    },
+    {
+      type: 'inside',
+      filterMode: 'weakFilter',
+    },
+  ],
+  grid: {
+    height: height.value - dataZoomBar - zoomBarOffset,
+  },
+  xAxis: {
+    min: startTime.value,
+    max: endTime.value,
+    scale: true,
+    axisLabel: {
+      formatter(val: number) {
+        return `${(val - startTime.value).toFixed(val % 1 ? 2 : 0)} ms`
+      },
+    },
+  },
+  yAxis: {
+    data: options.view.waterfallStacking ? [...chartDataStacked.value.keys()].reverse() : moduleIds.value.map(([id]) => id),
+  },
+  series: [
+    {
+      type: 'custom',
+      name: 'c',
+      renderItem,
+      itemStyle: {
+        opacity: 0.8,
+      },
+      encode: {
+        x: [1, 2],
+        y: 0,
+      },
+      data: options.view.waterfallStacking ? chartDataStacked.value.flat() : chartDataById.value,
+      markLine: {
+        data: hmrEvents.value.map(({ type, file, timestamp }) => ({
+          name: `${type} ${file}`,
+          xAxis: timestamp,
+        })),
+        lineStyle: {
+          color: '#f00',
+        },
+        symbol: ['none', 'none'],
+      },
+    },
+  ],
+}))
+
+const chartStyle = computed(() => {
+  return {
+    height: `${height.value}px`,
+  }
+})
+</script>
+
+<template>
+  <NavBar>
+    <RouterLink class="my-auto icon-btn !outline-none" to="/">
+      <div i-carbon-arrow-left />
+    </RouterLink>
+    <div my-auto text-sm font-mono>
+      Waterfall
+    </div>
+
+    <input v-model="pluginFilter" placeholder="Plugin Filter..." class="w-full px-4 py-2 text-xs">
+    <input v-model="idFilter" placeholder="ID Filter..." class="w-full px-4 py-2 text-xs">
+
+    <QuerySelector />
+
+    <button text-lg icon-btn title="Pause" @click="paused = !paused">
+      <span i-carbon-pause opacity-90 :class="paused ? 'text-red' : ''" />
+    </button>
+    <button text-lg icon-btn title="Show resolveId" @click="options.view.waterfallShowResolveId = !options.view.waterfallShowResolveId">
+      <span i-carbon-connect-source :class="options.view.waterfallShowResolveId ? 'opacity-100' : 'opacity-25'" />
+    </button>
+    <button text-lg icon-btn title="Stacked" @click="options.view.waterfallStacking = !options.view.waterfallStacking">
+      <span i-carbon-stacked-scrolling-1 :class="options.view.waterfallStacking ? 'opacity-100' : 'opacity-25'" />
+    </button>
+
+    <div flex-auto />
+  </NavBar>
+
+  <div ref="container" h-full p4>
+    <div v-if="!Object.keys(data).length" flex="~" h-40 w-full>
+      <div ma italic op50>
+        No data
+      </div>
+    </div>
+    <VChart v-else class="w-100%" :style="chartStyle" :option="chartOption" autoresize />
+  </div>
+</template>
diff --git a/src/client/stores/options.ts b/src/client/stores/options.ts
index 7c2952a..e24d3f8 100644
--- a/src/client/stores/options.ts
+++ b/src/client/stores/options.ts
@@ -12,6 +12,8 @@ export interface ViewState {
   showBailout: boolean
   showOneColumn: boolean
   sort: 'default' | 'time-asc' | 'time-desc'
+  waterfallShowResolveId: boolean
+  waterfallStacking: boolean
 }
 
 export interface SearchState {
@@ -37,6 +39,8 @@ export const useOptionsStore = defineStore('options', () => {
       showBailout: false,
       showOneColumn: false,
       sort: 'default',
+      waterfallShowResolveId: true,
+      waterfallStacking: true,
     },
     { mergeDefaults: true },
   )
diff --git a/src/node/context.ts b/src/node/context.ts
index 8eb4ed2..824a41d 100644
--- a/src/node/context.ts
+++ b/src/node/context.ts
@@ -1,8 +1,9 @@
 import type { Environment, ResolvedConfig } from 'vite'
-import type { Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo } from '../types'
+import type { HmrEventInfo, Metadata, ModuleInfo, PluginMetricInfo, QueryEnv, ResolveIdInfo, ServerMetrics, TransformInfo, WaterfallInfo } from '../types'
 import type { ViteInspectOptions } from './options'
 import { Buffer } from 'node:buffer'
 import { resolve } from 'node:path'
+import { objectMap } from '@antfu/utils'
 import { createFilter } from 'unplugin-utils'
 import { DUMMY_LOAD_PLUGIN_NAME } from './constants'
 import { removeVersionQuery, serializePlugin } from './utils'
@@ -111,10 +112,12 @@ export class InspectContextViteEnv {
     transform: Record<string, TransformInfo[]>
     resolveId: Record<string, ResolveIdInfo[]>
     transformCounter: Record<string, number>
+    hmrEvents: HmrEventInfo[]
   } = {
       transform: {},
       resolveId: {},
       transformCounter: {},
+      hmrEvents: [],
     }
 
   recordTransform(id: string, info: TransformInfo, preTransformCode: string) {
@@ -147,6 +150,10 @@ export class InspectContextViteEnv {
     this.data.resolveId[id].push(info)
   }
 
+  recordHmrEvent(info: HmrEventInfo) {
+    this.data.hmrEvents.push(info)
+  }
+
   invalidate(id: string) {
     id = this.normalizeId(id)
     delete this.data.transform[id]
@@ -294,6 +301,53 @@ export class InspectContextViteEnv {
     }
   }
 
+  async getWaterfallInfo() {
+    const resolveIdByResult: Record<string, ResolveIdInfo> = {}
+    for (const id in this.data.resolveId) {
+      const info = this.data.resolveId[id][0]
+      resolveIdByResult[info.result] = {
+        ...info,
+        result: id,
+      }
+    }
+    return objectMap(this.data.transform, (id, transforms) => {
+      const result: WaterfallInfo[string] = []
+      let currentId = id
+      while (resolveIdByResult[currentId]) {
+        const info = resolveIdByResult[currentId]
+        result.push({
+          name: info.name,
+          start: info.start,
+          end: info.end,
+          isResolveId: true,
+        })
+        if (currentId === info.result)
+          break
+        currentId = info.result
+      }
+      for (const transform of transforms) {
+        result.push({
+          name: transform.name,
+          start: transform.start,
+          end: transform.end,
+          isResolveId: false,
+        })
+      }
+      result.sort((a, b) => a.start - b.start)
+      const filtered = result.filter(({ start, end }, i) => i === 0 || i === result.length - 1 || start < end)
+      return filtered.length
+        ? [
+            id,
+            filtered,
+          ]
+        : undefined
+    })
+  }
+
+  async getHmrEvents() {
+    return this.data.hmrEvents.sort((a, b) => a.timestamp - b.timestamp)
+  }
+
   clearId(_id: string) {
     const id = this.resolveId(_id)
     if (id) {
diff --git a/src/node/index.ts b/src/node/index.ts
index 1d529f7..7af6d46 100644
--- a/src/node/index.ts
+++ b/src/node/index.ts
@@ -233,13 +233,16 @@ export default function PluginInspect(options: ViteInspectOptions = {}): Plugin
         return null
       },
     },
-    hotUpdate({ modules, environment }) {
+    hotUpdate({ modules, type, file, timestamp }) {
       const ids = modules.map(module => module.id)
-      environment.hot.send({
+      this.environment.hot.send({
         type: 'custom',
         event: 'vite-plugin-inspect:update',
         data: { ids } as HMRData,
       })
+
+      const env = ctx.getEnvContext(this.environment)
+      env?.recordHmrEvent({ type, file, timestamp })
     },
     async buildEnd() {
       if (!build)
diff --git a/src/node/rpc.ts b/src/node/rpc.ts
index ccadc8f..621f834 100644
--- a/src/node/rpc.ts
+++ b/src/node/rpc.ts
@@ -25,6 +25,12 @@ export function createServerRpc(
         .data
         .serverMetrics || {}
     },
+    async getWaterfallInfo(query) {
+      return ctx.queryEnv(query).getWaterfallInfo()
+    },
+    async getHmrEvents(query) {
+      return ctx.queryEnv(query).getHmrEvents()
+    },
     async onModuleUpdated() {},
 
     async list() {
diff --git a/src/node/utils.ts b/src/node/utils.ts
index 872d233..278bc11 100644
--- a/src/node/utils.ts
+++ b/src/node/utils.ts
@@ -34,3 +34,25 @@ export function removeVersionQuery(url: string) {
   }
   return url
 }
+
+export function createFilter(pattern: string) {
+  pattern = pattern.trim()
+  if (!pattern) {
+    return () => true
+  }
+  const regex = new RegExp(pattern, 'i')
+  return (name: string) => regex.test(name)
+}
+
+export function generatorHashColorByString(str: string) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  let color = '#'
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xFF
+    color += (`00${value.toString(16)}`).slice(-2)
+  }
+  return color
+}
diff --git a/src/types.ts b/src/types.ts
index aa7e831..0963391 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -19,6 +19,12 @@ export interface ResolveIdInfo {
   error?: ParsedError
 }
 
+export interface HmrEventInfo {
+  type: 'create' | 'update' | 'delete'
+  file: string
+  timestamp: number
+}
+
 export interface ParsedError {
   message: string
   stack: StackFrame[]
@@ -44,6 +50,13 @@ export interface ModuleTransformInfo {
   transforms: TransformInfo[]
 }
 
+export type WaterfallInfo = Record<string, {
+  name: string
+  start: number
+  end: number
+  isResolveId: boolean
+}[]>
+
 export interface PluginMetricInfo {
   name: string
   enforce?: string
@@ -107,6 +120,8 @@ export interface RpcFunctions {
   getModuleTransformInfo: (query: QueryEnv, id: string, clear?: boolean) => Promise<ModuleTransformInfo>
   getPluginMetrics: (query: QueryEnv) => Promise<PluginMetricInfo[]>
   getServerMetrics: (query: QueryEnv) => Promise<ServerMetrics>
+  getWaterfallInfo: (query: QueryEnv) => Promise<WaterfallInfo>
+  getHmrEvents: (query: QueryEnv) => Promise<HmrEventInfo[]>
   resolveId: (query: QueryEnv, id: string) => Promise<string>
   onModuleUpdated: () => Promise<void>