# @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.

```bash
nwire studio
# → http://localhost:7777
```

## Quick start

From any Nwire repo with a `.nwire/` cache and (optionally) a running app:

```bash
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](../../docs/concepts/studio.md) for the
annotated tour.

![Home](../../docs/public/studio/01-home.png)

| 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.