Devframe Inspector

A self-inspector for any devframe connection, built as a Vue SPA. It browses the RPC registry, invokes read-only functions and shows their results, watches shared-state keys update live, and explores the agent-exposed surface — including the host's, when mounted into one.

Package: @devframes/plugin-inspect · framework: Vue + Vite

Devframe Inspector showing rpc functions list

Devframe Inspector showing agent tools

Devframe Inspector showing history panels

What it does

• Functions — every registered RPC function with its type, JSON-serializable / snapshot flags, args and return JSON Schema, and agent exposure. Read-only query / static functions can be invoked inline and their result envelope inspected.
• State — the keys of every shared-state entry, with a live JSON tree that flashes the paths that change as patches arrive.
• Agent — the agent manifest: the tools and readable resources the devframe exposes to coding agents.
• History — a recordable timeline of RPC calls and shared-state updates observed over the connection.

The three introspection query functions are agent-exposed and bake into the static dump, so the inspector still lists functions, state keys, and the agent surface when deployed as a static SPA.

Standalone

pnpx @devframes/plugin-inspect

Opens the inspector against a fresh standalone devframe connection — handy as a reference and for poking at the introspection RPCs themselves. The CLI prints the URL it serves on.

Mount into a Vite host

For a Vite DevTools app, mount the panel with createPluginFromDevframe from @vitejs/devtools-kit/node:

// vite.config.ts
import inspectDevframe from '@devframes/plugin-inspect'
import { createPluginFromDevframe } from '@vitejs/devtools-kit/node'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    createPluginFromDevframe(inspectDevframe),
  ],
})

Without Vite DevTools, devframeVite from @devframes/vite/dev-spa mounts the panel directly, no DevTools dock required:

// vite.config.ts
import inspectDevframe from '@devframes/plugin-inspect'
import { devframeVite } from '@devframes/vite/dev-spa'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    devframeVite(inspectDevframe),
  ],
})

Programmatic

createInspectDevframe(options) returns a definition you can deploy through any adapter:

import { createInspectDevframe } from '@devframes/plugin-inspect'
import { createCac } from 'devframe/adapters/cac'

await createCac(createInspectDevframe({ port: 9100 })).parse()

RPC surface

All functions are namespaced devframes:plugin:inspect:*:

Function	Type	Returns
list-functions	query (snapshot)	Every registered RPC function with metadata.
invoke	action	Invokes a read-only query / static function and returns a result envelope; refuses action / event functions.
list-state-keys	query (snapshot)	The keys of every shared-state entry.
describe-agent	query (snapshot)	The agent manifest — tools and readable resources.

Source

plugins/inspect