chore: update

Author: webfansplz

.gitignore

@@ -14,7 +14,9 @@ packages/vite/runtime
 packages/rolldown/src/public/fonts
 packages/rolldown/src/app/public/fonts
 packages/rolldown/runtime
+packages/kit/skills
 .rolldown
 *.tsbuildinfo
 docs/.vitepress/cache
 .turbo
+.context

.vscode/settings.json

@@ -34,5 +34,7 @@
     "json",
     "jsonc",
     "yaml"
-  ]
+  ],
+
+  "npm.exclude": "**/{docs,examples/**}"
 }

AGENTS.md

@@ -1,73 +1,71 @@
 # AGENTS GUIDE
 
-Quick reference for future agents working on this repo.
-
 ## Stack & Structure
-- Monorepo via `pnpm` workspaces; builds orchestrated with `turbo`.
-- ESM TypeScript everywhere; bundling with `tsdown`.
-- Key packages:
-  - `packages/core` (`@vitejs/devtools`): Vite plugin, CLI, host/runtime (docks, views, terminals), websocket RPC server, standalone/webcomponents client.
-  - `packages/kit` (`@vitejs/devtools-kit`): public types/utilities (`defineRpcFunction`, shared state, events) for integration authors; client helpers.
-  - `packages/rpc` (`@vitejs/devtools-rpc`): thin typed RPC wrapper over `birpc`, with WS presets.
-  - `packages/rolldown` (`@vitejs/devtools-rolldown`): Nuxt-based UI served from the plugin; registers Vite dock and RPC functions for Rolldown build data.
-  - `packages/webext`: browser extension scaffolding (currently ancillary).
-- Docs under `docs/` (VitePress); user-facing guides in `docs/guide`.
-- Path aliases defined in `alias.ts` and propagated to `tsconfig.base.json` (do not edit paths manually).
+
+Monorepo (`pnpm` workspaces + `turbo`). ESM TypeScript; bundled with `tsdown`. Path aliases in `alias.ts` (propagated to `tsconfig.base.json` — do not edit manually).
+
+### Packages
+
+| Package | npm | Description |
+|---------|-----|-------------|
+| `packages/core` | `@vitejs/devtools` | Vite plugin, CLI, runtime hosts (docks, views, terminals), WS RPC server, standalone/webcomponents client |
+| `packages/kit` | `@vitejs/devtools-kit` | Public types/utilities for integration authors (`defineRpcFunction`, shared state, events, client helpers) |
+| `packages/rpc` | `@vitejs/devtools-rpc` | Typed RPC wrapper over `birpc` with WS presets |
+| `packages/ui` | `@vitejs/devtools-ui` | Shared UI components, composables, and UnoCSS preset (`presetDevToolsUI`). Private, not published |
+| `packages/rolldown` | `@vitejs/devtools-rolldown` | Nuxt UI for Rolldown build data. Serves at `/.devtools-rolldown/` |
+| `packages/vite` | `@vitejs/devtools-vite` | Nuxt UI for Vite DevTools (WIP). Serves at `/.devtools-vite/` |
+| `packages/self-inspect` | `@vitejs/devtools-self-inspect` | Meta-introspection — DevTools for the DevTools. Serves at `/.devtools-self-inspect/` |
+| `packages/webext` | — | Browser extension scaffolding (ancillary) |
+
+Other top-level directories:
+- `docs/` — VitePress docs; guides in `docs/guide/`
+- `skills/` — Agent skill files generated from docs via [Agent Skills](https://agentskills.io/home). Structured references (RPC patterns, dock types, shared state, project structure) for AI agent context.
 
 ```mermaid
 flowchart TD
-  core["@vitejs/devtools"] --> kit["@vitejs/devtools-kit"]
-  core --> rpc["@vitejs/devtools-rpc"]
-  core --> rolldownUI["@vitejs/devtools-rolldown (Nuxt UI)"]
-  rolldownUI --> kit
-  rolldownUI --> rpc
-  webext["@vitejs/devtools-webext"] --> core
+  core["core"] --> kit & rpc
+  core --> rolldown & vite & self-inspect
+  rolldown --> kit & rpc & ui
+  vite --> kit & rpc & ui
+  self-inspect --> kit & rpc
+  webext --> core
 ```
 
-## Runtime Architecture (high level)
-- Plugin entry (`createDevToolsContext` in `packages/core/src/node/context.ts`) builds a `DevToolsNodeContext` with hosts for RPC, docks, views, terminals. It registers built-in RPC functions and invokes `plugin.devtools.setup` hooks from Vite plugins.
-- Node context vs client context:
-  - **Node context**: server-side state (cwd, workspaceRoot, vite config, mode, rpc/docks/views/terminals hosts) plus internal storage (auth) from `context-internal.ts`. Used by plugins and RPC handlers.
-  - **Client context**: webcomponents/Nuxt UI state (`packages/core/src/client/webcomponents/state/*`), holding dock entries, selected panels, and RPC client; created with `clientType` of `embedded` or `standalone`.
-- Websocket server (`packages/core/src/node/ws.ts`) exposes RPC via `@vitejs/devtools-rpc/presets/ws`. Auth is skipped in build mode or when `devtools.clientAuth` is `false`; trusted IDs stored under `node_modules/.vite/devtools/auth.json`.
-- DevTools middleware (`packages/core/src/node/server.ts`) serves connection meta and standalone client assets.
-- The Rolldown UI plugin (`packages/rolldown/src/node/plugin.ts`) registers RPC functions (Rolldown data fetchers) and hosts the Nuxt-generated static UI at `/.devtools-rolldown/`, adding a dock entry.
-- Nuxt app config (`packages/rolldown/src/nuxt.config.ts`): SPA, base `/.devtools-rolldown/`, disables Nuxt devtools, enables typed pages, uses Unocss/VueUse; sets `vite.devtools.clientAuth = false` for UI.
+## Architecture
 
-## Client Modes (kit/core)
-- **Embedded mode**: default overlay injected into the host app; docks render inside the app shell; use `clientType: 'embedded'` when creating client context.
-- **Standalone mode**: runs the webcomponents UI as an independent page (see `packages/core/src/client/standalone`); useful for external access or when not injecting into the host app UI.
+- **Entry**: `createDevToolsContext` (`packages/core/src/node/context.ts`) builds `DevToolsNodeContext` with hosts for RPC, docks, views, terminals. Invokes `plugin.devtools.setup` hooks.
+- **Node context**: server-side (cwd, vite config, mode, hosts, auth storage at `node_modules/.vite/devtools/auth.json`).
+- **Client context**: webcomponents/Nuxt UI state (`packages/core/src/client/webcomponents/state/*`) — dock entries, panels, RPC client. Two modes: `embedded` (overlay in host app) and `standalone` (independent page).
+- **WS server** (`packages/core/src/node/ws.ts`): RPC via `@vitejs/devtools-rpc/presets/ws`. Auth skipped in build mode or when `devtools.clientAuth` is `false`.
+- **Nuxt UI plugins** (rolldown, vite, self-inspect): each registers RPC functions and hosts static Nuxt SPA at its own base path.
 
-## Development Workflow
-- Install: `pnpm install` (repo requires `pnpm@10.x`).
-- Build all: `pnpm build` (runs `turbo run build`; for UI data, build generates Rolldown metadata under `packages/rolldown/node_modules/.rolldown`).
-- Dev:
-  - Core playground: `pnpm -C packages/core run play`
-  - Rolldown UI: `pnpm -C packages/rolldown run dev`
-  - Standalone core client: `pnpm -C packages/core run dev:standalone`
-- Tests: `pnpm test` (Vitest; projects under `packages/*` and `test`).
-- Typecheck: `pnpm typecheck` (via `vue-tsc -b`).
-- Lint: `pnpm lint`
-  - Use `pnpm lint --fix` to auto-resolve common issues.
-- Docs: `pnpm -C docs run docs` / `docs:build` / `docs:serve`.
+## Development
 
-## Conventions & Guardrails
-- Prefer workspace imports via aliases from `alias.ts`.
-- Keep RPC additions typed; use `defineRpcFunction` from kit when adding server functions.
-- Docks/views/terminals are registered through hosts on `DevToolsNodeContext`; mutations should update shared state (`@vitejs/devtools-kit/utils/shared-state`).
-- When touching websocket auth or storage, note persisted state lives in `node_modules/.vite/devtools/auth.json` (created by `createStorage`).
-- For Nuxt UI changes, base path must remain `/.devtools-vite/`; keep `clientAuth` considerations in mind if exposing over network.
-- Project is currently focused on Rolldown build-mode analysis; dev-mode support is deferred.
+```sh
+pnpm install                          # requires pnpm@10.x
+pnpm build                            # turbo run build
+pnpm test                             # Vitest
+pnpm typecheck                        # vue-tsc -b
+pnpm lint --fix                       # ESLint
+pnpm -C packages/core run play        # core playground
+pnpm -C packages/rolldown run dev     # rolldown UI dev
+pnpm -C packages/core run dev:standalone  # standalone client
+pnpm -C docs run docs                 # docs dev server
+```
+
+## Conventions
+
+- Use workspace aliases from `alias.ts`.
+- RPC functions must use `defineRpcFunction` from kit; always namespace IDs (`my-plugin:fn-name`).
+- Shared state via `@vitejs/devtools-kit/utils/shared-state`; keep values serializable.
+- Nuxt UI base paths: `/.devtools-rolldown/`, `/.devtools-vite/`, `/.devtools-self-inspect/`.
+- Shared UI components/preset in `packages/ui`; use `presetDevToolsUI` from `@vitejs/devtools-ui/unocss`.
+- Currently focused on Rolldown build-mode analysis; dev-mode support is deferred.
 
-## Useful Paths
-- Core runtime: `packages/core/src/node/*`
-- Core webcomponents: `packages/core/src/client/webcomponents`
-- Kit utilities: `packages/kit/src/utils/*`
-- RPC presets: `packages/rpc/src/presets/ws/*`
-- Rolldown UI app: `packages/rolldown/src/app`
-- Docs: `docs/guide/*`
+## Before PRs
+
+```sh
+pnpm lint && pnpm test && pnpm typecheck && pnpm build
+```
 
-## Quick Checks Before PRs
-- Run `pnpm lint && pnpm test && pnpm typecheck`.
-- Ensure `pnpm build` succeeds (regenerates Rolldown metadata if needed).
-- Follow conventional commit style (`feat:`, `fix:`, etc.). README flags project as WIP; set expectations accordingly.
+Follow conventional commits (`feat:`, `fix:`, etc.).

CLAUDE.md

@@ -0,0 +1 @@
+AGENTS.md

CONTRIBUTING.md

@@ -10,10 +10,20 @@ You can check the [TODO list](https://github.com/vitejs/devtools/issues/9) (excl
 
 ## Setup
 
+Requires `pnpm@10.x`.
+
 ```bash
 pnpm install
 pnpm build  # Required: generates Rolldown meta under ./packages/rolldown/node_modules/.rolldown
-pnpm dev    # Start dev server
+
+# Start Rolldown devtools UI
+pnpm dev:rolldown
+# Start Vite devtools UI
+pnpm dev:vite
+# Core playground (host app with DevTools overlay)
+pnpm play
+# Standalone client dev
+pnpm play:standalone
 ```
 
 **Note**: After pulling latest commits, remove `./packages/rolldown/node_modules/.rolldown` and rebuild to get the latest data format.
@@ -42,8 +52,8 @@ Main entry point and core functionality.
 
 Utility library for integration authors.
 
-- TypeScript types and interfaces
-- Utilities for custom docks, views, panels
+- TypeScript types and interfaces for docks, views, panels
+- `defineRpcFunction` and shared state utilities
 - Event system utilities
 - RPC client helpers
 
@@ -66,9 +76,21 @@ Built-in UI panel for Rolldown integration.
 
 ---
 
+### `packages/vite` - `@vitejs/devtools-vite`
+
+UI for Vite DevTools (WIP).
+
+---
+
+### `packages/ui` - `@vitejs/devtools-ui`
+
+Shared UI components, composables, and UnoCSS preset (`presetDevToolsUI`).
+
+---
+
 ### `packages/rpc` - `@vitejs/devtools-rpc`
 
-RPC layer for component communication.
+Typed RPC wrapper over `birpc` with WebSocket presets.
 
 - RPC client/server implementations
 - WebSocket presets
@@ -79,6 +101,12 @@ RPC layer for component communication.
 
 ---
 
+### `packages/self-inspect` - `@vitejs/devtools-self-inspect`
+
+Meta-introspection — DevTools for the DevTools itself.
+
+---
+
 ### `packages/webext` - `@vitejs/devtools-webext`
 
 Browser extension (planned for future dev mode). **Not accepting contributions currently.**
@@ -87,14 +115,16 @@ Browser extension (planned for future dev mode). **Not accepting contributions c
 
 ## Scripts
 
-- `pnpm build` - Build all packages
-- `pnpm watch` - Watch mode
-- `pnpm dev` - Dev server
-- `pnpm lint` - ESLint
+- `pnpm build` - Build all packages (via turbo)
+- `pnpm watch` - Watch mode for all packages
+- `pnpm play` - Core playground (host app with DevTools overlay)
+- `pnpm play:standalone` - Standalone client dev
+- `pnpm dev:rolldown` - Rolldown UI dev server
+- `pnpm dev:vite` - Vite UI dev server
+- `pnpm docs` - VitePress docs dev server
+- `pnpm lint` - ESLint (pass `--fix` to auto-fix)
 - `pnpm test` - Vitest
-- `pnpm typecheck` - Type check
-
-Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/rolldown run dev`
+- `pnpm typecheck` - vue-tsc type check
 
 ## Workflow
 
@@ -107,5 +137,5 @@ Package-specific: `pnpm -C packages/core run cli`, `pnpm -C packages/rolldown ru
 
 - **core**: CLI in `cli-commands.ts`, server in `server.ts`, components in `client/webcomponents/`
 - **kit**: Keep APIs stable, add types for public APIs, consider backward compatibility
-- **vite**: Nuxt 3 app, Vue 3 Composition API, test with `pnpm dev` after build
+- **vite**: Nuxt 4 app, Vue 3 Composition API, test with `pnpm dev` after build
 - **rpc**: Keep methods type-safe, document new methods, test client/server

README.md

@@ -5,10 +5,7 @@
 
 Vite DevTools is a set of tools for visualizing the internal state and build analysis for Vite and Rolldown.
 
-> [!IMPORTANT]
-> This project is still in development. Not yet usable. You may preview it by building this project from source.
-
-- 📖 [Documentation](https://vite-devtools.netlify.app)
+- 📖 [Documentation](https://devtools.vite.dev)
 - 💡 [Contributing Guide](./CONTRIBUTING.md)
 
 ## 📄 Licenses

alias.ts

@@ -16,9 +16,13 @@ export const alias = {
   '@vitejs/devtools-kit/constants': r('kit/src/constants.ts'),
   '@vitejs/devtools-kit/utils/events': r('kit/src/utils/events.ts'),
   '@vitejs/devtools-kit/utils/nanoid': r('kit/src/utils/nanoid.ts'),
+  '@vitejs/devtools-kit/utils/human-id': r('kit/src/utils/human-id.ts'),
+  '@vitejs/devtools-kit/utils/when': r('kit/src/utils/when.ts'),
   '@vitejs/devtools-kit/utils/shared-state': r('kit/src/utils/shared-state.ts'),
   '@vitejs/devtools-kit': r('kit/src/index.ts'),
   '@vitejs/devtools-rolldown': r('rolldown/src/index.ts'),
+  '@vitejs/devtools-self-inspect': r('self-inspect/src/index.ts'),
+  '@vitejs/devtools/internal': r('core/src/internal.ts'),
   '@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
   '@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
   '@vitejs/devtools': r('core/src/index.ts'),

docs/.vitepress/config.ts

@@ -14,6 +14,11 @@ const DevToolsKitNav = [
   { text: 'Dock System', link: '/kit/dock-system' },
   { text: 'RPC', link: '/kit/rpc' },
   { text: 'Shared State', link: '/kit/shared-state' },
+  { text: 'Commands', link: '/kit/commands' },
+  { text: 'When Clauses', link: '/kit/when-clauses' },
+  { text: 'Logs & Notifications', link: '/kit/logs' },
+  { text: 'Terminals & Processes', link: '/kit/terminals' },
+  { text: 'Examples', link: '/kit/examples' },
 ]
 
 const SocialLinks = [
@@ -27,7 +32,7 @@ const SocialLinks = [
 // https://vitepress.dev/reference/site-config
 export default extendConfig(withMermaid(defineConfig({
   title: 'Vite DevTools',
-  description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
+  description: 'An extensible devtools framework for the Vite ecosystem. Build, compose, and integrate developer tools with a unified foundation.',
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
   ],
@@ -37,6 +42,12 @@ export default extendConfig(withMermaid(defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Builtin DevTools',
+        items: [
+          { text: 'DevTools for Rolldown', link: '/rolldown/' },
+        ],
+      },
       {
         text: 'DevTools Kit',
         items: DevToolsKitNav,
@@ -55,7 +66,13 @@ export default extendConfig(withMermaid(defineConfig({
         text: 'Guide',
         items: [
           { text: 'Getting Started', link: '/guide/' },
-          { text: 'Features', link: '/guide/features/' },
+        ],
+      },
+      {
+        text: 'DevTools for Rolldown',
+        items: [
+          { text: 'Introduction', link: '/rolldown/' },
+          { text: 'Features', link: '/rolldown/features' },
         ],
       },
       {
@@ -66,6 +83,12 @@ export default extendConfig(withMermaid(defineConfig({
           { text: 'Dock System', link: '/kit/dock-system' },
           { text: 'RPC', link: '/kit/rpc' },
           { text: 'Shared State', link: '/kit/shared-state' },
+          { text: 'Commands', link: '/kit/commands' },
+          { text: 'When Clauses', link: '/kit/when-clauses' },
+          { text: 'Logs', link: '/kit/logs' },
+          { text: 'JSON Render', link: '/kit/json-render' },
+          { text: 'Terminals', link: '/kit/terminals' },
+          { text: 'Examples', link: '/kit/examples' },
         ],
       },
     ],
@@ -87,7 +110,7 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'Vite DevTools',
           items: [
             { text: 'Guide', link: '/guide/' },
-            { text: 'Features', link: '/guide/features' },
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
             { text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
             { text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
           ],
@@ -96,6 +119,12 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'DevTools Kit',
           items: DevToolsKitNav,
         },
+        {
+          title: 'Builtin DevTools',
+          items: [
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
+          ],
+        },
       ],
       social: SocialLinks,
     },

docs/.vitepress/theme/Home.vue

@@ -11,16 +11,16 @@ import Spacer from '@components/shared/Spacer.vue'
 
   <HeadingSection
     heading="Inspect, Analyze, Extend"
-    subheading="Vite DevTools not only provides built-in features, but also a extensible architecture for custom integrations."
+    subheading="Vite DevTools provides an extensible framework with built-in integrations like DevTools for Rolldown, plus an open architecture for custom tools."
   />
 
   <FeatureGrid />
 
   <Spacer />
 
   <Footer
-    heading="Understand your Vite App Better"
-    subheading="Visually inspect modules, plugins, chunks, assets, packages..." button-text="Get Started"
+    heading="Understand Your Vite Ecosystem Better"
+    subheading="Inspect builds, analyze performance, extend with custom integrations..." button-text="Get Started"
     button-link="/guide/"
   />
 </template>