chore: update

Author: webfansplz

.gitignore

@@ -19,3 +19,4 @@ packages/kit/skills
 *.tsbuildinfo
 docs/.vitepress/cache
 .turbo
+.context

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

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,12 @@ 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/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,9 @@ const DevToolsKitNav = [
   { text: 'Dock System', link: '/kit/dock-system' },
   { text: 'RPC', link: '/kit/rpc' },
   { text: 'Shared State', link: '/kit/shared-state' },
+  { text: 'Logs & Notifications', link: '/kit/logs' },
+  { text: 'Terminals & Processes', link: '/kit/terminals' },
+  { text: 'Examples', link: '/kit/examples' },
 ]
 
 const SocialLinks = [
@@ -66,6 +69,10 @@ 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: 'Logs', link: '/kit/logs' },
+          { text: 'JSON Render', link: '/kit/json-render' },
+          { text: 'Terminals', link: '/kit/terminals' },
+          { text: 'Examples', link: '/kit/examples' },
         ],
       },
     ],

docs/guide/index.md

@@ -5,9 +5,8 @@ outline: deep
 # Getting Started
 
 > [!WARNING]
-> Vite DevTools is still in development and not yet ready for production use.
-> And currently Vite DevTools is designed only for Vite-Rolldown's build mode.
-> Dev mode and normal Vite are not supported yet.
+> Vite DevTools currently only supports build mode of Vite 8+.
+> Dev mode and Vite versions under 8 are not supported yet.
 
 ## What is Vite DevTools?
 
@@ -25,24 +24,54 @@ Vite DevTools is a comprehensive set of developer tools for visualizing and anal
 
 If you want to give an early preview, you can try it out by building this project from source, or install the preview build with the following steps:
 
-Install or upgrade your Vite to the beta version 8:
+Install or upgrade your Vite to version 8:
 
 <!-- eslint-skip -->
 ```json [package.json]
 {
   "dependencies": {
-    "vite": "^8.0.0-beta.7"
+    "vite": "^8.0.0"
   }
 }
 ```
 
-Install the DevTools plugin:
+Install the required DevTools package:
 
 ```bash
 pnpm add -D @vitejs/devtools
 ```
 
-Enable the DevTools plugin in your Vite config and turn on the devtools mode for Rolldown:
+Vite DevTools has two client modes. Configure one mode at a time.
+
+### Standalone mode
+
+The DevTools client runs in a standalone window (no user app).
+
+Configure `vite.config.ts`:
+
+```ts [vite.config.ts] twoslash
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  devtools: {
+    enabled: true,
+  },
+})
+```
+
+Run:
+
+```bash
+pnpm build
+```
+
+After the build completes, open the DevTools URL shown in the terminal.
+
+### Embedded mode
+
+The DevTools client runs inside an embedded floating panel.
+
+Configure `vite.config.ts`:
 
 ```ts [vite.config.ts] twoslash
 import { DevTools } from '@vitejs/devtools'
@@ -60,18 +89,15 @@ export default defineConfig({
 })
 ```
 
-Run your Vite build, to generate the Rolldown build metadata:
+Run:
 
 ```bash
 pnpm build
-```
-
-Open the DevTools panel in your browser to play with the DevTools:
-
-```bash
 pnpm dev
 ```
 
+Then open your app in the browser and open the DevTools panel.
+
 ## What's Next?
 
 Now that you have Vite DevTools set up, you can:
@@ -87,7 +113,7 @@ Now that you have Vite DevTools set up, you can:
 
 - **Build mode only**: Currently works with Vite-Rolldown's build mode
 - **Dev mode**: Not yet supported (planned for future releases)
-- **Standard Vite**: Requires Rolldown Vite for now
+- **Vite Version**: Requires Vite 8 or higher versions for now
 
 ## Architecture Overview
 

docs/kit/devtools-plugin.md

@@ -210,6 +210,28 @@ export default function myAnalyzerPlugin(): Plugin {
 }
 ```
 
+## Debugging with Self Inspect
+
+When developing or debugging a DevTools plugin, you can install `@vitejs/devtools-self-inspect` to get a live view of all registered RPC functions, dock entries, client scripts, and DevTools-enabled plugins:
+
+```bash
+pnpm add -D @vitejs/devtools-self-inspect
+```
+
+```ts [vite.config.ts]
+import { DevToolsSelfInspect } from '@vitejs/devtools-self-inspect'
+
+export default defineConfig({
+  plugins: [
+    DevTools(),
+    DevToolsSelfInspect(),
+    // ...your plugins
+  ],
+})
+```
+
+This adds a "Self Inspect" panel to DevTools that shows the internal state of the DevTools system — helpful for verifying that your plugin's RPC functions, docks, and client scripts are registered correctly.
+
 ## Next Steps
 
 - **[Dock System](./dock-system)** - Learn about different dock entry types (iframe, action, custom renderer)