feat(vite): inspect modules and plugins page

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.

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.

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 |

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.
 

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'
 

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"
   >

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'
 

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[]

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

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>

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

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'
 

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'

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'
 

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

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 }">

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'

packages/rolldown/src/app/pages/session/[session]/chunks.vue

@@ -2,16 +2,19 @@
 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'
 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"

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"

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'

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'

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": "*",

packages/rolldown/src/app/components/chart/NavBreadcrumb.vue → 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<{