@vitejs/devtools-kit 0.1.0 → 0.1.2

package/dist/client.d.ts

@@ -1,2 +1,2 @@
-import { _ as DevToolsRpcClientOptions, a as DockEntryState, c as DocksContext, d as RpcClientEvents, f as DevToolsRpcClient, g as DevToolsRpcClientMode, h as DevToolsRpcClientCallOptional, i as DockClientType, l as DocksEntriesContext, m as DevToolsRpcClientCallEvent, n as DevToolsClientContext, o as DockEntryStateEvents, p as DevToolsRpcClientCall, r as DevToolsClientRpcHost, s as DockPanelStorage, t as DockClientScriptContext, u as DocksPanelContext, v as getDevToolsRpcClient } from "./index-Bl6l5FTi.js";
+import { _ as DevToolsRpcClientOptions, a as DockEntryState, c as DocksContext, d as RpcClientEvents, f as DevToolsRpcClient, g as DevToolsRpcClientMode, h as DevToolsRpcClientCallOptional, i as DockClientType, l as DocksEntriesContext, m as DevToolsRpcClientCallEvent, n as DevToolsClientContext, o as DockEntryStateEvents, p as DevToolsRpcClientCall, r as DevToolsClientRpcHost, s as DockPanelStorage, t as DockClientScriptContext, u as DocksPanelContext, v as getDevToolsRpcClient } from "./index-WxzZW3L-.js";
 export { DevToolsClientContext, DevToolsClientRpcHost, DevToolsRpcClient, DevToolsRpcClientCall, DevToolsRpcClientCallEvent, DevToolsRpcClientCallOptional, DevToolsRpcClientMode, DevToolsRpcClientOptions, DockClientScriptContext, DockClientType, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext, DocksEntriesContext, DocksPanelContext, RpcClientEvents, getDevToolsRpcClient };

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import { T as DevToolsDocksUserSettings } from "./index-Bl6l5FTi.js";
+import { T as DevToolsDocksUserSettings } from "./index-WxzZW3L-.js";
 //#region src/constants.d.ts
 declare const DEVTOOLS_MOUNT_PATH = "/.devtools/";
 declare const DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH = "/.devtools";

package/dist/{index-Bl6l5FTi.d.ts → index-WxzZW3L-.d.ts}

@@ -246,7 +246,39 @@ interface DevToolsViewBuiltin extends DevToolsDockEntryBase {
   type: '~builtin';
   id: '~terminals' | '~logs' | '~client-auth-notice' | '~settings' | '~popup';
 }
-type DevToolsDockUserEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender | DevToolsViewLauncher;
+interface JsonRenderElement {
+  type: string;
+  props?: Record<string, unknown>;
+  children?: string[];
+  /** json-render event bindings (e.g. `{ press: { action: "my:action" } }`) */
+  on?: Record<string, unknown>;
+  /** json-render visibility condition */
+  visible?: unknown;
+  /** json-render repeat binding */
+  repeat?: unknown;
+  /** Allow additional json-render element fields */
+  [key: string]: unknown;
+}
+interface JsonRenderSpec {
+  root: string;
+  elements: Record<string, JsonRenderElement>;
+  /** Initial client-side state model for $state/$bindState expressions */
+  state?: Record<string, unknown>;
+}
+interface JsonRenderer {
+  /** Replace the entire spec */
+  updateSpec: (spec: JsonRenderSpec) => void | Promise<void>;
+  /** Update json-render state values (shallow merge into spec.state) */
+  updateState: (state: Record<string, unknown>) => void | Promise<void>;
+  /** Internal: shared state key used by the client to subscribe */
+  readonly _stateKey: string;
+}
+interface DevToolsViewJsonRender extends DevToolsDockEntryBase {
+  type: 'json-render';
+  /** JsonRenderer handle created by ctx.createJsonRenderer() */
+  ui: JsonRenderer;
+}
+type DevToolsDockUserEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender | DevToolsViewLauncher | DevToolsViewJsonRender;
 type DevToolsDockEntry = DevToolsDockUserEntry | DevToolsViewBuiltin;
 type DevToolsDockEntriesGrouped = [category: string, entries: DevToolsDockEntry[]][];
 //#endregion
@@ -382,6 +414,11 @@ interface DevToolsNodeContext {
    * Logs host, for emitting and managing structured log entries
    */
   logs: DevToolsLogsHost;
+  /**
+   * Create a JsonRenderer handle for building json-render powered UIs.
+   * Pass the returned handle as `ui` when registering a `json-render` dock entry.
+   */
+  createJsonRenderer: (spec: JsonRenderSpec) => JsonRenderer;
 }
 interface DevToolsNodeUtils {
   /**
@@ -639,4 +676,4 @@ interface DockClientScriptContext extends DocksContext {
   logs: DevToolsLogsClient;
 }
 //#endregion
-export { DevToolsDockEntryIcon as $, RpcSharedStateGetOptions as A, DevToolsTerminalHost as B, PartialWithoutId as C, DevToolsNodeRpcSessionMeta as D, DevToolsNodeRpcSession as E, DevToolsNodeUtils as F, DevToolsRpcClientFunctions as G, DevToolsTerminalSessionBase as H, DevToolsPluginOptions as I, ClientScriptEntry as J, DevToolsRpcServerFunctions as K, DevToolsViewHost as L, ConnectionMeta as M, DevToolsCapabilities as N, RpcBroadcastOptions as O, DevToolsNodeContext as P, DevToolsDockEntryCategory as Q, DevToolsChildProcessExecuteOptions as R, EntriesToObject as S, DevToolsDocksUserSettings as T, DevToolsTerminalSessionStreamChunkEvent as U, DevToolsTerminalSession as V, DevToolsTerminalStatus as W, DevToolsDockEntry as X, DevToolsDockEntriesGrouped as Y, DevToolsDockEntryBase as Z, DevToolsRpcClientOptions as _, DockEntryState as a, DevToolsViewIframe as at, RpcDefinitionsToFunctions as b, DocksContext as c, DevToolsLogElementPosition as ct, RpcClientEvents as d, DevToolsLogEntryInput as dt, DevToolsDockHost as et, DevToolsRpcClient as f, DevToolsLogFilePosition as ft, DevToolsRpcClientMode as g, DevToolsLogsHost as gt, DevToolsRpcClientCallOptional as h, DevToolsLogsClient as ht, DockClientType as i, DevToolsViewCustomRender as it, RpcSharedStateHost as j, RpcFunctionsHost as k, DocksEntriesContext as l, DevToolsLogEntry as lt, DevToolsRpcClientCallEvent as m, DevToolsLogLevel as mt, DevToolsClientContext as n, DevToolsViewAction as nt, DockEntryStateEvents as o, DevToolsViewLauncher as ot, DevToolsRpcClientCall as p, DevToolsLogHandle as pt, DevToolsRpcSharedStates as q, DevToolsClientRpcHost as r, DevToolsViewBuiltin as rt, DockPanelStorage as s, DevToolsViewLauncherStatus as st, DockClientScriptContext as t, DevToolsDockUserEntry as tt, DocksPanelContext as u, DevToolsLogEntryFrom as ut, getDevToolsRpcClient as v, Thenable as w, PluginWithDevTools as x, RpcDefinitionsFilter as y, DevToolsChildProcessTerminalSession as z };
+export { DevToolsDockEntryIcon as $, RpcSharedStateGetOptions as A, DevToolsTerminalHost as B, PartialWithoutId as C, DevToolsNodeRpcSessionMeta as D, DevToolsNodeRpcSession as E, DevToolsNodeUtils as F, DevToolsRpcClientFunctions as G, DevToolsTerminalSessionBase as H, DevToolsPluginOptions as I, ClientScriptEntry as J, DevToolsRpcServerFunctions as K, DevToolsViewHost as L, ConnectionMeta as M, DevToolsCapabilities as N, RpcBroadcastOptions as O, DevToolsNodeContext as P, DevToolsDockEntryCategory as Q, DevToolsChildProcessExecuteOptions as R, EntriesToObject as S, DevToolsDocksUserSettings as T, DevToolsTerminalSessionStreamChunkEvent as U, DevToolsTerminalSession as V, DevToolsTerminalStatus as W, DevToolsDockEntry as X, DevToolsDockEntriesGrouped as Y, DevToolsDockEntryBase as Z, DevToolsRpcClientOptions as _, DevToolsLogHandle as _t, DockEntryState as a, DevToolsViewIframe as at, RpcDefinitionsToFunctions as b, DevToolsLogsHost as bt, DocksContext as c, DevToolsViewLauncherStatus as ct, RpcClientEvents as d, JsonRenderer as dt, DevToolsDockHost as et, DevToolsRpcClient as f, DevToolsLogElementPosition as ft, DevToolsRpcClientMode as g, DevToolsLogFilePosition as gt, DevToolsRpcClientCallOptional as h, DevToolsLogEntryInput as ht, DockClientType as i, DevToolsViewCustomRender as it, RpcSharedStateHost as j, RpcFunctionsHost as k, DocksEntriesContext as l, JsonRenderElement as lt, DevToolsRpcClientCallEvent as m, DevToolsLogEntryFrom as mt, DevToolsClientContext as n, DevToolsViewAction as nt, DockEntryStateEvents as o, DevToolsViewJsonRender as ot, DevToolsRpcClientCall as p, DevToolsLogEntry as pt, DevToolsRpcSharedStates as q, DevToolsClientRpcHost as r, DevToolsViewBuiltin as rt, DockPanelStorage as s, DevToolsViewLauncher as st, DockClientScriptContext as t, DevToolsDockUserEntry as tt, DocksPanelContext as u, JsonRenderSpec as ut, getDevToolsRpcClient as v, DevToolsLogLevel as vt, Thenable as w, PluginWithDevTools as x, RpcDefinitionsFilter as y, DevToolsLogsClient as yt, DevToolsChildProcessTerminalSession as z };

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import { n as EventUnsubscribe, r as EventsMap, t as EventEmitter } from "./events-B41U-zeg.js";
-import { $ as DevToolsDockEntryIcon, A as RpcSharedStateGetOptions, B as DevToolsTerminalHost, C as PartialWithoutId, D as DevToolsNodeRpcSessionMeta, E as DevToolsNodeRpcSession, F as DevToolsNodeUtils, G as DevToolsRpcClientFunctions, H as DevToolsTerminalSessionBase, I as DevToolsPluginOptions, J as ClientScriptEntry, K as DevToolsRpcServerFunctions, L as DevToolsViewHost, M as ConnectionMeta, N as DevToolsCapabilities, O as RpcBroadcastOptions, P as DevToolsNodeContext, Q as DevToolsDockEntryCategory, R as DevToolsChildProcessExecuteOptions, S as EntriesToObject, T as DevToolsDocksUserSettings, U as DevToolsTerminalSessionStreamChunkEvent, V as DevToolsTerminalSession, W as DevToolsTerminalStatus, X as DevToolsDockEntry, Y as DevToolsDockEntriesGrouped, Z as DevToolsDockEntryBase, at as DevToolsViewIframe, b as RpcDefinitionsToFunctions, ct as DevToolsLogElementPosition, dt as DevToolsLogEntryInput, et as DevToolsDockHost, ft as DevToolsLogFilePosition, gt as DevToolsLogsHost, ht as DevToolsLogsClient, it as DevToolsViewCustomRender, j as RpcSharedStateHost, k as RpcFunctionsHost, lt as DevToolsLogEntry, mt as DevToolsLogLevel, nt as DevToolsViewAction, ot as DevToolsViewLauncher, pt as DevToolsLogHandle, q as DevToolsRpcSharedStates, rt as DevToolsViewBuiltin, st as DevToolsViewLauncherStatus, tt as DevToolsDockUserEntry, ut as DevToolsLogEntryFrom, w as Thenable, x as PluginWithDevTools, y as RpcDefinitionsFilter, z as DevToolsChildProcessTerminalSession } from "./index-Bl6l5FTi.js";
+import { $ as DevToolsDockEntryIcon, A as RpcSharedStateGetOptions, B as DevToolsTerminalHost, C as PartialWithoutId, D as DevToolsNodeRpcSessionMeta, E as DevToolsNodeRpcSession, F as DevToolsNodeUtils, G as DevToolsRpcClientFunctions, H as DevToolsTerminalSessionBase, I as DevToolsPluginOptions, J as ClientScriptEntry, K as DevToolsRpcServerFunctions, L as DevToolsViewHost, M as ConnectionMeta, N as DevToolsCapabilities, O as RpcBroadcastOptions, P as DevToolsNodeContext, Q as DevToolsDockEntryCategory, R as DevToolsChildProcessExecuteOptions, S as EntriesToObject, T as DevToolsDocksUserSettings, U as DevToolsTerminalSessionStreamChunkEvent, V as DevToolsTerminalSession, W as DevToolsTerminalStatus, X as DevToolsDockEntry, Y as DevToolsDockEntriesGrouped, Z as DevToolsDockEntryBase, _t as DevToolsLogHandle, at as DevToolsViewIframe, b as RpcDefinitionsToFunctions, bt as DevToolsLogsHost, ct as DevToolsViewLauncherStatus, dt as JsonRenderer, et as DevToolsDockHost, ft as DevToolsLogElementPosition, gt as DevToolsLogFilePosition, ht as DevToolsLogEntryInput, it as DevToolsViewCustomRender, j as RpcSharedStateHost, k as RpcFunctionsHost, lt as JsonRenderElement, mt as DevToolsLogEntryFrom, nt as DevToolsViewAction, ot as DevToolsViewJsonRender, pt as DevToolsLogEntry, q as DevToolsRpcSharedStates, rt as DevToolsViewBuiltin, st as DevToolsViewLauncher, tt as DevToolsDockUserEntry, ut as JsonRenderSpec, vt as DevToolsLogLevel, w as Thenable, x as PluginWithDevTools, y as RpcDefinitionsFilter, yt as DevToolsLogsClient, z as DevToolsChildProcessTerminalSession } from "./index-WxzZW3L-.js";
 import * as _vitejs_devtools_rpc0 from "@vitejs/devtools-rpc";
 
 //#region src/utils/define.d.ts
 declare const defineRpcFunction: <NAME extends string, TYPE extends _vitejs_devtools_rpc0.RpcFunctionType, ARGS extends any[], RETURN = void, const AS extends _vitejs_devtools_rpc0.RpcArgsSchema | undefined = undefined, const RS extends _vitejs_devtools_rpc0.RpcReturnSchema | undefined = undefined>(definition: _vitejs_devtools_rpc0.RpcFunctionDefinition<NAME, TYPE, ARGS, RETURN, AS, RS, DevToolsNodeContext>) => _vitejs_devtools_rpc0.RpcFunctionDefinition<NAME, TYPE, ARGS, RETURN, AS, RS, DevToolsNodeContext>;
 //#endregion
-export { ClientScriptEntry, ConnectionMeta, DevToolsCapabilities, DevToolsChildProcessExecuteOptions, DevToolsChildProcessTerminalSession, DevToolsDockEntriesGrouped, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockEntryCategory, DevToolsDockEntryIcon, DevToolsDockHost, DevToolsDockUserEntry, DevToolsDocksUserSettings, DevToolsLogElementPosition, DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogEntryInput, DevToolsLogFilePosition, DevToolsLogHandle, DevToolsLogLevel, DevToolsLogsClient, DevToolsLogsHost, DevToolsNodeContext, DevToolsNodeRpcSession, DevToolsNodeRpcSessionMeta, DevToolsNodeUtils, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsRpcSharedStates, DevToolsTerminalHost, DevToolsTerminalSession, DevToolsTerminalSessionBase, DevToolsTerminalSessionStreamChunkEvent, DevToolsTerminalStatus, DevToolsViewAction, DevToolsViewBuiltin, DevToolsViewCustomRender, DevToolsViewHost, DevToolsViewIframe, DevToolsViewLauncher, DevToolsViewLauncherStatus, EntriesToObject, EventEmitter, EventUnsubscribe, EventsMap, PartialWithoutId, PluginWithDevTools, RpcBroadcastOptions, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionsHost, RpcSharedStateGetOptions, RpcSharedStateHost, Thenable, defineRpcFunction };
+//#region src/utils/json-render.d.ts
+declare function defineJsonRenderSpec(spec: JsonRenderSpec): JsonRenderSpec;
+//#endregion
+export { ClientScriptEntry, ConnectionMeta, DevToolsCapabilities, DevToolsChildProcessExecuteOptions, DevToolsChildProcessTerminalSession, DevToolsDockEntriesGrouped, DevToolsDockEntry, DevToolsDockEntryBase, DevToolsDockEntryCategory, DevToolsDockEntryIcon, DevToolsDockHost, DevToolsDockUserEntry, DevToolsDocksUserSettings, DevToolsLogElementPosition, DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogEntryInput, DevToolsLogFilePosition, DevToolsLogHandle, DevToolsLogLevel, DevToolsLogsClient, DevToolsLogsHost, DevToolsNodeContext, DevToolsNodeRpcSession, DevToolsNodeRpcSessionMeta, DevToolsNodeUtils, DevToolsPluginOptions, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions, DevToolsRpcSharedStates, DevToolsTerminalHost, DevToolsTerminalSession, DevToolsTerminalSessionBase, DevToolsTerminalSessionStreamChunkEvent, DevToolsTerminalStatus, DevToolsViewAction, DevToolsViewBuiltin, DevToolsViewCustomRender, DevToolsViewHost, DevToolsViewIframe, DevToolsViewJsonRender, DevToolsViewLauncher, DevToolsViewLauncherStatus, EntriesToObject, EventEmitter, EventUnsubscribe, EventsMap, JsonRenderElement, JsonRenderSpec, JsonRenderer, PartialWithoutId, PluginWithDevTools, RpcBroadcastOptions, RpcDefinitionsFilter, RpcDefinitionsToFunctions, RpcFunctionsHost, RpcSharedStateGetOptions, RpcSharedStateHost, Thenable, defineJsonRenderSpec, defineRpcFunction };

package/dist/index.js

@@ -2,4 +2,9 @@ import { createDefineWrapperWithContext } from "@vitejs/devtools-rpc";
 //#region src/utils/define.ts
 const defineRpcFunction = createDefineWrapperWithContext();
 //#endregion
-export { defineRpcFunction };
+//#region src/utils/json-render.ts
+function defineJsonRenderSpec(spec) {
+	return spec;
+}
+//#endregion
+export { defineJsonRenderSpec, defineRpcFunction };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/devtools-kit",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vite DevTools Kit",
   "author": "VoidZero Inc.",
   "license": "MIT",
@@ -38,7 +38,7 @@
   "dependencies": {
     "birpc": "^4.0.0",
     "immer": "^11.1.4",
-    "@vitejs/devtools-rpc": "0.1.0"
+    "@vitejs/devtools-rpc": "0.1.2"
   },
   "devDependencies": {
     "tsdown": "^0.21.2",

package/skills/vite-devtools-kit/SKILL.md

@@ -18,11 +18,13 @@ A DevTools plugin extends a Vite plugin with a `devtools.setup(ctx)` hook. The c
 
 | Property | Purpose |
 |----------|---------|
-| `ctx.docks` | Register dock entries (iframe, action, custom-render, launcher) |
+| `ctx.docks` | Register dock entries (iframe, action, custom-render, launcher, json-render) |
 | `ctx.views` | Host static files for UI |
 | `ctx.rpc` | Register RPC functions, broadcast to clients |
 | `ctx.rpc.sharedState` | Synchronized server-client state |
 | `ctx.logs` | Emit structured log entries and toast notifications |
+| `ctx.terminals` | Spawn and manage child processes with streaming terminal output |
+| `ctx.createJsonRenderer` | Create server-side JSON render specs for zero-client-code UIs |
 | `ctx.viteConfig` | Resolved Vite configuration |
 | `ctx.viteServer` | Dev server instance (dev mode only) |
 | `ctx.mode` | `'dev'` or `'build'` |
@@ -122,6 +124,7 @@ export default function myAnalyzer(): Plugin {
 | Type | Use Case |
 |------|----------|
 | `iframe` | Full UI panels, dashboards (most common) |
+| `json-render` | Server-side JSON specs — zero client code needed |
 | `action` | Buttons that trigger client-side scripts (inspectors, toggles) |
 | `custom-render` | Direct DOM access in panel (framework mounting) |
 | `launcher` | Actionable setup cards for initialization tasks |
@@ -168,6 +171,44 @@ ctx.docks.register({
 })
 ```
 
+### JSON Render Entry
+
+Build UIs entirely from server-side TypeScript — no client code needed:
+
+```ts
+const ui = ctx.createJsonRenderer({
+  root: 'root',
+  elements: {
+    root: {
+      type: 'Stack',
+      props: { direction: 'vertical', gap: 12 },
+      children: ['heading', 'info'],
+    },
+    heading: {
+      type: 'Text',
+      props: { content: 'Hello from JSON!', variant: 'heading' },
+    },
+    info: {
+      type: 'KeyValueTable',
+      props: {
+        entries: [
+          { key: 'Version', value: '1.0.0' },
+          { key: 'Status', value: 'Running' },
+        ],
+      },
+    },
+  },
+})
+
+ctx.docks.register({
+  id: 'my-panel',
+  title: 'My Panel',
+  icon: 'ph:chart-bar-duotone',
+  type: 'json-render',
+  ui,
+})
+```
+
 ### Launcher Entry
 
 ```ts
@@ -188,6 +229,31 @@ const entry = ctx.docks.register({
 })
 ```
 
+## Terminals & Subprocesses
+
+Spawn and manage child processes with streaming terminal output:
+
+```ts
+const session = await ctx.terminals.startChildProcess(
+  {
+    command: 'vite',
+    args: ['build', '--watch'],
+    cwd: process.cwd(),
+  },
+  {
+    id: 'my-plugin:build-watcher',
+    title: 'Build Watcher',
+    icon: 'ph:terminal-duotone',
+  },
+)
+
+// Lifecycle controls
+await session.terminate()
+await session.restart()
+```
+
+A common pattern is combining with launcher docks — see [Terminals Patterns](./references/terminals-patterns.md).
+
 ## Logs & Notifications
 
 Plugins can emit structured log entries from both server and client contexts. Logs appear in the built-in **Logs** panel and can optionally show as toast notifications.
@@ -426,6 +492,7 @@ Real-world example plugins in the repo — reference their code structure and pa
 
 - **A11y Checker** ([`examples/plugin-a11y-checker`](https://github.com/vitejs/devtools/tree/main/examples/plugin-a11y-checker)) — Action dock entry, client-side axe-core audits, logs with severity levels and element positions, log handle updates
 - **File Explorer** ([`examples/plugin-file-explorer`](https://github.com/vitejs/devtools/tree/main/examples/plugin-file-explorer)) — Iframe dock entry, RPC functions (static/query/action), hosted UI panel, RPC dump for static builds, backend mode detection
+- **Git UI** ([`examples/plugin-git-ui`](https://github.com/vitejs/devtools/tree/main/examples/plugin-git-ui)) — JSON render dock entry, server-side JSON specs, `$bindState` two-way binding, `$state` in action params, dynamic badge updates
 
 ## Further Reading
 
@@ -433,4 +500,6 @@ Real-world example plugins in the repo — reference their code structure and pa
 - [Dock Entry Types](./references/dock-entry-types.md) - Detailed dock configuration options
 - [Shared State Patterns](./references/shared-state-patterns.md) - Framework integration examples
 - [Project Structure](./references/project-structure.md) - Recommended file organization
+- [JSON Render Patterns](./references/json-render-patterns.md) - Server-side JSON specs, components, state binding
+- [Terminals Patterns](./references/terminals-patterns.md) - Child processes, custom streams, session lifecycle
 - [Logs Patterns](./references/logs-patterns.md) - Log entries, toast notifications, and handle patterns

package/skills/vite-devtools-kit/references/dock-entry-types.md

@@ -201,6 +201,93 @@ export default function setup(ctx: DevToolsClientScriptContext) {
 }
 ```
 
+## JSON Render Entries
+
+Server-side JSON specs rendered by the built-in component library. No client code needed.
+
+```ts
+interface JsonRenderEntry extends DockEntryBase {
+  type: 'json-render'
+  ui: JsonRenderer // Handle from ctx.createJsonRenderer()
+}
+
+// Registration
+const ui = ctx.createJsonRenderer({
+  root: 'root',
+  state: { query: '' },
+  elements: {
+    root: {
+      type: 'Stack',
+      props: { direction: 'vertical', gap: 12 },
+      children: ['heading', 'info'],
+    },
+    heading: {
+      type: 'Text',
+      props: { content: 'My Panel', variant: 'heading' },
+    },
+    info: {
+      type: 'KeyValueTable',
+      props: {
+        entries: [
+          { key: 'Status', value: 'Running' },
+        ],
+      },
+    },
+  },
+})
+
+ctx.docks.register({
+  id: 'my-panel',
+  title: 'My Panel',
+  icon: 'ph:chart-bar-duotone',
+  type: 'json-render',
+  ui,
+})
+```
+
+### Dynamic Updates
+
+```ts
+// Replace the entire spec
+await ui.updateSpec(buildSpec(newData))
+
+// Shallow-merge into spec.state
+await ui.updateState({ query: 'vue' })
+```
+
+### Action Handling
+
+Buttons trigger server-side RPC functions via `on.press.action`:
+
+```ts
+// In spec element
+{
+  type: 'Button',
+  props: { label: 'Refresh', icon: 'ph:arrows-clockwise' },
+  on: { press: { action: 'my-plugin:refresh' } },
+}
+
+// Matching RPC function
+ctx.rpc.register(defineRpcFunction({
+  name: 'my-plugin:refresh',
+  type: 'action',
+  setup: ctx => ({
+    handler: async () => {
+      await ui.updateSpec(buildSpec(await fetchData()))
+    },
+  }),
+}))
+```
+
+### JSON Render Use Cases
+
+- **Build reports** — Display build stats, module lists, timing data
+- **Configuration viewers** — Show resolved config with key-value tables
+- **Status dashboards** — Progress bars, badges, real-time updates
+- **Simple forms** — Text inputs with state binding + action buttons
+
+See [JSON Render Patterns](./json-render-patterns.md) for the full component library and state binding details.
+
 ## Launcher Entries
 
 Actionable setup cards for running initialization tasks. Shows a card with title, description, and a launch button.

package/skills/vite-devtools-kit/references/json-render-patterns.md

@@ -0,0 +1,284 @@
+# JSON Render Patterns
+
+Build DevTools UIs entirely from server-side TypeScript — no client code needed. Describe your UI as a JSON spec, and the DevTools client renders it with the built-in component library.
+
+## Spec Structure
+
+A JSON render spec has three parts: a `root` element ID, an `elements` map, and an optional `state` object for two-way bindings.
+
+```ts
+ctx.createJsonRenderer({
+  root: 'root',
+  state: {
+    searchQuery: '',
+  },
+  elements: {
+    root: {
+      type: 'Stack',
+      props: { direction: 'vertical', gap: 12 },
+      children: ['title', 'content'],
+    },
+    title: {
+      type: 'Text',
+      props: { content: 'My Panel', variant: 'heading' },
+    },
+    content: {
+      type: 'Text',
+      props: { content: 'Hello world' },
+    },
+  },
+})
+```
+
+Every element has a `type` (component name), `props`, and optionally `children` (array of element IDs) or `on` (event handlers).
+
+## Registration
+
+Pass the renderer handle as `ui` when registering a `json-render` dock entry:
+
+```ts
+const ui = ctx.createJsonRenderer(spec)
+
+ctx.docks.register({
+  id: 'my-panel',
+  title: 'My Panel',
+  icon: 'ph:chart-bar-duotone',
+  type: 'json-render',
+  ui,
+})
+```
+
+## Dynamic Updates
+
+The `JsonRenderer` handle provides two methods for updating the UI reactively:
+
+```ts
+const ui = ctx.createJsonRenderer(buildSpec(initialData))
+
+// Replace the entire spec (e.g. after fetching new data)
+await ui.updateSpec(buildSpec(newData))
+
+// Shallow-merge into spec.state (updates client-side state values)
+await ui.updateState({ searchQuery: 'vue' })
+```
+
+Update the dock entry badge when data changes:
+
+```ts
+ctx.docks.update({
+  id: 'my-panel',
+  type: 'json-render',
+  title: 'My Panel',
+  icon: 'ph:chart-bar-duotone',
+  ui,
+  badge: hasWarnings ? '!' : undefined,
+})
+```
+
+## Handling Actions via RPC
+
+Buttons in the spec trigger RPC functions on the server via the `on` property:
+
+```ts
+// In the spec — Button with an action
+const ui = ctx.createJsonRenderer({
+  root: 'refresh-btn',
+  elements: {
+    'refresh-btn': {
+      type: 'Button',
+      props: { label: 'Refresh', icon: 'ph:arrows-clockwise' },
+      on: { press: { action: 'my-plugin:refresh' } },
+    },
+  },
+})
+
+// On the server — register the matching RPC function
+ctx.rpc.register(defineRpcFunction({
+  name: 'my-plugin:refresh',
+  type: 'action',
+  setup: ctx => ({
+    handler: async () => {
+      const data = await fetchData()
+      await ui.updateSpec(buildSpec(data))
+    },
+  }),
+}))
+```
+
+Pass parameters from the spec to the action handler:
+
+```ts
+on: {
+  press: {
+    action: 'my-plugin:delete',
+    params: { id: 'some-id' },
+  },
+}
+```
+
+## State and Two-Way Binding
+
+Use `$bindState` on TextInput `value` to create two-way binding with a state key. Use `$state` to read the bound value in action params:
+
+```ts
+const ui = ctx.createJsonRenderer({
+  root: 'root',
+  state: { message: '' },
+  elements: {
+    root: {
+      type: 'Stack',
+      props: { direction: 'horizontal', gap: 8 },
+      children: ['input', 'submit'],
+    },
+    input: {
+      type: 'TextInput',
+      props: {
+        placeholder: 'Type here...',
+        value: { $bindState: '/message' },
+      },
+    },
+    submit: {
+      type: 'Button',
+      props: { label: 'Submit', variant: 'primary' },
+      on: {
+        press: {
+          action: 'my-plugin:submit',
+          params: { text: { $state: '/message' } },
+        },
+      },
+    },
+  },
+})
+```
+
+The server-side handler receives the resolved state values:
+
+```ts
+ctx.rpc.register(defineRpcFunction({
+  name: 'my-plugin:submit',
+  type: 'action',
+  setup: ctx => ({
+    handler: async (params: { text?: string }) => {
+      console.log('User submitted:', params.text)
+    },
+  }),
+}))
+```
+
+## Built-in Components
+
+### Layout
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Stack` | `direction`, `gap`, `align`, `justify`, `padding` | Flex layout container |
+| `Card` | `title`, `collapsible` | Container with optional title, collapsible |
+| `Divider` | `label` | Separator line with optional label |
+
+### Typography
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Text` | `content`, `variant` (`heading`/`body`/`caption`/`code`) | Display text |
+| `Icon` | `name`, `size` | Iconify icon by name |
+| `Badge` | `text`, `variant` (`info`/`success`/`warning`/`error`/`default`) | Status label |
+
+### Inputs
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Button` | `label`, `icon`, `variant` (`primary`/`secondary`/`ghost`/`danger`), `disabled` | Clickable button, fires `press` event |
+| `TextInput` | `placeholder`, `value`, `label`, `disabled` | Text input, supports `$bindState` on `value` |
+
+### Data Display
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `KeyValueTable` | `title`, `entries` (`Array<{ key, value }>`) | Two-column key-value table |
+| `DataTable` | `columns`, `rows`, `maxHeight` | Tabular data with configurable columns |
+| `CodeBlock` | `code`, `language`, `filename`, `maxHeight` | Code snippet with optional filename header |
+| `Progress` | `value`, `max`, `label` | Progress bar with percentage |
+| `Tree` | `data`, `expandLevel` | Expandable tree for nested objects |
+
+## Full Example
+
+```ts
+import type { JsonRenderSpec, PluginWithDevTools } from '@vitejs/devtools-kit'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+function buildSpec(data: { modules: number, time: string, size: string }): JsonRenderSpec {
+  return {
+    root: 'root',
+    state: { filter: '' },
+    elements: {
+      'root': {
+        type: 'Stack',
+        props: { direction: 'vertical', gap: 12, padding: 8 },
+        children: ['header', 'divider', 'stats'],
+      },
+      'header': {
+        type: 'Stack',
+        props: { direction: 'horizontal', gap: 8, align: 'center', justify: 'space-between' },
+        children: ['title', 'refresh-btn'],
+      },
+      'title': {
+        type: 'Text',
+        props: { content: 'Build Report', variant: 'heading' },
+      },
+      'refresh-btn': {
+        type: 'Button',
+        props: { label: 'Refresh', icon: 'ph:arrows-clockwise' },
+        on: { press: { action: 'build-report:refresh' } },
+      },
+      'divider': {
+        type: 'Divider',
+        props: {},
+      },
+      'stats': {
+        type: 'KeyValueTable',
+        props: {
+          title: 'Summary',
+          entries: [
+            { key: 'Total Modules', value: String(data.modules) },
+            { key: 'Build Time', value: data.time },
+            { key: 'Output Size', value: data.size },
+          ],
+        },
+      },
+    },
+  }
+}
+
+export function BuildReportPlugin(): PluginWithDevTools {
+  return {
+    name: 'build-report',
+    devtools: {
+      setup(ctx) {
+        const data = { modules: 142, time: '1.2s', size: '48 KB' }
+        const ui = ctx.createJsonRenderer(buildSpec(data))
+
+        ctx.docks.register({
+          id: 'build-report',
+          title: 'Build Report',
+          icon: 'ph:chart-bar-duotone',
+          type: 'json-render',
+          ui,
+        })
+
+        ctx.rpc.register(defineRpcFunction({
+          name: 'build-report:refresh',
+          type: 'action',
+          setup: ctx => ({
+            handler: async () => {
+              const newData = { modules: 145, time: '1.1s', size: '47 KB' }
+              await ui.updateSpec(buildSpec(newData))
+            },
+          }),
+        }))
+      },
+    },
+  }
+}
+```
+
+> See the [Git UI example](https://github.com/vitejs/devtools/tree/main/examples/plugin-git-ui) for a more advanced plugin using json-render with per-file actions, text input with state binding, and dynamic badge updates.

package/skills/vite-devtools-kit/references/terminals-patterns.md

@@ -0,0 +1,123 @@
+# Terminals & Subprocesses
+
+Spawn and manage child processes from your plugin. Output streams in real-time to an xterm.js terminal inside DevTools.
+
+## Starting a Child Process
+
+```ts
+const session = await ctx.terminals.startChildProcess(
+  {
+    command: 'vite',
+    args: ['build', '--watch'],
+    cwd: process.cwd(),
+    env: { NODE_ENV: 'development' },
+  },
+  {
+    id: 'my-plugin:build-watcher',
+    title: 'Build Watcher',
+    icon: 'ph:terminal-duotone',
+  },
+)
+```
+
+### Execute Options
+
+```ts
+interface DevToolsChildProcessExecuteOptions {
+  command: string
+  args: string[]
+  cwd?: string
+  env?: Record<string, string>
+}
+```
+
+The second argument provides terminal metadata (`id`, `title`, and optional `description`/`icon`).
+
+> Color output is enabled automatically — `FORCE_COLOR` and `COLORS` environment variables are set to `'true'` by default.
+
+## Session Lifecycle
+
+`startChildProcess()` returns a `DevToolsChildProcessTerminalSession` with lifecycle controls:
+
+```ts
+// Terminate the process
+await session.terminate()
+
+// Restart (kill + re-spawn)
+await session.restart()
+
+// Access the underlying Node.js ChildProcess
+const cp = session.getChildProcess()
+```
+
+### Session Status
+
+| Status | Description |
+|--------|-------------|
+| `running` | Process is active and streaming output |
+| `stopped` | Process exited normally |
+| `error` | Process exited with an error |
+
+Update a session's metadata or status at any time:
+
+```ts
+ctx.terminals.update({
+  id: 'my-plugin:build-watcher',
+  status: 'stopped',
+  title: 'Build Watcher (done)',
+})
+```
+
+## Combining with Launcher Docks
+
+A common pattern is pairing a launcher dock entry with a terminal session. The launcher gives the user a button to start the process on demand:
+
+```ts
+ctx.docks.register({
+  id: 'my-plugin:launcher',
+  title: 'My App',
+  icon: 'ph:rocket-launch-duotone',
+  type: 'launcher',
+  launcher: {
+    title: 'Start My App',
+    description: 'Launch the dev server',
+    onLaunch: async () => {
+      await ctx.terminals.startChildProcess(
+        {
+          command: 'vite',
+          args: ['dev'],
+          cwd: process.cwd(),
+        },
+        {
+          id: 'my-plugin:dev-server',
+          title: 'Dev Server',
+        },
+      )
+    },
+  },
+})
+```
+
+## Custom Terminal Sessions
+
+For scenarios that don't involve spawning a child process (e.g. streaming logs from an external source), register a session directly with a custom `ReadableStream`:
+
+```ts
+let controller: ReadableStreamDefaultController<string>
+
+const stream = new ReadableStream<string>({
+  start(c) {
+    controller = c
+  },
+})
+
+ctx.terminals.register({
+  id: 'my-plugin:custom-stream',
+  title: 'Custom Output',
+  status: 'running',
+  stream,
+})
+
+// Push data to the terminal
+controller.enqueue('Hello from custom stream!\n')
+```