@m64/nats-agent-dashboard 0.1.3 → 0.1.4

package/README.md

@@ -5,33 +5,41 @@ A static Vue 3 web UI that connects directly to a NATS server over WebSocket and
 Supported runtimes (auto-detected from `$SRV.PING` + metadata):
 
 - **`pi-channel`** — interactive PI agents (`agents.pi.[{org}.]{owner}.{session}`)
-- **`pi-exec`** — headless PI bridge with intake + per-session services (`agents.pi-exec.{owner}[.{sessionId}]`)
+- **`pi-exec`** — headless PI bridge with control + per-session services (`agents.pi-exec.{owner}[.{sessionId}]`)
 - **`claude-channel`** — Claude Code MCP bridge (`agents.ccc.{owner}.{session}`)
 - **`nats-channel` / OpenClaw** — OpenClaw plugin agents (`agents.oc.[{org}.]{name}`)
 
 ## Features
 
 - **Live agent grid** — periodic `$SRV.PING` discovery, grouped by runtime, color-coded badges, status dots, automatic removal when agents disappear from the bus.
-- **Streaming prompt panel** — pick any agent, type a prompt, watch the response render token-by-token as live markdown (with code-block syntax highlighting and copy buttons).
-- **Pi-exec session control plane** — create new headless sessions with cwd / model / thinking-level / lifetime, stop them, and see live `list`-enriched details (remaining lifetime, queue depth, active request) on every session card.
+- **Streaming prompt panel** — pick any agent, type a prompt, watch the response render token-by-token as live markdown with code-block syntax highlighting and copy buttons.
+- **Pi-exec session control plane** — create new headless sessions with cwd / model / thinking-level / lifetime, stop them, and see live enrichment data (remaining lifetime, queue depth, active request) on every session card.
 - **Fan-out** — run the same prompt across N working directories in parallel, with grouped streaming result cards.
 - **Connection settings** — change the NATS WebSocket URL on the fly with auto-reconnect.
+- **Zero-setup demo** — ships with `wss://demo.nats.io:8443` as the default, so the dashboard works the instant you open it.
 
-## Tech stack
+## Quick start
 
-- [Vue 3](https://vuejs.org/) (Composition API, `<script setup>`)
-- [Vite](https://vitejs.dev/) — dev server + bundler
-- [`@nats-io/nats-core`](https://www.npmjs.com/package/@nats-io/nats-core) v3 + `wsconnect()` — the only transport
-- [`@nats-io/services`](https://www.npmjs.com/package/@nats-io/services) v3 — `Svcm` discovery client
-- [marked](https://www.npmjs.com/package/marked) + [DOMPurify](https://www.npmjs.com/package/dompurify) + [highlight.js](https://www.npmjs.com/package/highlight.js) — markdown rendering for streaming responses
+```bash
+npx @m64/nats-agent-dashboard
+```
 
-No router, no Pinia, no backend, no REST, no SSE. State is plain `reactive()` modules.
+That's it. A small HTTP server spawns on `http://localhost:5173`, your browser opens, and the dashboard connects to the public Synadia demo server (`wss://demo.nats.io:8443`). Every AI agent currently running on that bus shows up in the grid.
+
+To point at a different NATS server, open the Settings cog (top-right), paste in your own `ws://` or `wss://` URL, and the dashboard reconnects. The URL is persisted in `localStorage`, so next time you open it you land on the same server.
 
-## Distribution
+Flags:
 
-The dashboard ships in three forms. All three are built from the same source and show the same UI.
+```bash
+npx @m64/nats-agent-dashboard --nats-url ws://localhost:8080    # override the NATS URL
+npx @m64/nats-agent-dashboard --port 8000                       # pick a port
+npx @m64/nats-agent-dashboard --no-open                         # don't open the browser
+npx @m64/nats-agent-dashboard --help
+```
 
-### 1. Single HTML file
+## Alternative distributions
+
+### Single HTML file
 
 `npm run build` produces exactly one file: `dist/index.html` (~450 KB, ~140 KB gzipped). Everything — Vue, the stores, the markdown renderer, the NATS client, the CSS — is inlined. No external resources. You can:
 
@@ -39,31 +47,14 @@ The dashboard ships in three forms. All three are built from the same source and
 - host it on any static web server (GitHub Pages, S3, Netlify, nginx, plain object storage)
 - distribute it as a single file attachment
 
-Out of the box it connects to `wss://demo.nats.io:8443` — the public Synadia demo server — so opening the HTML file requires zero local setup. Change the URL via the Settings cog (the value is persisted in `localStorage`), or pre-seed it via the query string:
+Pre-seed the NATS URL via the query string if you don't want users to have to touch Settings:
 
 ```
 file:///path/to/index.html?nats=ws://localhost:8080
 https://your-host.example.com/dashboard.html?nats=wss://nats.example.com:443
 ```
 
-### 2. `npx` launcher
-
-```bash
-npx @m64/nats-agent-dashboard
-```
-
-Downloads the package (~160 KB, no runtime dependencies besides Node built-ins), spawns a small HTTP server on `http://localhost:5173` that serves the bundled single HTML file, and opens your default browser. Connects to `wss://demo.nats.io:8443` by default, same as the single HTML file.
-
-Flags:
-
-```bash
-npx @m64/nats-agent-dashboard --nats-url ws://localhost:8080    # override the NATS URL
-npx @m64/nats-agent-dashboard --port 8000                       # pick a port
-npx @m64/nats-agent-dashboard --no-open                         # don't open browser
-npx @m64/nats-agent-dashboard --help
-```
-
-### 3. Local development
+### Local development
 
 To work on the dashboard itself, with Vite's dev server, HMR and source maps:
 
@@ -74,9 +65,9 @@ npm install
 npm run dev     # Vite dev server at http://localhost:5173
 ```
 
-## Running a NATS server with WebSocket
+## Running your own NATS server with WebSocket
 
-All three distributions need a NATS server with WebSocket enabled. Minimal config:
+The dashboard talks to NATS exclusively over WebSocket, so any server it connects to needs a `websocket` block. Minimal local setup:
 
 ```hocon
 # nats.conf
@@ -92,7 +83,7 @@ websocket {
 nats-server -c nats.conf
 ```
 
-For production / remote access, add TLS:
+For production / remote access, terminate TLS on the WebSocket port:
 
 ```hocon
 websocket {
@@ -108,10 +99,10 @@ Then connect the dashboard to `wss://nats.example.com:443`.
 
 ## Spinning up some agents
 
-In separate terminals, start one or more of:
+Once the dashboard is open, start one or more agents and watch them appear in the grid within ~5 seconds:
 
 ```bash
-# PI exec headless bridge (intake + per-session sub-services)
+# PI exec headless bridge (control + per-session sub-services)
 cd ../nats-pi-bridge && npm run dev
 
 # PI interactive in any project that loads the nats-pi-channel extension
@@ -120,10 +111,20 @@ cd ~/some-project && pi
 # Claude Code NATS bridge
 cd ../nats-claude-channel && bun server.ts
 
-# OpenClaw with the NATS channel plugin enabled — depends on your setup
+# OpenClaw with the NATS channel plugin enabled
 ```
 
-Within ~5 s the agents pop into the dashboard grid, grouped by runtime. Click any card to prompt it. Click a pi-exec control card to create a new session or fan out across multiple directories.
+Click any card to prompt the agent. Click a pi-exec control card to create a new session or fan out across multiple directories.
+
+## Tech stack
+
+- [Vue 3](https://vuejs.org/) (Composition API, `<script setup>`)
+- [Vite](https://vitejs.dev/) — dev server + bundler
+- [`@nats-io/nats-core`](https://www.npmjs.com/package/@nats-io/nats-core) v3 + `wsconnect()` — the only transport
+- [`@nats-io/services`](https://www.npmjs.com/package/@nats-io/services) v3 — `Svcm` discovery client
+- [marked](https://www.npmjs.com/package/marked) + [DOMPurify](https://www.npmjs.com/package/dompurify) + [highlight.js](https://www.npmjs.com/package/highlight.js) — markdown rendering for streaming responses
+
+No router, no Pinia, no backend, no REST, no SSE. State is plain `reactive()` modules.
 
 ## Architecture
 
@@ -163,20 +164,13 @@ The `useNatsRequest.js` composable wraps the streaming reply pattern: create an
 npm install
 npm run build         # produces dist/index.html (single self-contained file)
 npm run preview       # serves dist/ for local smoke-testing
-npm start             # runs the npx launcher against dist/
+npm start             # runs the bundled launcher against dist/
 ```
 
-The build uses [`vite-plugin-singlefile`](https://github.com/richardtallent/vite-plugin-singlefile) with `base: './'` to inline everything into a single HTML file that's loadable from `file://`, any static host, or the bundled npx launcher. There is no server-side runtime and no backend.
+The build uses [`vite-plugin-singlefile`](https://github.com/richardtallent/vite-plugin-singlefile) with `base: './'` to inline everything into a single HTML file that's loadable from `file://`, any static host, or the bundled launcher. There is no server-side runtime and no backend.
 
 Every third-party package bundled into `dist/index.html` has its copyright notice and full license text aggregated into `dist/THIRD-PARTY-LICENSES.txt` at build time (via [`rollup-plugin-license`](https://github.com/mjeanroy/rollup-plugin-license)), so redistributing the single HTML file preserves the notice-retention clauses in MIT / BSD / Apache / MPL.
 
-## What's not in v1
-
-- Authentication UI (relies on the NATS server's own auth: token / nkey / creds)
-- Persistent prompt history (each page reload starts fresh)
-- Session export viewer (the pi-bridge doesn't auto-export yet — revisit when it does)
-- Multi-user awareness, theming, mobile layout, A2A protocol UI
-
 ## License
 
 Apache-2.0. See [`LICENSE`](./LICENSE) for the full text and `dist/THIRD-PARTY-LICENSES.txt` for the copyright notices of all bundled dependencies.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m64/nats-agent-dashboard",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "description": "Static Vue 3 dashboard for the NATS AI agent network — discover, prompt and manage agents across pi-channel, pi-exec, claude-channel and OpenClaw runtimes from a single screen, with no backend. Ships as a single HTML file or via npx.",
   "license": "Apache-2.0",