From 9612d30f99b14fed79a5bcca791b48430ae6e0f8 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Wed, 1 Jul 2026 22:10:21 +0800
Subject: [PATCH] feat(vite): add inspect devtools

---
 docs/errors/VDT0001.md                        |  25 +
 docs/errors/VDT0002.md                        |  25 +
 docs/errors/index.md                          |  11 +-
 docs/kit/diagnostics.md                       |   2 +-
 .../src/app/components/assets/Sunburst.vue    |   1 +
 .../src/app/components/chunks/Graph.vue       |   6 +-
 .../src/app/components/chunks/Sunburst.vue    |   1 +
 .../components/data/AssetRelationships.vue    |   4 +-
 .../data/ModuleImportRelationships.vue        |   4 +-
 .../components/data/PluginDetailsLoader.vue   |  15 +-
 .../components/flowmap/ModuleFlowDetails.vue  |   2 +-
 .../app/components/flowmap/NodeModuleInfo.vue |   1 +
 .../src/app/components/flowmap/PluginFlow.vue |   1 +
 .../components/flowmap/PluginFlowTimeline.vue |   1 +
 .../app/components/modules/DetailedList.vue   |   1 +
 .../src/app/components/modules/Graph.vue      |   6 +-
 .../app/pages/session/[session]/assets.vue    |   2 +
 .../app/pages/session/[session]/chunks.vue    |   7 +-
 .../pages/session/[session]/graph/index.vue   |   6 +-
 .../app/pages/session/[session]/packages.vue  |   2 +
 .../app/pages/session/[session]/plugins.vue   |   2 +
 packages/ui/package.json                      |   5 +
 .../src/components/ChartNavBreadcrumb.vue}    |   5 +-
 .../src/components/DataPathSelector.vue}      |  37 +-
 .../src/components/DataPathSelectorItem.vue}  |   6 +-
 .../src/components/DataSearchPanel.vue}       |  30 +-
 .../src/components/DisplayModuleGraph.vue}    |   8 +-
 .../src/components/DisplayPluginName.vue}     |   2 +-
 .../src/components/DisplayTimeoutView.vue}    |   0
 .../src/components/PluginsFlatList.vue}       |   9 +-
 .../src/components/PluginsSunburst.vue}       |  37 +-
 .../src}/composables/graph-path-selector.ts   |  27 +-
 .../src}/composables/module-graph.ts          | 106 +---
 .../src}/composables/zoom-element.ts          |   4 -
 packages/ui/src/utils/color.ts                |  15 +
 packages/vite/package.json                    |  24 +-
 packages/vite/src/app/app.vue                 |  14 +-
 .../app/components/chart/ModuleFlamegraph.vue | 232 +++++++
 .../src/app/components/code/DiffEditor.vue    | 270 +++++++++
 .../components/data/ModuleDetailsLoader.vue   | 151 +++++
 .../data/ModuleImportRelationships.vue        | 239 ++++++++
 .../components/data/PluginDetailsLoader.vue   | 403 +++++++++++++
 .../components/data/PluginDetailsTable.vue    | 221 +++++++
 .../src/app/components/display/FileIcon.vue   |  18 +
 .../app/components/display/FileSizeBadge.vue  |  57 ++
 .../app/components/display/GraphHoverView.vue |  57 ++
 .../app/components/display/HighlightedPath.ts |  99 +++
 .../src/app/components/display/ModuleId.vue   |  91 +++
 .../app/components/display/VirtualTree.vue    | 234 ++++++++
 .../src/app/components/flowmap/Expandable.vue |  63 ++
 .../src/app/components/flowmap/ModuleFlow.vue |  86 +++
 .../components/flowmap/ModuleFlowDetails.vue  |  79 +++
 .../components/flowmap/ModuleFlowTimeline.vue | 394 ++++++++++++
 .../vite/src/app/components/flowmap/Node.vue  |  51 ++
 .../app/components/flowmap/NodeModuleInfo.vue | 200 ++++++
 .../app/components/flowmap/NodePluginInfo.vue |  34 ++
 .../src/app/components/flowmap/PluginFlow.vue | 153 +++++
 .../components/flowmap/PluginFlowTimeline.vue | 176 ++++++
 .../app/components/modules/BuildMetrics.vue   |  69 +++
 .../app/components/modules/DetailedList.vue   |  86 +++
 .../src/app/components/modules/FlatList.vue   |  48 ++
 .../src/app/components/modules/Folder.vue     |  92 +++
 .../vite/src/app/components/modules/Graph.vue | 199 ++++++
 packages/vite/src/app/composables/chart.ts    | 234 ++++++++
 packages/vite/src/app/composables/monaco.ts   | 194 ++++++
 packages/vite/src/app/composables/rpc.ts      |  45 +-
 packages/vite/src/app/pages/graph.vue         | 353 +++++++++++
 packages/vite/src/app/pages/plugins.vue       | 230 +++++++
 packages/vite/src/app/state/flowmap.ts        |  10 +
 packages/vite/src/app/state/settings.ts       |  71 +++
 packages/vite/src/app/styles/cm.css           |  23 +
 packages/vite/src/app/styles/global.css       |  81 +++
 packages/vite/src/app/styles/splitpanes.css   |  53 ++
 packages/vite/src/app/types/chart.ts          |  11 +
 packages/vite/src/app/types/modules.ts        |  49 ++
 packages/vite/src/app/types/plugins.ts        |  10 +
 packages/vite/src/app/utils/cache.ts          |   9 +
 packages/vite/src/app/utils/color.ts          |  16 +
 packages/vite/src/app/utils/filepath.ts       | 145 +++++
 packages/vite/src/app/utils/format.ts         |  61 ++
 packages/vite/src/app/utils/icon.ts           | 190 ++++++
 packages/vite/src/app/worker/diff.ts          |  18 +
 packages/vite/src/app/worker/diff.worker.ts   |  16 +
 packages/vite/src/index.ts                    |   2 +-
 packages/vite/src/modules/rpc.ts              |  14 +-
 .../node/__tests__/inspect-context.test.ts    | 384 ++++++++++++
 .../src/node/__tests__/inspect-plugin.test.ts |  42 ++
 packages/vite/src/node/diagnostics.ts         |  14 +
 packages/vite/src/node/index.ts               |   3 +
 packages/vite/src/node/inspect/context.ts     | 567 ++++++++++++++++++
 packages/vite/src/node/inspect/hijack.ts      | 191 ++++++
 packages/vite/src/node/inspect/plugin.ts      | 140 +++++
 packages/vite/src/node/inspect/server.ts      |  67 +++
 packages/vite/src/node/inspect/types.ts       | 100 +++
 packages/vite/src/node/inspect/utils.ts       | 105 ++++
 packages/vite/src/node/plugin.ts              |  39 ++
 .../functions/vite-clear-module-transform.ts  |  17 +
 .../node/rpc/functions/vite-get-metadata.ts   |  17 +
 .../vite-get-module-transform-info.ts         |  22 +
 .../rpc/functions/vite-get-modules-list.ts    |  22 +
 .../rpc/functions/vite-get-plugin-details.ts  |  15 +
 .../rpc/functions/vite-get-plugin-metrics.ts  |  22 +
 .../rpc/functions/vite-get-server-metrics.ts  |  22 +
 .../src/node/rpc/functions/vite-resolve-id.ts |  22 +
 packages/vite/src/node/rpc/index.ts           |  38 +-
 packages/vite/src/nuxt.config.ts              |  13 +
 pnpm-lock.yaml                                | 544 ++++-------------
 107 files changed, 7843 insertions(+), 654 deletions(-)
 create mode 100644 docs/errors/VDT0001.md
 create mode 100644 docs/errors/VDT0002.md
 rename packages/{rolldown/src/app/components/chart/NavBreadcrumb.vue => ui/src/components/ChartNavBreadcrumb.vue} (81%)
 rename packages/{rolldown/src/app/components/data/PathSelector.vue => ui/src/components/DataPathSelector.vue} (77%)
 rename packages/{rolldown/src/app/components/data/PathSelectorItem.vue => ui/src/components/DataPathSelectorItem.vue} (86%)
 rename packages/{rolldown/src/app/components/data/SearchPanel.vue => ui/src/components/DataSearchPanel.vue} (87%)
 rename packages/{rolldown/src/app/components/display/ModuleGraph.vue => ui/src/components/DisplayModuleGraph.vue} (98%)
 rename packages/{rolldown/src/app/components/display/PluginName.vue => ui/src/components/DisplayPluginName.vue} (95%)
 rename packages/{rolldown/src/app/components/display/TimeoutView.vue => ui/src/components/DisplayTimeoutView.vue} (100%)
 rename packages/{rolldown/src/app/components/plugins/FlatList.vue => ui/src/components/PluginsFlatList.vue} (80%)
 rename packages/{rolldown/src/app/components/plugins/Sunburst.vue => ui/src/components/PluginsSunburst.vue} (72%)
 rename packages/{rolldown/src/app => ui/src}/composables/graph-path-selector.ts (85%)
 rename packages/{rolldown/src/app => ui/src}/composables/module-graph.ts (79%)
 rename packages/{rolldown/src/app => ui/src}/composables/zoom-element.ts (92%)
 create mode 100644 packages/vite/src/app/components/chart/ModuleFlamegraph.vue
 create mode 100644 packages/vite/src/app/components/code/DiffEditor.vue
 create mode 100644 packages/vite/src/app/components/data/ModuleDetailsLoader.vue
 create mode 100644 packages/vite/src/app/components/data/ModuleImportRelationships.vue
 create mode 100644 packages/vite/src/app/components/data/PluginDetailsLoader.vue
 create mode 100644 packages/vite/src/app/components/data/PluginDetailsTable.vue
 create mode 100644 packages/vite/src/app/components/display/FileIcon.vue
 create mode 100644 packages/vite/src/app/components/display/FileSizeBadge.vue
 create mode 100644 packages/vite/src/app/components/display/GraphHoverView.vue
 create mode 100644 packages/vite/src/app/components/display/HighlightedPath.ts
 create mode 100644 packages/vite/src/app/components/display/ModuleId.vue
 create mode 100644 packages/vite/src/app/components/display/VirtualTree.vue
 create mode 100644 packages/vite/src/app/components/flowmap/Expandable.vue
 create mode 100644 packages/vite/src/app/components/flowmap/ModuleFlow.vue
 create mode 100644 packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
 create mode 100644 packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
 create mode 100644 packages/vite/src/app/components/flowmap/Node.vue
 create mode 100644 packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
 create mode 100644 packages/vite/src/app/components/flowmap/NodePluginInfo.vue
 create mode 100644 packages/vite/src/app/components/flowmap/PluginFlow.vue
 create mode 100644 packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
 create mode 100644 packages/vite/src/app/components/modules/BuildMetrics.vue
 create mode 100644 packages/vite/src/app/components/modules/DetailedList.vue
 create mode 100644 packages/vite/src/app/components/modules/FlatList.vue
 create mode 100644 packages/vite/src/app/components/modules/Folder.vue
 create mode 100644 packages/vite/src/app/components/modules/Graph.vue
 create mode 100644 packages/vite/src/app/composables/chart.ts
 create mode 100644 packages/vite/src/app/composables/monaco.ts
 create mode 100644 packages/vite/src/app/pages/graph.vue
 create mode 100644 packages/vite/src/app/pages/plugins.vue
 create mode 100644 packages/vite/src/app/state/flowmap.ts
 create mode 100644 packages/vite/src/app/state/settings.ts
 create mode 100644 packages/vite/src/app/styles/cm.css
 create mode 100644 packages/vite/src/app/styles/splitpanes.css
 create mode 100644 packages/vite/src/app/types/chart.ts
 create mode 100644 packages/vite/src/app/types/modules.ts
 create mode 100644 packages/vite/src/app/types/plugins.ts
 create mode 100644 packages/vite/src/app/utils/cache.ts
 create mode 100644 packages/vite/src/app/utils/color.ts
 create mode 100644 packages/vite/src/app/utils/filepath.ts
 create mode 100644 packages/vite/src/app/utils/format.ts
 create mode 100644 packages/vite/src/app/utils/icon.ts
 create mode 100644 packages/vite/src/app/worker/diff.ts
 create mode 100644 packages/vite/src/app/worker/diff.worker.ts
 create mode 100644 packages/vite/src/node/__tests__/inspect-context.test.ts
 create mode 100644 packages/vite/src/node/__tests__/inspect-plugin.test.ts
 create mode 100644 packages/vite/src/node/diagnostics.ts
 create mode 100644 packages/vite/src/node/index.ts
 create mode 100644 packages/vite/src/node/inspect/context.ts
 create mode 100644 packages/vite/src/node/inspect/hijack.ts
 create mode 100644 packages/vite/src/node/inspect/plugin.ts
 create mode 100644 packages/vite/src/node/inspect/server.ts
 create mode 100644 packages/vite/src/node/inspect/types.ts
 create mode 100644 packages/vite/src/node/inspect/utils.ts
 create mode 100644 packages/vite/src/node/plugin.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-clear-module-transform.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-metadata.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-module-transform-info.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-modules-list.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-plugin-details.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-plugin-metrics.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-get-server-metrics.ts
 create mode 100644 packages/vite/src/node/rpc/functions/vite-resolve-id.ts

diff --git a/docs/errors/VDT0001.md b/docs/errors/VDT0001.md
new file mode 100644
index 00000000..2066fab8
--- /dev/null
+++ b/docs/errors/VDT0001.md
@@ -0,0 +1,25 @@
+---
+outline: deep
+---
+
+# VDT0001: Inspect Context Unavailable
+
+## Message
+
+> Vite inspect context is not available for this DevTools context.
+
+## Cause
+
+A `vite:inspect:*` RPC function was called in a DevTools context that did not register the Vite inspect collector.
+
+## Example
+
+Calling `vite:inspect:get-modules-list` while only the base Vite metadata RPC functions are registered triggers this error.
+
+## Fix
+
+Register the Vite UI plugin with inspect collection enabled before calling `vite:inspect:*` RPC functions.
+
+## Source
+
+- [`packages/vite/src/node/inspect/context.ts`](https://github.com/vitejs/devtools/blob/main/packages/vite/src/node/inspect/context.ts) — `getViteInspectContext()` throws this when no inspect context was registered for the current DevTools context.
diff --git a/docs/errors/VDT0002.md b/docs/errors/VDT0002.md
new file mode 100644
index 00000000..ce16c0c7
--- /dev/null
+++ b/docs/errors/VDT0002.md
@@ -0,0 +1,25 @@
+---
+outline: deep
+---
+
+# VDT0002: Inspect Target Not Found
+
+## Message
+
+> Vite inspect target "`{id}`" was not found in `{target}`.
+
+## Cause
+
+An inspect RPC query referenced a Vite instance or environment that the collector has not recorded.
+
+## Example
+
+Calling `vite:inspect:get-module-transform-info` with an unknown `{ vite, env }` query triggers this error.
+
+## Fix
+
+Read `vite:inspect:get-metadata` first and pass one of the returned Vite instance IDs and environment names to follow-up inspect RPC calls.
+
+## Source
+
+- [`packages/vite/src/node/inspect/context.ts`](https://github.com/vitejs/devtools/blob/main/packages/vite/src/node/inspect/context.ts) — `getViteContext()` and `getEnvContext()` throw this when a query references an unknown inspect target.
diff --git a/docs/errors/index.md b/docs/errors/index.md
index 10004303..05772d60 100644
--- a/docs/errors/index.md
+++ b/docs/errors/index.md
@@ -9,7 +9,7 @@ Vite DevTools uses structured diagnostics to surface actionable warnings and err
 ## How error codes work
 
 - Codes follow the pattern **prefix + 4-digit number** (e.g., `DF0001`, `DTK0008`, `RDDT0002`).
-- Each prefix maps to a package: `DTK` for `@vitejs/devtools` (Vite-specific pieces), `RDDT` for `@vitejs/devtools-rolldown`. The framework-neutral `devframe` package documents its own `DF`-prefixed codes at the [Devframe docs site](https://devfra.me/errors/).
+- Each prefix maps to a package: `DTK` for `@vitejs/devtools` (Vite-specific pieces), `RDDT` for `@vitejs/devtools-rolldown`, `VDT` for `@vitejs/devtools-vite`. The framework-neutral `devframe` package documents its own `DF`-prefixed codes at the [Devframe docs site](https://devfra.me/errors/).
 - Every error page includes the cause, recommended fix, and a reference to the source file that emits it.
 - The diagnostics system is powered by [`nostics`](https://github.com/vercel-labs/nostics), which provides structured diagnostic codes with docs URLs and ANSI-formatted console output.
 
@@ -42,3 +42,12 @@ Emitted by `@vitejs/devtools-rolldown`.
 |------|-------|-------|
 | [RDDT0001](./RDDT0001) | warn | Rolldown Logs Directory Not Found |
 | [RDDT0002](./RDDT0002) | warn | Rolldown Log Reader Bad Line |
+
+## Vite DevTools (VDT)
+
+Emitted by `@vitejs/devtools-vite`.
+
+| Code | Level | Title |
+|------|-------|-------|
+| [VDT0001](./VDT0001) | error | Inspect Context Unavailable |
+| [VDT0002](./VDT0002) | error | Inspect Target Not Found |
diff --git a/docs/kit/diagnostics.md b/docs/kit/diagnostics.md
index cadb527e..5d1d6657 100644
--- a/docs/kit/diagnostics.md
+++ b/docs/kit/diagnostics.md
@@ -75,7 +75,7 @@ Prefixes used by the in-tree packages:
 | `DF` | `devframe` |
 | `DTK` | `@vitejs/devtools` |
 | `RDDT` | `@vitejs/devtools-rolldown` |
-| `VDT` | `@vitejs/devtools-vite` (reserved) |
+| `VDT` | `@vitejs/devtools-vite` |
 
 Each definition supports `why` (string or function returning a string) and an optional `fix` (string or function). A `docsBase` on the definition group auto-attaches a per-code URL to every emitted diagnostic.
 
diff --git a/packages/rolldown/src/app/components/assets/Sunburst.vue b/packages/rolldown/src/app/components/assets/Sunburst.vue
index 1792a71f..6f61b53e 100644
--- a/packages/rolldown/src/app/components/assets/Sunburst.vue
+++ b/packages/rolldown/src/app/components/assets/Sunburst.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { GraphBase, GraphBaseOptions } from 'nanovis'
 import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
+import ChartNavBreadcrumb from '@vitejs/devtools-ui/components/ChartNavBreadcrumb.vue'
 import { colorToCssBackground } from 'nanovis'
 import { useTemplateRef, watchEffect } from 'vue'
 
diff --git a/packages/rolldown/src/app/components/chunks/Graph.vue b/packages/rolldown/src/app/components/chunks/Graph.vue
index 1de57aea..e2cc697b 100644
--- a/packages/rolldown/src/app/components/chunks/Graph.vue
+++ b/packages/rolldown/src/app/components/chunks/Graph.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { ChunkImport } from '@rolldown/debug'
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
-import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayModuleGraph from '@vitejs/devtools-ui/components/DisplayModuleGraph.vue'
+import { createModuleGraph, getModuleGraphSize } from '@vitejs/devtools-ui/composables/module-graph'
 import { computed, unref } from 'vue'
 import { useRoute } from '#app/composables/router'
-import { createModuleGraph, getModuleGraphSize } from '~/composables/module-graph'
 
 type ChunkInfo = RolldownChunkInfo & {
   id: string
@@ -196,7 +197,6 @@ createModuleGraph<ChunkInfo, ChunkImport>({
 
 <template>
   <DisplayModuleGraph
-    :session="session"
     :modules="chunks"
     :expand-controls="false"
   >
diff --git a/packages/rolldown/src/app/components/chunks/Sunburst.vue b/packages/rolldown/src/app/components/chunks/Sunburst.vue
index 595e8040..d8b5cc05 100644
--- a/packages/rolldown/src/app/components/chunks/Sunburst.vue
+++ b/packages/rolldown/src/app/components/chunks/Sunburst.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { GraphBase, GraphBaseOptions } from 'nanovis'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
+import ChartNavBreadcrumb from '@vitejs/devtools-ui/components/ChartNavBreadcrumb.vue'
 import { colorToCssBackground } from 'nanovis'
 import { useTemplateRef, watchEffect } from 'vue'
 
diff --git a/packages/rolldown/src/app/components/data/AssetRelationships.vue b/packages/rolldown/src/app/components/data/AssetRelationships.vue
index 055b2870..389a9cf7 100644
--- a/packages/rolldown/src/app/components/data/AssetRelationships.vue
+++ b/packages/rolldown/src/app/components/data/AssetRelationships.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { RolldownAssetInfo } from '~~/shared/types'
-import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
+import { generateModuleGraphLink, getModuleGraphLinkColor } from '@vitejs/devtools-ui/composables/module-graph'
 import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
-import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/module-graph'
 
 const props = defineProps<{
   importers?: RolldownAssetInfo[]
diff --git a/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue b/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
index fa7135d1..8a85fbb6 100644
--- a/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
+++ b/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { ModuleImport, ModuleInfo, ModuleListItem, SessionContext } from '~~/shared/types'
-import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
+import { generateModuleGraphLink, getModuleGraphLinkColor } from '@vitejs/devtools-ui/composables/module-graph'
 import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
-import { generateModuleGraphLink, getModuleGraphLinkColor } from '~/composables/module-graph'
 
 const props = defineProps<{
   module: ModuleInfo
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue b/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
index ffd35a76..3003691d 100644
--- a/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
@@ -5,6 +5,8 @@ import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
 import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+import PluginsSunburst from '@vitejs/devtools-ui/components/PluginsSunburst.vue'
 import { formatDuration } from '@vitejs/devtools-ui/utils/format'
 import { useAsyncState, useMouse } from '@vueuse/core'
 import { normalizeTreeNode, Sunburst } from 'nanovis'
@@ -311,10 +313,19 @@ watch(() => settings.value.pluginDetailsViewType, () => {
       <PluginsSunburst
         v-if="settings.pluginDetailsViewType === 'sunburst' && graph"
         :graph="graph"
-        :session="session"
         :selected="nodeSelected"
         @select="selectNode"
-      />
+      >
+        <template #module="{ child }">
+          <DisplayModuleId
+            :id="child.text!"
+            w-full border-none ws-nowrap
+            :session="session"
+            hover="bg-active"
+            border="~ base rounded" block px2 py1
+          />
+        </template>
+      </PluginsSunburst>
     </div>
   </div>
   <div v-else flex="~ items-center justify-center" w-full h-full>
diff --git a/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
index 27d1417a..4d0d3e3d 100644
--- a/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
+++ b/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -2,9 +2,9 @@
 import type { RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
 import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
 import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
+import PluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
 import { computed } from 'vue'
 import { settings } from '~~/app/state/settings'
-import PluginName from '../display/PluginName.vue'
 
 const props = defineProps<{
   selected: RolldownChunkInfo | RolldownModuleFlowNode | null
diff --git a/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
index ca5306fc..3093206c 100644
--- a/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
+++ b/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
 import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
 import { computed } from 'vue'
 import { isFlowmapSwapping } from '~/state/flowmap'
 
diff --git a/packages/rolldown/src/app/components/flowmap/PluginFlow.vue b/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
index 97504b92..d7b50c27 100644
--- a/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ClientSettings } from '~~/app/state/settings'
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
 import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
 import { useCycleList, useToggle } from '@vueuse/core'
diff --git a/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
index 9f4a7ee5..c08641b9 100644
--- a/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
+++ b/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
 import type { PluginBuildInfo, RolldownPluginBuildMetrics } from '~~/shared/types/data'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
 import { computed } from 'vue'
 import { settings } from '~/state/settings'
 
diff --git a/packages/rolldown/src/app/components/modules/DetailedList.vue b/packages/rolldown/src/app/components/modules/DetailedList.vue
index 2006d192..c353c6fd 100644
--- a/packages/rolldown/src/app/components/modules/DetailedList.vue
+++ b/packages/rolldown/src/app/components/modules/DetailedList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
 
 withDefaults(defineProps<{
   session: SessionContext
diff --git a/packages/rolldown/src/app/components/modules/Graph.vue b/packages/rolldown/src/app/components/modules/Graph.vue
index 1d5c36f8..697329c9 100644
--- a/packages/rolldown/src/app/components/modules/Graph.vue
+++ b/packages/rolldown/src/app/components/modules/Graph.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
 import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
-import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
+import DisplayModuleGraph from '@vitejs/devtools-ui/components/DisplayModuleGraph.vue'
+import { createModuleGraph, getModuleGraphSize } from '@vitejs/devtools-ui/composables/module-graph'
 import { computed, nextTick, unref } from 'vue'
-import { createModuleGraph, getModuleGraphSize } from '~/composables/module-graph'
 
 const props = defineProps<{
   modules: ModuleListItem[]
@@ -171,7 +172,6 @@ createModuleGraph<ModuleListItem, ModuleImport>({
 
 <template>
   <DisplayModuleGraph
-    :session="session"
     :modules="modules"
   >
     <template #default="{ node, nodesRefMap }">
diff --git a/packages/rolldown/src/app/pages/session/[session]/assets.vue b/packages/rolldown/src/app/pages/session/[session]/assets.vue
index 772a569d..ec6d0d12 100644
--- a/packages/rolldown/src/app/pages/session/[session]/assets.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/assets.vue
@@ -2,6 +2,8 @@
 import type { RolldownAssetInfo, SessionContext } from '~~/shared/types'
 import type { ClientSettings } from '~/state/settings'
 import type { AssetChartInfo, AssetChartNode } from '~/types/chart'
+import ChartNavBreadcrumb from '@vitejs/devtools-ui/components/ChartNavBreadcrumb.vue'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'
diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index 8356a047..28a6eb78 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
@@ -2,8 +2,12 @@
 import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
+import ChartNavBreadcrumb from '@vitejs/devtools-ui/components/ChartNavBreadcrumb.vue'
+import DataPathSelector from '@vitejs/devtools-ui/components/DataPathSelector.vue'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
 import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import { useGraphPathManager } from '@vitejs/devtools-ui/composables/graph-path-selector'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Flamegraph, Sunburst, Treemap } from 'nanovis'
@@ -11,7 +15,6 @@ import { computed, reactive, ref, watch } from 'vue'
 import { useRpc } from '#imports'
 import ChartTreemap from '~/components/chart/Treemap.vue'
 import { useChartGraph } from '~/composables/chart'
-import { useGraphPathManager } from '~/composables/graph-path-selector'
 import { settings } from '~/state/settings'
 
 const props = defineProps<{
@@ -209,7 +212,7 @@ watch(() => settings.value.chunkViewType, () => {
     <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="[]">
         <template v-if="pathSelectorVisible" #search>
-          <DataPathSelector :session="session" :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
+          <DataPathSelector :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
             <template #list="{ select, data }">
               <ChunksFlatList
                 :session="session"
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index c64e4b6d..bf7172f7 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
@@ -2,11 +2,13 @@
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import type { ClientSettings } from '~/state/settings'
 import { clearUndefined, toArray } from '@antfu/utils'
+import DataPathSelector from '@vitejs/devtools-ui/components/DataPathSelector.vue'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
+import { useGraphPathManager } from '@vitejs/devtools-ui/composables/graph-path-selector'
 import { computedWithControl, watchDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from '#app/composables/router'
-import { useGraphPathManager } from '~/composables/graph-path-selector'
 import { settings } from '~/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
@@ -138,7 +140,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
     <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="pathSelectorVisible" #search>
-          <DataPathSelector :session="session" :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
+          <DataPathSelector :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
             <template #list="{ select, data }">
               <ModulesFlatList
                 v-if="data?.length"
diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index 06b465ce..e09277e7 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -2,6 +2,8 @@
 import type { PackageInfo, PackageMeta, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { PackageChartInfo, PackageChartNode } from '~/types/chart'
+import ChartNavBreadcrumb from '@vitejs/devtools-ui/components/ChartNavBreadcrumb.vue'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { Treemap } from 'nanovis'
diff --git a/packages/rolldown/src/app/pages/session/[session]/plugins.vue b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
index 3d2d922e..049d83f8 100644
--- a/packages/rolldown/src/app/pages/session/[session]/plugins.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
 import { clearUndefined, toArray } from '@antfu/utils'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
+import PluginsFlatList from '@vitejs/devtools-ui/components/PluginsFlatList.vue'
 import { computedWithControl, watchDebounced } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, ref } from 'vue'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 522638d9..73afe87b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,6 +54,11 @@
   "module": "./src/index.ts",
   "peerDependencies": {
     "@vueuse/core": "*",
+    "d3-hierarchy": "*",
+    "d3-shape": "*",
+    "floating-vue": "*",
+    "fuse.js": "*",
+    "nanovis": "*",
     "nuxt": "*",
     "unocss": "*",
     "vue": "*",
diff --git a/packages/rolldown/src/app/components/chart/NavBreadcrumb.vue b/packages/ui/src/components/ChartNavBreadcrumb.vue
similarity index 81%
rename from packages/rolldown/src/app/components/chart/NavBreadcrumb.vue
rename to packages/ui/src/components/ChartNavBreadcrumb.vue
index e634c66b..e0e2c838 100644
--- a/packages/rolldown/src/app/components/chart/NavBreadcrumb.vue
+++ b/packages/ui/src/components/ChartNavBreadcrumb.vue
@@ -1,10 +1,9 @@
-<script setup lang="ts" generic="T extends { id: string; text?: string; parent?: T }">
-import type { GraphBaseOptions } from 'nanovis'
+<script setup lang="ts" generic="T extends { id: string, text?: string, parent?: T }">
 import { computed } from 'vue'
 
 const props = defineProps<{
   selected?: T
-  options: GraphBaseOptions<any>
+  options?: unknown
 }>()
 
 const emit = defineEmits<{
diff --git a/packages/rolldown/src/app/components/data/PathSelector.vue b/packages/ui/src/components/DataPathSelector.vue
similarity index 77%
rename from packages/rolldown/src/app/components/data/PathSelector.vue
rename to packages/ui/src/components/DataPathSelector.vue
index c7c297a7..4ac805f3 100644
--- a/packages/rolldown/src/app/components/data/PathSelector.vue
+++ b/packages/ui/src/components/DataPathSelector.vue
@@ -1,12 +1,11 @@
-<script setup lang="ts"  generic="T extends { id:string, imports: Record<string, unknown>[] }">
-import type { SessionContext } from '~~/shared/types'
-import type { GraphPathSelector } from '~/composables/graph-path-selector'
-import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+<script setup lang="ts" generic="T extends { id: string, imports: unknown[] }">
+import type { GraphPathSelector } from '../composables/graph-path-selector'
 import { computed, watch } from 'vue'
-import { useGraphPathSelector } from '~/composables/graph-path-selector'
+import { useGraphPathSelector } from '../composables/graph-path-selector'
+import DataPathSelectorItem from './DataPathSelectorItem.vue'
+import DisplayCloseButton from './DisplayCloseButton.vue'
 
 const props = defineProps<{
-  session: SessionContext
   data: T[]
   importIdKey: string
   searchKeys?: string[]
@@ -38,12 +37,9 @@ const dataMap = computed(() => {
 const startSelector: GraphPathSelector<T> = useGraphPathSelector<T>({
   searchKeys: props.searchKeys,
   getModules: () => {
-    if (!startSelector.state.value.search) {
+    if (!startSelector.state.value.search)
       return props.data
-    }
-    else {
-      return startSelector.fuse.value!.value?.search(startSelector.state.value.search).map(r => r.item) ?? []
-    }
+    return startSelector.fuse.value?.value.search(startSelector.state.value.search).map(r => r.item) ?? []
   },
 })
 
@@ -58,20 +54,20 @@ function getAllImports(moduleId: string, visited = new Set<string>()): T[] {
   if (!module?.imports?.length)
     return []
 
-  const res: T[] = []
+  const result: T[] = []
 
   for (const importItem of module.imports) {
-    const importedModule = dataMap.value.get(`${importItem[props.importIdKey]}`)
+    const importedModule = dataMap.value.get(`${(importItem as Record<string, unknown>)[props.importIdKey]}`)
     if (!importedModule)
       continue
 
     if (!visited.has(importedModule.id)) {
-      res.push(importedModule)
-      res.push(...getAllImports(importedModule.id, visited))
+      result.push(importedModule)
+      result.push(...getAllImports(importedModule.id, visited))
     }
   }
 
-  return res
+  return result
 }
 
 const endSelector = useGraphPathSelector<T>({
@@ -84,12 +80,9 @@ const endSelector = useGraphPathSelector<T>({
 endSelector.initSelector(endSelector.modules)
 
 const filteredEndModules = computed(() => {
-  if (!endSelector.state.value.search) {
+  if (!endSelector.state.value.search)
     return endSelector.modules.value
-  }
-  else {
-    return endSelector.fuse.value!.value?.search(endSelector.state.value.search).map(r => r.item) ?? []
-  }
+  return endSelector.fuse.value?.value.search(endSelector.state.value.search).map(r => r.item) ?? []
 })
 
 watch([() => startSelector.state.value.selected, () => endSelector.state.value.selected], () => {
@@ -115,7 +108,6 @@ function close() {
         v-model:search="startSelector.state.value.search"
         placeholder="Start"
         :selector="startSelector"
-        :session="session"
         :data="startSelector.modules.value"
         @clear="() => { startSelector.clear(); endSelector.clear() }"
       >
@@ -132,7 +124,6 @@ function close() {
         v-model:search="endSelector.state.value.search"
         placeholder="End"
         :selector="endSelector"
-        :session="session"
         :data="filteredEndModules"
         @clear="endSelector.clear"
       >
diff --git a/packages/rolldown/src/app/components/data/PathSelectorItem.vue b/packages/ui/src/components/DataPathSelectorItem.vue
similarity index 86%
rename from packages/rolldown/src/app/components/data/PathSelectorItem.vue
rename to packages/ui/src/components/DataPathSelectorItem.vue
index 6376183b..9909b9e9 100644
--- a/packages/rolldown/src/app/components/data/PathSelectorItem.vue
+++ b/packages/ui/src/components/DataPathSelectorItem.vue
@@ -1,13 +1,11 @@
-<script setup lang="ts" generic="T extends { id:string, imports: any[] }">
-import type { SessionContext } from '~~/shared/types'
-import type { GraphPathSelector } from '~/composables/graph-path-selector'
+<script setup lang="ts" generic="T extends { id: string, imports: unknown[] }">
+import type { GraphPathSelector } from '../composables/graph-path-selector'
 import { hideAllPoppers, Menu as VMenu } from 'floating-vue'
 
 withDefaults(
   defineProps<{
     selector: GraphPathSelector<T>
     placeholder: string
-    session: SessionContext
     data?: T[]
     emptyStateText?: string
     onClear?: () => void
diff --git a/packages/rolldown/src/app/components/data/SearchPanel.vue b/packages/ui/src/components/DataSearchPanel.vue
similarity index 87%
rename from packages/rolldown/src/app/components/data/SearchPanel.vue
rename to packages/ui/src/components/DataSearchPanel.vue
index e8d18271..7cec63b1 100644
--- a/packages/rolldown/src/app/components/data/SearchPanel.vue
+++ b/packages/ui/src/components/DataSearchPanel.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
-import type { FilterMatchRule } from '~/utils/icon'
 import { useVModel } from '@vueuse/core'
 
-interface ModelValue { search?: string | false, selected?: string[] | null }
+export interface FilterMatchRule {
+  match: RegExp
+  name: string
+  description?: string
+  icon: string
+}
+
+interface ModelValue {
+  search?: string | false
+  selected?: string[] | null
+  [key: string]: unknown
+}
 
 const props = withDefaults(
   defineProps<{
@@ -34,18 +44,16 @@ function isRuleSelected(rule: FilterMatchRule) {
 
 function toggleRule(rule: FilterMatchRule) {
   const { rules } = props
-  if (!model?.value?.selected) {
+  if (!model?.value?.selected)
     model.value.selected = rules.map(r => r.name)
-  }
   if (model.value.selected.includes(rule.name)) {
     model.value.selected = model.value.selected.filter(t => t !== rule.name)
   }
   else {
     model.value.selected.push(rule.name)
   }
-  if (model?.value?.selected.length === props.rules.length) {
+  if (model?.value?.selected.length === props.rules.length)
     model.value.selected = null
-  }
 }
 
 function reverseSelect() {
@@ -61,12 +69,10 @@ function reverseSelect() {
 }
 
 function unselectToggle() {
-  if (model?.value?.selected?.length === 0) {
+  if (model?.value?.selected?.length === 0)
     model.value.selected = null
-  }
-  else {
+  else
     model.value.selected = []
-  }
 }
 </script>
 
@@ -101,7 +107,9 @@ function unselectToggle() {
           @change="toggleRule(rule)"
         >
         <div :class="rule.icon" icon-catppuccin />
-        <div text-sm>{{ rule.description || rule.name }}</div>
+        <div text-sm>
+          {{ rule.description || rule.name }}
+        </div>
       </label>
       <button
         rounded-md p1
diff --git a/packages/rolldown/src/app/components/display/ModuleGraph.vue b/packages/ui/src/components/DisplayModuleGraph.vue
similarity index 98%
rename from packages/rolldown/src/app/components/display/ModuleGraph.vue
rename to packages/ui/src/components/DisplayModuleGraph.vue
index 00475d99..c1714d77 100644
--- a/packages/rolldown/src/app/components/display/ModuleGraph.vue
+++ b/packages/ui/src/components/DisplayModuleGraph.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts" generic="T extends { id: string, imports: unknown[] }, I">
-import type { SessionContext } from '~~/shared/types'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { computed, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
-import { generateModuleGraphLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '~/composables/module-graph'
+import { generateModuleGraphLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '../composables/module-graph'
+import DisplayTimeoutView from './DisplayTimeoutView.vue'
 
 const props = withDefaults(defineProps<{
   modules: T[]
-  session: SessionContext
   expandControls?: boolean
 }>(), {
   expandControls: true,
@@ -75,9 +74,8 @@ useEventListener(window, 'resize', scheduleReadViewport, { passive: true })
 useResizeObserver(container, scheduleReadViewport)
 
 onBeforeUnmount(() => {
-  if (viewportFrame !== undefined) {
+  if (viewportFrame !== undefined)
     cancelAnimationFrame(viewportFrame)
-  }
 })
 
 onMounted(() => {
diff --git a/packages/rolldown/src/app/components/display/PluginName.vue b/packages/ui/src/components/DisplayPluginName.vue
similarity index 95%
rename from packages/rolldown/src/app/components/display/PluginName.vue
rename to packages/ui/src/components/DisplayPluginName.vue
index c5ce30d0..e773df6e 100644
--- a/packages/rolldown/src/app/components/display/PluginName.vue
+++ b/packages/ui/src/components/DisplayPluginName.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h } from 'vue'
-import { getPluginColor } from '~/utils/color'
+import { getPluginColor } from '../utils/color'
 
 const props = defineProps<{
   name: string
diff --git a/packages/rolldown/src/app/components/display/TimeoutView.vue b/packages/ui/src/components/DisplayTimeoutView.vue
similarity index 100%
rename from packages/rolldown/src/app/components/display/TimeoutView.vue
rename to packages/ui/src/components/DisplayTimeoutView.vue
diff --git a/packages/rolldown/src/app/components/plugins/FlatList.vue b/packages/ui/src/components/PluginsFlatList.vue
similarity index 80%
rename from packages/rolldown/src/app/components/plugins/FlatList.vue
rename to packages/ui/src/components/PluginsFlatList.vue
index cd6e1a02..8efc0c9f 100644
--- a/packages/rolldown/src/app/components/plugins/FlatList.vue
+++ b/packages/ui/src/components/PluginsFlatList.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
-import type { PluginItem } from '~~/shared/types'
-import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+<script setup lang="ts" generic="T extends { plugin_id: string | number, name: string }">
 import { useRoute } from '#app/composables/router'
+import { NuxtLink } from '#components'
+import DataVirtualList from './DataVirtualList.vue'
+import DisplayPluginName from './DisplayPluginName.vue'
 
 withDefaults(defineProps<{
-  plugins: PluginItem[]
+  plugins: T[]
   itemSize?: number
   pageMode?: boolean
   scroller?: 'dynamic' | 'window'
diff --git a/packages/rolldown/src/app/components/plugins/Sunburst.vue b/packages/ui/src/components/PluginsSunburst.vue
similarity index 72%
rename from packages/rolldown/src/app/components/plugins/Sunburst.vue
rename to packages/ui/src/components/PluginsSunburst.vue
index f08f83c1..4d2f1113 100644
--- a/packages/rolldown/src/app/components/plugins/Sunburst.vue
+++ b/packages/ui/src/components/PluginsSunburst.vue
@@ -1,23 +1,31 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends { id: string, text?: string, size: number, children: T[], parent?: T, meta?: { type?: string } }">
 import type { GraphBase, GraphBaseOptions } from 'nanovis'
-import type { SessionContext } from '~~/shared/types'
-import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
-import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import { colorToCssBackground } from 'nanovis'
 import { useTemplateRef, watchEffect } from 'vue'
+import ChartNavBreadcrumb from './ChartNavBreadcrumb.vue'
+import DisplayDuration from './DisplayDuration.vue'
 
 const props = defineProps<{
-  graph: GraphBase<PluginChartInfo | undefined, GraphBaseOptions<PluginChartInfo | undefined>>
-  selected?: PluginChartNode | undefined
-  session: SessionContext
+  graph: GraphBase<any, GraphBaseOptions<any>>
+  selected?: T
 }>()
 
 const emit = defineEmits<{
-  (e: 'select', node: PluginChartNode | null): void
+  (e: 'select', node: T | null): void
+}>()
+
+defineSlots<{
+  module: (props: {
+    child: T
+  }) => void
 }>()
 
 const el = useTemplateRef<HTMLDivElement>('el')
 watchEffect(() => el.value?.append(props.graph.el))
+
+function getColor(child: T) {
+  return colorToCssBackground(props.graph.options.getColor?.(child as any) || '#000')
+}
 </script>
 
 <template>
@@ -43,14 +51,9 @@ watchEffect(() => el.value?.append(props.graph.el))
                 {{ child.text }}
               </span>
             </div>
-            <DisplayModuleId
-              v-else
-              :id="child.text!"
-              w-full border-none ws-nowrap
-              :session="session"
-              hover="bg-active"
-              border="~ base rounded" block px2 py1
-            />
+            <slot v-else name="module" :child="child">
+              <span>{{ child.text || child.id }}</span>
+            </slot>
           </button>
 
           <button
@@ -61,7 +64,7 @@ watchEffect(() => el.value?.append(props.graph.el))
             <div
               h-5 rounded shadow border="~ base"
               :style="{
-                background: colorToCssBackground(graph.options.getColor?.(child) || '#000'),
+                background: getColor(child),
                 width: `${child.size / selected.size * 100}%`,
               }"
             />
diff --git a/packages/rolldown/src/app/composables/graph-path-selector.ts b/packages/ui/src/composables/graph-path-selector.ts
similarity index 85%
rename from packages/rolldown/src/app/composables/graph-path-selector.ts
rename to packages/ui/src/composables/graph-path-selector.ts
index b493de51..92cdcbf8 100644
--- a/packages/rolldown/src/app/composables/graph-path-selector.ts
+++ b/packages/ui/src/composables/graph-path-selector.ts
@@ -17,14 +17,11 @@ export function useGraphPathSelector<T extends { id: string }>(options: {
   searchKeys?: string[]
   getModules: () => T[]
 }): GraphPathSelector<T> {
-  const state = ref<{
-    search: string
-    selected: string | null
-  }>({
+  const state = ref({
     search: '',
-    selected: null,
+    selected: null as string | null,
   })
-  const fuse = ref<ComputedRefWithControl<Fuse<T>>>() as unknown as Ref<ComputedRefWithControl<Fuse<T>>>
+  const fuse = ref<ComputedRefWithControl<Fuse<T>>>()
 
   const modules = computed(options.getModules)
 
@@ -59,10 +56,10 @@ export function useGraphPathSelector<T extends { id: string }>(options: {
   }
 }
 
-export function useGraphPathManager<T extends { id: string, imports: Record<string, any>[] }>(
+export function useGraphPathManager<T extends { id: string, imports: unknown[] }>(
   options: {
     onToggle: (visible: boolean) => void
-    dataMap: ComputedRef<Map<string, Omit<T, 'id'>>>
+    dataMap: ComputedRef<Map<string, { imports?: unknown[] }>>
     list: ComputedRef<T[]>
     importIdKey: string
   },
@@ -74,7 +71,7 @@ export function useGraphPathManager<T extends { id: string, imports: Record<stri
     importIdKey,
   } = options
 
-  const pathSelectorVisible = ref<boolean>(false)
+  const pathSelectorVisible = ref(false)
   const pathNodes = ref({
     start: '',
     end: '',
@@ -131,13 +128,15 @@ export function useGraphPathManager<T extends { id: string, imports: Record<stri
       }
     }
 
-    if (start && end) {
-      bfs(start, id => dataMap.value.get(id)?.imports!.map(i => i[importIdKey]) || [], end)
-    }
-    else if (start) {
-      bfs(start, id => dataMap.value.get(id)?.imports!.map(i => i[importIdKey]) || [])
+    const getImportIds = (id: string) => {
+      return dataMap.value.get(id)?.imports?.map(i => `${(i as Record<string, unknown>)[importIdKey]}`) || []
     }
 
+    if (start && end)
+      bfs(start, getImportIds, end)
+    else if (start)
+      bfs(start, getImportIds)
+
     return list.value.filter(x => linkedNodes.has(x.id)).map((m) => {
       if (m.id === start) {
         return {
diff --git a/packages/rolldown/src/app/composables/module-graph.ts b/packages/ui/src/composables/module-graph.ts
similarity index 79%
rename from packages/rolldown/src/app/composables/module-graph.ts
rename to packages/ui/src/composables/module-graph.ts
index a9c20faa..55ef3727 100644
--- a/packages/rolldown/src/app/composables/module-graph.ts
+++ b/packages/ui/src/composables/module-graph.ts
@@ -1,11 +1,8 @@
-import type { ComputedRefWithControl } from '@vueuse/core'
 import type { HierarchyLink, HierarchyNode } from 'd3-hierarchy'
 import type { ComputedRef, InjectionKey, MaybeRef, Ref, ShallowReactive, ShallowRef } from 'vue'
-import type { ModuleListItem } from '~~/shared/types'
-import { computedWithControl, onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
+import { onKeyPressed, useEventListener, useMagicKeys } from '@vueuse/core'
 import { hierarchy, tree } from 'd3-hierarchy'
 import { linkHorizontal, linkVertical } from 'd3-shape'
-import Fuse from 'fuse.js'
 import { computed, inject, nextTick, provide, ref, shallowReactive, shallowRef, unref } from 'vue'
 import { useZoomElement } from './zoom-element'
 
@@ -53,7 +50,6 @@ interface ModuleGraphOptions<M, I> {
     modulesMap: ComputedRef<Map<string, M>>
     nodesMap: ShallowReactive<Map<string, HierarchyNode<ModuleGraphNode<M, I>>>>
     linksMap: ShallowReactive<Map<string, ModuleGraphLink<M, I>>>
-
     focusOn: (id: string, animated?: boolean) => void
   }) => (focusOnFirstRootNode?: boolean) => void
 }
@@ -77,9 +73,9 @@ export const createLinkVertical = linkVertical()
   .y(d => d[1])
 
 export function generateModuleGraphLink<M, I>(link: ModuleGraphLink<M, I>, spacing?: ModuleGraphSpacing) {
-  if (!link.target || !link.source) {
+  if (!link.target || !link.source)
     return null
-  }
+
   if (!spacing) {
     if (link.target.x! <= link.source.x!) {
       return createLinkVertical({
@@ -92,19 +88,19 @@ export function generateModuleGraphLink<M, I>(link: ModuleGraphLink<M, I>, spaci
       target: [link.target.x!, link.target.y!],
     })
   }
-  else {
-    if (link.target.x! <= link.source.x!) {
-      return createLinkVertical({
-        source: [link.source.x! + unref(spacing.width) / 2 - unref(spacing.linkOffset), link.source.y!],
-        target: [link.target.x! - unref(spacing.width) / 2 + unref(spacing.linkOffset), link.target.y!],
-      })
-    }
-    return createLinkHorizontal({
+
+  if (link.target.x! <= link.source.x!) {
+    return createLinkVertical({
       source: [link.source.x! + unref(spacing.width) / 2 - unref(spacing.linkOffset), link.source.y!],
       target: [link.target.x! - unref(spacing.width) / 2 + unref(spacing.linkOffset), link.target.y!],
     })
   }
+  return createLinkHorizontal({
+    source: [link.source.x! + unref(spacing.width) / 2 - unref(spacing.linkOffset), link.source.y!],
+    target: [link.target.x! - unref(spacing.width) / 2 + unref(spacing.linkOffset), link.target.y!],
+  })
 }
+
 // @unocss-include
 export function getModuleGraphLinkColor<M, I>(_link: ModuleGraphLink<M, I>) {
   return 'stroke-#8885'
@@ -161,7 +157,7 @@ export function createModuleGraph<M extends { id: string }, I>(options: ModuleGr
     })
   }
 
-  const _calculateGraph = options.generateGraph({
+  const calculateGraph = options.generateGraph({
     isFirstCalculateGraph,
     hierarchy,
     tree,
@@ -183,7 +179,7 @@ export function createModuleGraph<M extends { id: string }, I>(options: ModuleGr
 
   provide(ViteDevToolsModuleGraphStateSymbol, {
     spacing: options.spacing,
-    calculateGraph: _calculateGraph,
+    calculateGraph,
     isFirstCalculateGraph,
     container,
     width,
@@ -202,8 +198,7 @@ export function createModuleGraph<M extends { id: string }, I>(options: ModuleGr
 }
 
 export function useModuleGraph() {
-  const state = inject(ViteDevToolsModuleGraphStateSymbol)!
-  return state
+  return inject(ViteDevToolsModuleGraphStateSymbol)!
 }
 
 export function useToggleGraphNodeExpanded<M extends { id: string, imports: unknown[] }>(options: {
@@ -213,7 +208,6 @@ export function useToggleGraphNodeExpanded<M extends { id: string, imports: unkn
   const isGraphNodeToggling = ref(false)
 
   function restoreScrollPosition(id: string, beforePosition: { x: number, y: number }) {
-  // Ensure this runs after the nextTick inside calculateGraph completes (width and height are computed)
     nextTick(() => {
       nextTick(() => {
         const newNode = nodesRefMap.get(id)
@@ -240,7 +234,6 @@ export function useToggleGraphNodeExpanded<M extends { id: string, imports: unkn
     const node = nodesRefMap.get(id)
     let prevNodeOffset: null | { x: number, y: number } = null
 
-    // Record position relative to the scroll container to avoid drift after reflow
     if (node && container.value) {
       const containerRect = container.value.getBoundingClientRect()
       const rect = node.getBoundingClientRect()
@@ -250,19 +243,15 @@ export function useToggleGraphNodeExpanded<M extends { id: string, imports: unkn
       }
     }
 
-    if (collapsedNodes.has(id)) {
+    if (collapsedNodes.has(id))
       collapsedNodes.delete(id)
-    }
-    else {
+    else
       collapsedNodes.add(id)
-    }
 
     calculateGraph()
 
-    // Adjust scroll position after layout changes
-    if (prevNodeOffset) {
+    if (prevNodeOffset)
       restoreScrollPosition(id, prevNodeOffset)
-    }
 
     isGraphNodeToggling.value = false
   }
@@ -288,9 +277,8 @@ export function useToggleGraphNodeExpanded<M extends { id: string, imports: unkn
     isGraphNodeToggling.value = true
 
     unref(options.modules).forEach((module) => {
-      if (module.imports.length > 0) {
+      if (module.imports.length > 0)
         collapsedNodes.add(module.id)
-      }
     })
     calculateGraph()
 
@@ -340,14 +328,12 @@ export function useGraphDraggingScroll() {
 
   function init() {
     useEventListener(container, 'mousedown', (e) => {
-      // prevent dragging when clicking on scrollbar
       const rect = container.value!.getBoundingClientRect()
       const distRight = rect.right - e.clientX
       const distBottom = rect.bottom - e.clientY
 
-      if (distRight <= SCROLLBAR_THICKNESS || distBottom <= SCROLLBAR_THICKNESS) {
+      if (distRight <= SCROLLBAR_THICKNESS || distBottom <= SCROLLBAR_THICKNESS)
         return
-      }
 
       isGrabbing.value = true
       x = container.value!.scrollLeft + e.pageX
@@ -370,57 +356,3 @@ export function useGraphDraggingScroll() {
     isGrabbing,
   }
 }
-
-export interface ModulePathSelector {
-  state: { value: { search: string, selected: string | null } }
-  modules: ComputedRef<ModuleListItem[]>
-  fuse: Ref<ComputedRefWithControl<Fuse<ModuleListItem>> | undefined>
-  initSelector: (modules: ComputedRef<ModuleListItem[]>) => void
-  select: (module: ModuleListItem) => void
-  clear: () => void
-}
-
-export function useModulePathSelector(options: {
-  getModules: () => ModuleListItem[]
-}): ModulePathSelector {
-  const state = ref<{
-    search: string
-    selected: string | null
-  }>({
-    search: '',
-    selected: null,
-  })
-  const fuse = ref<ComputedRefWithControl<Fuse<ModuleListItem>>>()
-
-  const modules = computed(options.getModules)
-
-  function initSelector(modules: ComputedRef<ModuleListItem[]>) {
-    fuse.value = computedWithControl(
-      modules,
-      () => new Fuse(modules.value, {
-        includeScore: true,
-        keys: ['id'],
-        ignoreLocation: true,
-        threshold: 0.4,
-      }),
-    )
-  }
-
-  function select(node: ModuleListItem) {
-    state.value.selected = node.id
-    state.value.search = ''
-  }
-
-  function clear() {
-    state.value.selected = null
-  }
-
-  return {
-    state,
-    modules,
-    fuse,
-    initSelector,
-    select,
-    clear,
-  }
-}
diff --git a/packages/rolldown/src/app/composables/zoom-element.ts b/packages/ui/src/composables/zoom-element.ts
similarity index 92%
rename from packages/rolldown/src/app/composables/zoom-element.ts
rename to packages/ui/src/composables/zoom-element.ts
index ea27758f..7e73f543 100644
--- a/packages/rolldown/src/app/composables/zoom-element.ts
+++ b/packages/ui/src/composables/zoom-element.ts
@@ -24,7 +24,6 @@ export function useZoomElement(
 
     const { left, top, width, height } = el.getBoundingClientRect()
 
-    // default to center
     const x = clientX ?? (left + width / 2)
     const y = clientY ?? (top + height / 2)
 
@@ -36,21 +35,18 @@ export function useZoomElement(
 
     const ratio = scale.value / oldScale
 
-    // Adjust scroll so that the zoom center is kept in place
     el.scrollLeft = (el.scrollLeft + offsetX) * ratio - offsetX
     el.scrollTop = (el.scrollTop + offsetY) * ratio - offsetY
   }
 
   function handleWheel(event: WheelEvent) {
     if (toValue(wheel)) {
-      // Use control + wheel
       event.preventDefault()
 
       const zoomFactor = 0.2
       zoom(event.deltaY < 0 ? zoomFactor : zoomFactor * -1, event.clientX, event.clientY)
     }
     else if (event.ctrlKey) {
-      // Use touchpad zoom
       event.preventDefault()
 
       const zoomFactor = 0.004
diff --git a/packages/ui/src/utils/color.ts b/packages/ui/src/utils/color.ts
index 951f85f4..306ff735 100644
--- a/packages/ui/src/utils/color.ts
+++ b/packages/ui/src/utils/color.ts
@@ -19,3 +19,18 @@ export function getHsla(
   const lightness = isDark.value ? 60 : 40
   return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
 }
+
+export const predefinedPluginColorMap = {
+  error: 0,
+  client: 60,
+  ssr: 270,
+  vite: 250,
+  virtual: 160,
+} as Record<string, number>
+
+export function getPluginColor(name: string, opacity = 1): string {
+  name = name.replace(/[^a-z]+/gi, '').toLowerCase()
+  if (name in predefinedPluginColorMap)
+    return getHsla(predefinedPluginColorMap[name]!, opacity)
+  return getHashColorFromString(name, opacity)
+}
diff --git a/packages/vite/package.json b/packages/vite/package.json
index 9c345145..2c59fa29 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -34,24 +34,36 @@
     "dev:prepare": "nuxi prepare src",
     "prepack": "pnpm build"
   },
+  "peerDependencies": {
+    "vite": "*"
+  },
   "dependencies": {
     "@floating-ui/dom": "catalog:frontend",
     "@vitejs/devtools-kit": "workspace:*",
-    "birpc": "catalog:deps",
-    "devframe": "catalog:deps",
+    "d3-shape": "catalog:frontend",
     "envinfo": "catalog:deps",
-    "get-port-please": "catalog:deps",
-    "h3": "catalog:deps",
+    "nostics": "catalog:deps",
     "pathe": "catalog:deps",
-    "ws": "catalog:deps"
+    "perfect-debounce": "catalog:deps"
   },
   "devDependencies": {
+    "@types/d3-hierarchy": "catalog:types",
     "@types/envinfo": "catalog:types",
+    "@types/splitpanes": "catalog:types",
     "@unocss/nuxt": "catalog:build",
+    "@vueuse/components": "catalog:frontend",
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
+    "comlink": "catalog:frontend",
+    "d3-hierarchy": "catalog:frontend",
+    "diff-match-patch-es": "catalog:frontend",
     "floating-vue": "catalog:frontend",
+    "fuse.js": "catalog:frontend",
+    "modern-monaco": "catalog:frontend",
+    "nanovis": "catalog:frontend",
+    "splitpanes": "catalog:frontend",
     "tsdown": "catalog:build",
-    "unocss": "catalog:build"
+    "unocss": "catalog:build",
+    "vue-virtual-scroller": "catalog:frontend"
   }
 }
diff --git a/packages/vite/src/app/app.vue b/packages/vite/src/app/app.vue
index 6ca0c929..69757909 100644
--- a/packages/vite/src/app/app.vue
+++ b/packages/vite/src/app/app.vue
@@ -3,9 +3,11 @@ import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
 import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
 import { useHead } from '#app/composables/head'
 import { connect, rpcConnectionState } from './composables/rpc'
+import 'floating-vue/dist/style.css'
+import './styles/cm.css'
+import './styles/splitpanes.css'
 import './styles/global.css'
 import '@vitejs/devtools-ui/composables/dark'
-import 'floating-vue/dist/style.css'
 
 useHead({
   title: 'Vite DevTools',
@@ -20,6 +22,16 @@ useSideNav(() => {
       icon: 'i-ph-house-duotone',
       to: '/home',
     },
+    {
+      title: 'Modules Graph',
+      icon: 'i-ph-graph-duotone',
+      to: '/graph',
+    },
+    {
+      title: 'Plugins',
+      icon: 'i-ph-plugs-duotone',
+      to: '/plugins',
+    },
   ]
 })
 </script>
diff --git a/packages/vite/src/app/components/chart/ModuleFlamegraph.vue b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
new file mode 100644
index 00000000..9aa66eba
--- /dev/null
+++ b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { TreeNodeInput } from 'nanovis'
+import type { ViteModuleListItem } from '~/types/modules'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { Flamegraph, normalizeTreeNode } from 'nanovis'
+import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
+import { normalizeTimestamp } from '~/utils/format'
+
+interface FlowTransform {
+  name: string
+  result?: string | null
+  start: number
+  end: number
+}
+
+interface ViteModuleFlamegraphItem {
+  plugin_name: string
+  duration: number
+  timestamp_start: number
+  timestamp_end: number
+}
+
+interface ViteModuleFlamegraphInfo {
+  resolve_ids: ViteModuleFlamegraphItem[]
+  loads: ViteModuleFlamegraphItem[]
+  transforms: ViteModuleFlamegraphItem[]
+}
+
+const props = withDefaults(defineProps<{
+  module: ViteModuleListItem
+  transforms: FlowTransform[]
+  flowNodeSelected?: boolean
+}>(), {
+  flowNodeSelected: false,
+})
+
+const n = (node: TreeNodeInput<any>) => normalizeTreeNode(node, undefined, false)
+
+const info = computed<ViteModuleFlamegraphInfo>(() => {
+  const first = props.transforms[0]
+  const load = first && first.name !== '__load__'
+    ? [{
+        plugin_name: first.name,
+        duration: Math.max(0, first.end - first.start),
+        timestamp_start: first.start,
+        timestamp_end: first.end,
+      }]
+    : []
+
+  return {
+    resolve_ids: props.module.plugins
+      .filter(plugin => plugin.resolveId != null)
+      .map((plugin, index) => ({
+        plugin_name: plugin.name,
+        duration: plugin.resolveId ?? 0,
+        timestamp_start: index,
+        timestamp_end: index + (plugin.resolveId ?? 0),
+      })),
+    loads: load,
+    transforms: props.transforms
+      .slice(1)
+      .filter(transform => transform.name !== '__load__')
+      .map(transform => ({
+        plugin_name: transform.name,
+        duration: Math.max(0, transform.end - transform.start),
+        timestamp_start: transform.start,
+        timestamp_end: transform.end,
+      })),
+  }
+})
+
+const tree = computed(() => {
+  const resolveIds = info.value.resolve_ids.map((id, idx) => n({
+    id: `resolveId-${idx}`,
+    text: id.plugin_name,
+    size: id.duration,
+    meta: id,
+  }))
+  const loads = info.value.loads.map((load, idx) => n({
+    id: `load-${idx}`,
+    text: load.plugin_name,
+    size: load.duration,
+    meta: load,
+  }))
+  const transforms = info.value.transforms.map((transform, idx) => n({
+    id: `transform-${idx}`,
+    text: transform.plugin_name,
+    size: transform.duration,
+    meta: transform,
+  }))
+  const children = [
+    n({
+      id: '~resolves',
+      text: 'Resolve Id',
+      children: resolveIds,
+    }),
+    n({
+      id: '~loads',
+      text: 'Load',
+      children: loads,
+    }),
+    n({
+      id: '~transforms',
+      text: 'Transform',
+      children: transforms,
+    }),
+  ]
+
+  return n({
+    id: '~root',
+    text: 'Module Flamegraph',
+    children,
+  })
+})
+
+const hoverNode = ref<{
+  plugin_name: string
+  duration: number
+  meta: ViteModuleFlamegraphItem | undefined
+} | null>(null)
+const hoverX = ref<number>(0)
+const hoverY = ref<number>(0)
+const el = useTemplateRef<HTMLDivElement>('el')
+const flamegraph = shallowRef<Flamegraph | null>(null)
+
+function buildFlamegraph() {
+  flamegraph.value = new Flamegraph(tree.value, {
+    animate: true,
+    palette: {
+      fg: '#888',
+    },
+    getSubtext: (node) => {
+      const p = node.size / tree.value.size * 100
+      if (p > 15 && p !== 100) {
+        return `${p.toFixed(1)}%`
+      }
+      return undefined
+    },
+    onHover(node, e) {
+      if (!node) {
+        hoverNode.value = null
+        return
+      }
+      if (e) {
+        hoverX.value = e.clientX
+        hoverY.value = e.clientY
+      }
+      hoverNode.value = {
+        plugin_name: node.text!,
+        duration: node.size,
+        meta: node.meta,
+      }
+    },
+    onLeave() {
+      hoverNode.value = null
+    },
+  })
+  el.value!.appendChild(flamegraph.value!.el)
+}
+
+function disposeFlamegraph() {
+  flamegraph.value?.dispose()
+}
+
+onMounted(() => {
+  buildFlamegraph()
+})
+
+onUnmounted(() => {
+  disposeFlamegraph()
+})
+
+watch(tree, async () => {
+  disposeFlamegraph()
+  buildFlamegraph()
+}, {
+  deep: true,
+})
+
+watch(() => props.flowNodeSelected, async () => {
+  await nextTick()
+  flamegraph.value?.resize()
+})
+</script>
+
+<template>
+  <div relative border="t base" pb10 py1 mt4>
+    <DisplayGraphHoverView :hover-x="hoverX" :hover-y="hoverY">
+      <div
+        v-if="hoverNode"
+        border="~ base" rounded-lg shadow-lg px3 py2
+        bg-glass pointer-events-none text-sm max-w-80
+      >
+        <div font-semibold font-mono text-base mb2>
+          {{ hoverNode.plugin_name }}
+        </div>
+        <div v-if="hoverNode.meta" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
+          <div flex="~ justify-between items-center" py1>
+            <label text-xs opacity-70>Start Time</label>
+            <time
+              :datetime="new Date(hoverNode.meta.timestamp_start).toISOString()"
+              font-mono text="xs"
+              bg="base/10"
+              px1.5 py0.5 rounded
+            >
+              {{ normalizeTimestamp(hoverNode.meta.timestamp_start) }}
+            </time>
+          </div>
+          <div flex="~ justify-between items-center" py1>
+            <label text-xs opacity-70>End Time</label>
+            <time
+              :datetime="new Date(hoverNode.meta.timestamp_end).toISOString()"
+              font-mono text="xs"
+              bg="base/10"
+              px1.5 py0.5 rounded
+            >
+              {{ normalizeTimestamp(hoverNode.meta.timestamp_end) }}
+            </time>
+          </div>
+          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
+            <label text="xs" op70>Duration</label>
+            <DisplayDuration :duration="hoverNode.duration" />
+          </div>
+        </div>
+        <div v-else>
+          <DisplayDuration :duration="hoverNode.duration" />
+        </div>
+      </div>
+    </DisplayGraphHoverView>
+    <div ref="el" min-h-30 />
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/code/DiffEditor.vue b/packages/vite/src/app/components/code/DiffEditor.vue
new file mode 100644
index 00000000..e0e56970
--- /dev/null
+++ b/packages/vite/src/app/components/code/DiffEditor.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type * as Monaco from 'modern-monaco/editor-core'
+import type { SplitpanesResizePayload } from 'splitpanes'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { Pane, Splitpanes } from 'splitpanes'
+import { computed, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
+import {
+  applyMonacoTheme,
+  createReadOnlyMonacoEditor,
+  getMonaco,
+  getMonacoWordWrap,
+  guessMonacoLanguage,
+  setModelLanguageIfNeeded,
+  setupMonacoScrollSync,
+  syncMonacoEditorScrolls,
+} from '~/composables/monaco'
+import { settings } from '~/state/settings'
+import { calculateDiffWithWorker } from '~/worker/diff'
+
+const props = defineProps<{
+  from: string
+  to: string
+  oneColumn: boolean
+  diff: boolean
+}>()
+
+const fromEl = useTemplateRef('fromEl')
+const toEl = useTemplateRef('toEl')
+
+let monaco: typeof Monaco | null = null
+let fromEditor: Monaco.editor.IStandaloneCodeEditor | null = null
+let toEditor: Monaco.editor.IStandaloneCodeEditor | null = null
+let fromModel: Monaco.editor.ITextModel | null = null
+let toModel: Monaco.editor.ITextModel | null = null
+let fromDecorations: Monaco.editor.IEditorDecorationsCollection | null = null
+let toDecorations: Monaco.editor.IEditorDecorationsCollection | null = null
+let disposeScrollSync: (() => void) | null = null
+let diffVersion = 0
+
+function setModelValue(model: Monaco.editor.ITextModel, value: string) {
+  if (model.getValue() !== value)
+    model.setValue(value)
+}
+
+function applyDiffDecorations(changes: Array<[number, string]>) {
+  if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
+    return
+
+  const fromEntries: Monaco.editor.IModelDeltaDecoration[] = []
+  const toEntries: Monaco.editor.IModelDeltaDecoration[] = []
+
+  const addedLines = new Set<number>()
+  const removedLines = new Set<number>()
+
+  let fromIndex = 0
+  let toIndex = 0
+
+  for (const [type, change] of changes) {
+    if (type === 1) {
+      const start = toModel.getPositionAt(toIndex)
+      toIndex += change.length
+      const end = toModel.getPositionAt(toIndex)
+
+      if (start.lineNumber !== end.lineNumber || start.column !== end.column) {
+        toEntries.push({
+          range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+          options: {
+            inlineClassName: 'diff-added-inline',
+          },
+        })
+      }
+
+      for (let i = start.lineNumber; i <= end.lineNumber; i++)
+        addedLines.add(i)
+    }
+    else if (type === -1) {
+      const start = fromModel.getPositionAt(fromIndex)
+      fromIndex += change.length
+      const end = fromModel.getPositionAt(fromIndex)
+
+      if (start.lineNumber !== end.lineNumber || start.column !== end.column) {
+        fromEntries.push({
+          range: new monaco.Range(start.lineNumber, start.column, end.lineNumber, end.column),
+          options: {
+            inlineClassName: 'diff-removed-inline',
+          },
+        })
+      }
+
+      for (let i = start.lineNumber; i <= end.lineNumber; i++)
+        removedLines.add(i)
+    }
+    else {
+      fromIndex += change.length
+      toIndex += change.length
+    }
+  }
+
+  for (const line of removedLines) {
+    fromEntries.push({
+      range: new monaco.Range(line, 1, line, 1),
+      options: {
+        className: 'diff-removed',
+        isWholeLine: true,
+      },
+    })
+  }
+
+  for (const line of addedLines) {
+    toEntries.push({
+      range: new monaco.Range(line, 1, line, 1),
+      options: {
+        className: 'diff-added',
+        isWholeLine: true,
+      },
+    })
+  }
+
+  fromDecorations.set(fromEntries)
+  toDecorations.set(toEntries)
+}
+
+onMounted(async () => {
+  if (!fromEl.value || !toEl.value)
+    return
+
+  monaco = await getMonaco()
+
+  fromEditor = createReadOnlyMonacoEditor(monaco, fromEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
+  })
+  toEditor = createReadOnlyMonacoEditor(monaco, toEl.value, {
+    wordWrap: getMonacoWordWrap(settings.value.codeviewerLineWrap),
+  })
+
+  fromModel = monaco.editor.createModel(props.from, guessMonacoLanguage(props.from))
+  toModel = monaco.editor.createModel(props.to, guessMonacoLanguage(props.to))
+
+  fromEditor.setModel(fromModel)
+  toEditor.setModel(toModel)
+
+  fromDecorations = fromEditor.createDecorationsCollection()
+  toDecorations = toEditor.createDecorationsCollection()
+
+  disposeScrollSync = setupMonacoScrollSync(fromEditor, toEditor)
+
+  applyMonacoTheme(monaco)
+
+  if (!props.oneColumn)
+    syncMonacoEditorScrolls(toEditor, fromEditor)
+
+  await updateDiffDecorations(props.from, props.to, props.diff)
+})
+
+watch(
+  () => settings.value.codeviewerLineWrap,
+  (enabled) => {
+    const wordWrap = getMonacoWordWrap(enabled)
+    fromEditor?.updateOptions({ wordWrap })
+    toEditor?.updateOptions({ wordWrap })
+  },
+  { immediate: true },
+)
+
+watch(isDark, () => {
+  if (monaco)
+    applyMonacoTheme(monaco)
+})
+
+watch(
+  () => props.oneColumn,
+  async (oneColumn) => {
+    if (!fromEditor || !toEditor)
+      return
+
+    fromEl.value!.style.display = oneColumn ? 'none' : ''
+
+    await nextTick()
+
+    fromEditor.layout()
+    toEditor.layout()
+
+    if (!oneColumn)
+      syncMonacoEditorScrolls(toEditor, fromEditor)
+  },
+  { immediate: true },
+)
+
+async function updateDiffDecorations(from: string, to: string, diffEnabled: boolean) {
+  if (!monaco || !fromModel || !toModel || !fromDecorations || !toDecorations)
+    return
+
+  const currentVersion = ++diffVersion
+
+  setModelValue(fromModel, from)
+  setModelValue(toModel, to)
+
+  setModelLanguageIfNeeded(monaco, fromModel, guessMonacoLanguage(from))
+  setModelLanguageIfNeeded(monaco, toModel, guessMonacoLanguage(to))
+
+  fromDecorations.set([])
+  toDecorations.set([])
+
+  if (!diffEnabled || !from || from === to)
+    return
+
+  const changes = await calculateDiffWithWorker(from, to)
+  if (currentVersion !== diffVersion)
+    return
+
+  applyDiffDecorations(changes)
+}
+
+watch(
+  () => [props.from, props.to, props.diff] as const,
+  ([from, to, diffEnabled]) => {
+    updateDiffDecorations(from, to, diffEnabled)
+  },
+)
+
+const leftPanelSize = computed(() => {
+  return props.oneColumn
+    ? 0
+    : settings.value.codeviewerDiffPanelSize
+})
+
+function onUpdate({ prevPane }: SplitpanesResizePayload) {
+  fromEditor?.layout()
+  toEditor?.layout()
+
+  if (props.oneColumn || !prevPane)
+    return
+
+  settings.value.codeviewerDiffPanelSize = prevPane.size
+}
+
+onBeforeUnmount(() => {
+  disposeScrollSync?.()
+  fromEditor?.dispose()
+  toEditor?.dispose()
+  fromModel?.dispose()
+  toModel?.dispose()
+})
+</script>
+
+<template>
+  <Splitpanes @resize="onUpdate">
+    <Pane v-show="!oneColumn" min-size="10" :size="leftPanelSize">
+      <div ref="fromEl" h-inherit />
+    </Pane>
+    <Pane min-size="10" :size="100 - leftPanelSize">
+      <div ref="toEl" h-inherit />
+    </Pane>
+  </Splitpanes>
+</template>
+
+<style lang="postcss">
+.diff-added {
+  --uno: bg-green-400/15;
+}
+.diff-removed {
+  --uno: bg-red-400/15;
+}
+.diff-added-inline {
+  --uno: bg-green-400/30;
+}
+.diff-removed-inline {
+  --uno: bg-red-400/30;
+}
+</style>
diff --git a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
new file mode 100644
index 00000000..eb0af74e
--- /dev/null
+++ b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { InspectModuleUpdatedPayload } from '~/composables/rpc'
+import type { ViteModuleListItem } from '~/types/modules'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { useRpc } from '#imports'
+import { onInspectModuleUpdated } from '~/composables/rpc'
+import { settings } from '~/state/settings'
+
+type InspectQuery = Parameters<DevToolsRpcServerFunctions['vite:inspect:get-module-transform-info']>[0]
+type TransformInfo = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-module-transform-info']>>
+
+const props = defineProps<{
+  query: InspectQuery
+  module: string
+  modules: ViteModuleListItem[]
+  root: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const rpc = useRpc()
+const transformInfo = ref<TransformInfo>()
+const transformsLoading = ref(false)
+const flowNodeSelected = ref(false)
+
+const info = computed(() => props.modules.find(item => item.id === props.module))
+
+let transformRequestVersion = 0
+
+async function loadTransformInfo() {
+  const query = props.query
+  const moduleId = props.module
+
+  const requestVersion = ++transformRequestVersion
+  transformsLoading.value = true
+  try {
+    const result = await rpc.value.call('vite:inspect:get-module-transform-info', query, moduleId)
+    if (requestVersion === transformRequestVersion)
+      transformInfo.value = result
+  }
+  finally {
+    if (requestVersion === transformRequestVersion)
+      transformsLoading.value = false
+  }
+}
+
+const reloadTransformInfo = useDebounceFn((payload: InspectModuleUpdatedPayload = {}) => {
+  if (!payload.ids || payload.ids.includes(props.module))
+    loadTransformInfo()
+}, 100)
+
+watch(
+  () => [props.query.vite, props.query.env, props.module],
+  () => {
+    loadTransformInfo()
+  },
+  { immediate: true },
+)
+
+onInspectModuleUpdated((payload) => {
+  reloadTransformInfo(payload)
+})
+
+function selectFlowNode(v: boolean) {
+  flowNodeSelected.value = v
+}
+</script>
+
+<template>
+  <div v-if="info" relative h-full w-full>
+    <DisplayCloseButton
+      absolute right-2 top-1.5 bg-glass z-panel-content
+      @click="emit('close')"
+    />
+    <div
+      bg-glass absolute left-2 top-2 z-panel-content p2
+      border="~ base rounded-lg"
+      flex="~ col gap-2"
+    >
+      <DisplayModuleId :id="module" px2 pt1 :cwd="root" />
+      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+        <ModulesBuildMetrics v-if="info.buildMetrics" :metrics="info.buildMetrics" />
+      </div>
+      <div flex="~ gap-2">
+        <button
+          :class="settings.moduleDetailsViewType === 'flow' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.moduleDetailsViewType = 'flow'"
+        >
+          <div i-ph-git-branch-duotone rotate-180 />
+          Build Flow
+        </button>
+        <button
+          :class="settings.moduleDetailsViewType === 'charts' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.moduleDetailsViewType = 'charts'"
+        >
+          <div i-ph-chart-donut-duotone />
+          Charts
+        </button>
+        <button
+          :class="settings.moduleDetailsViewType === 'imports' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.moduleDetailsViewType = 'imports'"
+        >
+          <div i-ph-graph-duotone />
+          Imports
+        </button>
+      </div>
+    </div>
+    <div of-auto h-full pt-30>
+      <FlowmapModuleFlow
+        v-if="settings.moduleDetailsViewType === 'flow'"
+        :module="info"
+        :modules="modules"
+        :root="root"
+        :transforms="transformInfo?.transforms || []"
+        :resolved-id="transformInfo?.resolvedId"
+        :transforms-loading="transformsLoading"
+        @select="selectFlowNode"
+      />
+      <ChartModuleFlamegraph
+        v-if="settings.moduleDetailsViewType === 'charts'"
+        :module="info"
+        :transforms="transformInfo?.transforms || []"
+        :flow-node-selected="flowNodeSelected"
+      />
+      <DataModuleImportRelationships
+        v-if="settings.moduleDetailsViewType === 'imports'"
+        :module="info"
+        :modules="modules"
+        :root="root"
+      />
+    </div>
+  </div>
+  <VisualLoading v-else />
+</template>
diff --git a/packages/vite/src/app/components/data/ModuleImportRelationships.vue b/packages/vite/src/app/components/data/ModuleImportRelationships.vue
new file mode 100644
index 00000000..b24cb166
--- /dev/null
+++ b/packages/vite/src/app/components/data/ModuleImportRelationships.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { ViteModuleImport, ViteModuleListItem } from '~/types/modules'
+import { generateModuleGraphLink, getModuleGraphLinkColor } from '@vitejs/devtools-ui/composables/module-graph'
+import { computed, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+
+const props = defineProps<{
+  module: ViteModuleListItem
+  modules: ViteModuleListItem[]
+  root: string
+}>()
+
+type LinkPoint = 'importer-start' | 'importer-end' | 'import-start' | 'import-end'
+
+const MAX_LINKS = 20
+const SPACING = {
+  width: 400,
+  height: 30,
+  padding: 4,
+  marginX: 8,
+  border: 1,
+  margin: 8,
+  dot: 16,
+  dotOffset: 80,
+  linkOffset: 0,
+}
+
+const container = useTemplateRef<HTMLDivElement>('container')
+const links = shallowRef<ModuleGraphLink<ViteModuleListItem, ViteModuleImport>[]>([])
+
+const modulesMap = computed(() => {
+  const map = new Map<string, ViteModuleListItem>()
+  for (const module of props.modules) {
+    map.set(module.id, module)
+  }
+  return map
+})
+
+const importers = computed(() => {
+  return props.module.importers
+    ?.map(x => modulesMap.value.get(x))
+    .filter((module): module is ViteModuleListItem => !!module)
+})
+
+const normalizedMaxLinks = computed(() => {
+  return Math.min(Math.max(importers.value?.length || 0, props.module.imports?.length || 0), MAX_LINKS)
+})
+
+const importersMaxLength = computed(() => Math.min(importers.value?.length || 0, MAX_LINKS))
+const importsMaxLength = computed(() => Math.min(props.module.imports?.length || 0, MAX_LINKS))
+const nodesHeight = computed(() => SPACING.height * normalizedMaxLinks.value + SPACING.padding * (normalizedMaxLinks.value + 1) + SPACING.border * 2)
+const importersVerticalOffset = computed(() => {
+  const diff = Math.max(0, importsMaxLength.value - importersMaxLength.value)
+  const offset = (diff * (SPACING.height + SPACING.padding)) / 2
+  return Math.min(offset, nodesHeight.value / 2)
+})
+const importsVerticalOffset = computed(() => {
+  const diff = Math.max(0, importersMaxLength.value - importsMaxLength.value)
+  const offset = (diff * (SPACING.height + SPACING.padding)) / 2
+  return Math.min(offset, nodesHeight.value / 2)
+})
+
+const dotNodeMargin = computed(() => `${nodesHeight.value / 2 - SPACING.dot / 2}px ${SPACING.dotOffset}px 0  ${importers.value?.length ? SPACING.dotOffset : 0}px`)
+const linkStartX = computed(() => importers.value?.length ? SPACING.width + SPACING.marginX : SPACING.marginX)
+const dotStartX = computed(() => importers.value?.length ? linkStartX.value + SPACING.dotOffset : linkStartX.value)
+const dotStartY = computed(() => (SPACING.height * normalizedMaxLinks.value + ((normalizedMaxLinks.value + 1) * SPACING.padding)) / 2)
+
+function calculateLinkX(type: LinkPoint) {
+  switch (type) {
+    case 'importer-start':
+      return linkStartX.value
+    case 'importer-end':
+      return dotStartX.value
+    case 'import-start':
+      return dotStartX.value + SPACING.dot
+    case 'import-end':
+      return importers.value?.length ? linkStartX.value + SPACING.dotOffset * 2 + SPACING.dot : linkStartX.value + SPACING.dotOffset + SPACING.dot
+  }
+}
+
+function calculateLinkY(type: LinkPoint, i?: number) {
+  switch (type) {
+    case 'importer-start':
+      return ((SPACING.height + SPACING.padding) * i!) + (SPACING.height / 2 + SPACING.padding) + importersVerticalOffset.value
+    case 'import-end':
+      return ((SPACING.height + SPACING.padding) * i!) + (SPACING.height / 2 + SPACING.padding) + importsVerticalOffset.value
+    case 'importer-end':
+    case 'import-start':
+      return dotStartY.value
+  }
+}
+
+function generateLinks() {
+  links.value = []
+
+  // importers (left -> current node)
+  if (importers.value?.length) {
+    const _importersLinks = Array.from({ length: importersMaxLength.value }, (_, i) => {
+      return {
+        id: '',
+        source: {
+          x: calculateLinkX('importer-start'),
+          y: calculateLinkY('importer-start', i),
+        } as HierarchyNode<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>,
+        target: {
+          x: calculateLinkX('importer-end'),
+          y: calculateLinkY('importer-end'),
+        } as HierarchyNode<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>,
+      }
+    })
+    links.value.push(..._importersLinks)
+  }
+  // imports (current node -> right)
+  if (props.module?.imports?.length) {
+    const _importsLinks = Array.from({ length: importsMaxLength.value }, (_, i) => {
+      return {
+        id: '',
+        source: {
+          x: calculateLinkX('import-start'),
+          y: calculateLinkY('import-start'),
+        } as HierarchyNode<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>,
+        target: {
+          x: calculateLinkX('import-end'),
+          y: calculateLinkY('import-end', i),
+        } as HierarchyNode<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>,
+      }
+    })
+    links.value.push(..._importsLinks)
+  }
+}
+
+onMounted(() => {
+  watch(
+    () => [props.module],
+    generateLinks,
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div
+    ref="container"
+    w-full relative select-none mt4
+  >
+    <template v-if="importers?.length || module.imports?.length">
+      <!-- nodes -->
+      <div flex px2>
+        <!-- importers -->
+        <div
+          v-if="importers?.length"
+          py1
+          :style="{
+            width: `${SPACING.width}px`,
+            marginTop: `${importersVerticalOffset}px`,
+          }"
+        >
+          <template v-for="(importer, i) of importers" :key="importer.id">
+            <DisplayModuleId
+              :id="importer.id"
+              hover="bg-active" block px2 p1 bg-base ws-nowrap
+              z-graph-node
+              border="~ base rounded"
+              :link="true"
+              :cwd="root"
+              :minimal="true"
+              :style="{
+                width: `${SPACING.width}px`,
+                height: `${SPACING.height}px`,
+                overflow: 'hidden',
+                marginBottom: `${i === importers!.length - 1 ? 0 : SPACING.padding}px`,
+              }"
+            />
+          </template>
+        </div>
+        <!-- dot: current module -->
+        <div
+          bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
+            margin: dotNodeMargin,
+            width: `${SPACING.dot}px`,
+            height: `${SPACING.dot}px`,
+          }"
+        />
+        <!-- imports -->
+        <div
+          v-if="module.imports?.length"
+          py1
+          :style="{
+            width: `${SPACING.width}px`,
+            marginTop: `${importsVerticalOffset}px`,
+          }"
+        >
+          <template v-for="(_import, i) of module.imports" :key="_import.module_id">
+            <DisplayModuleId
+              :id="_import!.module_id"
+              hover="bg-active" block px2 p1 bg-base ws-nowrap
+              z-graph-node
+              border="~ base rounded"
+              :link="true"
+              :cwd="root"
+              :minimal="true"
+              :style="{
+                width: `${SPACING.width}px`,
+                height: `${SPACING.height}px`,
+                overflow: 'hidden',
+                marginBottom: `${i === module.imports!.length - 1 ? 0 : SPACING.padding}px`,
+              }"
+            />
+          </template>
+        </div>
+      </div>
+
+      <!-- links -->
+      <svg
+        pointer-events-none absolute left-0 top-0 z-graph-link w-full
+        :style="{
+          height: `${nodesHeight}px`,
+        }"
+      >
+        <g>
+          <path
+            v-for="link of links"
+            :key="link.id"
+            :d="generateModuleGraphLink<ViteModuleListItem, ViteModuleImport>(link)!"
+            :class="getModuleGraphLinkColor<ViteModuleListItem, ViteModuleImport>(link)"
+            :stroke-dasharray="link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
+            fill="none"
+          />
+        </g>
+      </svg>
+    </template>
+    <div v-else w-full h-48 flex="~ items-center justify-center" op50 italic>
+      <p>
+        No data
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/data/PluginDetailsLoader.vue b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
new file mode 100644
index 00000000..bb580821
--- /dev/null
+++ b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { TreeNodeInput } from 'nanovis'
+import type { PluginChartInfo, PluginChartNode } from '~/types/chart'
+import type { ViteModuleListItem } from '~/types/modules'
+import type { VitePluginBuildInfo } from '~/types/plugins'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+import PluginsSunburst from '@vitejs/devtools-ui/components/PluginsSunburst.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
+import { useAsyncState, useDebounceFn, useMouse } from '@vueuse/core'
+import { normalizeTreeNode, Sunburst } from 'nanovis'
+import { computed, reactive, watch } from 'vue'
+import { useRpc } from '#imports'
+import { useChartGraph } from '~/composables/chart'
+import { onInspectModuleUpdated } from '~/composables/rpc'
+import { settings } from '~/state/settings'
+import { parseReadablePath } from '~/utils/filepath'
+import { normalizeTimestamp } from '~/utils/format'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+type InspectQuery = Parameters<DevToolsRpcServerFunctions['vite:inspect:get-plugin-details']>[0]
+
+const props = defineProps<{
+  plugin: string
+  query: InspectQuery
+  modules: ViteModuleListItem[]
+  root: string
+}>()
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const rpc = useRpc()
+const { state, isLoading, execute } = useAsyncState(
+  async () => {
+    const res = await rpc.value.call(
+      'vite:inspect:get-plugin-details',
+      props.query,
+      props.plugin,
+    )
+    return res
+  },
+  null,
+)
+
+const reloadPluginDetails = useDebounceFn(() => {
+  execute()
+}, 100)
+
+watch(
+  () => [props.query.vite, props.query.env, props.plugin],
+  () => {
+    execute()
+  },
+)
+
+onInspectModuleUpdated(() => {
+  reloadPluginDetails()
+})
+
+const processedModules = computed(() => {
+  const seen = new Set()
+  return state.value?.calls?.filter((call) => {
+    if (seen.has(call.module))
+      return false
+
+    seen.add(call.module)
+    return true
+  }) ?? []
+})
+
+const hookLoadDuration = computed(() => state.value?.loadMetrics.reduce((acc, item) => acc + item.duration, 0))
+
+const hookTransformDuration = computed(() => state.value?.transformMetrics.reduce((acc, item) => acc + item.duration, 0))
+
+const hookResolveIdDuration = computed(() => state.value?.resolveIdMetrics.reduce((acc, item) => acc + item.duration, 0))
+
+const totalDuration = computed(() => state.value?.calls?.reduce((acc, item) => acc + item.duration, 0))
+
+const parsedPaths = computed(() => props.modules.map((mod) => {
+  const path = parseReadablePath(mod.id, props.root)
+  const type = getFileTypeFromModuleId(mod.id)
+  return {
+    mod,
+    path,
+    type,
+  }
+}))
+const moduleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+
+const _tree = computed(() => {
+  const map = new Map<string, TreeNodeInput<PluginChartInfo | undefined>>()
+  const maxDepth = 3
+  if (!state.value) {
+    return {
+      root: createNode({
+        id: '~root',
+        text: 'Project',
+        children: [],
+      }),
+      map: new Map(),
+      maxDepth,
+    }
+  }
+
+  function createNode(node: TreeNodeInput<PluginChartInfo | undefined>, parent?: PluginChartNode) {
+    map.set(node.id!, node)
+    const normalizedNode = normalizeTreeNode(node, parent, (a, b) => (b?.meta?.duration ?? 0) - (a?.meta?.duration ?? 0))
+
+    if (normalizedNode.children) {
+      normalizedNode.children.forEach((child) => {
+        child.parent = normalizedNode
+      })
+    }
+
+    return normalizedNode
+  }
+
+  function createMetricsNodes(prefix: string, metrics: VitePluginBuildInfo[]) {
+    const otherTypes = metrics.filter(item => !moduleTypes.value.some(type => getFileTypeFromModuleId(item.module!).name === type.name))
+    return [
+      ...moduleTypes.value.map((type, idx) => {
+        const filteredMetrics = metrics.filter(item => getFileTypeFromModuleId(item.module!).name === type.name)
+        return createNode({
+          id: `${prefix}-${type.name}-${idx}`,
+          text: type.description,
+          children: filteredMetrics.map((item, idx) => createNode({
+            id: `${prefix}-${idx}`,
+            text: item.module,
+            size: item.duration,
+            meta: item as unknown as PluginChartInfo,
+          })),
+          meta: {
+            type: 'module',
+            title: type.description,
+            id: `${prefix}-${type.name}-${idx}`,
+            duration: filteredMetrics.reduce((acc, item) => acc + item.duration, 0),
+          } as unknown as PluginChartInfo,
+        })
+      }),
+      createNode({
+        id: `${prefix}-other`,
+        text: 'Other',
+        children: otherTypes.map((item, idx) => createNode({
+          id: `${prefix}-other-${idx}`,
+          text: item.module,
+          size: item.duration,
+          meta: item as unknown as PluginChartInfo,
+        })),
+        meta: {
+          type: 'module',
+          title: 'Other',
+          id: `${prefix}-other`,
+          duration: otherTypes.reduce((acc, item) => acc + item.duration, 0),
+        } as unknown as PluginChartInfo,
+      }),
+    ]
+  }
+
+  const resolveIds = createMetricsNodes('resolveId', state.value!.resolveIdMetrics)
+  const loads = createMetricsNodes('loads', state.value!.loadMetrics)
+  const transforms = createMetricsNodes('transforms', state.value!.transformMetrics)
+
+  function createHookNode(id: string, text: string, children: PluginChartNode[]) {
+    return createNode({
+      id,
+      text,
+      children: children.sort((a, b) => b.size - a.size),
+      meta: {
+        id,
+        type: 'hook',
+        title: text,
+        duration: {
+          '~loads': hookLoadDuration.value,
+          '~resolves': hookResolveIdDuration.value,
+          '~transforms': hookTransformDuration.value,
+        }[id],
+      } as unknown as PluginChartInfo,
+    })
+  }
+
+  const children = [
+    createHookNode('~resolves', 'Resolve Id', resolveIds),
+    createHookNode('~loads', 'Load', loads),
+    createHookNode('~transforms', 'Transform', transforms),
+  ]
+
+  const root = createNode({
+    id: '~root',
+    text: 'Project',
+    children,
+  })
+
+  return {
+    root,
+    map,
+    maxDepth,
+  }
+})
+
+const mouse = reactive(useMouse())
+const { tree, chartOptions, graph, nodeHover, nodeSelected, selectedNode, selectNode, buildGraph } = useChartGraph<PluginChartInfo, PluginChartInfo, PluginChartNode>({
+  data: [],
+  tree: _tree,
+  nameKey: 'id',
+  sizeKey: 'duration',
+  rootText: 'Project',
+  graphOptions: {
+    onClick(node) {
+      if (node)
+        nodeHover.value = node
+      selectedNode.value = node?.meta
+    },
+    onHover(node) {
+      if (node)
+        nodeHover.value = node
+      if (node === null)
+        nodeHover.value = undefined
+    },
+    onLeave() {
+      nodeHover.value = undefined
+    },
+    onSelect(node) {
+      nodeSelected.value = node || tree.value.root
+      selectedNode.value = node?.meta
+    },
+    getSubtext(node) {
+      return formatDuration(node.size, true)
+    },
+  },
+  onUpdate() {
+    graph.value = new Sunburst(tree.value.root, chartOptions.value)
+  },
+})
+
+watch(() => settings.value.pluginDetailsViewType, () => {
+  buildGraph()
+})
+</script>
+
+<template>
+  <VisualLoading v-if="isLoading" />
+  <div v-else-if="state?.calls?.length" relative h-full w-full>
+    <DisplayCloseButton
+      absolute right-2 top-1.5
+      @click="emit('close')"
+    />
+    <div
+      bg-glass absolute left-2 top-2 z-panel-content p2
+      border="~ base rounded-lg"
+      flex="~ col gap-2"
+    >
+      <div font-mono px1>
+        <DisplayPluginName :name="state?.plugin_name!" />
+      </div>
+      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+        <DisplayDuration
+          :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
+          :title="`Resolve Id hooks cost: ${formatDuration(hookResolveIdDuration, true)}`"
+        >
+          <span i-ph-magnifying-glass-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="hookLoadDuration" flex="~ gap-1 items-center"
+          :title="`Load hooks cost: ${formatDuration(hookLoadDuration, true)}`"
+        >
+          <span i-ph-upload-simple-duotone inline-block />
+        </DisplayDuration>
+        <DisplayDuration
+          :duration="hookTransformDuration" flex="~ gap-1 items-center"
+          :title="`Transform hooks cost: ${formatDuration(hookTransformDuration, true)}`"
+        >
+          <span i-ph-magic-wand-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayDuration
+          :duration="totalDuration" flex="~ gap-1 items-center"
+          :title="`Total build cost: ${formatDuration(totalDuration, true)}`"
+        >
+          <span i-ph-clock-duotone inline-block />
+        </DisplayDuration>
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="processedModules.length" icon="i-catppuccin-java-class-abstract"
+          color="transparent color-scale-neutral"
+          :title="`Module processed: ${processedModules.length}`"
+        />
+        <span op40>|</span>
+        <DisplayNumberBadge
+          :number="state?.calls?.length ?? 0" icon="i-ph-arrow-counter-clockwise"
+          color="transparent color-scale-neutral"
+          :title="`Total calls: ${state?.calls?.length ?? 0}`"
+        />
+      </div>
+      <div flex="~ gap-2">
+        <button
+          :class="settings.pluginDetailsViewType === 'flow' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.pluginDetailsViewType = 'flow'"
+        >
+          <div i-ph-git-branch-duotone rotate-180 />
+          Build Flow
+        </button>
+        <button
+          :class="settings.pluginDetailsViewType === 'sunburst' ? 'text-primary' : ''"
+          flex="~ gap-2 items-center justify-center"
+          px2 py1 w-40
+          border="~ base rounded-lg"
+          hover="bg-active"
+          @click="settings.pluginDetailsViewType = 'sunburst'"
+        >
+          <div i-ph-chart-sunburst-duotone />
+          Sunburst
+        </button>
+      </div>
+    </div>
+    <div of-auto h-full pt-30>
+      <FlowmapPluginFlow
+        v-if="settings.pluginDetailsViewType === 'flow'"
+        :modules="modules"
+        :build-metrics="state"
+        :root="root"
+      />
+      <PluginsSunburst
+        v-if="settings.pluginDetailsViewType === 'sunburst' && graph"
+        :graph="graph"
+        :selected="nodeSelected"
+        @select="selectNode"
+      >
+        <template #module="{ child }">
+          <DisplayModuleId
+            :id="child.text!"
+            w-full border-none ws-nowrap
+            :cwd="root"
+            :link="`/graph?module=${encodeURIComponent(child.text!)}`"
+            hover="bg-active"
+            border="~ base rounded" block px2 py1
+          />
+        </template>
+      </PluginsSunburst>
+    </div>
+  </div>
+  <div v-else flex="~ items-center justify-center" w-full h-full>
+    <span italic op50>
+      No data
+    </span>
+  </div>
+  <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
+    <div
+      v-if="nodeHover"
+      border="~ base" rounded-lg shadow-lg px3 py2
+      bg-glass pointer-events-none text-sm max-w-80
+    >
+      <div v-if="nodeHover.meta?.title" flex="~ items-center gap2">
+        {{ nodeHover.meta.title }}
+        <DisplayDuration :duration="nodeHover.meta.duration" />
+      </div>
+      <template v-else>
+        <div v-if="nodeHover.meta?.module" flex="~" font-semibold font-mono text-base mb2>
+          <DisplayModuleId :id="nodeHover.meta.module" :cwd="root" :link="false" />
+        </div>
+        <div v-if="nodeHover.meta?.module" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
+          <div flex="~ justify-between items-center" py1>
+            <label text-xs opacity-70>Start Time</label>
+            <time
+              :datetime="new Date(nodeHover.meta.timestamp_start).toISOString()"
+              font-mono text="xs"
+              bg="base/10"
+              px1.5 py0.5 rounded
+            >
+              {{ normalizeTimestamp(nodeHover.meta.timestamp_start) }}
+            </time>
+          </div>
+          <div flex="~ justify-between items-center" py1>
+            <label text-xs opacity-70>End Time</label>
+            <time
+              :datetime="new Date(nodeHover.meta.timestamp_end).toISOString()"
+              font-mono text="xs"
+              bg="base/10"
+              px1.5 py0.5 rounded
+            >
+              {{ normalizeTimestamp(nodeHover.meta.timestamp_end) }}
+            </time>
+          </div>
+          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
+            <label text="xs" op70>Duration</label>
+            <DisplayDuration :duration="nodeHover.meta.duration" />
+          </div>
+        </div>
+
+        <div v-else>
+          <DisplayDuration :duration="nodeHover.meta?.duration" />
+        </div>
+      </template>
+    </div>
+  </DisplayGraphHoverView>
+</template>
diff --git a/packages/vite/src/app/components/data/PluginDetailsTable.vue b/packages/vite/src/app/components/data/PluginDetailsTable.vue
new file mode 100644
index 00000000..f28057bf
--- /dev/null
+++ b/packages/vite/src/app/components/data/PluginDetailsTable.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type { ViteModuleListItem } from '~/types/modules'
+import type { VitePluginDetails } from '~/types/plugins'
+import type { FilterMatchRule } from '~/utils/icon'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { useCycleList } from '@vueuse/core'
+import { Menu as VMenu } from 'floating-vue'
+import { computed, ref } from 'vue'
+import { settings } from '~/state/settings'
+import { normalizeTimestamp } from '~/utils/format'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+const props = defineProps<{
+  modules: ViteModuleListItem[]
+  buildMetrics: VitePluginDetails
+  selectedFields: string[]
+  root: string
+}>()
+
+const HOOK_NAME_MAP = {
+  resolve: 'Resolve Id',
+  load: 'Load',
+  transform: 'Transform',
+}
+
+const parsedPaths = computed(() => props.modules.map((mod) => {
+  const type = getFileTypeFromModuleId(mod.id)
+  return {
+    mod,
+    type,
+  }
+}))
+
+const searchFilterTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+const moduleTypeNameMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const { mod, type } of parsedPaths.value)
+    map.set(mod.id, type.name)
+
+  return map
+})
+
+const filterModuleTypes = ref<string[]>(settings.value.pluginDetailsModuleTypes ?? searchFilterTypes.value.map(item => item.name))
+const selectedModuleTypes = computed(() => new Set(filterModuleTypes.value))
+const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
+  initialValue: settings.value.pluginDetailsDurationSortType,
+})
+const filtered = computed(() => {
+  const selectedHook = settings.value.pluginDetailSelectedHook
+  const showType = settings.value.pluginDetailsShowType
+  const shouldFilterChangedState = showType !== 'all' && ['load', 'transform'].includes(selectedHook)
+  const typeNameCache = new Map(moduleTypeNameMap.value)
+  const result: VitePluginDetails['calls'] = []
+
+  for (const item of props.buildMetrics.calls) {
+    if (!item.module)
+      continue
+    if (selectedHook && item.type !== selectedHook)
+      continue
+    if (shouldFilterChangedState && (showType === 'changed' ? item.unchanged : !item.unchanged))
+      continue
+
+    let moduleType = typeNameCache.get(item.module)
+    if (!moduleType) {
+      moduleType = getFileTypeFromModuleId(item.module).name
+      typeNameCache.set(item.module, moduleType)
+    }
+    if (!selectedModuleTypes.value.has(moduleType))
+      continue
+
+    result.push(item)
+  }
+
+  if (durationSortType.value) {
+    result.sort((a, b) => {
+      if (durationSortType.value === 'asc')
+        return a.duration - b.duration
+      return b.duration - a.duration
+    })
+  }
+
+  return result
+})
+
+function toggleModuleType(rule: FilterMatchRule) {
+  if (filterModuleTypes.value?.includes(rule.name))
+    filterModuleTypes.value = filterModuleTypes.value?.filter(type => type !== rule.name)
+  else
+    filterModuleTypes.value?.push(rule.name)
+
+  settings.value.pluginDetailsModuleTypes = filterModuleTypes.value
+}
+
+function toggleDurationSortType() {
+  next()
+  settings.value.pluginDetailsDurationSortType = durationSortType.value
+}
+</script>
+
+<template>
+  <DataVirtualList
+    v-if="filtered.length && selectedFields.length"
+    class="plugin-details-table"
+    role="table"
+    min-w-max h-full min-h-0
+    :items="filtered"
+    key-prop="id"
+    :page-mode="false"
+    scroller="fixed"
+    :item-size="36"
+  >
+    <template #before>
+      <div role="row" class="border-b border-base bg-base" flex="~ row">
+        <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+          Hook name
+        </div>
+        <div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
+          <button flex="~ row gap1 items-center" w-full>
+            Module
+            <VMenu>
+              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+                <i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
+              </span>
+              <template #popper>
+                <div class="p2" flex="~ col gap2">
+                  <label
+                    v-for="rule of searchFilterTypes"
+                    :key="rule.name"
+                    border="~ base rounded-md" px2 py1
+                    flex="~ items-center gap-1"
+                    select-none
+                    :title="rule.description"
+                    class="cursor-pointer module-type-filter"
+                  >
+                    <input
+                      type="checkbox"
+                      mr1
+                      :checked="filterModuleTypes?.includes(rule.name)"
+                      @change="toggleModuleType(rule)"
+                    >
+                    <div :class="rule.icon" icon-catppuccin />
+                    <div text-sm>{{ rule.description || rule.name }}</div>
+                  </label>
+                </div>
+              </template>
+            </VMenu>
+          </button>
+        </div>
+        <div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
+          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+            Duration
+            <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+              <i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
+            </span>
+          </button>
+        </div>
+        <div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+          Start Time
+        </div>
+        <div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+          End Time
+        </div>
+      </div>
+    </template>
+
+    <template #default="{ item, index }">
+      <div
+        role="row"
+        flex="~ row"
+        h-9
+        class="border-base border-b border-dashed"
+        :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
+      >
+        <div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
+          <DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
+        </div>
+        <div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+          <DisplayModuleId
+            :id="item.module"
+            w-full border-none ws-nowrap
+            :cwd="root"
+            :link="`/graph?module=${encodeURIComponent(item.module)}`"
+            hover="bg-active"
+            border="~ base rounded" block px2 py1
+          />
+        </div>
+        <div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+          <DisplayDuration :duration="item.duration" />
+        </div>
+        <div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+          {{ normalizeTimestamp(item.timestamp_start) }}
+        </div>
+        <div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+          {{ normalizeTimestamp(item.timestamp_end) }}
+        </div>
+      </div>
+    </template>
+  </DataVirtualList>
+  <div v-else role="table" min-w-max h-full>
+    <div p4>
+      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+        <p v-if="!selectedFields.length">
+          No columns selected
+        </p>
+        <p v-else>
+          No data
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.plugin-details-table:deep(.vue-recycle-scroller__slot) {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+</style>
diff --git a/packages/vite/src/app/components/display/FileIcon.vue b/packages/vite/src/app/components/display/FileIcon.vue
new file mode 100644
index 00000000..925358c5
--- /dev/null
+++ b/packages/vite/src/app/components/display/FileIcon.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getFileTypeFromModuleId } from '~/utils/icon'
+
+const props = defineProps<{
+  filename: string
+}>()
+
+const info = computed(() => getFileTypeFromModuleId(props.filename))
+</script>
+
+<template>
+  <div
+    flex-none icon-catppuccin
+    :title="info.description || info.name"
+    :class="[info.icon]"
+  />
+</template>
diff --git a/packages/vite/src/app/components/display/FileSizeBadge.vue b/packages/vite/src/app/components/display/FileSizeBadge.vue
new file mode 100644
index 00000000..9f9aafbf
--- /dev/null
+++ b/packages/vite/src/app/components/display/FileSizeBadge.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { bytesToHumanSize } from '~/utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    bytes?: number
+    colorize?: boolean
+    digits?: number
+    percent?: boolean
+    total?: number
+    icon?: string
+    percentRatio?: number
+  }>(),
+  {
+    percent: true,
+    colorize: true,
+    digits: 2,
+    percentRatio: 0.5,
+  },
+)
+
+const KB = 1000
+const MB = KB ** 2
+
+const colorScale = [
+  [80 * KB, 'color-scale-neutral'],
+  [500 * KB, 'color-scale-low'],
+  [1 * MB, 'color-scale-medium'],
+  [10 * MB, 'color-scale-high'],
+  [20 * MB, 'color-scale-critical'],
+] as const
+
+const color = computed(() => {
+  if (!props.colorize)
+    return colorScale[0]
+  const bytes = props.bytes || 0
+  for (const [limit, color] of colorScale) {
+    if (bytes < limit)
+      return color
+  }
+  return colorScale.at(-1)?.[1]
+})
+
+const ratio = computed(() => props.total ? (props.bytes || 0) * 100 / props.total : 0)
+const formatted = computed(() => bytesToHumanSize(props.bytes || 0, props.digits))
+</script>
+
+<template>
+  <div v-if="bytes" :class="color" class="px-0.4em py-0.2em font-mono line-height-none bg-gray:5 dark:bg-gray:4 flex items-center">
+    <div v-if="icon" :class="icon" class="mr-1" />
+    {{ formatted[0] }}<span text-xs op75 ml-0.4>{{ formatted[1] }}</span>
+    <slot name="after">
+      <span v-if="percent && ratio > percentRatio" text-xs ml1 op-fade border="l base" pl1>{{ +(ratio.toFixed(1)) }}%</span>
+    </slot>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/display/GraphHoverView.vue b/packages/vite/src/app/components/display/GraphHoverView.vue
new file mode 100644
index 00000000..c2e8e945
--- /dev/null
+++ b/packages/vite/src/app/components/display/GraphHoverView.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, toRefs, useTemplateRef, watch } from 'vue'
+
+const props = defineProps<{
+  hoverX: number
+  hoverY: number
+}>()
+
+const { hoverX, hoverY } = toRefs(props)
+
+const hoverElement = useTemplateRef<HTMLElement>('hoverElement')
+
+const left = ref(0)
+const top = ref(0)
+
+watch([hoverX, hoverY], ([x, y]) => {
+  const virtualEl = {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x: x!,
+        y: y!,
+        left: x!,
+        right: x!,
+        top: y!,
+        bottom: y!,
+      }
+    },
+  }
+
+  computePosition(virtualEl, hoverElement.value!, {
+    placement: 'right-start',
+    middleware: [flip(), shift(), offset({
+      mainAxis: 8,
+      alignmentAxis: 8,
+    },
+    )],
+  }).then(({ x, y }) => {
+    left.value = x
+    top.value = y
+  })
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div ref="hoverElement" fixed z-panel-content pointer-events-none :style="{ left: `${left}px`, top: `${top}px` }">
+      <slot />
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/packages/vite/src/app/components/display/HighlightedPath.ts b/packages/vite/src/app/components/display/HighlightedPath.ts
new file mode 100644
index 00000000..21405e20
--- /dev/null
+++ b/packages/vite/src/app/components/display/HighlightedPath.ts
@@ -0,0 +1,99 @@
+import { defineComponent, h } from 'vue'
+import { getPluginColor } from '~/utils/color'
+
+// @unocss-include
+export default defineComponent({
+  name: 'HighlightedPath',
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    minimal: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    return () => {
+      const parts = props.path.split(/([?/&:=])/g)
+      let type: 'path' | 'query' = 'path'
+      const classes: string[][] = parts.map(() => [])
+      const styles: string[][] = parts.map(() => [])
+      const nodes = parts.map(part => h('span', { class: '' }, part))
+      const removeIndexes = new Set<number>()
+
+      parts.forEach((part, index) => {
+        if (part === '?')
+          type = 'query'
+
+        if (type === 'path') {
+          if (/^\.+$/.test(part) || part === '/')
+            classes[index]?.push('op50')
+          else if (part === 'node_modules' || part === 'dist' || part === 'lib' || /^\.\w/.test(part))
+            classes[index]?.push('op60')
+
+          if (part === 'node_modules' && props.minimal) {
+            for (let i = 0; i < index + 2; i++)
+              removeIndexes.add(i)
+          }
+
+          if (part === '.pnpm') {
+            if (nodes[index]) {
+              nodes[index].children = '~'
+              classes[index]?.push('op25!')
+              classes[index - 1]?.push('op25!')
+            }
+            removeIndexes.add(index + 1)
+            removeIndexes.add(index + 2)
+            classes[index + 3]?.push('op25!')
+            if (nodes[index + 4]?.children === 'node_modules') {
+              removeIndexes.add(index + 3)
+              removeIndexes.add(index + 4)
+              classes[index + 5]?.push('op25!')
+            }
+          }
+          if (part === ':') {
+            if (nodes[index - 1])
+              styles[index - 1]?.push(`color: ${getPluginColor(parts[index - 1]!)}`)
+            classes[index]?.push('op50')
+          }
+          if (parts[index - 2] === 'node_modules' && !part.startsWith('.')) {
+            const color = `color: ${getPluginColor(parts[index]!)}`
+            styles[index]?.push(color)
+            if (part.startsWith('@')) {
+              styles[index + 1]?.push(color)
+              styles[index + 2]?.push(color)
+            }
+          }
+        }
+
+        if (type === 'query') {
+          if (part === '?')
+            classes[index]?.push('text-red-500 dark:text-red-400')
+          else if (part === '&')
+            classes[index]?.push('text-orange-500 dark:text-orange-400')
+          if (part === '=')
+            classes[index]?.push('text-orange-900 dark:text-orange-200 op50')
+          else if (parts[index + 1] === '=')
+            classes[index]?.push('text-amber-900 dark:text-amber-200')
+          else
+            classes[index]?.push('text-orange-900 dark:text-orange-200')
+        }
+      })
+
+      nodes.forEach((node, index) => {
+        if (node.props) {
+          node.props.class = classes[index]?.join(' ') ?? ''
+          node.props.style = styles[index]?.join(';') ?? ''
+        }
+      })
+
+      Array.from(removeIndexes)
+        .sort((a, b) => b - a)
+        .forEach(index => nodes.splice(index, 1))
+
+      return nodes
+    }
+  },
+})
diff --git a/packages/vite/src/app/components/display/ModuleId.vue b/packages/vite/src/app/components/display/ModuleId.vue
new file mode 100644
index 00000000..2b5b8a28
--- /dev/null
+++ b/packages/vite/src/app/components/display/ModuleId.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
+import { Tooltip } from 'floating-vue'
+import { relative } from 'pathe'
+import { computed } from 'vue'
+import { useRoute } from '#app/composables/router'
+import { NuxtLink } from '#components'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    badges?: boolean
+    icon?: boolean
+    link?: boolean | string
+    minimal?: boolean
+    kind?: string
+    cwd?: string
+    disableTooltip?: boolean
+  }>(),
+  {
+    icon: true,
+    disableTooltip: false,
+  },
+)
+
+const route = useRoute()
+const locationHash = typeof window === 'undefined' ? '' : window.location.hash
+
+const relativePath = computed(() => {
+  if (!props.id)
+    return ''
+  const id = props.id.replace(/%2F/g, '/')
+  if (id.startsWith('./') || id.startsWith('../'))
+    return id
+  const cwd = props.cwd || ''
+  let relate = cwd ? relative(cwd, id) : id
+  if (!relate.startsWith('.'))
+    relate = `./${relate}`
+  if (relate.startsWith('./'))
+    return relate
+  if (/^(?:\.\.\/){1,3}[^.]/.test(relate))
+    return relate
+  return id
+})
+
+const containerClass = computed(() => 'flex items-center')
+</script>
+
+<template>
+  <component
+    :is="link ? NuxtLink : 'div'"
+    :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id, chunk: undefined }, hash: locationHash }) : undefined"
+  >
+    <Tooltip
+      my-auto text-sm font-mono block w-full
+      :triggers="['hover']"
+      :delay="1200"
+      :disabled="disableTooltip || (props.id?.length || 0) < 30"
+      placement="bottom-start"
+    >
+      <div
+        v-if="id"
+        :class="containerClass"
+      >
+        <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
+        <span overflow-hidden text-ellipsis break-all line-clamp-2>
+          <DisplayHighlightedPath :path="relativePath" :minimal="minimal" />
+        </span>
+        <slot />
+        <DisplayBadge
+          v-if="kind"
+          class="ml1"
+          :text="kind"
+        />
+        <!-- <DisplayBadge
+          v-if="isVirtual"
+          class="ml1"
+          text="virtual"
+        /> -->
+      </div>
+      <div>
+        <slot name="detail" />
+      </div>
+      <template #popper>
+        <span font-mono text-sm>
+          {{ props.id }}
+        </span>
+      </template>
+    </Tooltip>
+  </component>
+</template>
diff --git a/packages/vite/src/app/components/display/VirtualTree.vue b/packages/vite/src/app/components/display/VirtualTree.vue
new file mode 100644
index 00000000..cd966e3a
--- /dev/null
+++ b/packages/vite/src/app/components/display/VirtualTree.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { ViteModuleDest, ViteModuleTreeNode } from '~/types/modules'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import { computed, reactive } from 'vue'
+import { useRoute } from '#app/composables/router'
+import { NuxtLink } from '#components'
+
+interface VirtualTreeRoot {
+  key: string
+  node: ViteModuleTreeNode
+  icon?: string
+  iconOpen?: string
+  open?: boolean
+  dividerBefore?: boolean
+}
+
+interface FolderRow {
+  type: 'folder'
+  key: string
+  node: ViteModuleTreeNode
+  depth: number
+  defaultOpen: boolean
+  icon: string
+  iconOpen: string
+}
+
+interface ItemRow {
+  type: 'item'
+  key: string
+  item: ViteModuleDest
+  depth: number
+}
+
+interface DividerRow {
+  type: 'divider'
+  key: string
+}
+
+type TreeRow = FolderRow | ItemRow | DividerRow
+
+const props = withDefaults(defineProps<{
+  roots: VirtualTreeRoot[]
+  link?: string | boolean
+  linkQueryKey?: string
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'fixed' | 'window'
+}>(), {
+  linkQueryKey: 'module',
+  itemSize: 28,
+  pageMode: true,
+  scroller: 'window',
+})
+
+const emit = defineEmits<{
+  (e: 'select', node: ViteModuleDest): void
+}>()
+
+defineSlots<{
+  extra?: (props: { node: ViteModuleDest }) => any
+}>()
+
+const route = useRoute()
+const openState = reactive(new Map<string, boolean>())
+
+const folderIcon = 'i-catppuccin:folder icon-catppuccin'
+const folderOpenIcon = 'i-catppuccin:folder-open icon-catppuccin'
+
+function hasContent(node: ViteModuleTreeNode) {
+  return node.items.length > 0 || Object.keys(node.children).length > 0
+}
+
+function isFolderOpen(row: FolderRow) {
+  return openState.get(row.key) ?? row.defaultOpen
+}
+
+function toggleFolder(row: FolderRow) {
+  openState.set(row.key, !isFolderOpen(row))
+}
+
+function appendNodeRows(
+  rows: TreeRow[],
+  node: ViteModuleTreeNode,
+  options: {
+    sectionKey: string
+    path: string[]
+    depth: number
+    defaultOpen: boolean
+    icon?: string
+    iconOpen?: string
+  },
+) {
+  const folderKey = `${options.sectionKey}:folder:${options.path.join('/') || '__root'}`
+  const row: FolderRow = {
+    type: 'folder',
+    key: folderKey,
+    node,
+    depth: options.depth,
+    defaultOpen: options.defaultOpen,
+    icon: options.icon ?? folderIcon,
+    iconOpen: options.iconOpen ?? folderOpenIcon,
+  }
+
+  rows.push(row)
+
+  if (!isFolderOpen(row))
+    return
+
+  for (const [childKey, child] of Object.entries(node.children)) {
+    appendNodeRows(rows, child, {
+      sectionKey: options.sectionKey,
+      path: [...options.path, child.name || childKey],
+      depth: options.depth + 1,
+      defaultOpen: true,
+    })
+  }
+
+  for (const item of node.items) {
+    rows.push({
+      type: 'item',
+      key: `${options.sectionKey}:item:${item.full}`,
+      item,
+      depth: options.depth,
+    })
+  }
+}
+
+const rows = computed<TreeRow[]>(() => {
+  const rows: TreeRow[] = []
+  for (const root of props.roots) {
+    if (!hasContent(root.node))
+      continue
+
+    if (root.dividerBefore && rows.length) {
+      rows.push({
+        type: 'divider',
+        key: `${root.key}:divider`,
+      })
+    }
+
+    appendNodeRows(rows, root.node, {
+      sectionKey: root.key,
+      path: [],
+      depth: 0,
+      defaultOpen: root.open ?? true,
+      icon: root.icon,
+      iconOpen: root.iconOpen,
+    })
+  }
+  return rows
+})
+
+function getItemName(item: ViteModuleDest) {
+  return item.path.split('/').pop() || ''
+}
+
+function getItemLink(item: ViteModuleDest) {
+  if (typeof props.link === 'string')
+    return props.link
+
+  return {
+    path: route.path,
+    query: {
+      ...route.query,
+      [props.linkQueryKey]: item.full,
+    },
+    hash: route.hash,
+  }
+}
+
+function select(node: ViteModuleDest) {
+  if (!props.link)
+    emit('select', node)
+}
+</script>
+
+<template>
+  <div p4>
+    <DataVirtualList
+      :items="rows"
+      key-prop="key"
+      :item-size="itemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
+    >
+      <template #default="{ item: row }">
+        <div v-if="row.type === 'divider'" h-7 flex items-center>
+          <div w-full border="t base" />
+        </div>
+
+        <button
+          v-else-if="row.type === 'folder'"
+          type="button"
+          h-7 w-full min-w-0
+          cursor-default select-none text-sm truncate
+          flex="~ gap-1 items-center"
+          px2 rounded bg-transparent text-left
+          hover="bg-active"
+          :aria-expanded="isFolderOpen(row)"
+          :style="{ paddingLeft: `${row.depth + 0.5}rem` }"
+          @click="toggleFolder(row)"
+        >
+          <div
+            class="i-ph-caret-right-duotone transition op50 shrink-0"
+            :class="isFolderOpen(row) ? 'rotate-90' : ''"
+          />
+          <div :class="isFolderOpen(row) ? row.iconOpen || row.icon : row.icon" inline-block vertical-text-bottom shrink-0 />
+          <div font-mono truncate>
+            <DisplayHighlightedPath :path="row.node.name || ''" />
+          </div>
+        </button>
+
+        <component
+          :is="link ? NuxtLink : 'div'"
+          v-else
+          :to="link ? getItemLink(row.item) : undefined"
+          h-7 min-w-0
+          text-sm ws-nowrap
+          flex="~ gap-1 items-center"
+          px2 rounded
+          hover="bg-active"
+          :style="{ paddingLeft: `${row.depth + 2.7}rem` }"
+          @click="select(row.item)"
+        >
+          <DisplayFileIcon :filename="row.item.full" shrink-0 />
+          <div font-mono min-w-0 truncate>
+            <DisplayHighlightedPath :path="getItemName(row.item)" />
+            <slot name="extra" :node="row.item" />
+          </div>
+        </component>
+      </template>
+    </DataVirtualList>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/Expandable.vue b/packages/vite/src/app/components/flowmap/Expandable.vue
new file mode 100644
index 00000000..ee59d167
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/Expandable.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  expandable?: boolean
+  classRootNode?: string
+  activeStart?: boolean
+  activeEnd?: boolean
+  showTail?: boolean
+}>(), {
+  showTail: true,
+})
+
+const expanded = defineModel<boolean>('expanded', { required: false, default: true })
+</script>
+
+<template>
+  <FlowmapNode
+    v-model:expanded="expanded"
+    :lines="{ top: true, bottom: !expandable || !expanded }" pl6 pt4
+    :class-node-outer="classRootNode"
+    :active="activeStart"
+  >
+    <template #content>
+      <slot name="node" />
+    </template>
+
+    <template v-if="expandable" #inline-before>
+      <button
+        w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center" cursor-pointer
+        @click="expanded = !expanded"
+      >
+        <div i-ph-caret-right text-sm op50 transition duration-300 :class="{ 'rotate-90': expanded }" />
+      </button>
+    </template>
+
+    <template v-if="expandable && expanded" #after>
+      <div>
+        <svg
+          ml-1em w-27px h-30px
+          viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg"
+          :class="activeStart ? 'fg-flow-line-active' : 'fg-flow-line'"
+        >
+          <g>
+            <path d="M0.5 0C0.5 18 26.5 12 26.5 30" stroke="currentColor" stroke-width="1px" />
+          </g>
+        </svg>
+        <div ml-2px>
+          <slot name="container" />
+        </div>
+        <svg
+          v-if="showTail"
+          ml-1em w-27px h-30px
+          style="transform: scaleX(-1)" viewBox="0 0 27 30" fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          :class="activeEnd ? 'fg-flow-line-active' : 'fg-flow-line'"
+        >
+          <g>
+            <path d="M0.5 0C0.5 18 26.5 12 26.5 30" stroke="currentColor" stroke-width="1px" />
+          </g>
+        </svg>
+      </div>
+    </template>
+  </FlowmapNode>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlow.vue b/packages/vite/src/app/components/flowmap/ModuleFlow.vue
new file mode 100644
index 00000000..ce9cb207
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/ModuleFlow.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ViteFlowNode } from './NodeModuleInfo.vue'
+import type { ViteModuleListItem } from '~/types/modules'
+import { vOnClickOutside } from '@vueuse/components'
+import { Pane, Splitpanes } from 'splitpanes'
+import { shallowRef, watch } from 'vue'
+import ModuleFlowDetails from './ModuleFlowDetails.vue'
+import ModuleFlowTimeline from './ModuleFlowTimeline.vue'
+
+interface FlowTransform {
+  name: string
+  result?: string | null
+  start: number
+  end: number
+  order?: string
+  error?: {
+    message: string
+  }
+}
+
+defineProps<{
+  module: ViteModuleListItem
+  modules: ViteModuleListItem[]
+  root: string
+  transforms: FlowTransform[]
+  resolvedId?: string
+  transformsLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', v: boolean): void
+}>()
+
+const selected = shallowRef<ViteFlowNode | null>(null)
+
+watch(selected, (v) => {
+  emit('select', !!v)
+})
+
+function handleSelect(value: ViteFlowNode | null) {
+  selected.value = value
+}
+
+function handleClose() {
+  selected.value = null
+}
+</script>
+
+<template>
+  <Splitpanes v-if="selected" class="!h-auto w-full module-flow-splitter right-4 bottom-4 fixed z-10 pointer-events-none">
+    <Pane size="45" min-size="10" max-size="90" class="!h-auto pointer-events-none" />
+    <Pane size="55" min-size="10" max-size="90" class="!h-auto !of-visible ">
+      <!-- the origin of the height: -->
+      <!-- DialogTopMargin (20) + HandleHeight (30) + padding (4*2) = 58 -->
+      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" pointer-events-auto sticky top-4>
+        <div absolute left-0 top="1/2" translate-x="-1/2" translate-y="-1/2" bg="#DFDFDF dark:#313131" h-10 w-2 rounded-full z-10 cursor-col-resize />
+        <ModuleFlowDetails
+          :selected="selected"
+          @close="handleClose"
+        />
+      </div>
+    </Pane>
+  </Splitpanes>
+  <div p4>
+    <ModuleFlowTimeline
+      :module="module"
+      :modules="modules"
+      :root="root"
+      :transforms="transforms"
+      :resolved-id="resolvedId"
+      :transforms-loading="transformsLoading"
+      :selected="selected"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<style>
+.module-flow-splitter>.splitpanes__splitter:before {
+  background-color: transparent;
+}
+
+.splitpanes__splitter{
+  pointer-events: auto;
+}
+</style>
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
new file mode 100644
index 00000000..ff665ee0
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { ViteFlowNode } from './NodeModuleInfo.vue'
+import DisplayCloseButton from '@vitejs/devtools-ui/components/DisplayCloseButton.vue'
+import DisplayIconButton from '@vitejs/devtools-ui/components/DisplayIconButton.vue'
+import PluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+import { computed } from 'vue'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  selected: ViteFlowNode | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const codeDisplay = computed(() => {
+  if (!props.selected)
+    return null
+  if (!('type' in props.selected))
+    return null
+  if (props.selected.type === 'transform') {
+    return {
+      type: 'transform',
+      plugin_name: props.selected.plugin_name,
+      from: props.selected.content_from,
+      to: props.selected.content_to,
+    }
+  }
+  else if (props.selected.type === 'load') {
+    return {
+      type: 'load',
+      from: '',
+      plugin_name: props.selected.plugin_name,
+      to: props.selected.content,
+    }
+  }
+  return null
+})
+
+function handleClose() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div
+    bg-glass w-full h-full
+    :class="codeDisplay?.from && codeDisplay?.to ? '' : 'border-dashed'"
+    border="~ base rounded-lg" of-hidden flex="~ col"
+  >
+    <template v-if="codeDisplay?.from && codeDisplay?.to">
+      <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
+        <PluginName :name="codeDisplay?.plugin_name ?? ''" />
+        <span v-if="codeDisplay?.type" op50 text-xs>
+          {{ codeDisplay?.type === 'load' ? 'Load' : 'Transform' }}
+        </span>
+        <div flex-auto />
+        <DisplayIconButton
+          title="Line Wrapping"
+          class-icon="i-ph-arrow-u-down-left-duotone"
+          :active="settings.codeviewerLineWrap"
+          @click="settings.codeviewerLineWrap = !settings.codeviewerLineWrap"
+        />
+        <DisplayCloseButton @click.stop="handleClose" />
+      </div>
+      <CodeDiffEditor
+        :from="codeDisplay?.from ?? ''"
+        :to="codeDisplay?.to ?? ''"
+        :diff="true"
+        :one-column="false"
+      />
+    </template>
+    <!-- TODO: show more info with selected node -->
+    <span v-else op50 italic ma>
+      No data
+    </span>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue b/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
new file mode 100644
index 00000000..09794a82
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import type { ViteFlowNode } from './NodeModuleInfo.vue'
+import type { ViteModuleListItem } from '~/types/modules'
+import { Menu as VMenu } from 'floating-vue'
+import { computed } from 'vue'
+import { settingsRefs } from '~/state/settings'
+
+interface FlowTransform {
+  name: string
+  result?: string | null
+  start: number
+  end: number
+  order?: string
+  error?: {
+    message: string
+  }
+}
+
+type ViteNoChanges = Extract<ViteFlowNode, { type: 'no_changes_collapsed' }>
+type ViteNoChangesHide = Extract<ViteFlowNode, { type: 'no_changes_hide' }>
+type ViteLoadNode = Extract<ViteFlowNode, { type: 'load' }>
+type ViteTransformNode = Extract<ViteFlowNode, { type: 'transform' }>
+
+const props = defineProps<{
+  module: ViteModuleListItem
+  modules: ViteModuleListItem[]
+  root: string
+  transforms: FlowTransform[]
+  selected: ViteFlowNode | null
+  resolvedId?: string
+  transformsLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', value: ViteFlowNode | null): void
+}>()
+
+const {
+  flowShowAllTransforms,
+  flowShowAllLoads,
+  flowExpandTransforms,
+  flowExpandLoads,
+  flowExpandResolveId,
+} = settingsRefs
+
+const modulesMap = computed(() => new Map(props.modules.map(module => [module.id, module])))
+
+const firstLoad = computed(() => {
+  const first = props.transforms[0]
+  if (!first || first.name === '__load__')
+    return null
+  return first
+})
+
+const initialContent = computed(() => props.transforms[0]?.result ?? null)
+
+const resolveIds = computed(() => {
+  const resolvePlugins = props.module.plugins.filter(plugin => plugin.resolveId != null)
+
+  if (!resolvePlugins.length && props.resolvedId && props.resolvedId !== props.module.id) {
+    return [{
+      type: 'resolve',
+      id: `resolve:${props.module.id}`,
+      plugin_name: 'vite:resolve',
+      duration: 0,
+      importer: props.resolvedId,
+      module_request: props.module.id,
+      resolved_id: props.resolvedId,
+    }] satisfies ViteFlowNode[]
+  }
+
+  return resolvePlugins.map((plugin, index) => ({
+    type: 'resolve',
+    id: `resolve:${index}:${plugin.name}:${props.module.id}`,
+    plugin_name: plugin.name,
+    duration: plugin.resolveId ?? 0,
+    importer: props.resolvedId,
+    module_request: props.module.id,
+    resolved_id: props.resolvedId,
+  })) satisfies ViteFlowNode[]
+})
+
+const loadNodes = computed<ViteLoadNode[]>(() => {
+  const load = firstLoad.value
+  if (!load)
+    return []
+  return [{
+    type: 'load',
+    id: `load:${load.name}:${load.start}:${load.end}`,
+    plugin_name: load.name,
+    duration: Math.max(0, load.end - load.start),
+    content: load.result,
+  }]
+})
+
+const transformNodes = computed<ViteTransformNode[]>(() => {
+  const rawTransforms = props.transforms.slice(1)
+  let previousContent = initialContent.value
+
+  return rawTransforms.map((transform, index) => {
+    const contentFrom = previousContent
+    const contentTo = transform.result ?? previousContent
+    previousContent = contentTo
+    const diff = countLineDiff(contentFrom, contentTo)
+
+    return {
+      type: 'transform',
+      id: `transform:${index}:${transform.name}:${transform.start}:${transform.end}`,
+      plugin_name: transform.name,
+      duration: Math.max(0, transform.end - transform.start),
+      content_from: contentFrom,
+      content_to: contentTo,
+      diff_added: diff.added,
+      diff_removed: diff.removed,
+    }
+  })
+})
+
+const transforms = computed((): (ViteNoChanges | ViteNoChangesHide | ViteTransformNode)[] => {
+  const unchanged = transformNodes.value.filter(t => t.content_from === t.content_to)
+  const changed = transformNodes.value.filter(t => t.content_from !== t.content_to)
+
+  if (flowShowAllTransforms.value && !unchanged.length)
+    return transformNodes.value
+
+  if (flowShowAllTransforms.value && unchanged.length) {
+    return [
+      ...transformNodes.value,
+      {
+        type: 'no_changes_hide',
+        id: 'no_changes_hide',
+        count: unchanged.length,
+        duration: unchanged.reduce((acc, t) => acc + t.duration, 0),
+      } satisfies ViteNoChangesHide,
+    ]
+  }
+
+  if (!unchanged.length)
+    return changed
+
+  return [
+    {
+      type: 'no_changes_collapsed',
+      id: 'no_changes_collapsed',
+      count: unchanged.length,
+      duration: unchanged.reduce((acc, t) => acc + t.duration, 0),
+    } satisfies ViteNoChanges,
+    ...changed,
+  ]
+})
+
+const loads = computed((): (ViteNoChanges | ViteNoChangesHide | ViteLoadNode)[] => {
+  const unchanged = loadNodes.value.filter(l => !l.content)
+  const changed = loadNodes.value.filter(l => l.content)
+
+  if (flowShowAllLoads.value && !unchanged.length)
+    return loadNodes.value
+
+  if (flowShowAllLoads.value && unchanged.length) {
+    return [
+      ...loadNodes.value,
+      {
+        type: 'no_changes_hide',
+        id: 'no_changes_hide_load',
+        count: unchanged.length,
+        duration: unchanged.reduce((acc, t) => acc + t.duration, 0),
+      } satisfies ViteNoChangesHide,
+    ]
+  }
+
+  if (!unchanged.length)
+    return changed
+
+  return [
+    {
+      type: 'no_changes_collapsed',
+      id: 'no_changes_collapsed_load',
+      count: unchanged.length,
+      duration: unchanged.reduce((acc, t) => acc + t.duration, 0),
+    } satisfies ViteNoChanges,
+    ...changed,
+  ]
+})
+
+const nodes = computed<ViteFlowNode[]>(() => [
+  ...resolveIds.value,
+  ...loads.value,
+  ...transforms.value,
+])
+
+function isSelectedAncestor(node?: ViteFlowNode) {
+  if (!props.selected || !node)
+    return false
+  const indexSelected = nodes.value.indexOf(props.selected)
+  const indexNode = nodes.value.indexOf(node)
+  if (indexSelected >= indexNode)
+    return true
+  return false
+}
+
+function handleSelect(value: ViteFlowNode | null) {
+  emit('select', value)
+}
+
+function countLineDiff(from?: string | null, to?: string | null) {
+  if (from == null || to == null || from === to)
+    return { added: 0, removed: 0 }
+
+  const fromLines = new Set(from.split(/\n/g))
+  const toLines = new Set(to.split(/\n/g))
+
+  let added = 0
+  let removed = 0
+
+  toLines.forEach((line) => {
+    if (!fromLines.has(line))
+      added += 1
+  })
+  fromLines.forEach((line) => {
+    if (!toLines.has(line))
+      removed += 1
+  })
+
+  return { added, removed }
+}
+</script>
+
+<template>
+  <div select-none h-full of-auto ws-nowrap w-100vh of-visible>
+    <!-- Importers section -->
+    <div v-if="module.importers?.length" text-sm>
+      <div flex>
+        <VMenu>
+          <FlowmapNode class-node-outer="border-dashed">
+            <template #inner>
+              <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
+                <div i-ph-arrows-merge-duotone rotate-270 />
+                {{ module.importers?.length }} importers
+              </div>
+            </template>
+          </FlowmapNode>
+          <template #popper="{ hide }">
+            <div p2 flex="~ col gap-1">
+              <DisplayModuleId
+                v-for="importer of module.importers"
+                :id="importer"
+                :key="importer"
+                :cwd="root"
+                :link="modulesMap.has(importer)"
+                class="hover:bg-active"
+                px2 py1 rounded
+                @click="hide"
+              />
+            </div>
+          </template>
+        </VMenu>
+      </div>
+      <div
+        pl-10 border="r" h-4 w-1px z-flowmap-line
+        class="border-flow-line border-dashed"
+      />
+    </div>
+
+    <!-- Main module node -->
+    <div flex="~">
+      <FlowmapNode
+        :lines="{ bottom: true }"
+        :active="selected != null"
+      >
+        <template #content>
+          <div p2>
+            <DisplayModuleId
+              :id="module.id"
+              :cwd="root"
+            />
+          </div>
+        </template>
+      </FlowmapNode>
+      <template v-if="module.imports?.length">
+        <div w-10 border="t base dashed" mya />
+        <VMenu mya>
+          <FlowmapNode class-node-outer="border-dashed">
+            <template #inner>
+              <div flex="~ items-center gap-1" text-sm text-orange px3 py1>
+                <div i-ph-arrows-split-duotone rotate-270 />
+                {{ module.imports?.length }} imports
+              </div>
+            </template>
+          </FlowmapNode>
+          <template #popper="{ hide }">
+            <div p2 flex="~ col gap-1">
+              <DisplayModuleId
+                v-for="imp of module.imports"
+                :id="imp.module_id"
+                :key="imp.module_id"
+                :kind="imp.kind"
+                :cwd="root"
+                :link="modulesMap.has(imp.module_id)"
+                class="hover:bg-active"
+                px2 py1 rounded
+                @click="hide"
+              />
+            </div>
+          </template>
+        </VMenu>
+      </template>
+    </div>
+
+    <!-- Flow timeline content -->
+    <FlowmapExpandable
+      v-model:expanded="flowExpandResolveId"
+      :expandable="resolveIds.length > 0"
+      :class-root-node="resolveIds.length === 0 ? 'border-dashed' : ''"
+      :active-start="isSelectedAncestor(resolveIds[0] || loads[0])"
+      :active-end="isSelectedAncestor(loads[0])"
+    >
+      <template #node>
+        <div i-ph-magnifying-glass-duotone /> Resolve Id
+        <span op50 text-xs>({{ resolveIds.length }})</span>
+      </template>
+      <template #container>
+        <div>
+          <FlowmapNodeModuleInfo
+            v-for="(item, index) of resolveIds"
+            :key="item.id"
+            :item="item"
+            :root="root"
+            :modules="modules"
+            :active="isSelectedAncestor(item)"
+            :class="index > 0 ? 'pt-2' : ''"
+            @select="handleSelect"
+          />
+        </div>
+      </template>
+    </FlowmapExpandable>
+
+    <FlowmapExpandable
+      v-model:expanded="flowExpandLoads"
+      :expandable="loads.length > 0"
+      :class-root-node="loads.length === 0 ? 'border-dashed' : ''"
+      :active-start="isSelectedAncestor(loads[0])"
+      :active-end="isSelectedAncestor(transforms[0])"
+    >
+      <template #node>
+        <div i-ph-upload-simple-duotone /> Load
+        <span op50 text-xs>({{ loadNodes.length }})</span>
+      </template>
+      <template #container>
+        <div>
+          <FlowmapNodeModuleInfo
+            v-for="(item, index) of loads"
+            :key="item.id"
+            :item="item"
+            :root="root"
+            :modules="modules"
+            :active="isSelectedAncestor(item)"
+            :class="index > 0 && item.type !== 'no_changes_hide' ? 'pt-2' : ''"
+            @select="handleSelect"
+            @toggle-show-all="flowShowAllLoads = !flowShowAllLoads"
+          />
+        </div>
+      </template>
+    </FlowmapExpandable>
+
+    <FlowmapExpandable
+      v-model:expanded="flowExpandTransforms"
+      :expandable="transforms.length > 0"
+      :class-root-node="transforms.length === 0 ? 'border-dashed' : ''"
+      :active-start="isSelectedAncestor(transforms[0])"
+      :active-end="isSelectedAncestor(transforms.at(-1))"
+    >
+      <template #node>
+        <div i-ph-magic-wand-duotone /> Transform
+        <span v-if="transformsLoading" i-ph-spinner animate-spin />
+        <span v-else op50 text-xs>({{ transformNodes.length }})</span>
+      </template>
+      <template #container>
+        <div>
+          <FlowmapNodeModuleInfo
+            v-for="(item, index) of transforms"
+            :key="item.id"
+            :item="item"
+            :root="root"
+            :modules="modules"
+            :active="isSelectedAncestor(item)"
+            :class="index > 0 && item.type !== 'no_changes_hide' ? 'pt-2' : ''"
+            @select="handleSelect"
+            @toggle-show-all="flowShowAllTransforms = !flowShowAllTransforms"
+          />
+        </div>
+      </template>
+    </FlowmapExpandable>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/Node.vue b/packages/vite/src/app/components/flowmap/Node.vue
new file mode 100644
index 00000000..1d70d36c
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/Node.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+  lines?: {
+    top?: boolean | number
+    bottom?: boolean | number
+  }
+  classNodeInline?: string
+  classNodeOuter?: string
+  classNodeInner?: string
+  classLineTop?: string
+  classLineBottom?: string
+  active?: boolean
+}>()
+
+const expanded = defineModel<boolean>('expanded', { required: false, default: true })
+</script>
+
+<template>
+  <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', 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', props.classLineBottom]"
+      :style="typeof props.lines?.bottom === 'number' ? `height: ${props.lines.bottom}px` : ''"
+    />
+    <slot name="before" />
+    <div flex="~" w-max :class="props.classNodeInline" class="flowmap-node-inline">
+      <slot name="inline-before" />
+      <div
+        :class="[
+          props.classNodeOuter,
+          active ? 'border-flow-active' : 'border-flow',
+        ]"
+        border="~ rounded-2xl" bg-base of-hidden cursor-pointer
+        @click="expanded = !expanded"
+      >
+        <slot name="inner">
+          <div px3 py1 :class="props.classNodeInner" flex="~ inline gap-2 items-center">
+            <slot name="content" />
+          </div>
+        </slot>
+      </div>
+      <slot name="inline-after" />
+    </div>
+    <slot name="after" />
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
new file mode 100644
index 00000000..d79481e3
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import type { ViteModuleListItem } from '~/types/modules'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+import { computed } from 'vue'
+import { isFlowmapSwapping } from '~/state/flowmap'
+
+export type ViteFlowNode
+  = | {
+    type: 'resolve'
+    id: string
+    plugin_name: string
+    duration: number
+    importer?: string
+    module_request?: string
+    resolved_id?: string
+  }
+  | {
+    type: 'load'
+    id: string
+    plugin_name: string
+    duration: number
+    content?: string | null
+  }
+  | {
+    type: 'transform'
+    id: string
+    plugin_name: string
+    duration: number
+    content_from?: string | null
+    content_to?: string | null
+    diff_added?: number
+    diff_removed?: number
+  }
+  | {
+    type: 'no_changes_collapsed'
+    id: string
+    count: number
+    duration: number
+  }
+  | {
+    type: 'no_changes_hide'
+    id: string
+    count: number
+    duration: number
+  }
+
+const props = defineProps<{
+  item: ViteFlowNode
+  root: string
+  modules: ViteModuleListItem[]
+  active?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', item: ViteFlowNode): void
+  (e: 'toggleShowAll', item: ViteFlowNode): void
+}>()
+
+const isDashed = computed(() => {
+  switch (props.item.type) {
+    case 'transform':
+      return props.item.content_from === props.item.content_to
+    case 'load':
+      return props.item.content == null
+    default:
+      return false
+  }
+})
+
+function enter() {
+  if (isFlowmapSwapping.value)
+    emit('select', props.item)
+}
+
+function down() {
+  emit('select', props.item)
+  isFlowmapSwapping.value = true
+}
+
+const importerModule = computed(() => {
+  if (props.item.type !== 'resolve')
+    return undefined
+  const id = props.item.importer
+  return props.modules.find(m => m.id === id)
+})
+</script>
+
+<template>
+  <div v-if="item.type === 'no_changes_collapsed'" pl10>
+    <div
+      flex="~ gap-2 items-center" text-sm border="l" py1
+      :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+    >
+      <div
+        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      />
+      <span op50>{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
+      <span op50 flex-shrink-0>in total</span>
+      <button
+        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        @click="emit('toggleShowAll', item)"
+      >
+        Expand
+      </button>
+    </div>
+  </div>
+  <div v-else-if="item.type === 'no_changes_hide'" pl10>
+    <div
+      flex="~ gap-2 items-center" text-sm border="l" py1
+      :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+    >
+      <div
+        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      />
+      <span op50>{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
+      <span op50 flex-shrink-0>in total</span>
+      <button
+        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        @click="emit('toggleShowAll', item)"
+      >
+        Hide
+      </button>
+    </div>
+  </div>
+  <FlowmapNode
+    v-else
+    :lines="{ top: true }"
+    :class-node-outer="isDashed ? 'border-dashed' : ''"
+    :active="active"
+    class-node-inline="gap-2 items-center"
+    pl6
+    @pointerenter="enter"
+  >
+    <template #inner>
+      <button
+        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        @click="emit('select', item)"
+        @pointerdown="down"
+      >
+        <slot name="button">
+          <DisplayPluginName
+            v-if="'plugin_name' in item"
+            :class="isDashed ? 'op50' : ''"
+            :name="item.plugin_name"
+            class="font-mono text-sm ws-nowrap"
+          />
+        </slot>
+      </button>
+    </template>
+    <template #inline-after>
+      <DisplayDuration
+        v-if="'duration' in item"
+        :duration="item.duration"
+        :color="true"
+        :factor="5"
+        text-xs flex-shrink-0
+      />
+      <template v-if="item.type === 'transform'">
+        <div v-if="item.content_from === item.content_to" text-xs op25>
+          no changes
+        </div>
+        <div v-else>
+          <div font-mono text-xs flex="~ gap-1 items-center">
+            <span text-green>+{{ item.diff_added ?? 0 }}</span>
+            <span text-red>-{{ item.diff_removed ?? 0 }}</span>
+          </div>
+        </div>
+      </template>
+    </template>
+    <template
+      v-if="item.type === 'resolve' && item.resolved_id && item.importer && item.module_request"
+      #after
+    >
+      <div
+        p3 ml4 border="l" flex="~ col gap-1"
+        :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      >
+        <div v-if="item.importer" flex="~ gap-2 items-center">
+          <div i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8 />
+          <DisplayModuleId
+            :id="item.importer"
+            :cwd="root"
+            :link="importerModule ? true : false"
+            :class="importerModule ? 'hover:bg-active' : ''"
+            px2 py1 rounded
+          />
+        </div>
+        <DisplayModuleId
+          :id="item.module_request"
+          :cwd="root"
+        />
+      </div>
+    </template>
+  </FlowmapNode>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/NodePluginInfo.vue b/packages/vite/src/app/components/flowmap/NodePluginInfo.vue
new file mode 100644
index 00000000..8263bc94
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/NodePluginInfo.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
+
+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: ${formatDuration(duration, true)}`"
+    >
+      <span i-ph-clock-duotone inline-block />
+    </DisplayDuration>
+  </span>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/PluginFlow.vue b/packages/vite/src/app/components/flowmap/PluginFlow.vue
new file mode 100644
index 00000000..4f262d24
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/PluginFlow.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { ClientSettings } from '~/state/settings'
+import type { ViteModuleListItem } from '~/types/modules'
+import type { VitePluginDetails } from '~/types/plugins'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { useCycleList, useToggle } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  modules: ViteModuleListItem[]
+  buildMetrics: VitePluginDetails
+  root: string
+}>()
+
+const [expanded, toggleExpanded] = useToggle(true)
+const tableFieldFilterRules = [
+  {
+    match: /hookName/,
+    name: 'hookName',
+    description: 'Hook name',
+    icon: 'i-ph-function-duotone',
+  },
+  {
+    match: /module/,
+    name: 'module',
+    description: 'Module',
+    icon: 'i-ph-package-duotone',
+  },
+  {
+    match: /duration/,
+    name: 'duration',
+    description: 'Duration',
+    icon: 'i-ph-clock-countdown-duotone',
+  },
+  {
+    match: /startTime/,
+    name: 'startTime',
+    description: 'Start Time',
+    icon: 'i-ph-clock-duotone',
+  },
+  {
+    match: /endTime/,
+    name: 'endTime',
+    description: 'End Time',
+    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))
+
+const {
+  state: showTypeState,
+  next: _toggleShowType,
+} = useCycleList<ClientSettings['pluginDetailsShowType']>(['changed', 'unchanged', 'all'], {
+  initialValue: settings.value.pluginDetailsShowType,
+})
+
+const showTypeText = computed(() => {
+  if (showTypeState.value === 'all')
+    return 'Show Changed'
+  if (showTypeState.value === 'changed')
+    return 'Show Unchanged'
+  return 'Show All'
+})
+const showUnchangedInfo = computed(() => {
+  if (!['load', 'transform'].includes(settings.value.pluginDetailSelectedHook))
+    return false
+
+  if (!props.buildMetrics.calls?.filter(item => item.type === settings.value.pluginDetailSelectedHook).filter(item => item.unchanged).length)
+    return false
+  return true
+})
+const unchangedInfo = computed(() => {
+  const unchanged = props.buildMetrics.calls?.filter(item => item.type === settings.value.pluginDetailSelectedHook).filter(item => item.unchanged)
+  const unchangedDuration = unchanged.reduce((acc, item) => acc + item.duration, 0)
+  return {
+    count: unchanged.length,
+    duration: unchangedDuration,
+  }
+})
+
+watch(() => searchValue.value.selected, (value) => {
+  settings.value.pluginDetailsTableFields = value
+})
+
+function toggleShowType() {
+  _toggleShowType()
+  settings.value.pluginDetailsShowType = showTypeState.value
+}
+</script>
+
+<template>
+  <div p2 h-full w-full>
+    <div flex="~" border="~ base" rounded-2 h-full relative of-hidden>
+      <div v-if="expanded" of-hidden border="r base">
+        <FlowmapPluginFlowTimeline
+          :build-metrics="buildMetrics"
+        >
+          <template #header>
+            <div px2 h10 border="b base" bg-base rounded-t-2 flex="~ items-center justify-end">
+              <button w8 h8 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(false)">
+                <i i-ph-sidebar-simple-duotone inline-flex op50 />
+              </button>
+            </div>
+          </template>
+        </FlowmapPluginFlowTimeline>
+      </div>
+      <div flex-1 h-full min-h-0 flex="~ col">
+        <div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
+          <div flex="~ items-center" h-full>
+            <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
+              <i i-ph-sidebar-duotone inline-flex op50 />
+            </button>
+            <DataSearchPanel
+              v-model="searchValue"
+              h-full border-none selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
+              :rules="tableFieldFilterRules"
+              class="[&_[icon-catppuccin]]:(filter-none!)"
+            />
+          </div>
+          <div v-if="showUnchangedInfo" flex="~ items-center justify-center gap1" h-full text-xs py1>
+            <p class="op50" flex="~ items-center gap-1">
+              <DisplayNumberBadge :number="unchangedInfo.count" /> module unchanged, but cost <DisplayDuration :duration="unchangedInfo.duration" />
+            </p>
+            <button rounded-md px2 py1 select-none h-full border="~ base rounded-lg" hover="bg-active" :title="showTypeText" @click="toggleShowType">
+              <div class="text-xs op50">
+                {{ showTypeText }}
+              </div>
+            </button>
+          </div>
+        </div>
+        <div flex-1 min-h-0 overscroll-contain>
+          <DataPluginDetailsTable
+            :modules="modules"
+            :build-metrics="buildMetrics"
+            :selected-fields="selectedFields"
+            :root="root"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
new file mode 100644
index 00000000..4f383907
--- /dev/null
+++ b/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { VitePluginBuildInfo, VitePluginDetails } from '~/types/plugins'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+import { computed } from 'vue'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  buildMetrics: VitePluginDetails
+}>()
+
+function normalizeMetrics(metrics: VitePluginBuildInfo[]) {
+  const info = {
+    duration: 0,
+    calls: metrics.length,
+    modules: 0,
+  }
+  const seen = new Set()
+  metrics.forEach((metric) => {
+    if (!seen.has(metric.module)) {
+      seen.add(metric.module)
+      info.modules++
+    }
+    info.duration += metric.duration
+  })
+  return info
+}
+
+const resolveIdMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.resolveIdMetrics))
+
+const loadMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.loadMetrics))
+
+const transformMetricsInfo = computed(() => normalizeMetrics(props.buildMetrics.transformMetrics))
+
+const startTime = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length)
+    return
+
+  return calls[0]!.timestamp_start
+})
+
+const endTime = computed(() => {
+  const calls = props.buildMetrics.calls
+  if (!calls?.length)
+    return
+
+  return calls.at(-1)!.timestamp_end
+})
+</script>
+
+<template>
+  <div flex="~ col w-full">
+    <slot name="header" />
+    <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
+      <div flex="~">
+        <FlowmapNode
+          :active="false"
+          class-node-inner="w60"
+        >
+          <template #content>
+            <div p2 w-full text-center @click="settings.pluginDetailSelectedHook = ''">
+              <DisplayPluginName
+                :name="buildMetrics.plugin_name"
+                class="font-mono text-sm ws-nowrap text-ellipsis line-clamp-1"
+              />
+            </div>
+          </template>
+        </FlowmapNode>
+      </div>
+      <div flex="~ items-center justify-center" relative w-60 h14>
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-0 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-10 border="r" z-flowmap-line
+          h4
+        />
+        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
+          <i i-ph-airplane-takeoff-thin text-4 inline-flex />
+          <time v-if="startTime" :datetime="new Date(startTime).toISOString()">{{ new Date(startTime).toLocaleString() }}</time>
+        </span>
+      </div>
+      <FlowmapNode
+        class-node-inner="w60"
+        :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
+        :active="settings.pluginDetailSelectedHook === 'resolve'"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'resolve'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-magnifying-glass-duotone /> Resolve Id
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="resolveIdMetricsInfo.modules"
+                :calls="resolveIdMetricsInfo.calls"
+                :duration="resolveIdMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+
+      <FlowmapNode
+        :active="settings.pluginDetailSelectedHook === 'load'"
+        class-node-inner="w60"
+        :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed!` : ''}`"
+        class-line-bottom="left-50%! translate-x--1/2"
+        pb4 w60
+        :lines="{ bottom: true }"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'load'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-upload-simple-duotone /> Load
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="loadMetricsInfo.modules"
+                :calls="loadMetricsInfo.calls"
+                :duration="loadMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+
+      <FlowmapNode
+        :active="settings.pluginDetailSelectedHook === 'transform'"
+        class-node-inner="w60"
+        :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed!` : ''}`"
+      >
+        <template #content>
+          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'transform'">
+            <span flex="~ items-center justify-center gap-1">
+              <i i-ph-magic-wand-duotone /> Transform
+            </span>
+            <div>
+              <FlowmapNodePluginInfo
+                :modules="transformMetricsInfo.modules"
+                :calls="transformMetricsInfo.calls"
+                :duration="transformMetricsInfo.duration"
+              />
+            </div>
+          </div>
+        </template>
+      </FlowmapNode>
+      <div flex="~ items-center justify-center" relative w-60 h14>
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-0 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-10 border="r" z-flowmap-line
+          h4
+        />
+        <div
+          class="border-flow-line left-50% translate-x--1/2"
+          absolute top-14 w-2 h-2 border="4" rounded-full
+        />
+        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
+          <i i-ph-airplane-landing-thin text-4 inline-flex />
+          <time v-if="endTime" :datetime="new Date(endTime).toISOString()">{{ new Date(endTime).toLocaleString() }}</time>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/modules/BuildMetrics.vue b/packages/vite/src/app/components/modules/BuildMetrics.vue
new file mode 100644
index 00000000..5f691869
--- /dev/null
+++ b/packages/vite/src/app/components/modules/BuildMetrics.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { ViteModuleBuildMetrics } from '~/types/modules'
+import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
+import { formatDuration } from '@vitejs/devtools-ui/utils/format'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  metrics: ViteModuleBuildMetrics
+}>()
+
+const durations = computed(() => {
+  const data = props.metrics
+  const _resolveIds = data.resolve_ids.reduce((t, node) => t + node.duration, 0)
+  const _loads = data.loads.reduce((t, node) => t + node.duration, 0)
+  const _transforms = data.transforms.reduce((t, node) => t + node.duration, 0)
+  const total = _resolveIds + _loads + _transforms
+  return {
+    resolveIds: _resolveIds,
+    loads: _loads,
+    transforms: _transforms,
+    total,
+  }
+})
+
+const sourceCodeSize = computed(() => props.metrics.transforms[0]?.source_code_size)
+
+const transformedCodeSize = computed(() => {
+  const data = props.metrics.transforms.filter(t => t.transformed_code_size)
+  return data.at(-1)?.transformed_code_size
+})
+</script>
+
+<template>
+  <div text-xs font-mono flex="~ items-center gap-3" ml2>
+    <DisplayDuration
+      :duration="durations.resolveIds" flex="~ gap-1 items-center"
+      :title="`Resolve Id hooks cost: ${formatDuration(durations.resolveIds, true)}`"
+    >
+      <span i-ph-magnifying-glass-duotone inline-block />
+    </DisplayDuration>
+    <DisplayDuration
+      :duration="durations.loads" flex="~ gap-1 items-center"
+      :title="`Load hooks cost: ${formatDuration(durations.loads, true)}`"
+    >
+      <span i-ph-upload-simple-duotone inline-block />
+    </DisplayDuration>
+    <DisplayDuration
+      :duration="durations.transforms" flex="~ gap-1 items-center"
+      :title="`Transform hooks cost: ${formatDuration(durations.transforms, true)}`"
+    >
+      <span i-ph-magic-wand-duotone inline-block />
+    </DisplayDuration>
+    <span op40>|</span>
+    <DisplayDuration
+      :duration="durations.total" flex="~ gap-1 items-center"
+      :title="`Total build cost: ${formatDuration(durations.total, true)}`"
+    >
+      <span i-ph-clock-duotone inline-block />
+    </DisplayDuration>
+    <template v-if="sourceCodeSize && transformedCodeSize">
+      <span op40>|</span>
+      <div flex="~ gap-1 items-center">
+        <DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
+        <span i-ph-arrow-right-duotone op50 />
+        <DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/modules/DetailedList.vue b/packages/vite/src/app/components/modules/DetailedList.vue
new file mode 100644
index 00000000..83d8e9ef
--- /dev/null
+++ b/packages/vite/src/app/components/modules/DetailedList.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ViteModuleBuildMetrics, ViteModuleListItem, ViteModuleTransformMetric } from '~/types/modules'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+import DisplayPluginName from '@vitejs/devtools-ui/components/DisplayPluginName.vue'
+
+withDefaults(defineProps<{
+  root: string
+  modules: ViteModuleListItem[]
+  itemSize?: number
+  minItemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
+}>(), {
+  minItemSize: 64,
+  pageMode: true,
+  scroller: 'dynamic',
+})
+
+const filteredTransformsCache = new WeakMap<ViteModuleListItem, ViteModuleTransformMetric[]>()
+
+function getFilteredTransforms(mod: ViteModuleListItem): ViteModuleTransformMetric[] {
+  const cached = filteredTransformsCache.get(mod)
+  if (cached)
+    return cached
+
+  const transforms = mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size && i.transformed_code_size) ?? []
+  filteredTransformsCache.set(mod, transforms)
+  return transforms
+}
+
+function isLastFilteredTransform(mod: ViteModuleListItem, index: number) {
+  return index === getFilteredTransforms(mod).length - 1
+}
+
+function hasBuildMetrics(metrics: ViteModuleBuildMetrics | undefined): metrics is ViteModuleBuildMetrics {
+  return !!metrics
+}
+</script>
+
+<template>
+  <div flex="~ col gap-2" p4>
+    <DataVirtualList
+      :items="modules"
+      key-prop="id"
+      :item-size="itemSize"
+      :min-item-size="minItemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
+    >
+      <template #default="{ item }">
+        <div flex pb2>
+          <DisplayModuleId
+            :id="item.id"
+            :cwd="root"
+            hover="bg-active" block px2 p1 w-full
+            border="~ base rounded"
+            :link="true"
+          >
+            <template #detail>
+              <div flex="~ gap-1 wrap" text-xs>
+                <ul flex="~ auto text-xs wrap">
+                  <template v-for="(p, i) of getFilteredTransforms(item)" :key="i">
+                    <li flex="~ items-center">
+                      <DisplayPluginName
+                        :name="p.plugin_name"
+                        class="font-mono ws-nowrap op-50"
+                      />
+                      <span v-if="!isLastFilteredTransform(item, i)" op20>|</span>
+                    </li>
+                  </template>
+                </ul>
+
+                <div flex="~ auto gap-1" of-hidden />
+                <div flex="~ none gap-1 wrap justify-end">
+                  <span>
+                    <ModulesBuildMetrics v-if="hasBuildMetrics(item.buildMetrics)" :metrics="item.buildMetrics" />
+                  </span>
+                </div>
+              </div>
+            </template>
+          </DisplayModuleId>
+        </div>
+      </template>
+    </DataVirtualList>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/modules/FlatList.vue b/packages/vite/src/app/components/modules/FlatList.vue
new file mode 100644
index 00000000..dc89a91a
--- /dev/null
+++ b/packages/vite/src/app/components/modules/FlatList.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { ViteModuleListItem } from '~/types/modules'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
+
+withDefaults(defineProps<{
+  root: string
+  modules: ViteModuleListItem[]
+  disableTooltip?: boolean
+  link?: boolean
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
+}>(), {
+  disableTooltip: false,
+  link: true,
+  pageMode: true,
+  scroller: 'dynamic',
+})
+
+const emit = defineEmits<{
+  (e: 'select', module: ViteModuleListItem): void
+}>()
+</script>
+
+<template>
+  <div flex="~ col gap-2" p4>
+    <DataVirtualList
+      :items="modules"
+      key-prop="id"
+      :item-size="itemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
+    >
+      <template #default="{ item }">
+        <div flex pb2 @click="emit('select', item)">
+          <DisplayModuleId
+            :id="item.id"
+            :cwd="root"
+            hover="bg-active" block px2 p1 w-full
+            border="~ base rounded"
+            :link="link"
+            :disable-tooltip="disableTooltip"
+          />
+        </div>
+      </template>
+    </DataVirtualList>
+  </div>
+</template>
diff --git a/packages/vite/src/app/components/modules/Folder.vue b/packages/vite/src/app/components/modules/Folder.vue
new file mode 100644
index 00000000..3a243477
--- /dev/null
+++ b/packages/vite/src/app/components/modules/Folder.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { ViteModuleDest, ViteModuleListItem } from '~/types/modules'
+import { computed } from 'vue'
+import { toTree } from '~/utils/format'
+
+const props = defineProps<{
+  root: string
+  modules: ViteModuleListItem[]
+}>()
+
+const moduleTree = computed(() => {
+  if (!props.modules.length) {
+    return {
+      workspace: {
+        children: {},
+        items: [],
+      },
+      nodeModules: {
+        children: {},
+        items: [],
+      },
+      virtual: {
+        children: {},
+        items: [],
+      },
+    }
+  }
+  const inWorkspace: ViteModuleDest[] = []
+  const inNodeModules: ViteModuleDest[] = []
+  const inVirtual: ViteModuleDest[] = []
+
+  props.modules.map(i => ({ full: i.id, path: i.path! })).forEach((i) => {
+    if (i.full.startsWith(props.root)) {
+      if (!i.path.startsWith('../'))
+        i.path = i.full.slice(props.root.length + 1)
+
+      inWorkspace.push(i)
+    }
+    else if (i.full.includes('node_modules')) {
+      inNodeModules.push({
+        full: i.full,
+        path: i.full,
+      })
+    }
+    else if (i.full.startsWith('virtual:') || i.full.startsWith('\0')) {
+      inVirtual.push(i)
+    }
+  })
+
+  return {
+    workspace: toTree(inWorkspace, 'Project Root'),
+    nodeModules: toTree(inNodeModules, 'Node Modules'),
+    virtual: toTree(inVirtual, 'Virtual Modules'),
+  }
+})
+
+const moduleTreeRoots = computed(() => {
+  const tree = moduleTree.value
+  return [
+    {
+      key: 'workspace',
+      node: tree.workspace,
+      icon: 'i-catppuccin:folder-dist icon-catppuccin',
+      iconOpen: 'i-catppuccin:folder-dist-open icon-catppuccin',
+    },
+    {
+      key: 'node-modules',
+      node: tree.nodeModules,
+      icon: 'i-catppuccin:folder-node icon-catppuccin',
+      iconOpen: 'i-catppuccin:folder-node-open icon-catppuccin',
+      open: false,
+      dividerBefore: true,
+    },
+    {
+      key: 'virtual',
+      node: tree.virtual,
+      icon: 'i-catppuccin:folder-components icon-catppuccin',
+      iconOpen: 'i-catppuccin:folder-components-open icon-catppuccin',
+      open: false,
+      dividerBefore: true,
+    },
+  ]
+})
+</script>
+
+<template>
+  <DisplayVirtualTree
+    relative
+    :roots="moduleTreeRoots"
+    :link="true"
+  />
+</template>
diff --git a/packages/vite/src/app/components/modules/Graph.vue b/packages/vite/src/app/components/modules/Graph.vue
new file mode 100644
index 00000000..a456572b
--- /dev/null
+++ b/packages/vite/src/app/components/modules/Graph.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { ModuleGraphLink, ModuleGraphNode } from '@vitejs/devtools-ui/composables/module-graph'
+import type { ViteModuleImport, ViteModuleListItem } from '~/types/modules'
+import DisplayModuleGraph from '@vitejs/devtools-ui/components/DisplayModuleGraph.vue'
+import { createModuleGraph, getModuleGraphSize } from '@vitejs/devtools-ui/composables/module-graph'
+import { computed, nextTick, unref } from 'vue'
+
+const props = defineProps<{
+  modules: ViteModuleListItem[]
+  root: string
+}>()
+
+const modules = computed(() => props.modules)
+const DEFAULT_EXPANDED_DEPTH = 3
+const DEFAULT_EXPANDED_SIBLINGS = 10
+
+createModuleGraph<ViteModuleListItem, ViteModuleImport>({
+  modules,
+  spacing: {
+    width: 400,
+    height: 55,
+    linkOffset: 20,
+    margin: 800,
+    gap: 150,
+  },
+  generateGraph: (options) => {
+    const { isFirstCalculateGraph, spacing, tree, hierarchy, collapsedNodes, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
+    const rootModules = computed(() => {
+      const roots = modules.value.filter((module) => {
+        return !module.importers.some(importer => modulesMap.value.has(importer))
+      })
+      return roots.length ? roots : modules.value
+    })
+
+    function registerChildParent(moduleId: string, parentId: string) {
+      const existingParentId = childToParentMap.get(moduleId)
+      if (existingParentId && existingParentId !== parentId) {
+        return false
+      }
+      if (!existingParentId) {
+        childToParentMap.set(moduleId, parentId)
+      }
+      return true
+    }
+
+    function createNode(module: ViteModuleListItem, depth: number, moduleImport?: ViteModuleImport, siblingIndex = 0): ModuleGraphNode<ViteModuleListItem, ViteModuleImport> {
+      const defaultCollapsed = depth >= DEFAULT_EXPANDED_DEPTH || siblingIndex >= DEFAULT_EXPANDED_SIBLINGS
+      if (isFirstCalculateGraph.value && defaultCollapsed && module.imports.length > 0) {
+        collapsedNodes.add(module.id)
+      }
+
+      return {
+        module,
+        import: moduleImport,
+        depth,
+        expanded: !collapsedNodes.has(module.id),
+        hasChildren: false,
+      }
+    }
+
+    return (focusOnFirstRootNode = true) => {
+      width.value = window.innerWidth
+      height.value = window.innerHeight
+
+      const seen = new Set<ViteModuleListItem>()
+      const root = hierarchy<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>(
+        { module: { id: '~root' } } as any,
+        (parent) => {
+          if (parent.module.id === '~root') {
+            rootModules.value.forEach((x) => {
+              seen.add(x)
+              registerChildParent(x.id, '~root')
+            })
+            return rootModules.value.map((x, index) => createNode(x, 1, undefined, index))
+          }
+
+          if (collapsedNodes.has(parent.module.id)) {
+            return []
+          }
+
+          const depth = (parent.depth ?? 0) + 1
+          const childNodes: ModuleGraphNode<ViteModuleListItem, ViteModuleImport>[] = []
+          for (const moduleImport of parent.module.imports) {
+            const module = modulesMap.value.get(moduleImport.module_id)
+            if (!module || seen.has(module))
+              continue
+
+            // Check if the module is a child of the current parent
+            if (!registerChildParent(module.id, parent.module.id))
+              continue
+
+            seen.add(module)
+            childNodes.push(createNode(module, depth, moduleImport, childNodes.length))
+          }
+
+          return childNodes
+        },
+      )
+
+      if (isFirstCalculateGraph.value) {
+        isFirstCalculateGraph.value = false
+      }
+
+      // Calculate the layout
+      const layout = tree<ModuleGraphNode<ViteModuleListItem, ViteModuleImport>>()
+        .nodeSize([unref(spacing.height), unref(spacing.width) + unref(spacing.gap)])
+      layout(root)
+
+      const _nodes = root.descendants()
+
+      for (const node of _nodes) {
+        // Rotate the graph from top-down to left-right
+        [node.x, node.y] = [node.y! - unref(spacing.width), node.x!]
+
+        if (node.data.module.imports) {
+          node.data.hasChildren = node.data.module.imports
+            ?.some((subNode) => {
+              const parentId = childToParentMap.get(subNode.module_id)
+              return modulesMap.value.has(subNode.module_id) && (!parentId || parentId === node.data.module.id)
+            })
+        }
+      }
+
+      // Offset the graph and adding margin
+      const minX = Math.min(..._nodes.map(n => n.x!))
+      const minY = Math.min(..._nodes.map(n => n.y!))
+      if (minX < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.x! += Math.abs(minX) + unref(spacing.margin)
+        }
+      }
+      if (minY < unref(spacing.margin)) {
+        for (const node of _nodes) {
+          node.y! += Math.abs(minY) + unref(spacing.margin)
+        }
+      }
+
+      nodes.value = _nodes
+      nodesMap.clear()
+      for (const node of _nodes) {
+        nodesMap.set(node.data.module.id, node)
+      }
+      const _links = root.links()
+        .filter(x => x.source.data.module.id !== '~root')
+        .map((x): ModuleGraphLink<ViteModuleListItem, ViteModuleImport> => {
+          return {
+            ...x,
+            import: x.source.data.import,
+            id: `${x.source.data.module.id}|${x.target.data.module.id}`,
+          }
+        })
+
+      linksMap.clear()
+      for (const link of _links) {
+        linksMap.set(link.id, link)
+      }
+      links.value = _links
+
+      const graphSize = getModuleGraphSize(_nodes, spacing)
+      width.value = graphSize.width
+      height.value = graphSize.height
+
+      nextTick(() => {
+        const moduleId = rootModules.value?.[0]?.id
+        if (focusOnFirstRootNode && moduleId) {
+          nextTick(() => {
+            focusOn(moduleId, false)
+          })
+        }
+      })
+    }
+  },
+})
+</script>
+
+<template>
+  <DisplayModuleGraph
+    :modules="modules"
+  >
+    <template #default="{ node, nodesRefMap }">
+      <DisplayModuleId
+        :id="node.data.module.id"
+        :ref="(el: any) => nodesRefMap.set(node.data.module.id, el?.$el)"
+        :link="true"
+        :cwd="root"
+        :minimal="true"
+        flex="1"
+      />
+    </template>
+    <template #link="{ link, d, linkClass }">
+      <path
+        :d="d"
+        :class="linkClass"
+        :stroke-dasharray="link.import?.kind === 'dynamic-import' ? '3 6' : undefined"
+        fill="none"
+      />
+    </template>
+  </DisplayModuleGraph>
+</template>
diff --git a/packages/vite/src/app/composables/chart.ts b/packages/vite/src/app/composables/chart.ts
new file mode 100644
index 00000000..d7900846
--- /dev/null
+++ b/packages/vite/src/app/composables/chart.ts
@@ -0,0 +1,234 @@
+import type { GraphBase, GraphBaseOptions, TreeNode } from 'nanovis'
+import type { ComputedRef, MaybeRef } from 'vue'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { createColorGetterSpectrum } from 'nanovis'
+import { computed, nextTick, onUnmounted, ref, shallowRef, unref, watch } from 'vue'
+import { settings } from '~/state/settings'
+import { bytesToHumanSize } from '~/utils/format'
+
+export interface ChartGraphOptions<T, I, N> {
+  data: ComputedRef<T[]> | MaybeRef<T[]>
+  nameKey: string
+  sizeKey: string
+  rootText?: string
+  nodeType?: string
+  graphOptions?: GraphBaseOptions<I | undefined>
+  onUpdate?: () => void
+  tree?: ComputedRef<{
+    map: Map<string, N>
+    root: N
+    maxDepth: number
+  }>
+}
+
+export function useChartGraph<T extends Record<string, any>, I extends T & Record<string, any>, N extends TreeNode<any>>(options: ChartGraphOptions<T, I, N>) {
+  const { data, nameKey, sizeKey, rootText, nodeType, graphOptions, onUpdate } = options
+  const nodeHover = shallowRef<N | undefined>(undefined)
+  const nodeSelected = shallowRef<N | undefined>(undefined)
+  const selectedNode = ref<I | undefined>(undefined)
+  const graph = shallowRef<GraphBase<I | undefined, GraphBaseOptions<I | undefined>> | undefined>(undefined)
+  let dispose: () => void | undefined
+
+  const tree = computed(() => {
+    if (options.tree)
+      return options.tree.value
+
+    const _data = unref(data)
+    const map = new Map<string, N>()
+    let maxDepth = 0
+
+    const root = {
+      id: '~root',
+      text: rootText,
+      size: 0,
+      sizeSelf: 0,
+      children: [],
+    } as unknown as N
+
+    if (!_data?.length) {
+      return {
+        map,
+        root,
+        maxDepth,
+      }
+    }
+    const macrosTasks: (() => void)[] = []
+
+    macrosTasks.unshift(() => {
+      root.size += root.children.reduce((acc, item) => acc + item.size, 0)
+      root.subtext = bytesToHumanSize(root.size).join(' ')
+      root.children.sort((a, b) => b.size - a.size || a.id.localeCompare(b.id))
+    })
+
+    function dataToNode(data: T, path: string, name: string, parent: N, depth: number): N {
+      if (map.has(path))
+        return map.get(path)!
+
+      if (depth > maxDepth)
+        maxDepth = depth
+
+      const node = {
+        id: path,
+        text: name,
+        size: 0,
+        sizeSelf: 0,
+        children: [],
+        meta: {
+          ...data,
+          path: name,
+          type: 'folder',
+        },
+        parent,
+      } as unknown as N
+
+      map.set(path, node)
+      parent.children.push(node)
+
+      macrosTasks.unshift(() => {
+        const selfSize = node.sizeSelf
+        node.size += node.children.reduce((acc, item) => acc + item.size, 0)
+        node.subtext = bytesToHumanSize(node.size).join(' ')
+
+        if (node.children.length && selfSize / node.size > 0.1) {
+          node.children.push({
+            id: `${node.id}-self`,
+            text: '',
+            size: selfSize,
+            sizeSelf: selfSize,
+            subtext: bytesToHumanSize(selfSize).join(' '),
+            children: [],
+            meta: {
+              ...data,
+              path: '',
+              type: nodeType,
+            },
+            parent: node,
+          })
+        }
+
+        node.children.sort((a, b) => b.size - a.size || a.id.localeCompare(b.id))
+      })
+
+      return node
+    }
+
+    function processData(data: T) {
+      const parts: string[] = data[nameKey].split('/').filter(Boolean)
+      let current = root
+      let currentPath = ''
+      let depth = 0
+
+      parts.forEach((part, index) => {
+        currentPath += (currentPath ? '/' : '') + part
+        depth++
+
+        if (index === parts.length - 1) {
+          const fileNode = {
+            id: data[nameKey],
+            text: part,
+            size: data[sizeKey],
+            sizeSelf: data[sizeKey],
+            subtext: bytesToHumanSize(data[sizeKey]).join(' '),
+            children: [],
+            meta: {
+              ...data,
+              path: part,
+              type: nodeType,
+            },
+          } as unknown as N
+
+          current.children.push(fileNode)
+          map.set(data[nameKey], fileNode)
+        }
+        else {
+          current = dataToNode(data, currentPath, part, current, depth)
+        }
+      })
+    }
+
+    _data.forEach(processData)
+    macrosTasks.forEach(fn => fn())
+
+    return {
+      map,
+      root,
+      maxDepth,
+    }
+  })
+
+  const chartOptions = computed<GraphBaseOptions<I | undefined>>(() => {
+    return {
+      animate: settings.value.chartAnimation,
+      palette: {
+        stroke: isDark.value ? '#222' : '#555',
+        fg: isDark.value ? '#fff' : '#000',
+        bg: isDark.value ? '#111' : '#fff',
+      },
+      getColor: createColorGetterSpectrum(
+        tree.value.root,
+        isDark.value ? 0.8 : 0.9,
+        isDark.value ? 1 : 1.1,
+      ),
+      getSubtext: (node) => {
+        return node.subtext
+      },
+      ...graphOptions,
+    }
+  })
+
+  function selectNode(node: N | null, animate?: boolean) {
+    selectedNode.value = node?.meta
+    if (!node?.children.length)
+      node = node?.parent as unknown as N | null
+    graph.value?.select(node, animate)
+  }
+
+  function buildGraph() {
+    dispose?.()
+
+    nodeSelected.value = tree.value.root
+    onUpdate?.()
+
+    nextTick(() => {
+      const selected = selectedNode.value ? tree.value.map.get(selectedNode.value[nameKey]) || null : null
+      if (selected)
+        selectNode(selected, false)
+    })
+
+    dispose = () => {
+      graph.value?.dispose()
+      graph.value = undefined
+      selectedNode.value = undefined
+    }
+  }
+
+  nextTick(() => {
+    watch(
+      () => [tree.value, chartOptions.value],
+      () => {
+        buildGraph()
+      },
+      {
+        deep: true,
+        immediate: false,
+      },
+    )
+
+    buildGraph()
+  })
+
+  onUnmounted(() => {
+    dispose?.()
+  })
+
+  return {
+    tree,
+    chartOptions,
+    graph,
+    nodeHover,
+    nodeSelected,
+    selectedNode,
+    selectNode,
+    buildGraph,
+  }
+}
diff --git a/packages/vite/src/app/composables/monaco.ts b/packages/vite/src/app/composables/monaco.ts
new file mode 100644
index 00000000..9c53c28e
--- /dev/null
+++ b/packages/vite/src/app/composables/monaco.ts
@@ -0,0 +1,194 @@
+import type { TextmateTheme } from 'modern-monaco'
+import type * as Monaco from 'modern-monaco/editor-core'
+import { isDark } from '@vitejs/devtools-ui/composables/dark'
+import { init } from 'modern-monaco'
+
+const lightTheme: TextmateTheme = {
+  type: 'light',
+  name: 'rolldown-light',
+  colors: {
+    'editor.background': '#00000000',
+    'editor.foreground': '#8e8f8b',
+    'editor.selectionBackground': '#44444410',
+    'editorLineNumber.foreground': '#8e8f8b80',
+    'editorLineNumber.activeForeground': '#8e8f8b',
+    'editorGutter.background': '#00000000',
+    'editor.lineHighlightBackground': '#00000000',
+  },
+  tokenColors: [
+    { scope: 'comment', settings: { foreground: '#a0ada0' } },
+    { scope: 'string', settings: { foreground: '#b56959' } },
+    { scope: ['constant.numeric', 'number'], settings: { foreground: '#296aa3' } },
+    { scope: ['keyword', 'storage'], settings: { foreground: '#1c6b48' } },
+    { scope: ['entity.name.function', 'support.function'], settings: { foreground: '#6c7834' } },
+    { scope: ['entity.name.class', 'entity.name.type'], settings: { foreground: '#2993a3' } },
+    { scope: ['variable', 'identifier'], settings: { foreground: '#ad944c' } },
+    { scope: ['variable.other.property', 'meta.property-name'], settings: { foreground: '#b58451' } },
+  ],
+}
+
+const darkTheme: TextmateTheme = {
+  type: 'dark',
+  name: 'rolldown-dark',
+  colors: {
+    'editor.background': '#00000000',
+    'editor.foreground': '#858585',
+    'editor.selectionBackground': '#44444450',
+    'editorLineNumber.foreground': '#88888880',
+    'editorLineNumber.activeForeground': '#888888',
+    'editorGutter.background': '#00000000',
+    'editor.lineHighlightBackground': '#00000000',
+  },
+  tokenColors: [
+    { scope: 'comment', settings: { foreground: '#758575' } },
+    { scope: 'string', settings: { foreground: '#d48372' } },
+    { scope: ['constant.numeric', 'number'], settings: { foreground: '#6394bf' } },
+    { scope: ['keyword', 'storage'], settings: { foreground: '#4d9375' } },
+    { scope: ['entity.name.function', 'support.function'], settings: { foreground: '#a1b567' } },
+    { scope: ['entity.name.class', 'entity.name.type'], settings: { foreground: '#54b1bf' } },
+    { scope: ['variable', 'identifier'], settings: { foreground: '#c2b36e' } },
+    { scope: ['variable.other.property', 'meta.property-name'], settings: { foreground: '#dd8e6e' } },
+  ],
+}
+
+const lightThemeId = lightTheme.name
+const darkThemeId = darkTheme.name
+
+function getThemeId() {
+  return isDark.value ? darkThemeId : lightThemeId
+}
+
+let monacoPromise: Promise<typeof Monaco> | null = null
+
+export async function getMonaco() {
+  monacoPromise ??= init({
+    defaultTheme: isDark.value ? darkTheme : lightTheme,
+    themes: [lightTheme, darkTheme],
+  })
+  return monacoPromise
+}
+
+export function applyMonacoTheme(monaco: typeof Monaco) {
+  monaco.editor.setTheme(getThemeId())
+}
+
+export function getMonacoWordWrap(enabled: boolean): Monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] {
+  return enabled ? 'on' : 'off'
+}
+
+const readonlyEditorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true,
+  fontFamily: '\'Input Mono\', \'FiraCode\', monospace',
+  fontSize: 13,
+  lineNumbers: 'on',
+  minimap: { enabled: false },
+  readOnly: true,
+  renderLineHighlight: 'none',
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+    horizontal: 'auto',
+    horizontalScrollbarSize: 6,
+    useShadows: false,
+    vertical: 'auto',
+    verticalScrollbarSize: 6,
+  },
+}
+
+export function createReadOnlyMonacoEditor(
+  monaco: typeof Monaco,
+  container: HTMLElement,
+  options: Monaco.editor.IStandaloneEditorConstructionOptions = {},
+) {
+  const scrollbar = {
+    ...readonlyEditorOptions.scrollbar,
+    ...options.scrollbar,
+  }
+  return monaco.editor.create(container, {
+    ...readonlyEditorOptions,
+    ...options,
+    scrollbar,
+  })
+}
+
+export function setModelLanguageIfNeeded(
+  monaco: typeof Monaco,
+  model: Monaco.editor.ITextModel,
+  language: string,
+) {
+  if (model.getLanguageId() !== language)
+    monaco.editor.setModelLanguage(model, language)
+}
+
+export function guessMonacoLanguage(code: string) {
+  if (code.trimStart().startsWith('<'))
+    return 'html'
+  if (/^import\s/.test(code))
+    return 'javascript'
+  if (/^[.#].+\{/.test(code))
+    return 'css'
+  return 'javascript'
+}
+
+function mapScroll(primaryPos: number, primaryMax: number, targetMax: number) {
+  if (primaryMax <= 0 || targetMax <= 0)
+    return 0
+  return (targetMax / primaryMax) * primaryPos
+}
+
+export function syncMonacoEditorScrolls(
+  primary: Monaco.editor.IStandaloneCodeEditor,
+  target: Monaco.editor.IStandaloneCodeEditor,
+) {
+  const pMaxX = Math.max(primary.getScrollWidth() - primary.getLayoutInfo().width, 0)
+  const pMaxY = Math.max(primary.getScrollHeight() - primary.getLayoutInfo().height, 0)
+  const tMaxX = Math.max(target.getScrollWidth() - target.getLayoutInfo().width, 0)
+  const tMaxY = Math.max(target.getScrollHeight() - target.getLayoutInfo().height, 0)
+
+  const scrollLeft = mapScroll(primary.getScrollLeft(), pMaxX, tMaxX)
+  const scrollTop = mapScroll(primary.getScrollTop(), pMaxY, tMaxY)
+
+  target.setScrollPosition({
+    scrollLeft: Number.isFinite(scrollLeft) ? scrollLeft : 0,
+    scrollTop: Number.isFinite(scrollTop) ? scrollTop : 0,
+  })
+}
+
+export function setupMonacoScrollSync(
+  editor1: Monaco.editor.IStandaloneCodeEditor,
+  editor2: Monaco.editor.IStandaloneCodeEditor,
+) {
+  let activeEditor = 1
+
+  const node1 = editor1.getDomNode()
+  const node2 = editor2.getDomNode()
+
+  const onMouseEnter1 = () => {
+    activeEditor = 1
+  }
+  const onMouseEnter2 = () => {
+    activeEditor = 2
+  }
+
+  node1?.addEventListener('mouseenter', onMouseEnter1)
+  node2?.addEventListener('mouseenter', onMouseEnter2)
+
+  const disposables: Monaco.IDisposable[] = [
+    editor1.onDidScrollChange(() => {
+      if (activeEditor === 1)
+        syncMonacoEditorScrolls(editor1, editor2)
+    }),
+    editor2.onDidScrollChange(() => {
+      if (activeEditor === 2)
+        syncMonacoEditorScrolls(editor2, editor1)
+    }),
+    editor1.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor1, editor2)),
+    editor2.onDidChangeCursorPosition(() => syncMonacoEditorScrolls(editor2, editor1)),
+  ]
+
+  return () => {
+    node1?.removeEventListener('mouseenter', onMouseEnter1)
+    node2?.removeEventListener('mouseenter', onMouseEnter2)
+    disposables.forEach(d => d.dispose())
+  }
+}
diff --git a/packages/vite/src/app/composables/rpc.ts b/packages/vite/src/app/composables/rpc.ts
index 10f005ab..1c935d32 100644
--- a/packages/vite/src/app/composables/rpc.ts
+++ b/packages/vite/src/app/composables/rpc.ts
@@ -1,11 +1,16 @@
 import type {} from '@vitejs/devtools'
 import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import type {} from '../../node/rpc'
+import type { ViteInspectModuleUpdatedState } from '../../node/rpc'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { DEVTOOLS_MOUNT_PATH } from '@vitejs/devtools-kit/constants'
-import { reactive, shallowRef } from 'vue'
+import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
+import { getCurrentScope, onScopeDispose, reactive, shallowRef } from 'vue'
 import { useRuntimeConfig } from '#app/nuxt'
 
+export interface InspectModuleUpdatedPayload {
+  ids?: string[]
+}
+
 export const rpcConnectionState = reactive<{
   connected: boolean
   error: Error | null
@@ -15,6 +20,32 @@ export const rpcConnectionState = reactive<{
 })
 
 const rpc = shallowRef<DevToolsRpcClient>(undefined!)
+const moduleUpdated = createEventEmitter<{
+  updated: (payload: InspectModuleUpdatedPayload) => void
+}>()
+let unsubscribeInspectModuleUpdates: (() => void) | undefined
+
+function triggerModuleUpdated(payload: InspectModuleUpdatedPayload = {}) {
+  moduleUpdated.emit('updated', payload)
+}
+
+async function subscribeInspectModuleUpdates(client: DevToolsRpcClient) {
+  unsubscribeInspectModuleUpdates?.()
+
+  const state = await client.sharedState.get('vite:inspect:module-updated', {
+    initialValue: {
+      version: 0,
+      ids: null,
+      updatedAt: 0,
+    },
+  })
+
+  unsubscribeInspectModuleUpdates = state.on('updated', (value: ViteInspectModuleUpdatedState) => {
+    triggerModuleUpdated({
+      ids: value.ids ?? undefined,
+    })
+  })
+}
 
 export async function connect() {
   const runtimeConfig = useRuntimeConfig()
@@ -47,6 +78,7 @@ export async function connect() {
         },
       },
     })
+    await subscribeInspectModuleUpdates(rpc.value)
 
     rpcConnectionState.connected = true
   }
@@ -58,3 +90,12 @@ export async function connect() {
 export function useRpc() {
   return rpc
 }
+
+export function onInspectModuleUpdated(handler: (payload: InspectModuleUpdatedPayload) => void | Promise<void>) {
+  const off = moduleUpdated.on('updated', handler)
+
+  if (getCurrentScope())
+    onScopeDispose(off)
+
+  return off
+}
diff --git a/packages/vite/src/app/pages/graph.vue b/packages/vite/src/app/pages/graph.vue
new file mode 100644
index 00000000..aeabfa38
--- /dev/null
+++ b/packages/vite/src/app/pages/graph.vue
@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { ClientSettings } from '~/state/settings'
+import type { ViteModuleListItem } from '~/types/modules'
+import DataPathSelector from '@vitejs/devtools-ui/components/DataPathSelector.vue'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
+import { useGraphPathManager } from '@vitejs/devtools-ui/composables/graph-path-selector'
+import { computedWithControl, onKeyDown, useDebounceFn, watchDebounced } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import { computed, onMounted, ref, shallowRef } from 'vue'
+import { useRoute, useRouter } from '#app/composables/router'
+import { useRpc } from '#imports'
+import { onInspectModuleUpdated } from '~/composables/rpc'
+import { settings } from '~/state/settings'
+import { parseReadablePath } from '~/utils/filepath'
+import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
+
+type InspectMetadata = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-metadata']>>
+type InspectModule = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-modules-list']>>[number]
+type InspectQuery = Parameters<DevToolsRpcServerFunctions['vite:inspect:get-modules-list']>[0]
+
+const rpc = useRpc()
+const route = useRoute()
+const router = useRouter()
+
+const metadata = shallowRef<InspectMetadata | null>(null)
+const rawModules = shallowRef<InspectModule[]>([])
+const loading = ref(true)
+const error = ref<Error | null>(null)
+
+const selectedModuleQuery = computed(() => typeof route.query.module === 'string' ? route.query.module : undefined)
+
+const searchValue = ref<{
+  search: string | false
+  selected: string[] | null
+  [key: string]: any
+}>({
+  search: (route.query.search || '') as string,
+  selected: route.query.file_types ? toArray(route.query.file_types) : null,
+  node_modules: route.query.node_modules ? toArray(route.query.node_modules) : null,
+})
+
+const moduleViewTypes = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: 'i-ph-list-bullets-duotone',
+  },
+  {
+    label: 'Detailed List',
+    value: 'detailed-list',
+    icon: 'i-ph-list-magnifying-glass-duotone',
+  },
+  {
+    label: 'Graph',
+    value: 'graph',
+    icon: 'i-ph-graph-duotone',
+  },
+  {
+    label: 'Folder',
+    value: 'folder',
+    icon: 'i-ph-folder-duotone',
+  },
+] as const
+
+const currentInstance = computed(() => metadata.value?.instances[0])
+const currentEnv = computed(() => currentInstance.value?.environments[0] || '')
+const root = computed(() => currentInstance.value?.root || '')
+
+const query = computed<InspectQuery | null>(() => {
+  if (!currentInstance.value?.vite || !currentEnv.value)
+    return null
+  return {
+    vite: currentInstance.value.vite,
+    env: currentEnv.value,
+  }
+})
+
+const modules = computed<ViteModuleListItem[]>(() => {
+  return rawModules.value.map((module) => {
+    const transforms = module.plugins
+      .filter(plugin => plugin.transform != null)
+      .map(plugin => ({
+        plugin_name: plugin.name,
+        source_code_size: module.sourceSize,
+        transformed_code_size: module.distSize,
+        duration: plugin.transform ?? 0,
+      }))
+
+    return {
+      ...module,
+      imports: module.deps.map(id => ({ module_id: id })),
+      buildMetrics: {
+        resolve_ids: module.plugins
+          .filter(plugin => plugin.resolveId != null)
+          .map(plugin => ({ duration: plugin.resolveId ?? 0 })),
+        loads: [],
+        transforms,
+      },
+    }
+  })
+})
+
+watchDebounced(
+  searchValue.value,
+  (f) => {
+    router.replace({
+      query: clearUndefined({
+        ...route.query,
+        search: f.search || undefined,
+        file_types: f.selected || undefined,
+        node_modules: f.node_modules || undefined,
+      }),
+    })
+  },
+  { debounce: 500 },
+)
+
+const parsedPaths = computed(() => modules.value.map((mod) => {
+  const path = parseReadablePath(mod.id, root.value)
+  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 filtered = computed(() => {
+  let modules = parsedPaths.value
+  if (searchValue.value.selected) {
+    modules = modules.filter((mod) => {
+      const type = getFileTypeFromModuleId(mod.mod.id)
+      return searchValue.value.selected!.includes(type.name)
+    })
+  }
+  if (searchValue.value.node_modules) {
+    modules = modules.filter(mod => mod.path.moduleName && searchValue.value.node_modules!.includes(mod.path.moduleName))
+  }
+  return modules.map(mod => ({ ...mod.mod, path: mod.path.path }))
+})
+
+const { pathSelectorVisible, selectPathNodes, togglePathSelector, normalizedGraph } = useGraphPathManager<ViteModuleListItem>({
+  onToggle: (visible) => {
+    searchValue.value.search = visible ? false : ''
+  },
+  dataMap: computed(() => new Map(modules.value.map(m => [m.id, m]))),
+  list: filtered,
+  importIdKey: 'module_id',
+})
+
+const fuse = computedWithControl(
+  () => filtered.value,
+  () => new Fuse(filtered.value, {
+    includeScore: true,
+    keys: ['id'],
+    ignoreLocation: true,
+    threshold: 0.4,
+  }),
+)
+
+const searched = computed<ViteModuleListItem[]>(() => {
+  if (!searchValue.value.search)
+    return filtered.value
+  return fuse.value
+    .search(searchValue.value.search)
+    .map(r => r.item)
+})
+
+function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
+  if (route.query.module) {
+    router.replace({ query: { ...route.query, module: undefined } })
+  }
+  settings.value.moduleGraphViewType = type
+}
+
+function closeCurrentPanel() {
+  if (selectedModuleQuery.value)
+    router.replace({ query: { ...route.query, module: undefined } })
+}
+
+async function load(options: { silent?: boolean } = {}) {
+  if (!options.silent)
+    loading.value = true
+  error.value = null
+  try {
+    metadata.value = await rpc.value.call('vite:inspect:get-metadata')
+    if (query.value)
+      rawModules.value = await rpc.value.call('vite:inspect:get-modules-list', query.value)
+    else
+      rawModules.value = []
+  }
+  catch (err) {
+    error.value = err as Error
+  }
+  finally {
+    if (!options.silent)
+      loading.value = false
+  }
+}
+
+const reloadOnModuleUpdated = useDebounceFn(() => {
+  load({ silent: true })
+}, 100)
+
+function toArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.map(String) : [String(value)]
+}
+
+function clearUndefined<T extends Record<string, unknown>>(value: T): Partial<T> {
+  return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined)) as Partial<T>
+}
+
+onMounted(() => {
+  load()
+})
+
+onInspectModuleUpdated(() => {
+  reloadOnModuleUpdated()
+})
+
+onKeyDown('Escape', (e) => {
+  e.preventDefault()
+
+  if (!e.isTrusted || e.repeat)
+    return
+
+  closeCurrentPanel()
+})
+</script>
+
+<template>
+  <VisualLoading
+    v-if="loading"
+    text="Loading modules..."
+  />
+  <div v-else-if="error" h-full flex="~ col gap-3 items-center justify-center" p8 text-center>
+    <div i-ph-warning-duotone text-4xl text-amber />
+    <div font-mono text-sm max-w-180 ws-pre-wrap>
+      {{ error.message }}
+    </div>
+    <button btn-action @click="load()">
+      <span i-ph-arrow-clockwise-duotone />
+      Retry
+    </button>
+  </div>
+  <div v-else relative :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+      <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
+        <template v-if="pathSelectorVisible" #search>
+          <DataPathSelector :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
+            <template #list="{ select, data }">
+              <ModulesFlatList
+                v-if="data?.length"
+                :root="root"
+                :modules="data"
+                disable-tooltip
+                :link="false"
+                @select="select"
+              />
+            </template>
+            <template #item="{ id }">
+              <DisplayModuleId
+                :id="id"
+                :cwd="root"
+                block text-nowrap
+                :link="false"
+                :disable-tooltip="true"
+              />
+            </template>
+          </DataPathSelector>
+        </template>
+        <template #search-end>
+          <div v-if="settings.moduleGraphViewType === 'graph'" h10 mr2 flex="~ items-center">
+            <button
+              w-8 h-8 rounded-full flex items-center justify-center
+              hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
+            >
+              <i i-ri:route-line flex />
+            </button>
+          </div>
+        </template>
+        <div flex="~ wrap gap-2 items-center" p2 border="t base">
+          <span op50 pl2 text-sm>View as</span>
+          <button
+            v-for="viewType of moduleViewTypes"
+            :key="viewType.value"
+            btn-action
+            :class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
+            @click="toggleDisplay(viewType.value)"
+          >
+            <div :class="viewType.icon" />
+            {{ viewType.label }}
+          </button>
+        </div>
+      </DataSearchPanel>
+    </div>
+    <ModulesFlatList
+      v-if="settings.moduleGraphViewType === 'list'"
+      :root="root"
+      :modules="searched"
+      scroller="window"
+    />
+    <ModulesDetailedList
+      v-else-if="settings.moduleGraphViewType === 'detailed-list'"
+      :root="root"
+      :modules="searched"
+      scroller="window"
+    />
+    <ModulesGraph
+      v-else-if="settings.moduleGraphViewType === 'graph'"
+      :root="root"
+      :modules="normalizedGraph"
+    />
+    <ModulesFolder
+      v-else
+      :root="root"
+      :modules="searched"
+    />
+    <div
+      v-if="settings.moduleGraphViewType === 'list' || settings.moduleGraphViewType === 'detailed-list'"
+      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+    >
+      <span op50>{{ searched.length }} of {{ modules.length }}</span>
+    </div>
+
+    <div
+      v-if="selectedModuleQuery && query" fixed inset-0
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      @click.self="closeCurrentPanel"
+    >
+      <div
+        :key="selectedModuleQuery"
+        fixed right-0 bottom-0 top-20 left-20 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+      >
+        <DataModuleDetailsLoader
+          :module="selectedModuleQuery"
+          :query="query"
+          :modules="modules"
+          :root="root"
+          @close="closeCurrentPanel"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/pages/plugins.vue b/packages/vite/src/app/pages/plugins.vue
new file mode 100644
index 00000000..61d6e62e
--- /dev/null
+++ b/packages/vite/src/app/pages/plugins.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+import type { ViteModuleListItem } from '~/types/modules'
+import type { VitePluginItem } from '~/types/plugins'
+import DataSearchPanel from '@vitejs/devtools-ui/components/DataSearchPanel.vue'
+import PluginsFlatList from '@vitejs/devtools-ui/components/PluginsFlatList.vue'
+import { computedWithControl, onKeyDown, useDebounceFn, watchDebounced } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import { computed, onMounted, ref, shallowRef } from 'vue'
+import { useRoute, useRouter } from '#app/composables/router'
+import { useRpc } from '#imports'
+import { onInspectModuleUpdated } from '~/composables/rpc'
+import { DefaultPluginType, getPluginTypeFromName, PluginTypeRules } from '~/utils/icon'
+
+type InspectMetadata = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-metadata']>>
+type InspectModule = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-modules-list']>>[number]
+type InspectQuery = Parameters<DevToolsRpcServerFunctions['vite:inspect:get-modules-list']>[0]
+
+interface SerializedPlugin {
+  name?: unknown
+  enforce?: unknown
+}
+
+const rpc = useRpc()
+const route = useRoute()
+const router = useRouter()
+
+const metadata = shallowRef<InspectMetadata | null>(null)
+const modules = shallowRef<ViteModuleListItem[]>([])
+const loading = ref(true)
+const error = ref<Error | null>(null)
+
+const selectedPluginQuery = computed(() => typeof route.query.plugin === 'string' ? route.query.plugin : undefined)
+
+const searchValue = ref<{ search: string, selected: string[] | null }>({
+  search: (route.query.search || '') as string,
+  selected: (route.query.plugin_types ? toArray(route.query.plugin_types) : null) as string[] | null,
+})
+
+const currentInstance = computed(() => metadata.value?.instances[0])
+const currentEnv = computed(() => currentInstance.value?.environments[0] || '')
+const root = computed(() => currentInstance.value?.root || '')
+
+const query = computed<InspectQuery | null>(() => {
+  if (!currentInstance.value?.vite || !currentEnv.value)
+    return null
+  return {
+    vite: currentInstance.value.vite,
+    env: currentEnv.value,
+  }
+})
+
+const plugins = computed<VitePluginItem[]>(() => {
+  return currentInstance.value?.plugins.map((plugin, index) => normalizePlugin(plugin, index)) ?? []
+})
+
+const searchFilterTypes = computed(() => {
+  return [
+    ...PluginTypeRules.filter((rule) => {
+      return plugins.value.some(item => rule.match.test(item.name))
+    }),
+    DefaultPluginType,
+  ]
+})
+
+const filtered = computed(() => {
+  let result = plugins.value
+
+  if (searchValue.value.selected) {
+    result = result.filter((plugin) => {
+      const type = getPluginTypeFromName(plugin.name)
+      return searchValue.value.selected!.includes(type.name)
+    })
+  }
+  return result
+})
+
+const fuse = computedWithControl(
+  () => filtered.value,
+  () => new Fuse(filtered.value, {
+    includeScore: true,
+    keys: ['name'],
+    ignoreLocation: true,
+    threshold: 0.4,
+  }),
+)
+
+const searched = computed(() => {
+  if (!searchValue.value.search)
+    return filtered.value
+  return fuse.value
+    .search(searchValue.value.search)
+    .map(result => result.item)
+})
+
+watchDebounced(
+  searchValue.value,
+  (value) => {
+    router.replace({
+      query: clearUndefined({
+        ...route.query,
+        search: value.search || undefined,
+        plugin_types: value.selected || undefined,
+      }),
+    })
+  },
+  { debounce: 500 },
+)
+
+function normalizePlugin(plugin: unknown, index: number): VitePluginItem {
+  const value = plugin && typeof plugin === 'object' ? plugin as SerializedPlugin : {}
+  return {
+    plugin_id: index,
+    name: typeof value.name === 'string' ? value.name : `plugin-${index}`,
+    enforce: value.enforce === 'pre' || value.enforce === 'post' ? value.enforce : undefined,
+  }
+}
+
+function closeCurrentPanel() {
+  if (selectedPluginQuery.value)
+    router.replace({ query: { ...route.query, plugin: undefined } })
+}
+
+async function load(options: { silent?: boolean } = {}) {
+  if (!options.silent)
+    loading.value = true
+  error.value = null
+  try {
+    metadata.value = await rpc.value.call('vite:inspect:get-metadata')
+    if (query.value) {
+      modules.value = (await rpc.value.call('vite:inspect:get-modules-list', query.value))
+        .map(normalizeModule)
+    }
+    else {
+      modules.value = []
+    }
+  }
+  catch (err) {
+    error.value = err as Error
+  }
+  finally {
+    if (!options.silent)
+      loading.value = false
+  }
+}
+
+const reloadOnModuleUpdated = useDebounceFn(() => {
+  load({ silent: true })
+}, 100)
+
+function normalizeModule(module: InspectModule): ViteModuleListItem {
+  return {
+    ...module,
+    imports: module.deps.map(id => ({ module_id: id })),
+  }
+}
+
+function toArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.map(String) : [String(value)]
+}
+
+function clearUndefined<T extends Record<string, unknown>>(value: T): Partial<T> {
+  return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined)) as Partial<T>
+}
+
+onMounted(() => {
+  load()
+})
+
+onInspectModuleUpdated(() => {
+  reloadOnModuleUpdated()
+})
+
+onKeyDown('Escape', (event) => {
+  event.preventDefault()
+
+  if (!event.isTrusted || event.repeat)
+    return
+
+  closeCurrentPanel()
+})
+</script>
+
+<template>
+  <VisualLoading
+    v-if="loading"
+    text="Loading plugins..."
+  />
+  <div v-else-if="error" h-full flex="~ col gap-3 items-center justify-center" p8 text-center>
+    <div i-ph-warning-duotone text-4xl text-amber />
+    <div font-mono text-sm max-w-180 ws-pre-wrap>
+      {{ error.message }}
+    </div>
+    <button btn-action @click="load()">
+      <span i-ph-arrow-clockwise-duotone />
+      Retry
+    </button>
+  </div>
+  <div v-else relative min-h-screen>
+    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+      <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes" />
+    </div>
+    <PluginsFlatList :plugins="searched ?? []" scroller="window" />
+    <div
+      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+    >
+      <span op50>{{ searched.length }} of {{ plugins.length || 0 }}</span>
+    </div>
+
+    <div
+      v-if="selectedPluginQuery && query" fixed inset-0
+      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      @click.self="closeCurrentPanel"
+    >
+      <div
+        :key="selectedPluginQuery"
+        fixed right-0 bottom-0 top-20 left-20 z-panel-content
+        bg-glass border="l t base rounded-tl-xl"
+      >
+        <DataPluginDetailsLoader
+          :plugin="selectedPluginQuery"
+          :query="query"
+          :modules="modules"
+          :root="root"
+          @close="closeCurrentPanel"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/vite/src/app/state/flowmap.ts b/packages/vite/src/app/state/flowmap.ts
new file mode 100644
index 00000000..325bc1fa
--- /dev/null
+++ b/packages/vite/src/app/state/flowmap.ts
@@ -0,0 +1,10 @@
+import { useEventListener } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+export const isFlowmapSwapping = shallowRef(false)
+
+if (import.meta.client) {
+  useEventListener(window, ['pointerup', 'pointercancel', 'pointerleave'], () => {
+    isFlowmapSwapping.value = false
+  })
+}
diff --git a/packages/vite/src/app/state/settings.ts b/packages/vite/src/app/state/settings.ts
new file mode 100644
index 00000000..e64cd073
--- /dev/null
+++ b/packages/vite/src/app/state/settings.ts
@@ -0,0 +1,71 @@
+import type { RemovableRef } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+export interface ClientSettings {
+  codeviewerLineWrap: boolean
+  codeviewerDiffPanelSize: number
+  moduleGraphViewType: 'list' | 'detailed-list' | 'graph' | 'folder'
+  moduleDetailsViewType: 'flow' | 'charts' | 'imports'
+  chartAnimation: boolean
+  pluginDetailsViewType: 'flow' | 'sunburst'
+  pluginDetailsTableFields: string[] | null
+  pluginDetailsModuleTypes: string[] | null
+  pluginDetailsDurationSortType: string
+  pluginDetailSelectedHook: string
+  pluginDetailsShowType: 'changed' | 'unchanged' | 'all'
+  flowExpandResolveId: boolean
+  flowExpandTransforms: boolean
+  flowExpandLoads: boolean
+  flowShowAllTransforms: boolean
+  flowShowAllLoads: boolean
+}
+
+export const settings = useLocalStorage<ClientSettings>(
+  'vite-devtools-settings',
+  {
+    codeviewerLineWrap: false,
+    codeviewerDiffPanelSize: 50,
+    moduleGraphViewType: 'list',
+    moduleDetailsViewType: 'flow',
+    chartAnimation: true,
+    pluginDetailsViewType: 'flow',
+    pluginDetailsTableFields: null,
+    pluginDetailsModuleTypes: null,
+    pluginDetailsDurationSortType: '',
+    pluginDetailSelectedHook: '',
+    pluginDetailsShowType: 'all',
+    flowExpandResolveId: true,
+    flowExpandTransforms: true,
+    flowExpandLoads: true,
+    flowShowAllTransforms: false,
+    flowShowAllLoads: false,
+  },
+  {
+    mergeDefaults: true,
+  },
+)
+
+export function objectRefToRefs<T extends object>(obj: RemovableRef<T>): {
+  [K in keyof T]: Ref<T[K]>
+} {
+  const cache = new Map<keyof T, Ref<T[keyof T]>>()
+  return new Proxy(obj.value, {
+    get(target, prop) {
+      if (!cache.has(prop as keyof T)) {
+        cache.set(prop as keyof T, computed({
+          get() {
+            return target[prop as keyof T]
+          },
+          set(value) {
+            target[prop as keyof T] = value
+          },
+        }))
+      }
+      return cache.get(prop as keyof T)
+    },
+  }) as any
+}
+
+export const settingsRefs = objectRefToRefs(settings)
diff --git a/packages/vite/src/app/styles/cm.css b/packages/vite/src/app/styles/cm.css
new file mode 100644
index 00000000..09c337f3
--- /dev/null
+++ b/packages/vite/src/app/styles/cm.css
@@ -0,0 +1,23 @@
+:root {
+  --cm-font-family: 'Input Mono', 'FiraCode', monospace;
+}
+
+.code-viewer {
+  min-height: 80px;
+}
+
+.monaco-editor,
+.monaco-editor .margin,
+.monaco-editor .view-lines,
+.monaco-editor .view-line,
+.monaco-editor .line-numbers {
+  font-family: var(--cm-font-family) !important;
+  font-size: 13px !important;
+}
+
+.monaco-editor,
+.monaco-editor .monaco-editor-background,
+.monaco-editor .overflow-guard,
+.monaco-editor .margin {
+  background-color: transparent !important;
+}
diff --git a/packages/vite/src/app/styles/global.css b/packages/vite/src/app/styles/global.css
index f2b2ff40..9adbb432 100644
--- a/packages/vite/src/app/styles/global.css
+++ b/packages/vite/src/app/styles/global.css
@@ -1 +1,82 @@
 @import '@vitejs/devtools-ui/styles/global.css';
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Animations */
+@keyframes spin-reverse {
+  from {
+    transform: rotate(1080deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+.animate-spin-reverse,
+.hover\:animate-spin-reverse:hover {
+  animation: spin-reverse 2.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+}
+
+/* Xterm */
+.terminal.xterm {
+  height: 100%;
+  padding: 0 1.5em;
+}
+
+.terminal.xterm .xterm-rows {
+  --uno: font-mono;
+}
+
+/* Overrides Floating Vue */
+.v-popper--theme-dropdown .v-popper__inner,
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: bg-tooltip color-base font-sans rounded border border-base shadow dark:shadow-2xl;
+  box-shadow: 0 6px 30px #0000001a;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  --uno: text-sm;
+}
+
+.v-popper--theme-dropdown .v-popper__inner {
+  max-width: 50vw;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-inner,
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  --uno: border-solid border-white dark:border-#111;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer,
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  --uno: border-solid border-base;
+}
+
+.v-popper--theme-tooltip.v-popper--shown,
+.v-popper--theme-tooltip.v-popper--shown * {
+  transition: none !important;
+}
+
+.v-popper__popper--shown {
+  overflow: visible !important;
+}
+
+/* Monaco */
+.monaco-scrollable-element > .scrollbar {
+  background: transparent !important;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider {
+  background-color: var(--app-scrollbar-thumb) !important;
+  border-radius: var(--app-scrollbar-radius) !important;
+  transition: background 0.2s ease;
+}
+
+.monaco-scrollable-element > .scrollbar > .slider.active,
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+  background-color: var(--app-scrollbar-thumb-hover) !important;
+}
diff --git a/packages/vite/src/app/styles/splitpanes.css b/packages/vite/src/app/styles/splitpanes.css
new file mode 100644
index 00000000..c6c73901
--- /dev/null
+++ b/packages/vite/src/app/styles/splitpanes.css
@@ -0,0 +1,53 @@
+@import 'splitpanes/dist/splitpanes.css';
+
+
+/* Splitpanes */
+.splitpanes__pane {
+  transition: none !important;
+}
+
+.splitpanes__splitter {
+  position: relative;
+}
+
+.splitpanes__splitter:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: .2s ease;
+  content: '';
+  transition: opacity 0.4s;
+  z-index: 1;
+}
+
+.splitpanes__splitter:hover:before {
+  background: #8881;
+  opacity: 1;
+}
+
+.splitpanes--vertical>.splitpanes__splitter {
+  width: 0 !important;
+  min-width: 0 !important;
+}
+
+.splitpanes--horizontal>.splitpanes__splitter {
+  height: 0 !important;
+  min-height: 0 !important;
+}
+
+.splitpanes--vertical>.splitpanes__splitter:before {
+  left: -5px;
+  right: -5px;
+  height: 100%;
+}
+
+.splitpanes--horizontal>.splitpanes__splitter:before {
+  top: -5px;
+  bottom: -5px;
+  width: 100%;
+}
+
+.splitpanes__pane[style*="display: none"]+.splitpanes__splitter,
+.splitpanes__pane[hidden]+.splitpanes__splitter {
+  display: none;
+}
diff --git a/packages/vite/src/app/types/chart.ts b/packages/vite/src/app/types/chart.ts
new file mode 100644
index 00000000..e56c97c7
--- /dev/null
+++ b/packages/vite/src/app/types/chart.ts
@@ -0,0 +1,11 @@
+import type { TreeNode } from 'nanovis'
+import type { VitePluginBuildInfo } from './plugins'
+
+export type PluginChartInfo = Omit<VitePluginBuildInfo, 'type' | 'plugin_id' | 'plugin_name'> & {
+  type: 'module' | 'hook'
+  title: string
+  text: string
+  children?: any[]
+}
+
+export type PluginChartNode = TreeNode<PluginChartInfo | undefined>
diff --git a/packages/vite/src/app/types/modules.ts b/packages/vite/src/app/types/modules.ts
new file mode 100644
index 00000000..e902a70f
--- /dev/null
+++ b/packages/vite/src/app/types/modules.ts
@@ -0,0 +1,49 @@
+export interface ViteGraphModulePluginMetric {
+  name: string
+  transform?: number
+  resolveId?: number
+}
+
+export interface ViteModuleTransformMetric {
+  plugin_name: string
+  source_code_size: number
+  transformed_code_size: number
+  duration: number
+}
+
+export interface ViteModuleBuildMetrics {
+  resolve_ids: { duration: number }[]
+  loads: { duration: number }[]
+  transforms: ViteModuleTransformMetric[]
+}
+
+export interface ViteModuleImport {
+  module_id: string
+  kind?: string
+}
+
+export interface ViteModuleListItem {
+  id: string
+  deps: string[]
+  importers: string[]
+  imports: ViteModuleImport[]
+  plugins: ViteGraphModulePluginMetric[]
+  virtual: boolean
+  totalTime: number
+  invokeCount: number
+  sourceSize: number
+  distSize: number
+  path?: string
+  buildMetrics?: ViteModuleBuildMetrics
+}
+
+export interface ViteModuleDest {
+  full: string
+  path: string
+}
+
+export interface ViteModuleTreeNode {
+  name?: string
+  children: Record<string, ViteModuleTreeNode>
+  items: ViteModuleDest[]
+}
diff --git a/packages/vite/src/app/types/plugins.ts b/packages/vite/src/app/types/plugins.ts
new file mode 100644
index 00000000..fa20cb43
--- /dev/null
+++ b/packages/vite/src/app/types/plugins.ts
@@ -0,0 +1,10 @@
+import type { DevToolsRpcServerFunctions } from '@vitejs/devtools-kit'
+
+export type VitePluginDetails = Awaited<ReturnType<DevToolsRpcServerFunctions['vite:inspect:get-plugin-details']>>
+export type VitePluginBuildInfo = VitePluginDetails['calls'][number]
+
+export interface VitePluginItem {
+  plugin_id: number
+  name: string
+  enforce?: 'pre' | 'post'
+}
diff --git a/packages/vite/src/app/utils/cache.ts b/packages/vite/src/app/utils/cache.ts
new file mode 100644
index 00000000..6f68ffc8
--- /dev/null
+++ b/packages/vite/src/app/utils/cache.ts
@@ -0,0 +1,9 @@
+export function makeCachedFunction<T extends (...args: any[]) => any>(fn: T): T {
+  const cache = new Map<string, ReturnType<T>>()
+  return ((...args: Parameters<T>) => {
+    const key = JSON.stringify(args)
+    if (!cache.has(key))
+      cache.set(key, fn(...args))
+    return cache.get(key)
+  }) as T
+}
diff --git a/packages/vite/src/app/utils/color.ts b/packages/vite/src/app/utils/color.ts
new file mode 100644
index 00000000..b2bc84c4
--- /dev/null
+++ b/packages/vite/src/app/utils/color.ts
@@ -0,0 +1,16 @@
+import { getHashColorFromString, getHsla } from '@vitejs/devtools-ui/utils/color'
+
+export const predefinedColorMap = {
+  error: 0,
+  client: 60,
+  ssr: 270,
+  vite: 250,
+  virtual: 160,
+} as Record<string, number>
+
+export function getPluginColor(name: string, opacity = 1): string {
+  name = name.replace(/[^a-z]+/gi, '').toLowerCase()
+  if (name in predefinedColorMap)
+    return getHsla(predefinedColorMap[name]!, opacity)
+  return getHashColorFromString(name, opacity)
+}
diff --git a/packages/vite/src/app/utils/filepath.ts b/packages/vite/src/app/utils/filepath.ts
new file mode 100644
index 00000000..50b72ff3
--- /dev/null
+++ b/packages/vite/src/app/utils/filepath.ts
@@ -0,0 +1,145 @@
+import { relative } from 'pathe'
+import { makeCachedFunction } from './cache'
+
+const NODE_MODULES = 'node_modules'
+
+export function normalizeModulePath(path: string) {
+  return path
+    .replace(/%2F/gi, '/')
+    .replace(/\\/g, '/')
+}
+
+export function isPackageName(name: string) {
+  return name[0] === '#' || !!name.match(/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/)
+}
+
+export function getModuleNameFromPath(path: string) {
+  const normalizedPath = normalizeModulePath(path)
+  if (isPackageName(normalizedPath))
+    return normalizedPath
+
+  const segments = normalizedPath.split('/')
+  const packageRoot = findNodeModulesPackage(segments)
+
+  return packageRoot?.name ?? findPackageLocator(segments)?.name
+}
+
+function getModuleSubpathFromPath(path: string) {
+  return path.match(/.*\/node_modules\/(.*)$/)?.[1]
+}
+
+export const parseReadablePath = makeCachedFunction((path: string, root: string) => {
+  const parsedPath = normalizeModulePath(path)
+  if (isPackageName(parsedPath)) {
+    return {
+      moduleName: parsedPath,
+      path: parsedPath,
+    }
+  }
+
+  if (/^\w+:/.test(parsedPath) && !(/^[a-z]:\\/i.test(path))) {
+    return {
+      moduleName: parsedPath,
+      path: parsedPath,
+    }
+  }
+
+  const moduleName = getModuleNameFromPath(parsedPath)
+  const subpath = getModuleSubpathFromPath(parsedPath)
+  if (moduleName && subpath) {
+    return {
+      moduleName,
+      path: subpath,
+    }
+  }
+
+  try {
+    let result = relative(root, parsedPath)
+    if (!result.startsWith('./') && !result.startsWith('../'))
+      result = `./${result}`
+    return { path: result }
+  }
+  catch {
+    return { path: parsedPath }
+  }
+})
+
+function findNodeModulesPackage(segments: string[]) {
+  for (const nodeModulesIndex of getNodeModulesIndexes(segments)) {
+    const name = getPackageNameFromSegments(segments, nodeModulesIndex + 1)
+    if (!name)
+      continue
+
+    return {
+      name,
+      endIndex: nodeModulesIndex + 1 + (name.startsWith('@') ? 2 : 1),
+    }
+  }
+}
+
+function getPackageNameFromSegments(segments: string[], startIndex: number) {
+  const firstSegment = segments[startIndex]
+  if (!firstSegment)
+    return undefined
+
+  const packageName = firstSegment.startsWith('@')
+    ? `${firstSegment}/${segments[startIndex + 1] ?? ''}`
+    : firstSegment
+
+  return isPackageName(packageName) ? packageName : undefined
+}
+
+function findPackageLocator(segments: string[]) {
+  for (const nodeModulesIndex of getNodeModulesIndexes(segments)) {
+    if (getPackageNameFromSegments(segments, nodeModulesIndex + 1))
+      continue
+
+    const startIndex = nodeModulesIndex + 1
+    const nextNodeModulesIndex = segments.indexOf(NODE_MODULES, startIndex)
+    const boundaryIndex = nextNodeModulesIndex >= 0 ? nextNodeModulesIndex : segments.length
+
+    for (const candidateIndex of [startIndex, startIndex + 1]) {
+      if (candidateIndex >= boundaryIndex)
+        continue
+
+      const segment = segments[candidateIndex]
+      if (!segment)
+        continue
+
+      const packageLocator = parsePackageLocatorSegment(segment)
+      if (packageLocator)
+        return { ...packageLocator, index: candidateIndex }
+    }
+  }
+}
+
+function getNodeModulesIndexes(segments: string[]) {
+  return segments
+    .map((segment, index) => segment === NODE_MODULES ? index : -1)
+    .filter(index => index >= 0)
+    .reverse()
+}
+
+function parsePackageLocatorSegment(segment: string): { name: string, version: string } | undefined {
+  const versionIndex = segment.startsWith('@')
+    ? segment.indexOf('@', 1)
+    : segment.indexOf('@')
+
+  if (versionIndex <= 0)
+    return undefined
+
+  const name = segment
+    .slice(0, versionIndex)
+    .replace(/\+/g, '/')
+  const version = segment
+    .slice(versionIndex + 1)
+    .split('_')[0]
+
+  if (!isPackageName(name) || !version)
+    return undefined
+
+  return {
+    name,
+    version,
+  }
+}
diff --git a/packages/vite/src/app/utils/format.ts b/packages/vite/src/app/utils/format.ts
new file mode 100644
index 00000000..08f5482a
--- /dev/null
+++ b/packages/vite/src/app/utils/format.ts
@@ -0,0 +1,61 @@
+import type { ViteModuleDest, ViteModuleTreeNode } from '~/types/modules'
+
+export function bytesToHumanSize(bytes: number, digits = 2) {
+  const sizes = ['Bytes', 'kB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes || 1) / Math.log(1000))
+  if (i === 0)
+    return [bytes, 'B']
+  return [(+(bytes / 1000 ** i).toFixed(digits)).toLocaleString(), sizes[i]]
+}
+
+export function toTree(modules: ViteModuleDest[], name: string) {
+  const node: ViteModuleTreeNode = { name, children: {}, items: [] }
+
+  function add(mod: ViteModuleDest, parts: string[], current = node) {
+    if (parts.length <= 1) {
+      current.items.push(mod)
+      return
+    }
+
+    const first = parts.shift()!
+    if (!current.children[first])
+      current.children[first] = { name: first, children: {}, items: [] }
+    add(mod, parts, current.children[first])
+  }
+
+  modules.forEach((m) => {
+    const parts = m.path.split(/\//g).filter(Boolean)
+    add(m, parts)
+  })
+
+  function flat(node: ViteModuleTreeNode) {
+    const children = Object.values(node.children)
+    if (children.length === 1 && !node.items.length) {
+      const child = children[0]!
+      node.name = node.name ? `${node.name}/${child.name}` : child.name
+      node.items = child.items
+      node.children = child.children
+      flat(node)
+    }
+    else {
+      children.forEach(flat)
+    }
+  }
+
+  Object.values(node.children).forEach(flat)
+
+  return node
+}
+
+export function normalizeTimestamp(timestamp: number) {
+  return new Date(timestamp).toLocaleString(undefined, {
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    fractionalSecondDigits: 3,
+  })
+}
diff --git a/packages/vite/src/app/utils/icon.ts b/packages/vite/src/app/utils/icon.ts
new file mode 100644
index 00000000..75d4ff63
--- /dev/null
+++ b/packages/vite/src/app/utils/icon.ts
@@ -0,0 +1,190 @@
+import { makeCachedFunction } from './cache'
+
+export interface FilterMatchRule {
+  match: RegExp
+  name: string
+  description: string
+  icon: string
+}
+
+// @unocss-include
+export const ModuleTypeRules: FilterMatchRule[] = [
+  {
+    match: /[\\/]node_modules[\\/]/i,
+    name: 'node_modules',
+    description: 'Node Modules',
+    icon: 'i-catppuccin-npm',
+  },
+  {
+    match: /virtual:|^\0/,
+    name: 'virtual',
+    description: 'Virtual',
+    icon: 'i-catppuccin-symlink',
+  },
+  {
+    match: /^@?[\w-]+\/?/,
+    name: 'package',
+    description: 'Package',
+    icon: 'i-catppuccin-java-class-abstract',
+  },
+  {
+    match: /\.vue(?:$|\?)/i,
+    name: 'vue',
+    description: 'Vue',
+    icon: 'i-catppuccin-vue',
+  },
+  {
+    match: /\.[cm]?[tj]sx(?:$|\?)/i,
+    name: 'jsx',
+    description: 'JavaScript React',
+    icon: 'i-catppuccin-javascript-react',
+  },
+  {
+    match: /\.[cm]?ts(?:$|\?)/i,
+    name: 'ts',
+    description: 'TypeScript',
+    icon: 'i-catppuccin-typescript',
+  },
+  {
+    match: /\.[cm]?js(?:$|\?)/i,
+    name: 'js',
+    description: 'JavaScript',
+    icon: 'i-catppuccin-javascript',
+  },
+  {
+    match: /\.svelte(?:$|\?)/i,
+    name: 'svelte',
+    description: 'Svelte',
+    icon: 'i-catppuccin-svelte',
+  },
+  {
+    match: /\.mdx(?:$|\?)/i,
+    name: 'mdx',
+    description: 'MDX',
+    icon: 'i-catppuccin-mdx',
+  },
+  {
+    match: /\.md(?:$|\?)/i,
+    name: 'md',
+    description: 'Markdown',
+    icon: 'i-catppuccin-markdown',
+  },
+  {
+    match: /\.astro(?:$|\?)/i,
+    name: 'astro',
+    description: 'Astro',
+    icon: 'i-catppuccin-astro',
+  },
+  {
+    match: /\.angular(?:$|\?)/i,
+    name: 'angular',
+    description: 'Angular',
+    icon: 'i-catppuccin-angular',
+  },
+  {
+    match: /\.html?(?:$|\?)/i,
+    name: 'html',
+    description: 'HTML',
+    icon: 'i-catppuccin-html',
+  },
+  {
+    match: /\.(?:css|scss|less|postcss)(?:$|\?)/i,
+    name: 'css',
+    description: 'CSS',
+    icon: 'i-catppuccin-css',
+  },
+  {
+    match: /\.jsonc?5?(?:$|\?)/i,
+    name: 'json',
+    description: 'JSON',
+    icon: 'i-catppuccin-json',
+  },
+  {
+    match: /\.(?:yaml|yml)(?:$|\?)/i,
+    name: 'yaml',
+    description: 'YAML',
+    icon: 'i-catppuccin-yaml',
+  },
+  {
+    match: /\.toml(?:$|\?)/i,
+    name: 'toml',
+    description: 'TOML',
+    icon: 'i-catppuccin-toml',
+  },
+  {
+    match: /\.svg(?:$|\?)/i,
+    name: 'svg',
+    description: 'SVG',
+    icon: 'i-catppuccin-svg',
+  },
+]
+
+// @unocss-include
+export const PluginTypeRules: FilterMatchRule[] = [
+  {
+    match: /^(replace|define|alias)$/,
+    name: 'rollup',
+    description: 'Rollup',
+    icon: 'i-catppuccin-rollup',
+  },
+  {
+    match: /^vite:/i,
+    name: 'vite',
+    description: 'Vite',
+    icon: 'i-catppuccin-vite',
+  },
+  {
+    match: /^unocss:/i,
+    name: 'unocss',
+    description: 'Unocss',
+    icon: 'i-catppuccin-unocss',
+  },
+  {
+    match: /^nuxt:/i,
+    name: 'nuxt',
+    description: 'Nuxt',
+    icon: 'i-catppuccin-nuxt',
+  },
+  {
+    match: /^builtin:/i,
+    name: 'builtin',
+    description: 'Builtin',
+    icon: 'i-catppuccin-folder-prisma',
+  },
+]
+
+export const DefaultFileTypeRule: FilterMatchRule = {
+  name: 'file',
+  match: /.*/,
+  description: 'File',
+  icon: 'i-catppuccin-file',
+}
+
+export const DefaultPluginType: FilterMatchRule = {
+  name: 'plugin',
+  match: /.*/,
+  description: 'User Plugins',
+  icon: 'i-catppuccin-folder-plugins',
+}
+
+export const getFileTypeFromModuleId = makeCachedFunction((moduleId: string): FilterMatchRule => {
+  moduleId = moduleId
+    .replace(/(\?|&)v=[^&]*/, '$1')
+    .replace(/\?$/, '')
+
+  for (const rule of ModuleTypeRules) {
+    if (rule.match.test(moduleId))
+      return rule
+  }
+
+  return DefaultFileTypeRule
+})
+
+export const getPluginTypeFromName = makeCachedFunction((name: string): FilterMatchRule => {
+  for (const rule of PluginTypeRules) {
+    if (rule.match.test(name))
+      return rule
+  }
+
+  return DefaultPluginType
+})
diff --git a/packages/vite/src/app/worker/diff.ts b/packages/vite/src/app/worker/diff.ts
new file mode 100644
index 00000000..3024edd2
--- /dev/null
+++ b/packages/vite/src/app/worker/diff.ts
@@ -0,0 +1,18 @@
+import type { Remote } from 'comlink'
+import type { Exports } from './diff.worker'
+import { wrap } from 'comlink'
+
+let diffWorker: Remote<Exports> | undefined
+
+export async function calculateDiffWithWorker(left: string, right: string) {
+  if (!diffWorker) {
+    diffWorker = wrap(
+      new Worker(new URL('./diff.worker.ts', import.meta.url), {
+        type: 'module',
+      }),
+    )
+  }
+
+  const result = await diffWorker.calculateDiff(left, right)
+  return result
+}
diff --git a/packages/vite/src/app/worker/diff.worker.ts b/packages/vite/src/app/worker/diff.worker.ts
new file mode 100644
index 00000000..c0b09a81
--- /dev/null
+++ b/packages/vite/src/app/worker/diff.worker.ts
@@ -0,0 +1,16 @@
+import { expose } from 'comlink'
+import { diffCleanupSemantic, diffMain } from 'diff-match-patch-es'
+
+function calculateDiff(left: string, right: string) {
+  const changes = diffMain(left.replace(/\r\n/g, '\n'), right.replace(/\r\n/g, '\n'))
+  diffCleanupSemantic(changes)
+  return changes
+}
+
+const exports = {
+  calculateDiff,
+}
+
+export type Exports = typeof exports
+
+expose(exports)
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index 336ce12b..520f0e69 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -1 +1 @@
-export {}
+export * from './node'
diff --git a/packages/vite/src/modules/rpc.ts b/packages/vite/src/modules/rpc.ts
index c56c63d3..184d6790 100644
--- a/packages/vite/src/modules/rpc.ts
+++ b/packages/vite/src/modules/rpc.ts
@@ -1,6 +1,6 @@
 import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
 import { DevToolsServer } from '../../../core/src/node/plugins/server'
-import { rpcFunctions } from '../node/rpc'
+import { DevToolsViteInspect } from '../node/inspect/plugin'
 
 export default defineNuxtModule({
   meta: {
@@ -8,17 +8,7 @@ export default defineNuxtModule({
     configKey: 'devtoolsRpc',
   },
   setup() {
-    addVitePlugin({
-      name: 'vite:devtools:vite',
-      devtools: {
-        setup(ctx) {
-          for (const fn of rpcFunctions) {
-            ctx.rpc.register(fn as any)
-          }
-        },
-      },
-    })
-
+    addVitePlugin(DevToolsViteInspect())
     addVitePlugin(DevToolsServer())
   },
 })
diff --git a/packages/vite/src/node/__tests__/inspect-context.test.ts b/packages/vite/src/node/__tests__/inspect-context.test.ts
new file mode 100644
index 00000000..c74937d0
--- /dev/null
+++ b/packages/vite/src/node/__tests__/inspect-context.test.ts
@@ -0,0 +1,384 @@
+import type { Environment, Plugin, ResolvedConfig } from 'vite'
+import { describe, expect, it } from 'vitest'
+import { ViteInspectContext } from '../inspect/context'
+import { hijackPlugin } from '../inspect/hijack'
+
+function createFixture(options: {
+  root?: string
+} = {}) {
+  const config = {
+    root: options.root || '/project',
+    plugins: [
+      { name: 'vite:load-fallback' },
+      { name: 'plugin-a', enforce: 'pre' },
+      { name: 'plugin-b' },
+    ],
+  } as ResolvedConfig
+  const env = {
+    name: 'client',
+    mode: 'build',
+    getTopLevelConfig: () => config,
+  } as Environment
+  const ctx = new ViteInspectContext()
+  const vite = ctx.getViteContext(config)
+  const envCtx = vite.getEnvContext(env)
+
+  return {
+    ctx,
+    vite,
+    env,
+    envCtx,
+  }
+}
+
+describe('vite inspect context', () => {
+  it('records module transforms and normalizes version query by default', () => {
+    const { envCtx } = createFixture()
+
+    envCtx.recordTransform('/src/main.ts?v=123456', {
+      name: 'plugin-a',
+      result: 'export const value = 1',
+      start: 10,
+      end: 16,
+      order: 'pre',
+    }, 'const value = 1')
+
+    const modules = envCtx.getModulesList()
+
+    expect(modules).toMatchObject([
+      {
+        id: '/src/main.ts',
+        plugins: [
+          { name: '__load__', transform: 0 },
+          { name: 'plugin-a', transform: 6 },
+        ],
+        totalTime: 6,
+        invokeCount: 1,
+        sourceSize: 15,
+        distSize: 22,
+      },
+    ])
+  })
+
+  it('records resolveId chains and plugin metrics', () => {
+    const { envCtx } = createFixture()
+
+    envCtx.recordResolveId('/src/main.ts', {
+      name: 'plugin-a',
+      result: '/src/resolved.ts',
+      start: 0,
+      end: 4,
+    })
+    envCtx.recordTransform('/src/resolved.ts', {
+      name: 'plugin-b',
+      result: 'export {}',
+      start: 5,
+      end: 8,
+    }, '')
+
+    expect(envCtx.resolveId('/src/main.ts')).toBe('/src/resolved.ts')
+    expect(envCtx.getPluginMetrics()).toEqual(expect.arrayContaining([
+      expect.objectContaining({
+        name: 'plugin-a',
+        resolveId: {
+          invokeCount: 1,
+          totalTime: 4,
+        },
+      }),
+      expect.objectContaining({
+        name: 'plugin-b',
+        transform: {
+          invokeCount: 1,
+          totalTime: 3,
+        },
+      }),
+    ]))
+  })
+
+  it('records plugin call details by plugin id', () => {
+    const { envCtx, vite } = createFixture()
+
+    const pluginA = vite.config.plugins[1]!
+    const pluginB = vite.config.plugins[2]!
+
+    envCtx.recordResolveId('/src/main.ts', {
+      name: 'plugin-a',
+      result: '/src/resolved.ts',
+      start: 0,
+      end: 4,
+    }, pluginA)
+    envCtx.recordLoad('/src/resolved.ts', {
+      name: 'plugin-a',
+      result: 'export const value = 1',
+      start: 5,
+      end: 7,
+    }, pluginA)
+    envCtx.recordTransform('/src/resolved.ts', {
+      name: 'plugin-b',
+      result: 'export const value = 2',
+      start: 8,
+      end: 14,
+    }, 'export const value = 1', pluginB)
+
+    expect(envCtx.getPluginDetails(1)).toMatchObject({
+      plugin_name: 'plugin-a',
+      plugin_id: 1,
+      calls: [
+        {
+          type: 'resolve',
+          plugin_id: 1,
+          plugin_name: 'plugin-a',
+          module: '/src/resolved.ts',
+          duration: 4,
+          timestamp_start: 0,
+          timestamp_end: 4,
+        },
+        {
+          type: 'load',
+          plugin_id: 1,
+          plugin_name: 'plugin-a',
+          module: '/src/resolved.ts',
+          duration: 2,
+          unchanged: false,
+        },
+      ],
+      resolveIdMetrics: [
+        expect.objectContaining({ type: 'resolve' }),
+      ],
+      loadMetrics: [
+        expect.objectContaining({ type: 'load' }),
+      ],
+      transformMetrics: [],
+    })
+
+    expect(envCtx.getPluginDetails(2)).toMatchObject({
+      plugin_name: 'plugin-b',
+      transformMetrics: [
+        expect.objectContaining({
+          type: 'transform',
+          duration: 6,
+          unchanged: false,
+        }),
+      ],
+    })
+  })
+
+  it('clears module-related inspect data on invalidation', () => {
+    const { envCtx, vite } = createFixture()
+
+    const pluginA = vite.config.plugins[1]!
+    const pluginB = vite.config.plugins[2]!
+
+    envCtx.recordResolveId('/src/main.ts', {
+      name: 'plugin-a',
+      result: '/src/resolved.ts',
+      start: 0,
+      end: 4,
+    }, pluginA)
+    envCtx.recordLoad('/src/resolved.ts', {
+      name: 'plugin-a',
+      result: 'export const value = 1',
+      start: 5,
+      end: 7,
+    }, pluginA)
+    envCtx.recordTransform('/src/resolved.ts', {
+      name: 'plugin-b',
+      result: 'export const value = 2',
+      start: 8,
+      end: 14,
+    }, 'export const value = 1', pluginB)
+    envCtx.recordTransform('/src/other.ts', {
+      name: 'plugin-a',
+      result: 'export const other = 1',
+      start: 15,
+      end: 18,
+    }, '', pluginA)
+
+    envCtx.invalidate('/src/resolved.ts')
+
+    expect(envCtx.data.transform['/src/resolved.ts']).toBeUndefined()
+    expect(envCtx.data.transformCounter['/src/resolved.ts']).toBeUndefined()
+    expect(envCtx.data.resolveId['/src/main.ts']).toBeUndefined()
+    expect(envCtx.getModulesList().map(module => module.id)).toEqual(['/src/other.ts'])
+    expect(envCtx.getPluginDetails(1).calls.map(call => call.module)).toEqual(['/src/other.ts'])
+    expect(envCtx.getPluginDetails(2).calls).toEqual([])
+    expect(envCtx.getPluginMetrics()).toEqual(expect.arrayContaining([
+      expect.objectContaining({
+        name: 'plugin-a',
+        transform: {
+          invokeCount: 1,
+          totalTime: 3,
+        },
+        resolveId: {
+          invokeCount: 0,
+          totalTime: 0,
+        },
+      }),
+    ]))
+  })
+
+  it('records empty string load results as load output', async () => {
+    const { ctx, env, envCtx, vite } = createFixture()
+    const plugin = vite.config.plugins[1]! as Plugin & {
+      load: NonNullable<Plugin['load']>
+    }
+    plugin.load = () => ''
+
+    hijackPlugin(plugin, ctx)
+    await (plugin.load as any).call({ environment: env }, '/src/empty.ts')
+
+    expect(envCtx.getPluginDetails(1)).toMatchObject({
+      loadMetrics: [
+        {
+          type: 'load',
+          plugin_id: 1,
+          plugin_name: 'plugin-a',
+          module: '/src/empty.ts',
+          unchanged: false,
+        },
+      ],
+    })
+    await expect(envCtx.getModuleTransformInfo('/src/empty.ts')).resolves.toMatchObject({
+      transforms: [
+        {
+          name: 'plugin-a',
+          result: '',
+        },
+      ],
+    })
+  })
+
+  it('keeps empty string transform results in module metrics', async () => {
+    const { envCtx, vite } = createFixture()
+    const pluginA = vite.config.plugins[1]!
+    const pluginB = vite.config.plugins[2]!
+
+    envCtx.recordLoad('/src/empty.ts', {
+      name: 'plugin-a',
+      result: '',
+      start: 0,
+      end: 2,
+    }, pluginA)
+    envCtx.recordTransform('/src/empty.ts', {
+      name: 'plugin-b',
+      result: 'export {}',
+      start: 3,
+      end: 8,
+    }, '', pluginB)
+
+    expect(envCtx.getModulesList()).toMatchObject([
+      {
+        id: '/src/empty.ts',
+        plugins: [
+          { name: 'plugin-a', transform: 2 },
+          { name: 'plugin-b', transform: 5 },
+        ],
+        totalTime: 7,
+        sourceSize: 0,
+        distSize: 9,
+      },
+    ])
+    await expect(envCtx.getModuleTransformInfo('/src/empty.ts')).resolves.toMatchObject({
+      transforms: [
+        {
+          name: 'plugin-a',
+          result: '',
+        },
+        {
+          name: 'plugin-b',
+          result: 'export {}',
+        },
+      ],
+    })
+  })
+
+  it('keeps same-name plugin metrics separated by plugin id', () => {
+    const config = {
+      root: '/project',
+      plugins: [
+        { name: 'plugin-a' },
+        { name: 'plugin-a' },
+      ],
+    } as ResolvedConfig
+    const env = {
+      name: 'client',
+      mode: 'build',
+      getTopLevelConfig: () => config,
+    } as Environment
+    const ctx = new ViteInspectContext()
+    const envCtx = ctx.getViteContext(config).getEnvContext(env)
+
+    envCtx.recordTransform('/src/a.ts', {
+      name: 'plugin-a',
+      result: 'export const a = 1',
+      start: 0,
+      end: 3,
+    }, '', config.plugins[0])
+    envCtx.recordTransform('/src/b.ts', {
+      name: 'plugin-a',
+      result: 'export const b = 1',
+      start: 4,
+      end: 9,
+    }, '', config.plugins[1])
+
+    expect(envCtx.getPluginMetrics().filter(metric => metric.name === 'plugin-a')).toMatchObject([
+      {
+        plugin_id: 0,
+        transform: {
+          invokeCount: 1,
+          totalTime: 3,
+        },
+      },
+      {
+        plugin_id: 1,
+        transform: {
+          invokeCount: 1,
+          totalTime: 5,
+        },
+      },
+    ])
+  })
+
+  it('normalizes absolute node_modules ids relative to project root', async () => {
+    const { envCtx } = createFixture({
+      root: '/workspace/packages/vite',
+    })
+    const rawId = '/workspace/node_modules/.pnpm/unhead@1.0.0/node_modules/unhead/dist/index.mjs'
+
+    envCtx.recordTransform(`${rawId}?v=123456`, {
+      name: 'plugin-a',
+      result: 'export const head = {}',
+      start: 10,
+      end: 16,
+      order: 'pre',
+    }, 'const head = {}')
+
+    const modules = envCtx.getModulesList()
+
+    expect(modules[0]?.id).toBe('../../node_modules/.pnpm/unhead@1.0.0/node_modules/unhead/dist/index.mjs')
+    await expect(envCtx.getModuleTransformInfo(modules[0]!.id)).resolves.toMatchObject({
+      resolvedId: rawId,
+      transforms: [
+        { name: '__load__' },
+        { name: 'plugin-a' },
+      ],
+    })
+  })
+
+  it('exposes metadata for vite instances and environments', () => {
+    const { ctx, vite } = createFixture()
+
+    expect(ctx.getMetadata()).toMatchObject({
+      instances: [
+        {
+          root: '/project',
+          vite: vite.id,
+          environments: ['client'],
+          environmentPlugins: {
+            client: [0, 1, 2],
+          },
+        },
+      ],
+    })
+  })
+})
diff --git a/packages/vite/src/node/__tests__/inspect-plugin.test.ts b/packages/vite/src/node/__tests__/inspect-plugin.test.ts
new file mode 100644
index 00000000..a941f1df
--- /dev/null
+++ b/packages/vite/src/node/__tests__/inspect-plugin.test.ts
@@ -0,0 +1,42 @@
+import type { Plugin, ResolvedConfig } from 'vite'
+import { describe, expect, it } from 'vitest'
+import { createDevToolsContext } from '../../../../core/src/node/context'
+import { DevToolsViteInspect } from '../inspect/plugin'
+
+function createConfig(plugin: Plugin, command: 'serve' | 'build'): ResolvedConfig {
+  return {
+    root: process.cwd(),
+    command,
+    plugins: [plugin],
+    environments: {
+      client: {},
+    },
+    createResolver: () => async (id: string) => id,
+  } as unknown as ResolvedConfig
+}
+
+async function createContext(command: 'serve' | 'build') {
+  const plugin = DevToolsViteInspect()
+  const config = createConfig(plugin, command)
+
+  await (plugin.configResolved as (config: ResolvedConfig) => void | Promise<void>)(config)
+
+  return createDevToolsContext(config)
+}
+
+describe('devToolsViteInspect', () => {
+  it('registers inspect RPC in dev mode', async () => {
+    const ctx = await createContext('serve')
+
+    expect(ctx.rpc.definitions.has('vite:inspect:get-metadata')).toBe(true)
+    expect(ctx.rpc.definitions.has('vite:inspect:get-modules-list')).toBe(true)
+    expect(ctx.rpc.definitions.has('vite:inspect:get-plugin-details')).toBe(true)
+  })
+
+  it('keeps inspect RPC disabled in build mode', async () => {
+    const ctx = await createContext('build')
+
+    expect(ctx.rpc.definitions.has('vite:meta-info')).toBe(true)
+    expect(ctx.rpc.definitions.has('vite:inspect:get-metadata')).toBe(false)
+  })
+})
diff --git a/packages/vite/src/node/diagnostics.ts b/packages/vite/src/node/diagnostics.ts
new file mode 100644
index 00000000..28c25ef2
--- /dev/null
+++ b/packages/vite/src/node/diagnostics.ts
@@ -0,0 +1,14 @@
+import { createConsoleReporter, defineDiagnostics } from 'nostics'
+
+export const diagnostics = /* #__PURE__ */ defineDiagnostics({
+  docsBase: 'https://devtools.vite.dev/errors',
+  reporters: [createConsoleReporter()],
+  codes: {
+    VDT0001: {
+      why: 'Vite inspect context is not available for this DevTools context.',
+    },
+    VDT0002: {
+      why: (p: { target: string, id: string }) => `Vite inspect target "${p.id}" was not found in ${p.target}.`,
+    },
+  },
+})
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
new file mode 100644
index 00000000..5ae282ef
--- /dev/null
+++ b/packages/vite/src/node/index.ts
@@ -0,0 +1,3 @@
+export { DevToolsViteInspect } from './inspect/plugin'
+export * from './inspect/types'
+export { DevToolsViteUI, DevToolsViteUIPlugin } from './plugin'
diff --git a/packages/vite/src/node/inspect/context.ts b/packages/vite/src/node/inspect/context.ts
new file mode 100644
index 00000000..cbf90e2a
--- /dev/null
+++ b/packages/vite/src/node/inspect/context.ts
@@ -0,0 +1,567 @@
+import type { ViteDevToolsNodeContext } from '@vitejs/devtools-kit'
+import type {
+  Environment,
+  Plugin,
+  ResolvedConfig,
+} from 'vite'
+import type {
+  ViteInspectModuleInfo,
+  ViteInspectModulePluginMetric,
+  ViteInspectModuleTransformInfo,
+  ViteInspectPluginCallInfo,
+  ViteInspectPluginDetails,
+  ViteInspectPluginMetric,
+  ViteInspectQuery,
+  ViteInspectResolveIdInfo,
+  ViteInspectServerMetrics,
+  ViteInspectTransformInfo,
+} from './types'
+import { resolve } from 'node:path'
+import { createFilter } from 'vite'
+import { diagnostics } from '../diagnostics'
+import {
+  DUMMY_LOAD_PLUGIN_NAME,
+  getUtf8Size,
+  normalizeModuleId,
+  removeVersionQuery,
+  serializePlugin,
+} from './utils'
+
+let viteCount = 0
+
+interface ModuleInfoProvider {
+  getModuleInfo: (id: string) => {
+    importedIds?: readonly string[]
+    importers?: readonly string[]
+  } | null | undefined
+}
+
+const contextMap = new WeakMap<ViteDevToolsNodeContext, ViteInspectContext>()
+
+export function setViteInspectContext(devtoolsCtx: ViteDevToolsNodeContext, ctx: ViteInspectContext): void {
+  contextMap.set(devtoolsCtx, ctx)
+}
+
+export function getViteInspectContext(devtoolsCtx: ViteDevToolsNodeContext): ViteInspectContext {
+  const ctx = contextMap.get(devtoolsCtx)
+  if (!ctx)
+    throw diagnostics.VDT0001()
+  return ctx
+}
+
+export class ViteInspectContext {
+  readonly filter = createFilter()
+  readonly configToInstances = new Map<ResolvedConfig, ViteInspectViteContext>()
+  readonly idToInstances = new Map<string, ViteInspectViteContext>()
+
+  getMetadata() {
+    return {
+      instances: Array.from(this.idToInstances.values(), vite => ({
+        root: vite.config.root,
+        vite: vite.id,
+        plugins: vite.config.plugins.map(plugin => serializePlugin(plugin)),
+        environments: [...new Set([...vite.environmentNames, ...vite.environments.keys()])],
+        environmentPlugins: Object.fromEntries(Array.from(vite.environments.entries(), ([name, env]) => {
+          const plugins = env.env.getTopLevelConfig().plugins
+          return [name, plugins.map(plugin => vite.config.plugins.indexOf(plugin))]
+        })),
+      })),
+      embedded: false,
+    }
+  }
+
+  getViteContext(configOrId: ResolvedConfig | string): ViteInspectViteContext {
+    if (typeof configOrId === 'string') {
+      const vite = this.idToInstances.get(configOrId)
+      if (!vite)
+        throw diagnostics.VDT0002({ target: 'Vite inspect instances', id: configOrId })
+      return vite
+    }
+
+    const existing = this.configToInstances.get(configOrId)
+    if (existing)
+      return existing
+
+    const id = `vite${++viteCount}`
+    const vite = new ViteInspectViteContext(id, this, configOrId)
+    this.idToInstances.set(id, vite)
+    this.configToInstances.set(configOrId, vite)
+    return vite
+  }
+
+  getEnvContext(env: Environment | undefined): ViteInspectEnvironmentContext | undefined {
+    if (!env)
+      return undefined
+    return this.getViteContext(env.getTopLevelConfig()).getEnvContext(env)
+  }
+
+  queryEnv(query: ViteInspectQuery): ViteInspectEnvironmentContext {
+    return this.getViteContext(query.vite).getEnvContext(query.env)
+  }
+}
+
+export class ViteInspectViteContext {
+  readonly environmentNames = new Set<string>()
+  readonly environments = new Map<string, ViteInspectEnvironmentContext>()
+  readonly data: {
+    serverMetrics: ViteInspectServerMetrics
+  } = {
+    serverMetrics: {
+      middleware: {},
+    },
+  }
+
+  constructor(
+    readonly id: string,
+    readonly context: ViteInspectContext,
+    readonly config: ResolvedConfig,
+  ) {}
+
+  registerEnvironmentNames(names: Iterable<string>): void {
+    for (const name of names)
+      this.environmentNames.add(name)
+  }
+
+  getEnvContext(env: Environment | string): ViteInspectEnvironmentContext {
+    if (typeof env === 'string') {
+      const envContext = this.environments.get(env)
+      if (!envContext)
+        throw diagnostics.VDT0002({ target: `Vite inspect environments for ${this.id}`, id: env })
+      return envContext
+    }
+
+    if (env.getTopLevelConfig() !== this.config) {
+      throw diagnostics.VDT0002({
+        target: 'the current Vite config environments',
+        id: env.name,
+      })
+    }
+
+    this.environmentNames.add(env.name)
+    let envContext = this.environments.get(env.name)
+    if (!envContext) {
+      envContext = new ViteInspectEnvironmentContext(this.context, this, env)
+      this.environments.set(env.name, envContext)
+    }
+    return envContext
+  }
+}
+
+export class ViteInspectEnvironmentContext {
+  readonly data: {
+    transform: Record<string, ViteInspectTransformInfo[]>
+    resolveId: Record<string, ViteInspectResolveIdInfo[]>
+    pluginCalls: Record<number, ViteInspectPluginCallInfo[]>
+    transformCounter: Record<string, number>
+  } = {
+    transform: {},
+    resolveId: {},
+    pluginCalls: {},
+    transformCounter: {},
+  }
+
+  private pluginCallCount = 0
+
+  constructor(
+    readonly contextMain: ViteInspectContext,
+    readonly contextVite: ViteInspectViteContext,
+    readonly env: Environment,
+  ) {}
+
+  recordTransform(id: string, info: ViteInspectTransformInfo, preTransformCode: string, plugin?: Plugin): void {
+    id = this.normalizeId(id)
+    const pluginId = this.getPluginId(plugin, info.name)
+
+    let transforms = this.data.transform[id]
+    if (!transforms || !transforms.some(transform => transform.result != null)) {
+      transforms = [{
+        name: DUMMY_LOAD_PLUGIN_NAME,
+        result: preTransformCode,
+        start: info.start,
+        end: info.start,
+        sourcemaps: info.sourcemaps,
+      }]
+      this.data.transform[id] = transforms
+      this.data.transformCounter[id] = (this.data.transformCounter[id] || 0) + 1
+    }
+
+    transforms.push({
+      ...info,
+      plugin_id: pluginId,
+    })
+
+    this.recordPluginCall({
+      type: 'transform',
+      pluginId,
+      pluginName: info.name,
+      module: this.getPublicModuleId(id),
+      start: info.start,
+      end: info.end,
+      unchanged: info.result == null || info.result === preTransformCode,
+    })
+  }
+
+  recordLoad(id: string, info: ViteInspectTransformInfo, plugin?: Plugin): void {
+    id = this.normalizeId(id)
+    const pluginId = this.getPluginId(plugin, info.name)
+    this.data.transform[id] = [{
+      ...info,
+      plugin_id: pluginId,
+    }]
+    this.data.transformCounter[id] = (this.data.transformCounter[id] || 0) + 1
+
+    this.recordPluginCall({
+      type: 'load',
+      pluginId,
+      pluginName: info.name,
+      module: this.getPublicModuleId(id),
+      start: info.start,
+      end: info.end,
+      unchanged: info.result == null,
+    })
+  }
+
+  recordLoadCall(id: string, info: ViteInspectTransformInfo, plugin?: Plugin): void {
+    id = this.normalizeId(id)
+    this.recordPluginCall({
+      type: 'load',
+      pluginId: this.getPluginId(plugin, info.name),
+      pluginName: info.name,
+      module: this.getPublicModuleId(id),
+      start: info.start,
+      end: info.end,
+      unchanged: true,
+    })
+  }
+
+  recordResolveId(id: string, info: ViteInspectResolveIdInfo, plugin?: Plugin): void {
+    id = this.normalizeId(id)
+    const pluginId = this.getPluginId(plugin, info.name)
+    const normalizedResult = this.normalizeId(info.result)
+    const resolveIds = this.data.resolveId[id] ||= []
+    resolveIds.push({
+      ...info,
+      plugin_id: pluginId,
+      result: normalizedResult,
+    })
+
+    this.recordPluginCall({
+      type: 'resolve',
+      pluginId,
+      pluginName: info.name,
+      module: this.getPublicModuleId(normalizedResult),
+      start: info.start,
+      end: info.end,
+    })
+  }
+
+  recordResolveIdCall(id: string, info: Omit<ViteInspectResolveIdInfo, 'result'> & { result?: string | null }, plugin?: Plugin): void {
+    id = this.normalizeId(id)
+    const result = info.result ? this.normalizeId(info.result) : id
+    this.recordPluginCall({
+      type: 'resolve',
+      pluginId: this.getPluginId(plugin, info.name),
+      pluginName: info.name,
+      module: this.getPublicModuleId(result),
+      start: info.start,
+      end: info.end,
+    })
+  }
+
+  invalidate(id: string): void {
+    const normalizedId = this.normalizeId(id)
+    const invalidatedIds = new Set([normalizedId])
+    const invalidatedPublicIds = new Set([this.getPublicModuleId(normalizedId)])
+
+    for (const rawId of this.getRawModuleIds()) {
+      const publicId = this.getPublicModuleId(rawId)
+      if (invalidatedPublicIds.has(publicId)) {
+        invalidatedIds.add(rawId)
+        invalidatedPublicIds.add(publicId)
+      }
+    }
+
+    for (const [sourceId, resolveIds] of Object.entries(this.data.resolveId)) {
+      if (this.matchesInvalidatedModule(sourceId, invalidatedIds, invalidatedPublicIds)) {
+        invalidatedIds.add(this.normalizeId(sourceId))
+        invalidatedPublicIds.add(this.getPublicModuleId(sourceId))
+      }
+
+      for (const resolveId of resolveIds) {
+        if (this.matchesInvalidatedModule(resolveId.result, invalidatedIds, invalidatedPublicIds)) {
+          const normalizedResult = this.normalizeId(resolveId.result)
+          invalidatedIds.add(normalizedResult)
+          invalidatedPublicIds.add(this.getPublicModuleId(normalizedResult))
+        }
+      }
+    }
+
+    for (const rawId of invalidatedIds) {
+      delete this.data.transform[rawId]
+      delete this.data.transformCounter[rawId]
+    }
+
+    for (const [sourceId, resolveIds] of Object.entries(this.data.resolveId)) {
+      const remaining = resolveIds.filter((resolveId) => {
+        return !this.matchesInvalidatedModule(sourceId, invalidatedIds, invalidatedPublicIds)
+          && !this.matchesInvalidatedModule(resolveId.result, invalidatedIds, invalidatedPublicIds)
+      })
+
+      if (remaining.length)
+        this.data.resolveId[sourceId] = remaining
+      else
+        delete this.data.resolveId[sourceId]
+    }
+
+    for (const [pluginId, calls] of Object.entries(this.data.pluginCalls)) {
+      const remaining = calls.filter(call => !invalidatedPublicIds.has(call.module))
+      if (remaining.length)
+        this.data.pluginCalls[Number(pluginId)] = remaining
+      else
+        delete this.data.pluginCalls[Number(pluginId)]
+    }
+  }
+
+  private matchesInvalidatedModule(id: string, invalidatedIds: Set<string>, invalidatedPublicIds: Set<string>): boolean {
+    const normalizedId = this.normalizeId(id)
+    return invalidatedIds.has(normalizedId)
+      || invalidatedPublicIds.has(this.getPublicModuleId(normalizedId))
+  }
+
+  normalizeId(id: string): string {
+    return removeVersionQuery(id)
+  }
+
+  getModuleIdBaseRoot(): string {
+    return this.env.getTopLevelConfig().root
+  }
+
+  getPublicModuleId(id: string): string {
+    return normalizeModuleId(this.normalizeId(id), this.getModuleIdBaseRoot())
+  }
+
+  getRawModuleId(id: string): string {
+    const normalizedId = this.getPublicModuleId(id)
+    for (const rawId of this.getRawModuleIds()) {
+      if (this.getPublicModuleId(rawId) === normalizedId)
+        return rawId
+    }
+    if (normalizedId.startsWith('./') || normalizedId.startsWith('../'))
+      return resolve(this.getModuleIdBaseRoot(), normalizedId).replace(/\\/g, '/')
+    return normalizedId
+  }
+
+  getRawModuleIds(): string[] {
+    const ids = new Set(Object.keys(this.data.transform))
+    for (const resolveIds of Object.values(this.data.resolveId)) {
+      for (const id of resolveIds)
+        ids.add(this.normalizeId(id.result))
+    }
+    return Array.from(ids)
+  }
+
+  getPluginId(plugin: Plugin | undefined, name: string): number {
+    if (plugin) {
+      const index = this.env.getTopLevelConfig().plugins.indexOf(plugin)
+      if (index >= 0)
+        return index
+    }
+
+    return this.env.getTopLevelConfig().plugins.findIndex(item => item.name === name)
+  }
+
+  recordPluginCall(options: {
+    type: ViteInspectPluginCallInfo['type']
+    pluginId: number
+    pluginName: string
+    module: string
+    start: number
+    end: number
+    unchanged?: boolean
+  }): void {
+    if (options.pluginId < 0)
+      return
+
+    const calls = this.data.pluginCalls[options.pluginId] ||= []
+    calls.push({
+      type: options.type,
+      id: `${options.type}:${options.pluginId}:${this.pluginCallCount++}`,
+      duration: Math.max(0, options.end - options.start),
+      plugin_id: options.pluginId,
+      plugin_name: options.pluginName,
+      module: options.module,
+      timestamp_start: options.start,
+      timestamp_end: options.end,
+      unchanged: options.unchanged,
+    })
+  }
+
+  getModulesList(pluginCtx?: ModuleInfoProvider): ViteInspectModuleInfo[] {
+    const moduleGraph = this.env.mode === 'dev' ? this.env.moduleGraph : undefined
+    const getDeps = moduleGraph
+      ? (id: string) => Array.from(moduleGraph.getModuleById(id)?.importedModules || []).map(module => module.id || '').filter(Boolean)
+      : pluginCtx
+        ? (id: string) => Array.from(pluginCtx.getModuleInfo(id)?.importedIds || [])
+        : () => []
+    const getImporters = moduleGraph
+      ? (id: string) => Array.from(moduleGraph.getModuleById(id)?.importers || []).map(module => module.id || '').filter(Boolean)
+      : pluginCtx
+        ? (id: string) => Array.from(pluginCtx.getModuleInfo(id)?.importers || [])
+        : () => []
+
+    const transformedIdMap = Object.values(this.data.resolveId).reduce<Record<string, ViteInspectResolveIdInfo[]>>((map, ids) => {
+      ids.forEach((id) => {
+        const result = this.normalizeId(id.result)
+        const resolvedIds = map[result] ||= []
+        resolvedIds.push(id)
+      })
+      return map
+    }, {})
+
+    const ids = new Set(Object.keys(this.data.transform).concat(Object.keys(transformedIdMap)))
+
+    return Array.from(ids).sort().map((id) => {
+      let totalTime = 0
+      const transformPlugins: ViteInspectModulePluginMetric[] = (this.data.transform[id] || [])
+        .filter(transform => transform.result != null)
+        .map((transform) => {
+          const delta = transform.end - transform.start
+          totalTime += delta
+          return {
+            name: transform.name,
+            transform: delta,
+          }
+        })
+      const resolveIdPlugins: ViteInspectModulePluginMetric[] = (transformedIdMap[id] || []).map(resolveId => ({
+        name: resolveId.name,
+        resolveId: resolveId.end - resolveId.start,
+      }))
+      const plugins = transformPlugins.concat(resolveIdPlugins)
+
+      return {
+        id: this.getPublicModuleId(id),
+        deps: getDeps(id).map(dep => this.getPublicModuleId(dep)),
+        importers: getImporters(id).map(importer => this.getPublicModuleId(importer)),
+        plugins,
+        virtual: isVirtual(plugins[0]?.name || '', this.data.transform[id]?.[0]?.name || ''),
+        totalTime,
+        invokeCount: this.data.transformCounter[id] || 0,
+        sourceSize: getUtf8Size(this.data.transform[id]?.[0]?.result),
+        distSize: getUtf8Size(this.data.transform[id]?.at(-1)?.result),
+      }
+    })
+  }
+
+  resolveId(id = ''): string {
+    id = this.getRawModuleId(id)
+    if (id.startsWith('./'))
+      id = resolve(this.getModuleIdBaseRoot(), id).replace(/\\/g, '/')
+    return this.resolveIdRecursive(id)
+  }
+
+  resolveIdRecursive(id: string): string {
+    const resolved = this.data.resolveId[id]?.[0]?.result
+    return resolved ? this.resolveIdRecursive(this.normalizeId(resolved)) : id
+  }
+
+  getPluginMetrics(): ViteInspectPluginMetric[] {
+    const map: Record<string, ViteInspectPluginMetric> = {}
+    const defaultMetricInfo = () => ({
+      transform: {
+        invokeCount: 0,
+        totalTime: 0,
+      },
+      resolveId: {
+        invokeCount: 0,
+        totalTime: 0,
+      },
+    })
+
+    this.env.getTopLevelConfig().plugins.forEach((plugin: Plugin, pluginId) => {
+      map[pluginId] = {
+        ...defaultMetricInfo(),
+        name: plugin.name,
+        plugin_id: pluginId,
+        enforce: plugin.enforce,
+      }
+    })
+
+    Object.values(this.data.transform).forEach((transformInfos) => {
+      transformInfos.forEach(({ name, plugin_id: pluginId, start, end }) => {
+        if (name === DUMMY_LOAD_PLUGIN_NAME)
+          return
+        const key = pluginId == null || pluginId < 0 ? name : String(pluginId)
+        map[key] ||= {
+          ...defaultMetricInfo(),
+          name,
+          plugin_id: pluginId,
+        }
+        map[key].transform.totalTime += end - start
+        map[key].transform.invokeCount += 1
+      })
+    })
+
+    Object.values(this.data.resolveId).forEach((resolveIdInfos) => {
+      resolveIdInfos.forEach(({ name, plugin_id: pluginId, start, end }) => {
+        const key = pluginId == null || pluginId < 0 ? name : String(pluginId)
+        map[key] ||= {
+          ...defaultMetricInfo(),
+          name,
+          plugin_id: pluginId,
+        }
+        map[key].resolveId.totalTime += end - start
+        map[key].resolveId.invokeCount += 1
+      })
+    })
+
+    return Object.values(map).filter(Boolean).sort((a, b) => a.name.localeCompare(b.name))
+  }
+
+  async getModuleTransformInfo(id: string): Promise<ViteInspectModuleTransformInfo> {
+    const resolvedId = this.resolveId(id)
+    return {
+      resolvedId,
+      transforms: this.data.transform[resolvedId] || [],
+    }
+  }
+
+  getPluginDetails(pluginId: number): ViteInspectPluginDetails {
+    const plugin = this.env.getTopLevelConfig().plugins[pluginId]
+    const calls = this.data.pluginCalls[pluginId] ?? []
+    return {
+      plugin_name: plugin?.name ?? calls[0]?.plugin_name ?? '',
+      plugin_id: pluginId,
+      calls,
+      resolveIdMetrics: calls.filter(call => call.type === 'resolve'),
+      loadMetrics: calls.filter(call => call.type === 'load'),
+      transformMetrics: calls.filter(call => call.type === 'transform'),
+    }
+  }
+
+  async clearModuleTransform(id: string): Promise<void> {
+    this.clearId(id)
+    try {
+      if (this.env.mode === 'dev')
+        await this.env.transformRequest(id)
+    }
+    catch {}
+  }
+
+  clearId(rawId: string): void {
+    const id = this.resolveId(rawId)
+    if (!id)
+      return
+
+    const moduleGraph = this.env.mode === 'dev' ? this.env.moduleGraph : undefined
+    const mod = moduleGraph?.getModuleById(id)
+    if (mod)
+      moduleGraph?.invalidateModule(mod)
+    this.invalidate(id)
+  }
+}
+
+function isVirtual(pluginName: string, transformName: string): boolean {
+  return pluginName !== DUMMY_LOAD_PLUGIN_NAME
+    && transformName !== 'vite:load-fallback'
+    && transformName !== 'vite:build-load-fallback'
+}
diff --git a/packages/vite/src/node/inspect/hijack.ts b/packages/vite/src/node/inspect/hijack.ts
new file mode 100644
index 00000000..cd349528
--- /dev/null
+++ b/packages/vite/src/node/inspect/hijack.ts
@@ -0,0 +1,191 @@
+import type { Plugin } from 'vite'
+import type { ViteInspectContext } from './context'
+import { parseError, stringifyError } from './utils'
+
+type PluginWithOrder = Plugin & {
+  order?: string
+}
+
+type HookWrapper = (
+  fn: (...args: any[]) => any,
+  context: any,
+  args: any[],
+  order?: string,
+) => any
+
+function hijackHook(plugin: PluginWithOrder, name: 'transform' | 'load' | 'resolveId', wrapper: HookWrapper): void {
+  const hook = plugin[name] as any
+  if (!hook)
+    return
+
+  let order = `${plugin.order || plugin.enforce || 'normal'}`
+
+  if (typeof hook === 'object' && 'handler' in hook) {
+    const oldFn = hook.handler
+    order += `-${hook.order || hook.enforce || 'normal'}`
+    hook.handler = function (...args: any[]) {
+      return wrapper(oldFn, this, args, order)
+    }
+  }
+  else if (typeof hook === 'object' && 'transform' in hook) {
+    const oldFn = hook.transform
+    order += `-${hook.order || hook.enforce || 'normal'}`
+    hook.transform = function (...args: any[]) {
+      return wrapper(oldFn, this, args, order)
+    }
+  }
+  else {
+    const oldFn = hook
+    const mutablePlugin = plugin as unknown as Record<string, unknown>
+    mutablePlugin[name] = function (...args: any[]) {
+      return wrapper(oldFn, this, args, order)
+    }
+  }
+}
+
+const hijackedPlugins = new WeakSet<Plugin>()
+
+export function hijackPlugin(plugin: Plugin, ctx: ViteInspectContext): void {
+  if (hijackedPlugins.has(plugin))
+    return
+  hijackedPlugins.add(plugin)
+
+  hijackHook(plugin, 'transform', async (fn, context, args, order) => {
+    const code = args[0] as string
+    const id = args[1] as string
+    let resultValue: any
+    let error: unknown
+    const start = Date.now()
+
+    try {
+      resultValue = await fn.apply(context, args)
+    }
+    catch (err) {
+      error = err
+    }
+
+    const end = Date.now()
+    const result = error
+      ? '[Error]'
+      : typeof resultValue === 'string'
+        ? resultValue
+        : resultValue?.code?.toString()
+
+    if (ctx.filter(id)) {
+      const sourcemaps = typeof resultValue === 'string' ? null : resultValue?.map
+      ctx.getEnvContext(context?.environment)?.recordTransform(id, {
+        name: plugin.name,
+        result,
+        start,
+        end,
+        order,
+        sourcemaps,
+        error: error ? parseError(error) : undefined,
+      }, code, plugin)
+    }
+
+    if (error)
+      throw error
+    return resultValue
+  })
+
+  hijackHook(plugin, 'load', async (fn, context, args) => {
+    const id = args[0] as string
+    let resultValue: any
+    let error: unknown
+    const start = Date.now()
+
+    try {
+      resultValue = await fn.apply(context, args)
+    }
+    catch (err) {
+      error = err
+    }
+
+    const end = Date.now()
+    const result = error
+      ? '[Error]'
+      : typeof resultValue === 'string'
+        ? resultValue
+        : resultValue?.code
+    const sourcemaps = typeof resultValue === 'string' ? null : resultValue?.map
+
+    const info = {
+      name: plugin.name,
+      result,
+      start,
+      end,
+      sourcemaps,
+      error: error ? parseError(error) : undefined,
+    }
+
+    if (result != null) {
+      ctx.getEnvContext(context?.environment)?.recordLoad(id, {
+        ...info,
+        result,
+      }, plugin)
+    }
+    else {
+      ctx.getEnvContext(context?.environment)?.recordLoadCall(id, {
+        name: plugin.name,
+        start,
+        end,
+        error: error ? parseError(error) : undefined,
+      }, plugin)
+    }
+
+    if (error)
+      throw error
+    return resultValue
+  })
+
+  hijackHook(plugin, 'resolveId', async (fn, context, args) => {
+    const id = args[0] as string
+    let resultValue: any
+    let error: unknown
+    const start = Date.now()
+
+    try {
+      resultValue = await fn.apply(context, args)
+    }
+    catch (err) {
+      error = err
+    }
+
+    const end = Date.now()
+    if (!ctx.filter(id)) {
+      if (error)
+        throw error
+      return resultValue
+    }
+
+    const result = error
+      ? stringifyError(error)
+      : typeof resultValue === 'object'
+        ? resultValue?.id
+        : resultValue
+
+    if (result && result !== id) {
+      ctx.getEnvContext(context?.environment)?.recordResolveId(id, {
+        name: plugin.name,
+        result,
+        start,
+        end,
+        error,
+      }, plugin)
+    }
+    else {
+      ctx.getEnvContext(context?.environment)?.recordResolveIdCall(id, {
+        name: plugin.name,
+        result,
+        start,
+        end,
+        error,
+      }, plugin)
+    }
+
+    if (error)
+      throw error
+    return resultValue
+  })
+}
diff --git a/packages/vite/src/node/inspect/plugin.ts b/packages/vite/src/node/inspect/plugin.ts
new file mode 100644
index 00000000..75d9c339
--- /dev/null
+++ b/packages/vite/src/node/inspect/plugin.ts
@@ -0,0 +1,140 @@
+import type { PluginWithDevTools } from '@vitejs/devtools-kit'
+import type { SharedState } from '@vitejs/devtools-kit/utils/shared-state'
+import type { ResolvedConfig, ResolveFn } from 'vite'
+import type { ViteInspectModuleUpdatedState } from '../rpc'
+import { debounce } from 'perfect-debounce'
+import { diagnostics } from '../diagnostics'
+import { inspectRpcFunctions, VITE_INSPECT_MODULE_UPDATED_STATE_KEY, viteRpcFunctions } from '../rpc'
+import { setViteInspectContext, ViteInspectContext } from './context'
+import { hijackPlugin } from './hijack'
+import { setupEnvironmentInvalidation, setupMiddlewarePerformance } from './server'
+
+export function DevToolsViteInspect(): PluginWithDevTools {
+  let resolvedConfig: ResolvedConfig | undefined
+  let inspectContext: ViteInspectContext | undefined
+  let inspectModuleUpdatedState: SharedState<ViteInspectModuleUpdatedState> | undefined
+
+  function notifyInspectModuleUpdated(ids: string[] | null = null) {
+    inspectModuleUpdatedState?.mutate((state) => {
+      state.version += 1
+      state.ids = ids
+      state.updatedAt = Date.now()
+    })
+  }
+
+  function getInspectContext(config: ResolvedConfig): ViteInspectContext | undefined {
+    if (config.command !== 'serve')
+      return undefined
+    inspectContext ||= new ViteInspectContext()
+    return inspectContext
+  }
+
+  return {
+    name: 'vite:devtools:vite-inspect',
+    enforce: 'pre',
+
+    devtools: {
+      async setup(ctx) {
+        ctx.diagnostics.register(diagnostics)
+
+        for (const fn of viteRpcFunctions)
+          ctx.rpc.register(fn as any)
+
+        if (inspectContext) {
+          setViteInspectContext(ctx, inspectContext)
+          for (const fn of inspectRpcFunctions)
+            ctx.rpc.register(fn as any)
+
+          inspectModuleUpdatedState = await ctx.rpc.sharedState.get(VITE_INSPECT_MODULE_UPDATED_STATE_KEY, {
+            initialValue: {
+              version: 0,
+              ids: null,
+              updatedAt: 0,
+            },
+          })
+
+          if (ctx.viteServer) {
+            const debouncedNotify = debounce(() => {
+              notifyInspectModuleUpdated()
+            }, 100)
+
+            ctx.viteServer.middlewares.use((_req: unknown, _res: unknown, next: () => void) => {
+              debouncedNotify()
+              next()
+            })
+          }
+        }
+      },
+    },
+
+    configResolved(config) {
+      resolvedConfig = config
+      const ctx = getInspectContext(config)
+      if (!ctx)
+        return
+
+      const vite = ctx.getViteContext(config)
+      vite.registerEnvironmentNames(Object.keys(config.environments))
+
+      config.plugins.forEach(plugin => hijackPlugin(plugin, ctx))
+
+      const mutableConfig = config as ResolvedConfig & {
+        createResolver: ResolvedConfig['createResolver']
+      }
+      const createResolver = mutableConfig.createResolver
+      mutableConfig.createResolver = function (this: ResolvedConfig, ...args: Parameters<ResolvedConfig['createResolver']>) {
+        const resolver = createResolver.apply(this, args)
+        return async (...resolverArgs: Parameters<ResolveFn>) => {
+          const [id, , aliasOnly, ssr] = resolverArgs
+          const start = Date.now()
+          const result = await resolver(...resolverArgs)
+          const end = Date.now()
+
+          if (result && result !== id) {
+            const pluginName = aliasOnly ? 'alias' : 'vite:resolve (+alias)'
+            const envName = ssr ? 'ssr' : 'client'
+            vite.environments.get(envName)?.recordResolveId(id, {
+              name: pluginName,
+              result,
+              start,
+              end,
+            })
+          }
+
+          return result
+        }
+      }
+    },
+
+    configureServer(server) {
+      const ctx = resolvedConfig ? getInspectContext(resolvedConfig) : inspectContext
+      if (!ctx)
+        return
+
+      const vite = ctx.getViteContext(server.config)
+      Object.values(server.environments).forEach(env => vite.getEnvContext(env))
+      setupEnvironmentInvalidation(server, vite)
+
+      return () => {
+        setupMiddlewarePerformance(vite, server.middlewares.stack)
+      }
+    },
+
+    load: {
+      order: 'pre',
+      handler(id) {
+        inspectContext?.getEnvContext(this.environment)?.invalidate(id)
+        return null
+      },
+    },
+
+    hotUpdate({ modules }) {
+      if (!inspectContext)
+        return
+
+      notifyInspectModuleUpdated(modules.map(module => module.id).filter(id => id != null))
+    },
+
+    sharedDuringBuild: true,
+  }
+}
diff --git a/packages/vite/src/node/inspect/server.ts b/packages/vite/src/node/inspect/server.ts
new file mode 100644
index 00000000..cad97c70
--- /dev/null
+++ b/packages/vite/src/node/inspect/server.ts
@@ -0,0 +1,67 @@
+import type { Connect, ViteDevServer } from 'vite'
+import type { ViteInspectViteContext } from './context'
+
+const timestampRE = /\bt=\d{13}&?\b/
+const trailingSeparatorRE = /[?&]$/
+
+interface MiddlewareLayer {
+  handle?: unknown
+}
+
+export function setupEnvironmentInvalidation(server: ViteDevServer, vite: ViteInspectViteContext): void {
+  Object.values(server.environments).forEach((env) => {
+    const envContext = vite.getEnvContext(env)
+    const invalidateModule = env.moduleGraph.invalidateModule
+
+    env.moduleGraph.invalidateModule = function (...args) {
+      const mod = args[0]
+      if (mod?.id)
+        envContext.invalidate(mod.id)
+      return invalidateModule.apply(this, args)
+    }
+  })
+}
+
+export function setupMiddlewarePerformance(vite: ViteInspectViteContext, middlewares: MiddlewareLayer[]): void {
+  let firstMiddlewareIndex = -1
+
+  middlewares.forEach((middleware, index) => {
+    const originalHandle = middleware.handle
+    if (typeof originalHandle !== 'function' || !originalHandle.name)
+      return
+
+    middleware.handle = function (this: unknown, ...middlewareArgs: Parameters<Connect.HandleFunction>) {
+      let req: Parameters<Connect.HandleFunction>[0]
+      if (middlewareArgs.length === 4)
+        req = middlewareArgs[1] as any
+      else
+        req = middlewareArgs[0]
+
+      const start = Date.now()
+      const url = req.url?.replace(timestampRE, '').replace(trailingSeparatorRE, '') || '/'
+      const metrics = vite.data.serverMetrics.middleware[url] ||= []
+      if (firstMiddlewareIndex < 0)
+        firstMiddlewareIndex = index
+      if (index === firstMiddlewareIndex)
+        metrics.length = 0
+
+      const result = originalHandle.apply(this as any, middlewareArgs as any)
+      Promise.resolve(result).then(() => {
+        const total = Date.now() - start
+        metrics.push({
+          self: metrics.length ? Math.max(total - (metrics.at(-1)?.total || 0), 0) : total,
+          total,
+          name: originalHandle.name,
+        })
+      })
+
+      return result
+    } as Connect.HandleFunction
+
+    Object.defineProperty(middleware.handle, 'name', {
+      value: originalHandle.name,
+      configurable: true,
+      enumerable: true,
+    })
+  })
+}
diff --git a/packages/vite/src/node/inspect/types.ts b/packages/vite/src/node/inspect/types.ts
new file mode 100644
index 00000000..8f4b7fd1
--- /dev/null
+++ b/packages/vite/src/node/inspect/types.ts
@@ -0,0 +1,100 @@
+export interface ViteInspectQuery {
+  vite: string
+  env: string
+}
+
+export interface ViteInspectErrorInfo {
+  message: string
+  stack: string[]
+  raw?: unknown
+}
+
+export interface ViteInspectTransformInfo {
+  name: string
+  plugin_id?: number
+  result?: string | null
+  start: number
+  end: number
+  order?: string
+  sourcemaps?: unknown
+  error?: ViteInspectErrorInfo
+}
+
+export interface ViteInspectResolveIdInfo {
+  name: string
+  plugin_id?: number
+  result: string
+  start: number
+  end: number
+  error?: unknown
+}
+
+export interface ViteInspectModulePluginMetric {
+  name: string
+  transform?: number
+  resolveId?: number
+}
+
+export interface ViteInspectModuleInfo {
+  id: string
+  deps: string[]
+  importers: string[]
+  plugins: ViteInspectModulePluginMetric[]
+  virtual: boolean
+  totalTime: number
+  invokeCount: number
+  sourceSize: number
+  distSize: number
+}
+
+export interface ViteInspectPluginMetric {
+  name: string
+  plugin_id?: number
+  enforce?: 'pre' | 'post'
+  transform: {
+    invokeCount: number
+    totalTime: number
+  }
+  resolveId: {
+    invokeCount: number
+    totalTime: number
+  }
+}
+
+export interface ViteInspectModuleTransformInfo {
+  resolvedId: string
+  transforms: ViteInspectTransformInfo[]
+}
+
+export type ViteInspectPluginCallType = 'resolve' | 'load' | 'transform'
+
+export interface ViteInspectPluginCallInfo {
+  type: ViteInspectPluginCallType
+  id: string
+  duration: number
+  plugin_id: number
+  plugin_name: string
+  module: string
+  timestamp_start: number
+  timestamp_end: number
+  unchanged?: boolean
+}
+
+export interface ViteInspectPluginDetails {
+  plugin_name: string
+  plugin_id: number
+  calls: ViteInspectPluginCallInfo[]
+  resolveIdMetrics: ViteInspectPluginCallInfo[]
+  loadMetrics: ViteInspectPluginCallInfo[]
+  transformMetrics: ViteInspectPluginCallInfo[]
+}
+
+export interface ViteInspectMiddlewareMetric {
+  self: number
+  total: number
+  name: string
+}
+
+export interface ViteInspectServerMetrics {
+  middleware: Record<string, ViteInspectMiddlewareMetric[]>
+}
diff --git a/packages/vite/src/node/inspect/utils.ts b/packages/vite/src/node/inspect/utils.ts
new file mode 100644
index 00000000..623906fa
--- /dev/null
+++ b/packages/vite/src/node/inspect/utils.ts
@@ -0,0 +1,105 @@
+import type { Plugin } from 'vite'
+import type { ViteInspectContext } from './context'
+import type { ViteInspectQuery } from './types'
+import { Buffer } from 'node:buffer'
+import { relative } from 'pathe'
+
+export const DUMMY_LOAD_PLUGIN_NAME = '__load__'
+
+export function serializePlugin(plugin: Plugin): unknown {
+  return JSON.parse(JSON.stringify(plugin, (key, value) => {
+    if (typeof value === 'function') {
+      let name = value.name
+      if (name === 'anonymous')
+        name = ''
+      if (name === key)
+        name = ''
+      return name ? `[Function ${name}]` : '[Function]'
+    }
+    if (key === 'api' && value)
+      return '[Object API]'
+    return value
+  }))
+}
+
+export function removeVersionQuery(url: string): string {
+  if (!url.includes('v='))
+    return url
+  return url
+    .replace(/&v=\w+/, '')
+    .replace(/\?v=\w+/, '?')
+    .replace(/\?$/, '')
+}
+
+export function normalizeModuleId(id: string, root: string): string {
+  const normalizedId = id
+    .replace(/%2F/gi, '/')
+    .replace(/\\/g, '/')
+  const normalizedRoot = root
+    .replace(/%2F/gi, '/')
+    .replace(/\\/g, '/')
+  const isAbsolutePath = normalizedId.startsWith('/') || /^[a-z]:\//i.test(normalizedId)
+  if (!isAbsolutePath || !normalizedId.includes('/node_modules/'))
+    return normalizedId
+
+  let result = relative(normalizedRoot, normalizedId)
+  if (!result.startsWith('./') && !result.startsWith('../'))
+    result = `./${result}`
+  return result
+}
+
+export function getUtf8Size(value?: string | null): number {
+  return value ? Buffer.byteLength(value, 'utf8') : 0
+}
+
+export function parseError(error: unknown) {
+  if (error instanceof Error) {
+    return {
+      message: error.message || String(error),
+      stack: typeof error.stack === 'string'
+        ? error.stack.split('\n').map(line => line.trim()).filter(Boolean)
+        : [],
+      raw: error,
+    }
+  }
+
+  return {
+    message: String(error),
+    stack: [],
+    raw: error,
+  }
+}
+
+export function stringifyError(error: unknown): string {
+  if (error instanceof Error)
+    return error.stack || error.message
+  return String(error)
+}
+
+export function getAllQueryEnvs(ctx: ViteInspectContext): ViteInspectQuery[] {
+  const result: ViteInspectQuery[] = []
+  for (const vite of ctx.idToInstances.values()) {
+    for (const envName of vite.environments.keys()) {
+      result.push({
+        vite: vite.id,
+        env: envName,
+      })
+    }
+  }
+  return result
+}
+
+export function getAllModuleIds(ctx: ViteInspectContext): [ViteInspectQuery, string][] {
+  const result: [ViteInspectQuery, string][] = []
+  for (const vite of ctx.idToInstances.values()) {
+    for (const [envName, env] of vite.environments) {
+      const query = {
+        vite: vite.id,
+        env: envName,
+      }
+      for (const id of Object.keys(env.data.transform))
+        result.push([query, id])
+    }
+  }
+  return result
+}
diff --git a/packages/vite/src/node/plugin.ts b/packages/vite/src/node/plugin.ts
new file mode 100644
index 00000000..117cf577
--- /dev/null
+++ b/packages/vite/src/node/plugin.ts
@@ -0,0 +1,39 @@
+import type { PluginWithDevTools } from '@vitejs/devtools-kit'
+import type { PluginOption } from 'vite'
+import { DEVTOOLS_VITEPLUS_GROUP_ID } from '@vitejs/devtools-kit/constants'
+import { clientPublicDir } from '../dirs'
+import { DevToolsViteInspect } from './inspect/plugin'
+
+const VITE_DEVTOOLS_BASE = '/__devtools-vite/'
+
+export function DevToolsViteUI(): PluginOption {
+  return [
+    DevToolsViteInspect(),
+    DevToolsViteUIPlugin(),
+  ]
+}
+
+export function DevToolsViteUIPlugin(): PluginWithDevTools {
+  return {
+    name: 'vite:devtools:vite-ui',
+    enforce: 'pre',
+
+    devtools: {
+      setup(ctx) {
+        ctx.views.hostStatic(
+          VITE_DEVTOOLS_BASE,
+          clientPublicDir,
+        )
+
+        ctx.docks.register({
+          id: 'vite',
+          title: 'Vite',
+          icon: 'material-icon-theme:vite',
+          groupId: DEVTOOLS_VITEPLUS_GROUP_ID,
+          type: 'iframe',
+          url: VITE_DEVTOOLS_BASE,
+        })
+      },
+    },
+  }
+}
diff --git a/packages/vite/src/node/rpc/functions/vite-clear-module-transform.ts b/packages/vite/src/node/rpc/functions/vite-clear-module-transform.ts
new file mode 100644
index 00000000..1082ff1c
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-clear-module-transform.ts
@@ -0,0 +1,17 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+
+export const viteClearModuleTransform = defineRpcFunction({
+  name: 'vite:inspect:clear-module-transform',
+  type: 'action',
+  jsonSerializable: true,
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery, id: string) => {
+        await ctx.queryEnv(query).clearModuleTransform(id)
+      },
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-metadata.ts b/packages/vite/src/node/rpc/functions/vite-get-metadata.ts
new file mode 100644
index 00000000..91fd0e91
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-metadata.ts
@@ -0,0 +1,17 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+
+export const viteGetMetadata = defineRpcFunction({
+  name: 'vite:inspect:get-metadata',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async () => ({
+    inputs: [[] satisfies []],
+  }),
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async () => ctx.getMetadata(),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-module-transform-info.ts b/packages/vite/src/node/rpc/functions/vite-get-module-transform-info.ts
new file mode 100644
index 00000000..dbf9a7ed
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-module-transform-info.ts
@@ -0,0 +1,22 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+import { getAllModuleIds } from '../../inspect/utils'
+
+export const viteGetModuleTransformInfo = defineRpcFunction({
+  name: 'vite:inspect:get-module-transform-info',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      inputs: getAllModuleIds(ctx).map(([query, id]) => [query, id] satisfies [ViteInspectQuery, string]),
+    }
+  },
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery, id: string) => ctx.queryEnv(query).getModuleTransformInfo(id),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-modules-list.ts b/packages/vite/src/node/rpc/functions/vite-get-modules-list.ts
new file mode 100644
index 00000000..14f78b00
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-modules-list.ts
@@ -0,0 +1,22 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+import { getAllQueryEnvs } from '../../inspect/utils'
+
+export const viteGetModulesList = defineRpcFunction({
+  name: 'vite:inspect:get-modules-list',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      inputs: getAllQueryEnvs(ctx).map(query => [query] satisfies [ViteInspectQuery]),
+    }
+  },
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery) => ctx.queryEnv(query).getModulesList(),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-plugin-details.ts b/packages/vite/src/node/rpc/functions/vite-get-plugin-details.ts
new file mode 100644
index 00000000..b53baf72
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-plugin-details.ts
@@ -0,0 +1,15 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+
+export const viteGetPluginDetails = defineRpcFunction({
+  name: 'vite:inspect:get-plugin-details',
+  type: 'query',
+  jsonSerializable: true,
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery, id: string) => ctx.queryEnv(query).getPluginDetails(Number(id)),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-plugin-metrics.ts b/packages/vite/src/node/rpc/functions/vite-get-plugin-metrics.ts
new file mode 100644
index 00000000..3f1a1bbb
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-plugin-metrics.ts
@@ -0,0 +1,22 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+import { getAllQueryEnvs } from '../../inspect/utils'
+
+export const viteGetPluginMetrics = defineRpcFunction({
+  name: 'vite:inspect:get-plugin-metrics',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      inputs: getAllQueryEnvs(ctx).map(query => [query] satisfies [ViteInspectQuery]),
+    }
+  },
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery) => ctx.queryEnv(query).getPluginMetrics(),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-get-server-metrics.ts b/packages/vite/src/node/rpc/functions/vite-get-server-metrics.ts
new file mode 100644
index 00000000..f6c7af60
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-get-server-metrics.ts
@@ -0,0 +1,22 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+import { getAllQueryEnvs } from '../../inspect/utils'
+
+export const viteGetServerMetrics = defineRpcFunction({
+  name: 'vite:inspect:get-server-metrics',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      inputs: getAllQueryEnvs(ctx).map(query => [query] satisfies [ViteInspectQuery]),
+    }
+  },
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery) => ctx.getViteContext(query.vite).data.serverMetrics,
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/functions/vite-resolve-id.ts b/packages/vite/src/node/rpc/functions/vite-resolve-id.ts
new file mode 100644
index 00000000..68307ae5
--- /dev/null
+++ b/packages/vite/src/node/rpc/functions/vite-resolve-id.ts
@@ -0,0 +1,22 @@
+import type { ViteInspectQuery } from '../../inspect/types'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { getViteInspectContext } from '../../inspect/context'
+import { getAllModuleIds } from '../../inspect/utils'
+
+export const viteResolveId = defineRpcFunction({
+  name: 'vite:inspect:resolve-id',
+  type: 'query',
+  jsonSerializable: true,
+  dump: async (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      inputs: getAllModuleIds(ctx).map(([query, id]) => [query, id] satisfies [ViteInspectQuery, string]),
+    }
+  },
+  setup: (devtoolsCtx) => {
+    const ctx = getViteInspectContext(devtoolsCtx)
+    return {
+      handler: async (query: ViteInspectQuery, id: string) => ctx.queryEnv(query).resolveId(id),
+    }
+  },
+})
diff --git a/packages/vite/src/node/rpc/index.ts b/packages/vite/src/node/rpc/index.ts
index b68ece44..941d7bd2 100644
--- a/packages/vite/src/node/rpc/index.ts
+++ b/packages/vite/src/node/rpc/index.ts
@@ -1,15 +1,51 @@
 import type { RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import { viteClearModuleTransform } from './functions/vite-clear-module-transform'
 import { viteEnvInfo } from './functions/vite-env-info'
+import { viteGetMetadata } from './functions/vite-get-metadata'
+import { viteGetModuleTransformInfo } from './functions/vite-get-module-transform-info'
+import { viteGetModulesList } from './functions/vite-get-modules-list'
+import { viteGetPluginDetails } from './functions/vite-get-plugin-details'
+import { viteGetPluginMetrics } from './functions/vite-get-plugin-metrics'
+import { viteGetServerMetrics } from './functions/vite-get-server-metrics'
 import { viteMetaInfo } from './functions/vite-meta-info'
+import { viteResolveId } from './functions/vite-resolve-id'
 import '@vitejs/devtools-kit'
 
-export const rpcFunctions = [
+export const VITE_INSPECT_MODULE_UPDATED_STATE_KEY = 'vite:inspect:module-updated'
+
+export interface ViteInspectModuleUpdatedState {
+  version: number
+  ids: string[] | null
+  updatedAt: number
+}
+
+export const viteRpcFunctions = [
   viteMetaInfo,
   viteEnvInfo,
 ] as const
 
+export const inspectRpcFunctions = [
+  viteClearModuleTransform,
+  viteGetMetadata,
+  viteGetModulesList,
+  viteGetPluginMetrics,
+  viteGetPluginDetails,
+  viteGetModuleTransformInfo,
+  viteResolveId,
+  viteGetServerMetrics,
+] as const
+
+export const rpcFunctions = [
+  ...viteRpcFunctions,
+  ...inspectRpcFunctions,
+] as const
+
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
 
 declare module '@vitejs/devtools-kit' {
   export interface DevToolsRpcServerFunctions extends ServerFunctions {}
+
+  export interface DevToolsRpcSharedStates {
+    'vite:inspect:module-updated': ViteInspectModuleUpdatedState
+  }
 }
diff --git a/packages/vite/src/nuxt.config.ts b/packages/vite/src/nuxt.config.ts
index 9cd77c10..63bb99a3 100644
--- a/packages/vite/src/nuxt.config.ts
+++ b/packages/vite/src/nuxt.config.ts
@@ -91,6 +91,19 @@ export default defineNuxtConfig({
       cssMinify: false,
     },
     optimizeDeps: {
+      include: [
+        '@vueuse/core',
+        '@floating-ui/dom',
+        'd3-hierarchy',
+        'd3-shape',
+        'fuse.js',
+        'modern-monaco',
+        'comlink',
+        'floating-vue',
+        'splitpanes',
+        'vue-virtual-scroller',
+        'nanovis',
+      ],
       exclude: [
         'structured-clone-es',
         'birpc',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e513389..b4b13ce1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1025,6 +1025,21 @@ importers:
       '@vueuse/core':
         specifier: '*'
         version: 14.3.0(vue@3.5.38(typescript@6.0.3))
+      d3-hierarchy:
+        specifier: '*'
+        version: 3.1.2
+      d3-shape:
+        specifier: '*'
+        version: 3.2.0
+      floating-vue:
+        specifier: '*'
+        version: 5.2.2(@nuxt/kit@4.4.8(magicast@0.5.2))(vue@3.5.38(typescript@6.0.3))
+      fuse.js:
+        specifier: '*'
+        version: 7.4.2
+      nanovis:
+        specifier: '*'
+        version: 1.0.0
       nuxt:
         specifier: ^4.4.8
         version: 4.4.8(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.0.3)(@vitejs/devtools@0.3.3)(@vue/compiler-sfc@3.5.38)(cac@7.0.0)(db0@0.3.4)(esbuild@0.28.1)(eslint@10.5.0(jiti@2.7.0))(idb-keyval@6.2.5)(ioredis@5.10.1)(magicast@0.5.2)(optionator@0.9.4)(rolldown@1.1.3)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.3)(rollup@4.60.2))(rollup@4.60.2)(terser@5.44.1)(tsx@4.22.4)(typescript@6.0.3)(vite@8.1.0)(vue-tsc@3.3.5(typescript@6.0.3))(yaml@2.9.0)
@@ -1046,49 +1061,79 @@ importers:
       '@vitejs/devtools-kit':
         specifier: workspace:*
         version: link:../kit
-      birpc:
-        specifier: catalog:deps
-        version: 4.0.0
-      devframe:
-        specifier: catalog:deps
-        version: 0.5.4(typescript@6.0.3)
+      d3-shape:
+        specifier: catalog:frontend
+        version: 3.2.0
       envinfo:
         specifier: catalog:deps
         version: 7.21.0
-      get-port-please:
-        specifier: catalog:deps
-        version: 3.2.0
-      h3:
+      nostics:
         specifier: catalog:deps
-        version: 2.0.1-rc.22
+        version: 1.1.4
       pathe:
         specifier: catalog:deps
         version: 2.0.3
-      ws:
+      perfect-debounce:
         specifier: catalog:deps
-        version: 8.21.0
+        version: 2.1.0
+      vite:
+        specifier: ^8.1.0
+        version: 8.1.0(@types/node@25.0.3)(@vitejs/devtools@0.3.3)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.22.4)(yaml@2.9.0)
     devDependencies:
+      '@types/d3-hierarchy':
+        specifier: catalog:types
+        version: 3.1.7
       '@types/envinfo':
         specifier: catalog:types
         version: 7.8.4
+      '@types/splitpanes':
+        specifier: catalog:types
+        version: 2.2.6
       '@unocss/nuxt':
         specifier: catalog:build
         version: 66.7.2(magicast@0.5.2)(vite@8.1.0)(webpack@5.104.1(esbuild@0.28.1))
+      '@vueuse/components':
+        specifier: catalog:frontend
+        version: 14.3.0(vue@3.5.38(typescript@6.0.3))
       '@vueuse/core':
         specifier: catalog:frontend
         version: 14.3.0(vue@3.5.38(typescript@6.0.3))
       '@vueuse/nuxt':
         specifier: catalog:build
         version: 14.3.0(magicast@0.5.2)(nuxt@4.4.8(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0))(@parcel/watcher@2.5.6)(@types/node@25.0.3)(@vitejs/devtools@0.3.3)(@vue/compiler-sfc@3.5.38)(cac@7.0.0)(db0@0.3.4)(esbuild@0.28.1)(eslint@10.5.0(jiti@2.7.0))(idb-keyval@6.2.5)(ioredis@5.10.1)(magicast@0.5.2)(optionator@0.9.4)(rolldown@1.1.3)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.3)(rollup@4.60.2))(rollup@4.60.2)(terser@5.44.1)(tsx@4.22.4)(typescript@6.0.3)(vite@8.1.0)(vue-tsc@3.3.5(typescript@6.0.3))(yaml@2.9.0))(vue@3.5.38(typescript@6.0.3))
+      comlink:
+        specifier: catalog:frontend
+        version: 4.4.2
+      d3-hierarchy:
+        specifier: catalog:frontend
+        version: 3.1.2
+      diff-match-patch-es:
+        specifier: catalog:frontend
+        version: 1.0.1
       floating-vue:
         specifier: catalog:frontend
         version: 5.2.2(@nuxt/kit@4.4.8(magicast@0.5.2))(vue@3.5.38(typescript@6.0.3))
+      fuse.js:
+        specifier: catalog:frontend
+        version: 7.4.2
+      modern-monaco:
+        specifier: catalog:frontend
+        version: 0.4.2(typescript@6.0.3)
+      nanovis:
+        specifier: catalog:frontend
+        version: 1.0.0
+      splitpanes:
+        specifier: catalog:frontend
+        version: 4.1.2(vue@3.5.38(typescript@6.0.3))
       tsdown:
         specifier: catalog:build
         version: 0.22.3(@vitejs/devtools@0.3.3)(publint@0.3.21)(tsx@4.22.4)(typescript@6.0.3)(unrun@0.3.1(synckit@0.11.12))(vue-tsc@3.3.5(typescript@6.0.3))
       unocss:
         specifier: catalog:build
         version: 66.7.2(@unocss/webpack@66.7.2(webpack@5.104.1(esbuild@0.28.1)))(vite@8.1.0)
+      vue-virtual-scroller:
+        specifier: catalog:frontend
+        version: 3.0.4(vue@3.5.38(typescript@6.0.3))
 
   packages/webext:
     dependencies:
@@ -1211,10 +1256,6 @@ packages:
     resolution: {integrity: sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==}
     engines: {node: ^22.18.0 || >=24.11.0}
 
-  '@babel/generator@8.0.0-rc.6':
-    resolution: {integrity: sha512-6mIzgVK8DgEzvIapoQwhXTMnnkuE4STQmVv9H03i/tZ2ml8oev3TRvZJgTenK2Bsq0YWNtzOrFdTyNzCMFtjJQ==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-
   '@babel/helper-annotate-as-pure@7.27.3':
     resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
@@ -1277,18 +1318,10 @@ packages:
     resolution: {integrity: sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==}
     engines: {node: ^22.18.0 || >=24.11.0}
 
-  '@babel/helper-string-parser@8.0.0-rc.6':
-    resolution: {integrity: sha512-BCkFy+zN6kXQed3YOT7aJl93NfDSzQc3pBfsvTVPs9gU9X3V0aefEF5kwBT0E+mDWH9QgKaZstYUQN9VdQZT4g==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-
   '@babel/helper-validator-identifier@7.29.7':
     resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@8.0.0-rc.6':
-    resolution: {integrity: sha512-nVJ+1JcCgntv8d78rRo++o2wuODT0Irknx2BF8Np4Ft2CRgjLqIs4qzSZ8b66yGbBdMWGmZBO9WEZv1hhNiSpg==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-
   '@babel/helper-validator-identifier@8.0.2':
     resolution: {integrity: sha512-9Fr9QeyCAyi1BR1jKZ6uYQ24EIhQUx5ReHfQU7drOE+TPOb+w11/dsqLkMOT2U29OdCT71XajrOT8xDc1C7orA==}
     engines: {node: ^22.18.0 || >=24.11.0}
@@ -1311,11 +1344,6 @@ packages:
     engines: {node: ^22.18.0 || >=24.11.0}
     hasBin: true
 
-  '@babel/parser@8.0.0-rc.6':
-    resolution: {integrity: sha512-rOS8IpdO7mQELkTPlCsTgPejO0bFuZdEDCGQJouYbYf9e1FLTym7Fei2pEjq8q7MWbX0ravcd7QQYKs1TxOuog==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-    hasBin: true
-
   '@babel/plugin-syntax-jsx@7.28.6':
     resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
     engines: {node: '>=6.9.0'}
@@ -1350,10 +1378,6 @@ packages:
     resolution: {integrity: sha512-K8ponJDxBwDHigkeFqaqT5wLGl4bTlwMafR8k7b5CPxr6Ww+UG9ls8Yx6Tcpboxu97eeGVEEyKcHmEyOwN1vSw==}
     engines: {node: ^22.18.0 || >=24.11.0}
 
-  '@babel/types@8.0.0-rc.6':
-    resolution: {integrity: sha512-p7/ABylAYlexb31wtRdIfH9L9A0Z2T/9H6zAqzqndkY2PLkvNNc580wGhp/gGKN4Sp9sQvSkhc6Oga8/O+wTyw==}
-    engines: {node: ^22.18.0 || >=24.11.0}
-
   '@bomb.sh/tab@0.0.15':
     resolution: {integrity: sha512-Y90ub44TAvbdO9P8mcD/XPyQjFhiR5xmd4Fk7JErmWmEWEUimNnjWiBrVZ16Tj3GA1rLZ+uvCN2V/pzLawv31g==}
     hasBin: true
@@ -1378,18 +1402,10 @@ packages:
   '@chevrotain/types@11.1.2':
     resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
 
-  '@clack/core@1.4.1':
-    resolution: {integrity: sha512-FILJa1gGKEFTGZAJE9RpVhrjKz3c3h4ar60dSv6cGuDqufQ84YEIS3GAGvZiN+H6yaLbbvTFNejjCC4tXpZEuw==}
-    engines: {node: '>= 20.12.0'}
-
   '@clack/core@1.4.2':
     resolution: {integrity: sha512-0Ty/1Gfm+Kb07sXcuESjyKfwEhSy4Ns1AgeEisHb/bDY5fWme0tTeTkU14T1Gmcs17YIjB/teiDe4uaCghbYqQ==}
     engines: {node: '>= 20.12.0'}
 
-  '@clack/prompts@1.5.1':
-    resolution: {integrity: sha512-zccHj2z2oCCO4yrDiRSlFOxWerGqRiysP7a5jPK6uoI9URKAquwY42Dd/iUP8JWHxEzdRe4TlbvZCo8z1/mhrw==}
-    engines: {node: '>= 20.12.0'}
-
   '@clack/prompts@1.6.0':
     resolution: {integrity: sha512-EYlRokl8szrP9Z25qT5aepMdBjzBvHF9ZEhzIiUBc9guz/T31EqRgvD0QSgZcpE93xiwrr+OkB4nz0BZyF6fSA==}
     engines: {node: '>= 20.12.0'}
@@ -1440,18 +1456,12 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
-  '@emnapi/core@1.11.0':
-    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
-
   '@emnapi/core@1.11.1':
     resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
 
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
-  '@emnapi/runtime@1.11.0':
-    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
-
   '@emnapi/runtime@1.11.1':
     resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
 
@@ -1759,9 +1769,6 @@ packages:
   '@iconify-json/ri@1.2.10':
     resolution: {integrity: sha512-WWMhoncVVM+Xmu9T5fgu2lhYRrKTEWhKk3Com0KiM111EeEsRLiASjpsFKnC/SrB6covhUp95r2mH8tGxhgd5Q==}
 
-  '@iconify-json/simple-icons@1.2.86':
-    resolution: {integrity: sha512-t3jck5qPQuK1qy+bRn9eCoDQhIB7XSazKz1Fjp8hcan3XOAsTI5Mq/s3F0ekOKSvMQqkVORYK6ns6o6T9f5EMA==}
-
   '@iconify-json/simple-icons@1.2.87':
     resolution: {integrity: sha512-8YciStObhSji3OZFmWAWK6kBujyqO5bLCxeDwLxf3CR3F4PVelq7keC2LBvgTqviWzSTysj5/g4PCFLiAMVGsw==}
 
@@ -3654,14 +3661,6 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@typescript-eslint/eslint-plugin@8.61.0':
-    resolution: {integrity: sha512-bFNvl9ZczlVb+wR2Akszf3gHfKVj/8WanXaGJ3UstTA7brNKg0cNdk6X1Psu5V7MZ2oQtzZKOEzIUehaoxbDGw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.61.0
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/eslint-plugin@8.62.0':
     resolution: {integrity: sha512-o+mpz7EYiMzXoySXiKmzlabIvTVqUuK5yLrAedRPRDA0IpPFMUV1IXt6OqljIxX/kumN6EjUYp41Hqelh6p/Dw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3677,13 +3676,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.61.0':
-    resolution: {integrity: sha512-5B7PfA2e1NQGCnDHd/0lW7W3gvp3d59Ryw54FYO8Uswxo9f6ikw3AZV+Xj/TvpImmpsiYyUqAfhC6kJID1jF6w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/parser@8.62.0':
     resolution: {integrity: sha512-dzHeT2gySzZtLDsuqxU9AkYgIsQoHAHtRBpOqM+Ofzx1Bwrd2RcCjQJ+6iQbsHOIR6NS33bF2W1k3blN1zLDrA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3697,18 +3689,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.61.0':
-    resolution: {integrity: sha512-DV42F7MLJO6Rax7SK1yg43tcnEfGUrurSpSxKuVX+a3RCTzBlH3fuxprrOJXKCJGAaw82xXocikJ0uQaqwXgGA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/project-service@8.61.1':
-    resolution: {integrity: sha512-PrC4JYGmR241lYnfhmKGTXkFqv8+ymbTFgSAY0fVXpY82/QkMw5TZPl+vGzuDDU2QYJk9fIDOBTntF+yDv9LEA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/project-service@8.62.0':
     resolution: {integrity: sha512-wexnCqiTg7BOGtbLDftYpRWlmLq4xfoMd7BKFR6Y75sZS3QmRKLdN3yWLhmIYgqMmP/OXWpj3H8odkb5nGURCQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3725,14 +3705,6 @@ packages:
     resolution: {integrity: sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/scope-manager@8.61.0':
-    resolution: {integrity: sha512-IWdXFHFSb6mlC3HPc7QsLDm5zYEbUla6trDEHf32D3/dnuUyXd87plScSNXSbm0/RxMvObpI17sv/EDTGrGZkA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.61.1':
-    resolution: {integrity: sha512-L2bdIeoQS8FlKAvONAr20w6OcLXeB+qiDKbAooS9A0Ben+iSIkBef0FxqwKWYqt5sa0i4KJtxVyVmhMylKzF5w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.62.0':
     resolution: {integrity: sha512-1lX38kNxXIRb8mEc3lbq5mdHq1Pf2+U0nFU65KfT18mtPxxl0fvjuEE92mHuXPuCtElJhOrddOpyMlM3Z0umEA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3743,31 +3715,12 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/tsconfig-utils@8.61.0':
-    resolution: {integrity: sha512-O5Amvdv9ztMpxpf+vmFULGG78IE6Qwdr3bCGvqwG4nwc9H2qXkOYJJnRbRHyMkQTjv1d03olqwwwzHLMqpFePQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/tsconfig-utils@8.61.1':
-    resolution: {integrity: sha512-UN/H4di+OO7EWx2ovME+8t31YO+KVnK0RRKEHR3kOt21/Ay8BOq3M1OMvWs5vNiqcFCYGYoxK3MXPZzmMUE+yg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/tsconfig-utils@8.62.0':
     resolution: {integrity: sha512-y2GAdB6ykaXUvuspbYnizQc4oDDz0Tz/Yc7iWrXf9mx8vm/L/0vLHCe0tS2boG96Zy+DivnVDQ9ZUEWoHqqx1g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/type-utils@8.61.0':
-    resolution: {integrity: sha512-TuBiQYIkd97yBfInHCTKVYMbX4kvEmpOEuixIuzCU9p8BGT1SfyyO0d0IfDMbPIHcjn/hWnusUX5e8v5Xg+X8A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/type-utils@8.62.0':
     resolution: {integrity: sha512-+g5O3j0w2ldzC86Pv6fvbO/xhAonbJFIdf/MKQ1d30gndlsVzUOE83ldfSE15Qrl9fhFjK6AovHs5Wpp6vx86w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3779,14 +3732,6 @@ packages:
     resolution: {integrity: sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.61.0':
-    resolution: {integrity: sha512-9QTQpZ5Iin4CdIodfbDQFSeiSJKidgYJYug1P9CC2xWgUTvlmixViqDZNciMjwLBZyJnG4tGmPl97rVAFb1AJg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/types@8.61.1':
-    resolution: {integrity: sha512-G+CRlPqLv7Bz1IZVs03x5K59F1veqL0EJUROAdGhKsEq8qOiRiZbI+HUojPq5l0fEGOKModD9br6lObhB8zkoA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.62.0':
     resolution: {integrity: sha512-KvAclkktORPvM54TgLgA4z9HIV1M8zOgw9ZVNXl9f/8dLYfXYX1wkMXP7qmabpijQRV5bHJLOmoyGQbLMaUYeg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3797,18 +3742,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/typescript-estree@8.61.0':
-    resolution: {integrity: sha512-42zatd5qSvvcV1JdDBCLxYRznvP4eIHpPoZXdkPFnAmanA4FuZ5dibSnCBggY8hQnqajPpoGjXFdZ7fIJKQnlA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/typescript-estree@8.61.1':
-    resolution: {integrity: sha512-u+oQD3BqYWPc8YV9Zab4vaJElJuwOLPRc10Jm1o/qS+6Qwen14HCWwx0Seo4LnSn2wxea2Ik8DxPt2/FHmuhrg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/typescript-estree@8.62.0':
     resolution: {integrity: sha512-+hVbNxtW64pIcZWDPGbyaKF7vp2IBTVY5ma1blwwksrjdsbdqqEKvJWMGbBofei4F6Dovx1M0RJgoFeNu2279A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3822,20 +3755,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.61.0':
-    resolution: {integrity: sha512-3bzFt7ImFMW/jVYwJamDoe/dMOdFLSC6pom6rRjdh4SZJEYupyMzem8e7vKZLclLfpHjlwSAXOUxtKxGXUiLqA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/utils@8.61.1':
-    resolution: {integrity: sha512-1+P/3Dj6jvtybE1q0HQ6yBt/gq+oKJyLdEv4HdnqasaEXRSYCAsD59mXEVQnM/ULNdQxbX77tdG4jPRjIS6knA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
   '@typescript-eslint/utils@8.62.0':
     resolution: {integrity: sha512-82r66fi9zYwZ+mTq3vKgwjbZ1PVk/DJzrXFLpG6RnBbdvH8TEGVHIs9H4d2drhkOzf0syZuD/OZvvlu6GDbP4g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3847,14 +3766,6 @@ packages:
     resolution: {integrity: sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.61.0':
-    resolution: {integrity: sha512-QVLZu3ZPQEE+HICQyAMZ2yLQhxf0meY/wx6Hx14YcTNj13JB3qHlX3lJ02L3fLGHgERRH71kvYDwiXIguT3AjQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/visitor-keys@8.61.1':
-    resolution: {integrity: sha512-6fJ9MHWtK14C1DSkiMlHUSOmrVebL7150xZJBlJiL62jjhIA4JmOq6flwBgDxIdBKKdoiZRel+dfPD5MLfny3w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.62.0':
     resolution: {integrity: sha512-CY3uyFSRbcQv3nnSv8S0+lDftMVz6P963PoRlxrV7ew/Md564g9ut60PYzdLM5qW4jFn93GBF+Soi90ISAN+GQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5209,9 +5120,6 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.4.10:
-    resolution: {integrity: sha512-0xzNv0e7oYC6yyuOGZIABPM4qtg3QxLFniDNPP4ZP90wR8Yq3zgwpRbrNiT4N3IKqDbbYFEJLV+JWEs19aZ//w==}
-
   dompurify@3.4.11:
     resolution: {integrity: sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==}
 
@@ -5394,12 +5302,6 @@ packages:
       eslint-import-resolver-node:
         optional: true
 
-  eslint-plugin-jsdoc@63.0.2:
-    resolution: {integrity: sha512-0TchoK1uS4VxHSo3P4CyWQ31Lm+6zsT+xkHMC5KbFKwgOf8YrXPf1Bl8EP7kpgw1wfe/Ui5jz5mSX7ou8WAVuw==}
-    engines: {node: ^22.13.0 || >=24}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
-
   eslint-plugin-jsdoc@63.0.8:
     resolution: {integrity: sha512-0rLBDD03N6aL+axOtkSSaUoqhHOPKe+I1gS6dLEwm9zjqAd1e78Z7cilTnkNRQ8wOiEvzR6mvl6IDu7jiTR8UA==}
     engines: {node: ^22.13.0 || >=24}
@@ -5791,10 +5693,6 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globals@17.6.0:
-    resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
-    engines: {node: '>=18'}
-
   globals@17.7.0:
     resolution: {integrity: sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==}
     engines: {node: '>=18'}
@@ -7318,10 +7216,6 @@ packages:
     resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
     engines: {node: '>=0.10.0'}
 
-  regjsparser@0.13.0:
-    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
-    hasBin: true
-
   regjsparser@0.13.2:
     resolution: {integrity: sha512-NgRBy2Nx/bE+9F27nVHnqcN5HjyLmecqsqx2PJHu3/IEtADD4WuxuXIVExD5PoSDFVrl78dOonfcOe5O+5nbzQ==}
     hasBin: true
@@ -8594,7 +8488,7 @@ snapshots:
       '@eslint-community/eslint-plugin-eslint-comments': 4.7.2(eslint@10.5.0(jiti@2.7.0))
       '@eslint/markdown': 8.0.2
       '@stylistic/eslint-plugin': 5.10.0(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@typescript-eslint/parser': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@vitest/eslint-plugin': 1.6.20(@typescript-eslint/eslint-plugin@8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.9(@types/node@25.0.3)(vite@8.1.0))
       ansis: 4.3.1
@@ -8703,15 +8597,6 @@ snapshots:
       '@types/jsesc': 2.5.1
       jsesc: 3.1.0
 
-  '@babel/generator@8.0.0-rc.6':
-    dependencies:
-      '@babel/parser': 8.0.0-rc.6
-      '@babel/types': 8.0.0-rc.6
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      '@types/jsesc': 2.5.1
-      jsesc: 3.1.0
-
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
       '@babel/types': 7.29.7
@@ -8792,12 +8677,8 @@ snapshots:
 
   '@babel/helper-string-parser@8.0.0': {}
 
-  '@babel/helper-string-parser@8.0.0-rc.6': {}
-
   '@babel/helper-validator-identifier@7.29.7': {}
 
-  '@babel/helper-validator-identifier@8.0.0-rc.6': {}
-
   '@babel/helper-validator-identifier@8.0.2': {}
 
   '@babel/helper-validator-option@7.27.1': {}
@@ -8815,10 +8696,6 @@ snapshots:
     dependencies:
       '@babel/types': 8.0.0
 
-  '@babel/parser@8.0.0-rc.6':
-    dependencies:
-      '@babel/types': 8.0.0-rc.6
-
   '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
     dependencies:
       '@babel/core': 7.29.0
@@ -8868,11 +8745,6 @@ snapshots:
       '@babel/helper-string-parser': 8.0.0
       '@babel/helper-validator-identifier': 8.0.2
 
-  '@babel/types@8.0.0-rc.6':
-    dependencies:
-      '@babel/helper-string-parser': 8.0.0-rc.6
-      '@babel/helper-validator-identifier': 8.0.0-rc.6
-
   '@bomb.sh/tab@0.0.15(cac@7.0.0)(citty@0.2.2)':
     optionalDependencies:
       cac: 7.0.0
@@ -8885,23 +8757,11 @@ snapshots:
 
   '@chevrotain/types@11.1.2': {}
 
-  '@clack/core@1.4.1':
-    dependencies:
-      fast-wrap-ansi: 0.2.0
-      sisteransi: 1.0.5
-
   '@clack/core@1.4.2':
     dependencies:
       fast-wrap-ansi: 0.2.0
       sisteransi: 1.0.5
 
-  '@clack/prompts@1.5.1':
-    dependencies:
-      '@clack/core': 1.4.1
-      fast-string-width: 3.0.2
-      fast-wrap-ansi: 0.2.0
-      sisteransi: 1.0.5
-
   '@clack/prompts@1.6.0':
     dependencies:
       '@clack/core': 1.4.2
@@ -8956,12 +8816,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/core@1.11.0':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.2
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/core@1.11.1':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
@@ -8973,11 +8827,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.11.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.11.1':
     dependencies:
       tslib: 2.8.1
@@ -8996,7 +8845,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.84.0':
     dependencies:
       '@types/estree': 1.0.9
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/types': 8.62.0
       comment-parser: 1.4.5
       esquery: 1.7.0
       jsdoc-type-pratt-parser: 7.1.1
@@ -9004,7 +8853,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.87.0':
     dependencies:
       '@types/estree': 1.0.9
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/types': 8.62.0
       comment-parser: 1.4.7
       esquery: 1.7.0
       jsdoc-type-pratt-parser: 7.2.0
@@ -9246,10 +9095,6 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.86':
-    dependencies:
-      '@iconify/types': 2.0.0
-
   '@iconify-json/simple-icons@1.2.87':
     dependencies:
       '@iconify/types': 2.0.0
@@ -9378,9 +9223,9 @@ snapshots:
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.11.0
-      '@emnapi/runtime': 1.11.0
-      '@tybys/wasm-util': 0.10.2
+      '@emnapi/core': 1.11.1
+      '@emnapi/runtime': 1.11.1
+      '@tybys/wasm-util': 0.10.3
     optional: true
 
   '@napi-rs/wasm-runtime@1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
@@ -9390,6 +9235,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
   '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
     dependencies:
       '@emnapi/core': 1.11.1
@@ -9412,7 +9264,7 @@ snapshots:
   '@nuxt/cli@3.35.2(@nuxt/schema@4.4.8)(cac@7.0.0)(magicast@0.5.2)':
     dependencies:
       '@bomb.sh/tab': 0.0.15(cac@7.0.0)(citty@0.2.2)
-      '@clack/prompts': 1.5.1
+      '@clack/prompts': 1.6.0
       c12: 3.3.4(magicast@0.5.2)
       citty: 0.2.2
       confbox: 0.2.4
@@ -9467,7 +9319,7 @@ snapshots:
 
   '@nuxt/devtools-wizard@3.2.4':
     dependencies:
-      '@clack/prompts': 1.5.1
+      '@clack/prompts': 1.6.0
       consola: 3.4.2
       diff: 8.0.4
       execa: 8.0.1
@@ -9565,24 +9417,24 @@ snapshots:
   '@nuxt/eslint-config@1.16.0(@typescript-eslint/utils@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(@vue/compiler-sfc@3.5.38)(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
-      '@clack/prompts': 1.5.1
+      '@clack/prompts': 1.6.0
       '@eslint/js': 10.0.1(eslint@10.5.0(jiti@2.7.0))
       '@nuxt/eslint-plugin': 1.16.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@stylistic/eslint-plugin': 5.10.0(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/eslint-plugin': 8.61.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/parser': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       eslint: 10.5.0(jiti@2.7.0)
       eslint-config-flat-gitignore: 2.3.0(eslint@10.5.0(jiti@2.7.0))
       eslint-flat-config-utils: 3.2.0
       eslint-merge-processors: 2.0.0(eslint@10.5.0(jiti@2.7.0))
       eslint-plugin-import-lite: 0.6.0(eslint@10.5.0(jiti@2.7.0))
       eslint-plugin-import-x: 4.16.2(@typescript-eslint/utils@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))
-      eslint-plugin-jsdoc: 63.0.2(eslint@10.5.0(jiti@2.7.0))
+      eslint-plugin-jsdoc: 63.0.8(eslint@10.5.0(jiti@2.7.0))
       eslint-plugin-regexp: 3.1.0(eslint@10.5.0(jiti@2.7.0))
       eslint-plugin-unicorn: 65.0.1(eslint@10.5.0(jiti@2.7.0))
-      eslint-plugin-vue: 10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.5.0(jiti@2.7.0)))(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.5.0(jiti@2.7.0)))
+      eslint-plugin-vue: 10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.5.0(jiti@2.7.0)))(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.5.0(jiti@2.7.0)))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.38)(eslint@10.5.0(jiti@2.7.0))
-      globals: 17.6.0
+      globals: 17.7.0
       local-pkg: 1.2.1
       pathe: 2.0.3
       vue-eslint-parser: 10.4.1(eslint@10.5.0(jiti@2.7.0))
@@ -9595,7 +9447,7 @@ snapshots:
 
   '@nuxt/eslint-plugin@1.16.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/types': 8.62.0
       '@typescript-eslint/utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       eslint: 10.5.0(jiti@2.7.0)
     transitivePeerDependencies:
@@ -9986,7 +9838,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-minify/binding-win32-arm64-msvc@0.133.0':
@@ -10194,28 +10046,28 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.131.0':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.132.0':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-parser/binding-wasm32-wasi@0.133.0':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.5(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.129.0':
@@ -10743,7 +10595,7 @@ snapshots:
   '@stylistic/eslint-plugin@5.10.0(eslint@10.5.0(jiti@2.7.0))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/types': 8.62.0
       eslint: 10.5.0(jiti@2.7.0)
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -11104,26 +10956,10 @@ snapshots:
     dependencies:
       '@types/node': 25.0.3
 
-  '@typescript-eslint/eslint-plugin@8.61.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/scope-manager': 8.61.0
-      '@typescript-eslint/type-utils': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.61.0
-      eslint: 10.5.0(jiti@2.7.0)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/eslint-plugin@8.62.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
+  '@typescript-eslint/eslint-plugin@8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/parser': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@typescript-eslint/scope-manager': 8.62.0
       '@typescript-eslint/type-utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@typescript-eslint/utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
@@ -11148,18 +10984,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.61.0
-      '@typescript-eslint/types': 8.61.0
-      '@typescript-eslint/typescript-estree': 8.61.0(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.61.0
-      debug: 4.4.3
-      eslint: 10.5.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.62.0
@@ -11174,26 +10998,8 @@ snapshots:
 
   '@typescript-eslint/project-service@8.56.1(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
-      debug: 4.4.3
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.61.0(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
-      debug: 4.4.3
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/project-service@8.61.1(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/tsconfig-utils': 8.62.0(typescript@6.0.3)
+      '@typescript-eslint/types': 8.62.0
       debug: 4.4.3
       typescript: 6.0.3
     transitivePeerDependencies:
@@ -11227,16 +11033,6 @@ snapshots:
       '@typescript-eslint/types': 8.56.1
       '@typescript-eslint/visitor-keys': 8.56.1
 
-  '@typescript-eslint/scope-manager@8.61.0':
-    dependencies:
-      '@typescript-eslint/types': 8.61.0
-      '@typescript-eslint/visitor-keys': 8.61.0
-
-  '@typescript-eslint/scope-manager@8.61.1':
-    dependencies:
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/visitor-keys': 8.61.1
-
   '@typescript-eslint/scope-manager@8.62.0':
     dependencies:
       '@typescript-eslint/types': 8.62.0
@@ -11246,30 +11042,10 @@ snapshots:
     dependencies:
       typescript: 6.0.3
 
-  '@typescript-eslint/tsconfig-utils@8.61.0(typescript@6.0.3)':
-    dependencies:
-      typescript: 6.0.3
-
-  '@typescript-eslint/tsconfig-utils@8.61.1(typescript@6.0.3)':
-    dependencies:
-      typescript: 6.0.3
-
   '@typescript-eslint/tsconfig-utils@8.62.0(typescript@6.0.3)':
     dependencies:
       typescript: 6.0.3
 
-  '@typescript-eslint/type-utils@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.61.0
-      '@typescript-eslint/typescript-estree': 8.61.0(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-      debug: 4.4.3
-      eslint: 10.5.0(jiti@2.7.0)
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/types': 8.62.0
@@ -11284,10 +11060,6 @@ snapshots:
 
   '@typescript-eslint/types@8.56.1': {}
 
-  '@typescript-eslint/types@8.61.0': {}
-
-  '@typescript-eslint/types@8.61.1': {}
-
   '@typescript-eslint/types@8.62.0': {}
 
   '@typescript-eslint/typescript-estree@8.56.1(typescript@6.0.3)':
@@ -11305,36 +11077,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.61.0(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.61.0(typescript@6.0.3)
-      '@typescript-eslint/tsconfig-utils': 8.61.0(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.0
-      '@typescript-eslint/visitor-keys': 8.61.0
-      debug: 4.4.3
-      minimatch: 10.2.4
-      semver: 7.8.5
-      tinyglobby: 0.2.17
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/typescript-estree@8.61.1(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@6.0.3)
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/visitor-keys': 8.61.1
-      debug: 4.4.3
-      minimatch: 10.2.4
-      semver: 7.8.5
-      tinyglobby: 0.2.17
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.62.0(typescript@6.0.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.62.0(typescript@6.0.3)
@@ -11361,28 +11103,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/scope-manager': 8.61.0
-      '@typescript-eslint/types': 8.61.0
-      '@typescript-eslint/typescript-estree': 8.61.0(typescript@6.0.3)
-      eslint: 10.5.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.61.1(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/types': 8.61.1
-      '@typescript-eslint/typescript-estree': 8.61.1(typescript@6.0.3)
-      eslint: 10.5.0(jiti@2.7.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@10.5.0(jiti@2.7.0))
@@ -11399,16 +11119,6 @@ snapshots:
       '@typescript-eslint/types': 8.56.1
       eslint-visitor-keys: 5.0.1
 
-  '@typescript-eslint/visitor-keys@8.61.0':
-    dependencies:
-      '@typescript-eslint/types': 8.61.0
-      eslint-visitor-keys: 5.0.1
-
-  '@typescript-eslint/visitor-keys@8.61.1':
-    dependencies:
-      '@typescript-eslint/types': 8.61.1
-      eslint-visitor-keys: 5.0.1
-
   '@typescript-eslint/visitor-keys@8.62.0':
     dependencies:
       '@typescript-eslint/types': 8.62.0
@@ -11466,7 +11176,7 @@ snapshots:
 
   '@unocss/eslint-plugin@66.7.2(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.61.1(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       '@unocss/config': 66.7.2
       '@unocss/core': 66.7.2
       '@unocss/rule-utils': 66.7.2
@@ -11901,11 +11611,11 @@ snapshots:
 
   '@vitest/eslint-plugin@1.6.20(@typescript-eslint/eslint-plugin@8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)(vitest@4.1.9(@types/node@25.0.3)(vite@8.1.0))':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/utils': 8.61.1(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/scope-manager': 8.62.0
+      '@typescript-eslint/utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       eslint: 10.5.0(jiti@2.7.0)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       typescript: 6.0.3
       vitest: 4.1.9(@types/node@25.0.3)(vite@8.1.0)
     transitivePeerDependencies:
@@ -13104,10 +12814,6 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.4.10:
-    optionalDependencies:
-      '@types/trusted-types': 2.0.7
-
   dompurify@3.4.11:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -13260,7 +12966,7 @@ snapshots:
   eslint-plugin-import-x@4.16.2(@typescript-eslint/utils@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0)):
     dependencies:
       '@package-json/types': 0.0.12
-      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/types': 8.62.0
       comment-parser: 1.4.7
       debug: 4.4.3
       eslint: 10.5.0(jiti@2.7.0)
@@ -13275,26 +12981,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@63.0.2(eslint@10.5.0(jiti@2.7.0)):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.87.0
-      '@es-joy/resolve.exports': 1.2.0
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.7
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint: 10.5.0(jiti@2.7.0)
-      espree: 11.2.0
-      esquery: 1.7.0
-      html-entities: 2.6.0
-      object-deep-merge: 2.0.1
-      parse-imports-exports: 0.2.4
-      semver: 7.8.5
-      spdx-expression-parse: 4.0.0
-      to-valid-identifier: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-jsdoc@63.0.8(eslint@10.5.0(jiti@2.7.0)):
     dependencies:
       '@es-joy/jsdoccomment': 0.87.0
@@ -13348,7 +13034,7 @@ snapshots:
 
   eslint-plugin-perfectionist@5.9.1(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3):
     dependencies:
-      '@typescript-eslint/utils': 8.61.1(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/utils': 8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
       eslint: 10.5.0(jiti@2.7.0)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
@@ -13398,12 +13084,12 @@ snapshots:
       detect-indent: 7.0.2
       eslint: 10.5.0(jiti@2.7.0)
       find-up-simple: 1.0.1
-      globals: 17.6.0
+      globals: 17.7.0
       indent-string: 5.0.0
       is-builtin-module: 5.0.0
       jsesc: 3.1.0
       pluralize: 8.0.0
-      regjsparser: 0.13.0
+      regjsparser: 0.13.2
       semver: 7.8.5
       strip-indent: 4.1.1
 
@@ -13418,7 +13104,7 @@ snapshots:
       detect-indent: 7.0.2
       eslint: 10.5.0(jiti@2.7.0)
       find-up-simple: 1.0.1
-      globals: 17.6.0
+      globals: 17.7.0
       indent-string: 5.0.0
       is-builtin-module: 5.0.0
       jsesc: 3.1.0
@@ -13431,21 +13117,7 @@ snapshots:
     dependencies:
       eslint: 10.5.0(jiti@2.7.0)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
-
-  eslint-plugin-vue@10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.5.0(jiti@2.7.0)))(@typescript-eslint/parser@8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.5.0(jiti@2.7.0))):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@10.5.0(jiti@2.7.0))
-      eslint: 10.5.0(jiti@2.7.0)
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 7.1.1
-      semver: 7.8.5
-      vue-eslint-parser: 10.4.1(eslint@10.5.0(jiti@2.7.0))
-      xml-name-validator: 4.0.0
-    optionalDependencies:
-      '@stylistic/eslint-plugin': 5.10.0(eslint@10.5.0(jiti@2.7.0))
-      '@typescript-eslint/parser': 8.61.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
+      '@typescript-eslint/eslint-plugin': 8.62.0(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3)
 
   eslint-plugin-vue@10.9.2(@stylistic/eslint-plugin@5.10.0(eslint@10.5.0(jiti@2.7.0)))(@typescript-eslint/parser@8.62.0(eslint@10.5.0(jiti@2.7.0))(typescript@6.0.3))(eslint@10.5.0(jiti@2.7.0))(vue-eslint-parser@10.4.1(eslint@10.5.0(jiti@2.7.0))):
     dependencies:
@@ -13774,8 +13446,6 @@ snapshots:
 
   globals@15.15.0: {}
 
-  globals@17.6.0: {}
-
   globals@17.7.0: {}
 
   globby@16.2.0:
@@ -14477,7 +14147,7 @@ snapshots:
       d3-sankey: 0.12.3
       dagre-d3-es: 7.0.14
       dayjs: 1.11.19
-      dompurify: 3.4.10
+      dompurify: 3.4.11
       es-toolkit: 1.46.1
       katex: 0.16.27
       khroma: 2.1.0
@@ -15834,10 +15504,6 @@ snapshots:
     dependencies:
       rc: 1.2.8
 
-  regjsparser@0.13.0:
-    dependencies:
-      jsesc: 3.1.0
-
   regjsparser@0.13.2:
     dependencies:
       jsesc: 3.1.0
@@ -16140,7 +15806,7 @@ snapshots:
 
   skills-npm@1.2.0:
     dependencies:
-      '@clack/prompts': 1.5.1
+      '@clack/prompts': 1.6.0
       cac: 7.0.0
       gray-matter: 4.0.3
       picocolors: 1.1.1
@@ -17054,7 +16720,7 @@ snapshots:
       '@docsearch/css': 4.5.4
       '@docsearch/js': 4.5.4
       '@docsearch/sidepanel-js': 4.5.4
-      '@iconify-json/simple-icons': 1.2.86
+      '@iconify-json/simple-icons': 1.2.87
       '@shikijs/core': 3.23.0
       '@shikijs/transformers': 3.23.0
       '@shikijs/types': 3.23.0
@@ -17183,7 +16849,7 @@ snapshots:
 
   vue-router@5.1.0(@vue/compiler-sfc@3.5.38)(vite@8.1.0(@types/node@25.0.3)(@vitejs/devtools@packages+core)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.44.1)(tsx@4.22.4)(yaml@2.9.0))(vue@3.5.38(typescript@6.0.3)):
     dependencies:
-      '@babel/generator': 8.0.0-rc.6
+      '@babel/generator': 8.0.0
       '@vue-macros/common': 3.1.2(vue@3.5.38(typescript@6.0.3))
       '@vue/devtools-api': 8.1.2
       ast-walker-scope: 0.9.0
@@ -17207,7 +16873,7 @@ snapshots:
 
   vue-router@5.1.0(@vue/compiler-sfc@3.5.38)(vite@8.1.0)(vue@3.5.38(typescript@6.0.3)):
     dependencies:
-      '@babel/generator': 8.0.0-rc.6
+      '@babel/generator': 8.0.0
       '@vue-macros/common': 3.1.2(vue@3.5.38(typescript@6.0.3))
       '@vue/devtools-api': 8.1.2
       ast-walker-scope: 0.9.0