feat(devtools): add the a11y inspector plugin

.github/workflows/ecosystem-playground.yml

@@ -0,0 +1,34 @@
+name: ecosystem-playground
+
+# Manual-trigger only smoke check for playgrounds-ecosystem/modules/ — NOT
+# part of the default push/pull_request CI path. See
+# playgrounds-ecosystem/README.md and playgrounds-ecosystem/REPORTS.md for
+# context (nuxt/devtools#1022).
+on:
+  workflow_dispatch:
+
+jobs:
+  smoke:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - run: npm install -g corepack@latest
+      - run: corepack enable
+      # playgrounds-ecosystem/modules/ links @nuxt/devtools via
+      # `link:../../packages/devtools` (this repo's own build, not the npm
+      # registry) — so the root workspace needs to be installed + stubbed
+      # first for that path to resolve. `prepare` (stub build) is enough:
+      # Nuxt DevTools no-ops entirely outside `dev` mode
+      # (packages/devtools/src/module-main.ts), so a `build` here can't
+      # exercise anything devtools-specific anyway — this is purely a "does
+      # the module combo still build" signal, not a full `pnpm build`.
+      - run: pnpm install
+      - run: pnpm run prepare
+      - run: pnpm -C playgrounds-ecosystem/modules install
+      - name: Build the module combo
+        run: pnpm -C playgrounds-ecosystem/modules run build

AGENTS.md

@@ -0,0 +1,53 @@
+# AGENTS.md
+
+Guidance for contributors and AI agents working in this repo.
+
+## Packages
+
+- `packages/devtools` — the main Nuxt module. Its `client/` directory is a
+  separate Nuxt app that renders the DevTools UI; `src/server-rpc/**` is the
+  server surface that runs on the Node dev server and is called from that
+  browser client.
+- `packages/devtools-kit` — the module-author API, built with `unbuild`.
+- `packages/devtools-ui-kit` — a Nuxt UI component module used by the client.
+
+## Setup & build order
+
+```
+pnpm install
+pnpm prepare   # or: pnpm build
+```
+
+Run `pnpm prepare` (or `pnpm build`) **before** `pnpm typecheck`. The root
+`tsconfig.json` extends a generated file,
+`packages/devtools/client/.nuxt/tsconfig.json`, which only exists after Nuxt
+has prepared the client app. On a fresh clone, `pnpm typecheck` fails until
+this has run.
+
+## Everyday commands
+
+| Command               | Purpose                                           |
+| --------------------- | ------------------------------------------------- |
+| `pnpm lint`           | ESLint over the whole repo                        |
+| `pnpm typecheck`      | `vue-tsc --noEmit` (requires prepare/build first) |
+| `pnpm test`           | Runs `pnpm lint && pnpm test:unit`                |
+| `pnpm test:unit`      | Unit tests via `vitest run`                       |
+| `pnpm test:e2e:dev`   | Playwright e2e against the dev server             |
+| `pnpm test:e2e:built` | Playwright e2e against a built app                |
+
+(`pnpm test:e2e` runs both the dev and built e2e suites; config lives at
+`tests/e2e/playwright.config.ts`.)
+
+## Dependency model
+
+Dependency versions are pinned centrally via pnpm **catalogs** in
+`pnpm-workspace.yaml` (e.g. `catalog:cli`, `catalog:prod`, `catalog:frontend`,
+`catalog:buildtools`). When adding a dependency, reference it as
+`catalog:<name>` in the package's `package.json` rather than pinning a raw
+version — add the version to the appropriate catalog in
+`pnpm-workspace.yaml` if it isn't there yet.
+
+## Package manager
+
+This repo uses pnpm 11 (see `packageManager` in the root `package.json`). Use
+`pnpm`, not `npm` or `yarn`.

README.md

@@ -150,8 +150,8 @@ export default defineNuxtConfig({
   devtools: {
     // Enable devtools (default: true)
     enabled: true,
-    // VS Code Server options
-    vscode: {},
+    // Coder code-server options (enabled by default)
+    codeServer: {},
     // ...other options
   }
 })

docs/content/1.guide/0.getting-started.md

@@ -19,7 +19,11 @@ Restart your Nuxt server and open your app in browser. Click the Nuxt icon on th
 
 ### Opting in to v4.0
 
-Nuxt DevTools v4.0 is currently in alpha. Since Nuxt ships with a built-in version of DevTools, you can opt-in to v4.0 by using package manager resolutions to override the bundled version:
+Nuxt DevTools v4.0 is currently in alpha and requires Vite 8 — it integrates
+with [Vite DevTools](https://github.com/vitejs/devtools), whose Code Server
+dock only peers with Vite 8. Since Nuxt ships with a built-in version of
+DevTools, you can opt-in to v4.0 by using package manager resolutions to
+override the bundled version:
 
 ::code-group
 
@@ -100,8 +104,8 @@ export default defineNuxtConfig({
   devtools: {
     // Enable devtools (default: true)
     enabled: true,
-    // VS Code Server options
-    vscode: {},
+    // Coder code-server options (enabled by default)
+    codeServer: {},
     // ...other options
   }
 })

docs/content/1.guide/1.features.md

@@ -92,78 +92,78 @@ Tasks tab shows all nitro tasks in your project. You can pass task payloads, run
 
 Learn more about [Nitro Tasks](https://nitro.build/guide/tasks)
 
-## VS Code Server
+## Data Inspector
 
-The VS Code Server integration in Nuxt DevTools enhances your development experience by bringing the power of Visual Studio Code directly into your browser. With this feature, you can seamlessly edit and debug your Nuxt projects using the familiar interface of VS Code.
+The **Data Inspector** lives in the Nuxt group and is an interactive [jora](https://discoveryjs.github.io/jora/) query workbench over your live server-side configuration. It replaces the old read-only Nuxt Options Viewer.
 
-Nuxt DevTools supports the following ways of integrating with VS Code:
+Its `Nuxt Application` source exposes three root fields:
 
-### Connecting to an existing code-server instance
+- `nuxt` — the resolved Nuxt options.
+- `nitro` — the resolved Nitro options (populated once Nitro is created).
+- `vite` — the resolved Vite `client` and `ssr` environment configs.
 
-Set `reuseExistingServer` to true in runtime config for `devtools/vscode` and set the `port` option to specify a port (defalts to 3080):
+The source is live: every query reads the current state, so re-running a query after the Nitro/Vite hooks have completed reflects the latest values. Four read-only presets are provided — **Overview** (the whole object), **Nuxt options**, **Nitro options**, and **Vite configs** — each with function exclusion enabled so browsing configuration does not foreground methods. Your own custom queries are unrestricted and can invoke reachable functions or getters.
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  devtools: {
-    vscode: {
-      reuseExistingServer: true,
-      port: 3090
-    }
-  }
-})
-```
+The panel's bundled UI includes an optional polling toggle (5s default, clamped 1–3600s) that pauses in background tabs.
 
-### Running a code-server instance locally
+Module authors who want to expose their own data can install [`@devframes/plugin-data-inspector`](https://www.npmjs.com/package/@devframes/plugin-data-inspector) and register sources through its `registerDataSource` API; they appear in the same inspector without any Nuxt-specific wrapper.
 
-You can use either the [Microsoft Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server) (via the `code` or `code-server` cli tools) or the [Coder VS Code Server](https://coder.com/docs/code-server/latest/install) (via the `code-server` cli tool) by setting the `codeServer` parameter under `devtools/vscode` in the runtime configuration.
+::warning
+The `getServerData` DevTools RPC that backed the old viewer is deprecated (`NDT_DEP_0009`). It still works as a compatibility shim but will be removed; use the Data Inspector panel instead.
+::
 
-Options for the codeServer parameter are:
-|Type|Option|
-|----|------|
-|MS Code CLI|`ms-code-cli`|
-|MS Code Server|`ms-code-server`|
-|Coder Code Server|`coder-code-server`|
+## Code Server
 
-You can set the `port` parameter to listen on a specific port (default 3080) and you can set the `host` parameter if you need to listen on a particular host interface (useful for devcontainers or docker containers that listen on ipv6 by default).
+The **Code Server** member in the Nuxt group embeds [Coder's `code-server`](https://coder.com/docs/code-server/install). It is enabled by default: Nuxt DevTools detects the local `code-server` binary during setup, but starts no process until you choose **Launch editor**. If the binary is missing, the member shows installation instructions instead.
 
-**Example**:
+When launched, Code Server opens the Nuxt root directory by default, hands the generated authenticated session to the iframe, and streams process output to the built-in **Terminals** member. The process is also stopped when Nuxt closes.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   devtools: {
-    vscode: {
-      codeServer: 'ms-code-server',
-      host: '0.0.0.0',
-      port: 3090
-    }
-  }
+    codeServer: {
+      enabled: true,
+      // All fields below are optional.
+      bin: '/usr/local/bin/code-server',
+      cwd: '/workspace/my-app',
+      serverPort: 8080,
+      host: '127.0.0.1',
+      args: ['--disable-file-downloads'],
+      env: { LOG_LEVEL: 'info' },
+      cookieSuffix: 'my-app',
+      startTimeout: 30_000,
+    },
+  },
 })
 ```
 
-### Remotely via a MS VS Code server tunnel
+The curated options are `enabled`, `bin`, `cwd`, `serverPort`, `host`, `args`, `env`, `cookieSuffix`, and `startTimeout`. When omitted, the upstream plugin defaults apply: the `code-server` binary, loopback host, a free port near Code Server's port 8080, and a 30-second startup timeout. Nuxt changes only the default `cwd`, setting it to the Nuxt root. Set `codeServer.enabled: false` to omit the member.
+
+Nuxt DevTools owns authentication, so `args` cannot override `--auth`, `--bind-addr`, or `--cookie-suffix`, and `env` cannot set `PASSWORD` or `HASHED_PASSWORD`. Configure the bind host and cookie suffix through their dedicated fields.
 
-Set the `mode` option in `devtools/vscode` runtime configuration to `tunnel`. You can set the name of the tunnel to connect to using the `tunnel` option under `devtools/vscode/tunnel` in runtime configuration)
+The editor iframe connects directly to the Code Server port; Nuxt does not proxy it through `app.baseURL`. The browser must be able to reach that host and port, and an HTTPS page cannot embed an HTTP-only editor because of browser mixed-content rules. Binding to a non-loopback interface also exposes the port to that network, so apply the usual network controls.
+
+This integration uses the experimental upstream `@devframes/plugin-code-server`. HTTPS, reverse proxies, containers, and remote port forwarding are governed by that plugin and your environment; Nuxt does not extend them or provide the removed Microsoft/tunnel/reuse modes.
+
+## Accessibility
+
+The **A11y Inspector** member in the Nuxt group runs [axe-core](https://github.com/dequelabs/axe-core) against your running app, lists the WCAG A/AA violations, and highlights the offending element in the page when you hover a result. It is enabled by default.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   devtools: {
-    vscode: {
-      mode: 'tunnel',
-      tunnel: {
-        name: 'my-tunnel-name'
-      }
-    }
-  }
+    a11y: {
+      enabled: true,
+    },
+  },
 })
 ```
 
-### Code Server Installation Instructions
-
-To get started with Microsoft VS Code Server, follow the installation instructions provided by [Microsoft Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)
-
-To get started with Coder Code Server, follow the installation instructions provided by [Code Server Installation Guide](https://coder.com/docs/code-server/latest/install)
+Set `a11y.enabled: false` to omit the member and skip injecting the in-page scanner.
 
-For more information on the benefits and features of VS Code Server, refer to [the official Visual Studio Code blog](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)
+::warning
+This integration uses the experimental upstream [`@devframes/plugin-a11y`](https://www.npmjs.com/package/@devframes/plugin-a11y) and may change without a major version bump. The inspector is only available while the DevTools UI is running in dev mode.
+::
 
 ## Hooks