@m64/nats-agent-dashboard 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +39 -58
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -5,33 +5,41 @@ A static Vue 3 web UI that connects directly to a NATS server over WebSocket and
5
5
  Supported runtimes (auto-detected from `$SRV.PING` + metadata):
6
6
 
7
7
  - **`pi-channel`** — interactive PI agents (`agents.pi.[{org}.]{owner}.{session}`)
8
- - **`pi-exec`** — headless PI bridge with intake + per-session services (`agents.pi-exec.{owner}[.{sessionId}]`)
8
+ - **`pi-exec`** — headless PI bridge with control + per-session services (`agents.pi-exec.{owner}[.{sessionId}]`)
9
9
  - **`claude-channel`** — Claude Code MCP bridge (`agents.ccc.{owner}.{session}`)
10
10
  - **`nats-channel` / OpenClaw** — OpenClaw plugin agents (`agents.oc.[{org}.]{name}`)
11
11
 
12
12
  ## Features
13
13
 
14
14
  - **Live agent grid** — periodic `$SRV.PING` discovery, grouped by runtime, color-coded badges, status dots, automatic removal when agents disappear from the bus.
15
- - **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).
16
- - **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.
15
+ - **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.
16
+ - **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.
17
17
  - **Fan-out** — run the same prompt across N working directories in parallel, with grouped streaming result cards.
18
18
  - **Connection settings** — change the NATS WebSocket URL on the fly with auto-reconnect.
19
+ - **Zero-setup demo** — ships with `wss://demo.nats.io:8443` as the default, so the dashboard works the instant you open it.
19
20
 
20
- ## Tech stack
21
+ ## Quick start
21
22
 
22
- - [Vue 3](https://vuejs.org/) (Composition API, `<script setup>`)
23
- - [Vite](https://vitejs.dev/) — dev server + bundler
24
- - [`@nats-io/nats-core`](https://www.npmjs.com/package/@nats-io/nats-core) v3 + `wsconnect()` — the only transport
25
- - [`@nats-io/services`](https://www.npmjs.com/package/@nats-io/services) v3 — `Svcm` discovery client
26
- - [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
23
+ ```bash
24
+ npx @m64/nats-agent-dashboard
25
+ ```
27
26
 
28
- No router, no Pinia, no backend, no REST, no SSE. State is plain `reactive()` modules.
27
+ 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.
29
28
 
30
- ## Distribution
29
+ 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.
31
30
 
32
- The dashboard ships in three forms. All three are built from the same source and show the same UI.
31
+ Flags:
33
32
 
34
- ### 1. Single HTML file
33
+ ```bash
34
+ npx @m64/nats-agent-dashboard --nats-url ws://localhost:8080 # override the NATS URL
35
+ npx @m64/nats-agent-dashboard --port 8000 # pick a port
36
+ npx @m64/nats-agent-dashboard --no-open # don't open the browser
37
+ npx @m64/nats-agent-dashboard --help
38
+ ```
39
+
40
+ ## Alternative distributions
41
+
42
+ ### Single HTML file
35
43
 
36
44
  `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:
37
45
 
@@ -39,31 +47,14 @@ The dashboard ships in three forms. All three are built from the same source and
39
47
  - host it on any static web server (GitHub Pages, S3, Netlify, nginx, plain object storage)
40
48
  - distribute it as a single file attachment
41
49
 
42
- 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:
50
+ Pre-seed the NATS URL via the query string if you don't want users to have to touch Settings:
43
51
 
44
52
  ```
45
53
  file:///path/to/index.html?nats=ws://localhost:8080
46
54
  https://your-host.example.com/dashboard.html?nats=wss://nats.example.com:443
47
55
  ```
48
56
 
49
- ### 2. `npx` launcher
50
-
51
- ```bash
52
- npx @m64/nats-agent-dashboard
53
- ```
54
-
55
- 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.
56
-
57
- Flags:
58
-
59
- ```bash
60
- npx @m64/nats-agent-dashboard --nats-url ws://localhost:8080 # override the NATS URL
61
- npx @m64/nats-agent-dashboard --port 8000 # pick a port
62
- npx @m64/nats-agent-dashboard --no-open # don't open browser
63
- npx @m64/nats-agent-dashboard --help
64
- ```
65
-
66
- ### 3. Local development
57
+ ### Local development
67
58
 
68
59
  To work on the dashboard itself, with Vite's dev server, HMR and source maps:
69
60
 
@@ -74,9 +65,9 @@ npm install
74
65
  npm run dev # Vite dev server at http://localhost:5173
75
66
  ```
76
67
 
77
- ## Running a NATS server with WebSocket
68
+ ## Running your own NATS server with WebSocket
78
69
 
79
- All three distributions need a NATS server with WebSocket enabled. Minimal config:
70
+ The dashboard talks to NATS exclusively over WebSocket, so any server it connects to needs a `websocket` block. Minimal local setup:
80
71
 
81
72
  ```hocon
82
73
  # nats.conf
@@ -92,7 +83,7 @@ websocket {
92
83
  nats-server -c nats.conf
93
84
  ```
94
85
 
95
- For production / remote access, add TLS:
86
+ For production / remote access, terminate TLS on the WebSocket port:
96
87
 
97
88
  ```hocon
98
89
  websocket {
@@ -106,24 +97,21 @@ websocket {
106
97
 
107
98
  Then connect the dashboard to `wss://nats.example.com:443`.
108
99
 
109
- ## Spinning up some agents
110
-
111
- In separate terminals, start one or more of:
112
-
113
- ```bash
114
- # PI exec headless bridge (intake + per-session sub-services)
115
- cd ../nats-pi-bridge && npm run dev
100
+ ## Related packages
116
101
 
117
- # PI interactive in any project that loads the nats-pi-channel extension
118
- cd ~/some-project && pi
102
+ - [`@m64/nats-channel`](https://www.npmjs.com/package/@m64/nats-channel) — OpenClaw NATS channel plugin
103
+ - [`@m64/nats-pi-channel`](https://www.npmjs.com/package/@m64/nats-pi-channel) — PI interactive NATS channel
104
+ - [`@m64/nats-pi-bridge`](https://www.npmjs.com/package/@m64/nats-pi-bridge) — PI headless session bridge
119
105
 
120
- # Claude Code NATS bridge
121
- cd ../nats-claude-channel && bun server.ts
106
+ ## Tech stack
122
107
 
123
- # OpenClaw with the NATS channel plugin enabled — depends on your setup
124
- ```
108
+ - [Vue 3](https://vuejs.org/) (Composition API, `<script setup>`)
109
+ - [Vite](https://vitejs.dev/) — dev server + bundler
110
+ - [`@nats-io/nats-core`](https://www.npmjs.com/package/@nats-io/nats-core) v3 + `wsconnect()` — the only transport
111
+ - [`@nats-io/services`](https://www.npmjs.com/package/@nats-io/services) v3 — `Svcm` discovery client
112
+ - [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
125
113
 
126
- 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.
114
+ No router, no Pinia, no backend, no REST, no SSE. State is plain `reactive()` modules.
127
115
 
128
116
  ## Architecture
129
117
 
@@ -163,20 +151,13 @@ The `useNatsRequest.js` composable wraps the streaming reply pattern: create an
163
151
  npm install
164
152
  npm run build # produces dist/index.html (single self-contained file)
165
153
  npm run preview # serves dist/ for local smoke-testing
166
- npm start # runs the npx launcher against dist/
154
+ npm start # runs the bundled launcher against dist/
167
155
  ```
168
156
 
169
- 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.
157
+ 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.
170
158
 
171
159
  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.
172
160
 
173
- ## What's not in v1
174
-
175
- - Authentication UI (relies on the NATS server's own auth: token / nkey / creds)
176
- - Persistent prompt history (each page reload starts fresh)
177
- - Session export viewer (the pi-bridge doesn't auto-export yet — revisit when it does)
178
- - Multi-user awareness, theming, mobile layout, A2A protocol UI
179
-
180
161
  ## License
181
162
 
182
163
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m64/nats-agent-dashboard",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "type": "module",
5
5
  "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.",
6
6
  "license": "Apache-2.0",