@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:7777

Quick 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 :7777

Studio 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 studio is its entry point.
• @nwire/runner — supplies the RunnerSupervisor that backs the Run page.
• @nwire/hooks — Studio's Hooks page is a thin reflection of listHooks() + .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.