feat(vite): inspect modules and plugins page (#389)

Author: webfansplz

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>