Studio

The visual companion. Vue 3 + Vite + VueFlow. Reads Nwire primitives natively — no instrumentation, no agents.

pnpm dlx @nwire/studio        # or `pnpm dev` in packages/nwire-studio/

Open http://localhost:7777.

What's in Studio

Page	What it shows
Overview	Stat cards: apps, BCs, actions, events, actors, projections, queries
Topology	Bird's-eye view: apps as lanes, modules as cards, event graph as edges
EventStorm	The DDD canvas. Three reading levels (Big Picture / Process Flow / Software Design). Play Trace replays recent telemetry across the canvas.
Modules	One card per BC: provides, needs, counts
Actions	Searchable list + detail panel: schema, retry/policy badges, inline-handler flag, persona, journey, SLO
Events	Catalog with public/internal indicator, per-event flow (producer → consumers via reaction/projection/actor/external)
Routes	Every HTTP route across every wire
Dispatch	Form-from-schema: pick any action, fire it with JSON scaffolded from its zod schema
Live	Real-time event stream via SSE. Click an event → correlation trace tree
Run	Process supervisor: pick a topology, click Start, stdout streams in the page

Data sources

Studio reads from two places:

1. .nwire/manifest.json — built by nwire cache, gives every primitive's static metadata (persona, SLO, schema, etc.)
2. /_nwire/* — runtime introspection from the wire's httpInterface({ inspect: true }) endpoints

The dynamic /_nwire/* proxy in Studio's Vite middleware routes requests to the most-recently-started managed process (or the default NWIRE_INSPECT_URL if no process is up).

Play Trace

The flagship DX feature. Fetches /_nwire/telemetry/recent, groups by correlationId, walks each story chronologically, lights up the matching sticky on the EventStorm canvas with an amber glow. 1×/2×/4×/8× playback speed. Distinct correlations get a pause between them so different stories feel separated.

Studio-as-runner

nwire studio                  # boots Studio's Vite dev server + supervisor

Inside Studio, the Run page lets you:

1. Pick a topology from apps/topologies/*.topology.ts
2. Pick a port (defaults 3000)
3. Click Start — the supervisor spawns pnpm exec vite-node apps/run.ts with NWIRE_TOPOLOGY=<name> + PORT=<port>
4. Health check polls /_nwire/manifest until the wire is ready
5. Stdout / stderr stream live via SSE
6. The dynamic proxy auto-routes Studio's /_nwire/* calls at the new process
7. Live / Dispatch / EventStorm all light up automatically

No separate terminal. The same Studio sees your code, your live traces, and the running process.

OSS / Cloud split

Feature	Local OSS	Hosted Cloud (later)
Live event stream	✓	✓ + retained history
Actor / projection browser	✓	✓ + multi-deploy
EventStorm canvas	✓	✓ + collaboration + sync to code
Dispatch UI	✓	✓
Run / process supervisor	✓	✓ + Cloud-managed processes
Distributed traces	✓ (single process)	✓ + cross-service correlation
Multi-environment	—	✓ (dev / staging / prod)
Team / sharing	—	✓
Alerts	—	✓
AI debug	—	✓

OSS = the local experience. Cloud = persistence, multi-deploy, team features. Same UI, same concepts, same muscle memory.

See also

• Studio guide — practical recipes
• Telemetry — the data Studio consumes
• Topology — what Studio supervises