@nwire/studio
@nwire/studio
Vue 3 dev-time control plane for any Nwire app — static topology + live traces + a kernel-backed Run page.
A Vite + Vue 3 + Tailwind 4 + VueFlow SPA that reads .nwire/manifest.json
(emitted by @nwire/scan) and /__nwire/* middleware on a running wire
to render the system as it's actually wired. Designed to ship as the
default dev surface — not a separate dashboard you have to spin up.
Install
Usually launched via the CLI rather than installed standalone.
nwire studio
# → http://localhost:7777Quick start
From any Nwire repo with a .nwire/ cache and (optionally) a running app:
nwire cache # rebuild .nwire/*.json from source
nwire studio # open browser to :7777Studio reads the cache + live runtime over /__nwire/* middleware
exposed by the Vite dev server (manifest, telemetry stream, run
supervisor, dispatch).
Pages
The nav is grouped into Map (the live system), Run (operate
it), Inspect (browse the static surface). Screenshots are
captured live against examples/moderation-queue — see
docs/concepts/studio for the
annotated tour.
| Group | Page | Reads | Renders |
|---|---|---|---|
| Projects | localStorage catalog | Catalog of every workspace Studio has ever opened. | |
| Home | manifest.json + live telemetry |
Per-project dashboard — recent failures, boot summary, composition stats. | |
| Map | Topology | manifest + graph.events |
VueFlow graph — apps as nodes with their plugins + sinks inline, cross-app event edges. |
| Map | Trace | /__nwire/telemetry/stream (SSE) |
Causation tree per correlationId; Play Trace replays telemetry across canvas with amber-glow per sticky. |
| Map | Stream | /__nwire/events/stream (SSE) |
Live event firehose. |
| Run | Try | /__nwire/dispatch |
Form-from-Zod-schema action dispatch against the live wire. |
| Run | Processes | /__nwire/run/* (supervisor) |
Start dev with custom port + env, stream stdout, recognise external nwire dev processes via .nwire/processes/*. |
| Run | Commands | /__nwire/run/commands |
Operator defineCommand entries with run buttons. |
| Run | Workflows | workflows |
Workflow defs with subscribed events and dispatched actions. |
| Inspect | Apps | apps + plugins + sinks |
Every App with its plugin stack, primitive counts, and outbound sinks. |
| Inspect | Actions | actions |
Searchable list + detail panel: schema, retry, persona, journey, SLO, source link. |
| Inspect | Events | events + graph.events |
Catalog with the .public() gate badge + per-event producer/consumer flow. |
| Inspect | Projections | projections |
CQRS read models; each fold with the events it listens to and the queries reading it. |
| Inspect | Queries | queries |
Read endpoints — projection-backed or direct-handler. |
| Inspect | Sinks | sinks |
Outbound delivery chain — every stage by position (early / middle / terminal). |
| Inspect | Plugins | plugins |
Installed plugins per app — bundle-mode forge, sub-plugins, custom. |
| Inspect | Hooks | hooks |
Every materialised framework hook slot and its chain length. |
Surface (programmatic)
| Export / route | Role |
|---|---|
nwire studio CLI command |
Boots the Studio Vite dev server. |
/__nwire/manifest |
Serves the disk cache. |
/__nwire/run/* |
Start/stop/list processes; SSE for live stdout (kernel-driven). |
/__nwire/telemetry/* |
recent + stream over the runtime's onTelemetry stream. |
/__nwire/events/* |
Domain-event tail. |
| Reusable shadcn-vue lib | Buttons, badges, tables, ErrorBoundary used across pages. |
Related
@nwire/scan— produces every JSON file Studio reads at boot.@nwire/cli—nwire studiois its entry point.@nwire/runner— supplies theRunnerSupervisorthat backs the Run page.@nwire/hooks— Studio's Hooks page is a thin reflection oflistHooks()+.tap().@nwire/mcp— the same/__nwire/*surface AI clients reach via MCP.
Status
v0.x — pages are stable; cache schema is treated as the contract. A separate cloud product (@nwire/studio-cloud) layers history, multi-deploy diffing, AI debug, and team affordances on top — shipped separately.