@paneui/cli 0.0.18 → 0.0.19
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.
- package/README.md +14 -0
- package/dist/commands/demo-artifact.js +189 -72
- package/dist/version.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -14,6 +14,19 @@ npx @paneui/cli <command>
|
|
|
14
14
|
|
|
15
15
|
The binary is `pane`.
|
|
16
16
|
|
|
17
|
+
## Try it
|
|
18
|
+
|
|
19
|
+
Register once, then `pane demo` spins up a short-lived sample pane on the hosted
|
|
20
|
+
relay, opens it in your browser, and prints the structured event back in your
|
|
21
|
+
terminal the moment you interact (the demo pane is cleaned up on exit):
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
npx @paneui/cli agent register --name "my-agent" # one-time, hosted relay
|
|
25
|
+
npx @paneui/cli demo # Node 20+ — round-trip in ~60s
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Add `--no-open` on a headless / SSH box and it just prints the URL.
|
|
29
|
+
|
|
17
30
|
## Setup
|
|
18
31
|
|
|
19
32
|
```sh
|
|
@@ -32,6 +45,7 @@ Override per-invocation with `--url <url>` and `--api-key <key>`.
|
|
|
32
45
|
Uniform `pane <noun> <verb> [options]`:
|
|
33
46
|
|
|
34
47
|
```
|
|
48
|
+
pane demo Zero-setup guided tour — see the round-trip live
|
|
35
49
|
pane agent register Provision an agent API key and save it locally
|
|
36
50
|
pane agent logout Clear the locally-saved URL + API key
|
|
37
51
|
pane create Create a pane — returns pane_id, urls, tokens
|
|
@@ -96,47 +96,127 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
96
96
|
<head>
|
|
97
97
|
<meta charset="utf-8" />
|
|
98
98
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
99
|
+
<meta name="color-scheme" content="light dark" />
|
|
99
100
|
<title>Pane — the 60-second tour</title>
|
|
100
101
|
<style>
|
|
101
102
|
:root {
|
|
102
|
-
--bg: #
|
|
103
|
-
--
|
|
104
|
-
--
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
103
|
+
--bg: #f7f5f1;
|
|
104
|
+
--bg-soft: #efece5;
|
|
105
|
+
--panel: #ffffff;
|
|
106
|
+
--panel-2: #faf8f4;
|
|
107
|
+
--border: #e6e0d6;
|
|
108
|
+
--ink: #1a1726;
|
|
109
|
+
--muted: #5b5570;
|
|
110
|
+
--faint: #8b85a0;
|
|
111
|
+
--agent: #D97757;
|
|
112
|
+
--human: #E0A23A;
|
|
113
|
+
--accent: #D97757;
|
|
114
|
+
--accent-2: #E0A23A;
|
|
115
|
+
--code: #f3f0ea;
|
|
110
116
|
--radius: 14px;
|
|
111
117
|
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
|
112
118
|
Arial, sans-serif;
|
|
113
119
|
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
120
|
+
/* scheme-dependent depth + accent tints (overridden in dark mode) */
|
|
121
|
+
--glow: radial-gradient(120vw 78vh at 50% -12%,
|
|
122
|
+
rgba(217, 119, 87, 0.10), rgba(224, 162, 58, 0.04) 46%, transparent 72%);
|
|
123
|
+
--shadow-stage: 0 14px 38px rgba(26, 23, 38, 0.08);
|
|
124
|
+
--shadow-card: 0 4px 14px rgba(26, 23, 38, 0.04);
|
|
125
|
+
--shadow-cta: 0 8px 20px rgba(217, 119, 87, 0.28);
|
|
126
|
+
--shadow-cta-hover: 0 10px 28px rgba(217, 119, 87, 0.30);
|
|
127
|
+
--focus-ring: 0 0 0 3px rgba(217, 119, 87, 0.12);
|
|
128
|
+
--accent-tint: rgba(217, 119, 87, 0.07);
|
|
129
|
+
--accent-tint-strong: rgba(217, 119, 87, 0.08);
|
|
130
|
+
--accent-tint-border: rgba(217, 119, 87, 0.32);
|
|
131
|
+
}
|
|
132
|
+
@media (prefers-color-scheme: dark) {
|
|
133
|
+
:root {
|
|
134
|
+
--bg: #14110d;
|
|
135
|
+
--bg-soft: #1b160f;
|
|
136
|
+
--panel: #211b14;
|
|
137
|
+
--panel-2: #1b160f;
|
|
138
|
+
--border: #2a231a;
|
|
139
|
+
--ink: #f3ece2;
|
|
140
|
+
--muted: #a89c89;
|
|
141
|
+
--faint: #87795f;
|
|
142
|
+
--agent: #e8906b;
|
|
143
|
+
--human: #E0A23A;
|
|
144
|
+
--accent: #e8906b;
|
|
145
|
+
--accent-2: #E0A23A;
|
|
146
|
+
--code: #2a231a;
|
|
147
|
+
/* darker, subtler ambient glow + deeper shadows for contrast */
|
|
148
|
+
--glow: radial-gradient(120vw 78vh at 50% -12%,
|
|
149
|
+
rgba(232, 144, 107, 0.07), rgba(224, 162, 58, 0.03) 46%, transparent 72%);
|
|
150
|
+
--shadow-stage: 0 16px 40px rgba(0, 0, 0, 0.45);
|
|
151
|
+
--shadow-card: 0 4px 14px rgba(0, 0, 0, 0.30);
|
|
152
|
+
--shadow-cta: 0 8px 20px rgba(0, 0, 0, 0.45);
|
|
153
|
+
--shadow-cta-hover: 0 10px 28px rgba(0, 0, 0, 0.55);
|
|
154
|
+
--focus-ring: 0 0 0 3px rgba(232, 144, 107, 0.22);
|
|
155
|
+
--accent-tint: rgba(232, 144, 107, 0.14);
|
|
156
|
+
--accent-tint-strong: rgba(232, 144, 107, 0.16);
|
|
157
|
+
--accent-tint-border: rgba(232, 144, 107, 0.40);
|
|
158
|
+
}
|
|
114
159
|
}
|
|
115
160
|
* { box-sizing: border-box; }
|
|
161
|
+
html { color-scheme: light dark; }
|
|
116
162
|
html, body { height: 100%; }
|
|
117
163
|
body {
|
|
118
164
|
margin: 0;
|
|
119
|
-
background:
|
|
120
|
-
radial-gradient(1100px 600px at 50% -10%, #1a2030 0%, var(--bg) 60%);
|
|
165
|
+
background: var(--bg);
|
|
121
166
|
color: var(--ink);
|
|
122
167
|
font-family: var(--font);
|
|
123
168
|
-webkit-font-smoothing: antialiased;
|
|
169
|
+
text-rendering: optimizeLegibility;
|
|
124
170
|
display: flex;
|
|
125
171
|
align-items: center;
|
|
126
172
|
justify-content: center;
|
|
127
173
|
min-height: 100%;
|
|
128
174
|
padding: 24px;
|
|
129
|
-
line-height: 1.
|
|
175
|
+
line-height: 1.65;
|
|
176
|
+
position: relative;
|
|
177
|
+
}
|
|
178
|
+
/* ambient warm-sunset glow, matching the landing page */
|
|
179
|
+
body::before {
|
|
180
|
+
content: "";
|
|
181
|
+
position: fixed;
|
|
182
|
+
inset: 0;
|
|
183
|
+
background: var(--glow);
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
z-index: 0;
|
|
130
186
|
}
|
|
131
187
|
.stage {
|
|
188
|
+
position: relative;
|
|
189
|
+
z-index: 1;
|
|
132
190
|
width: 100%;
|
|
133
191
|
max-width: 560px;
|
|
134
192
|
background: var(--panel);
|
|
135
|
-
border: 1px solid var(--
|
|
193
|
+
border: 1px solid var(--border);
|
|
136
194
|
border-radius: var(--radius);
|
|
137
|
-
box-shadow:
|
|
195
|
+
box-shadow: var(--shadow-stage);
|
|
138
196
|
overflow: hidden;
|
|
139
197
|
}
|
|
198
|
+
.brandbar {
|
|
199
|
+
display: flex;
|
|
200
|
+
align-items: center;
|
|
201
|
+
gap: 10px;
|
|
202
|
+
padding: 14px 22px 12px;
|
|
203
|
+
border-bottom: 1px solid var(--border);
|
|
204
|
+
background: var(--bg-soft);
|
|
205
|
+
}
|
|
206
|
+
.brandbar .mark { width: 26px; height: 26px; display: block; flex: none; }
|
|
207
|
+
.brandbar .name {
|
|
208
|
+
font-weight: 700;
|
|
209
|
+
font-size: 16px;
|
|
210
|
+
letter-spacing: -0.01em;
|
|
211
|
+
color: var(--ink);
|
|
212
|
+
}
|
|
213
|
+
.brandbar .ttl {
|
|
214
|
+
margin-left: auto;
|
|
215
|
+
font-size: 12px;
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
letter-spacing: 0.03em;
|
|
218
|
+
color: var(--faint);
|
|
219
|
+
}
|
|
140
220
|
.progress {
|
|
141
221
|
display: flex;
|
|
142
222
|
gap: 6px;
|
|
@@ -146,46 +226,62 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
146
226
|
flex: 1;
|
|
147
227
|
height: 3px;
|
|
148
228
|
border-radius: 3px;
|
|
149
|
-
background: var(--
|
|
229
|
+
background: var(--border);
|
|
150
230
|
transition: background 0.4s ease;
|
|
151
231
|
}
|
|
152
|
-
.progress i.on { background: linear-gradient(
|
|
153
|
-
.body { padding:
|
|
232
|
+
.progress i.on { background: linear-gradient(100deg, var(--accent), var(--accent-2)); }
|
|
233
|
+
.body { padding: 22px 30px 30px; }
|
|
154
234
|
.scene { display: none; }
|
|
155
235
|
.scene.active { display: block; }
|
|
156
236
|
.kicker {
|
|
157
237
|
font-size: 12px;
|
|
158
|
-
|
|
238
|
+
font-weight: 700;
|
|
239
|
+
letter-spacing: 0.12em;
|
|
159
240
|
text-transform: uppercase;
|
|
160
241
|
color: var(--muted);
|
|
161
242
|
margin: 0 0 10px;
|
|
162
243
|
}
|
|
163
244
|
h1 {
|
|
164
|
-
font-size:
|
|
165
|
-
line-height: 1.
|
|
245
|
+
font-size: 25px;
|
|
246
|
+
line-height: 1.18;
|
|
247
|
+
font-weight: 800;
|
|
166
248
|
margin: 0 0 12px;
|
|
167
|
-
letter-spacing: -0.
|
|
249
|
+
letter-spacing: -0.025em;
|
|
168
250
|
}
|
|
169
|
-
|
|
251
|
+
h1 .grad {
|
|
252
|
+
background: linear-gradient(100deg, var(--agent), var(--human));
|
|
253
|
+
-webkit-background-clip: text;
|
|
254
|
+
background-clip: text;
|
|
255
|
+
color: transparent;
|
|
256
|
+
}
|
|
257
|
+
p { margin: 0 0 14px; color: var(--muted); }
|
|
170
258
|
p.lead { color: var(--ink); font-size: 16px; }
|
|
171
259
|
.muted { color: var(--muted); font-size: 14px; }
|
|
260
|
+
code {
|
|
261
|
+
font-family: var(--mono);
|
|
262
|
+
font-size: 0.92em;
|
|
263
|
+
background: var(--code);
|
|
264
|
+
border-radius: 5px;
|
|
265
|
+
padding: 2px 6px;
|
|
266
|
+
color: var(--ink);
|
|
267
|
+
}
|
|
172
268
|
button.cta {
|
|
173
269
|
appearance: none;
|
|
174
270
|
border: 0;
|
|
175
271
|
cursor: pointer;
|
|
176
272
|
font: inherit;
|
|
177
|
-
font-weight:
|
|
178
|
-
color: #
|
|
179
|
-
background: linear-gradient(
|
|
180
|
-
padding: 12px
|
|
273
|
+
font-weight: 650;
|
|
274
|
+
color: #fff;
|
|
275
|
+
background: linear-gradient(100deg, var(--accent), var(--accent-2));
|
|
276
|
+
padding: 12px 22px;
|
|
181
277
|
border-radius: 10px;
|
|
182
278
|
margin-top: 6px;
|
|
183
279
|
transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
|
|
184
|
-
box-shadow:
|
|
280
|
+
box-shadow: var(--shadow-cta);
|
|
185
281
|
}
|
|
186
|
-
button.cta:hover { transform: translateY(-1px); box-shadow:
|
|
282
|
+
button.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); }
|
|
187
283
|
button.cta:active { transform: translateY(0); }
|
|
188
|
-
button.cta:disabled { opacity: 0.
|
|
284
|
+
button.cta:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
|
|
189
285
|
.diagram {
|
|
190
286
|
display: flex;
|
|
191
287
|
align-items: center;
|
|
@@ -193,75 +289,83 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
193
289
|
gap: 8px;
|
|
194
290
|
margin: 6px 0 18px;
|
|
195
291
|
padding: 18px 14px;
|
|
196
|
-
border: 1px solid var(--
|
|
292
|
+
border: 1px solid var(--border);
|
|
197
293
|
border-radius: 12px;
|
|
198
|
-
background:
|
|
294
|
+
background: var(--panel-2);
|
|
199
295
|
}
|
|
200
296
|
.node {
|
|
201
297
|
flex: 1;
|
|
202
298
|
text-align: center;
|
|
203
299
|
font-size: 13px;
|
|
300
|
+
font-weight: 600;
|
|
204
301
|
color: var(--ink);
|
|
205
302
|
padding: 12px 6px;
|
|
206
|
-
border: 1px solid var(--
|
|
303
|
+
border: 1px solid var(--border);
|
|
207
304
|
border-radius: 10px;
|
|
208
|
-
background:
|
|
305
|
+
background: var(--panel);
|
|
306
|
+
box-shadow: var(--shadow-card);
|
|
209
307
|
}
|
|
210
308
|
.node .ic { font-size: 20px; display: block; margin-bottom: 4px; }
|
|
211
|
-
.node small { display: block; color: var(--
|
|
212
|
-
.wire { color: var(--accent); font-size: 18px;
|
|
309
|
+
.node small { display: block; color: var(--faint); font-weight: 500; font-size: 11px; margin-top: 2px; }
|
|
310
|
+
.wire { color: var(--accent); font-size: 18px; }
|
|
213
311
|
.field { display: block; margin: 0 0 14px; }
|
|
214
|
-
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
|
|
312
|
+
.field span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
|
|
215
313
|
input[type="text"] {
|
|
216
314
|
width: 100%;
|
|
217
315
|
font: inherit;
|
|
218
316
|
color: var(--ink);
|
|
219
|
-
background:
|
|
220
|
-
border: 1px solid var(--
|
|
221
|
-
border-radius:
|
|
317
|
+
background: var(--panel-2);
|
|
318
|
+
border: 1px solid var(--border);
|
|
319
|
+
border-radius: 10px;
|
|
222
320
|
padding: 11px 12px;
|
|
223
321
|
outline: none;
|
|
322
|
+
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
224
323
|
}
|
|
225
|
-
input[type="text"]
|
|
324
|
+
input[type="text"]::placeholder { color: var(--faint); }
|
|
325
|
+
input[type="text"]:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
|
|
226
326
|
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
227
327
|
.choices label {
|
|
228
328
|
flex: 1;
|
|
229
329
|
min-width: 120px;
|
|
230
|
-
border: 1px solid var(--
|
|
231
|
-
border-radius:
|
|
330
|
+
border: 1px solid var(--border);
|
|
331
|
+
border-radius: 10px;
|
|
232
332
|
padding: 11px 12px;
|
|
233
333
|
cursor: pointer;
|
|
234
|
-
background:
|
|
235
|
-
transition: border-color 0.15s ease, background 0.15s ease;
|
|
334
|
+
background: var(--panel-2);
|
|
335
|
+
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
|
|
236
336
|
}
|
|
237
|
-
.choices label.sel { border-color: var(--accent); background:
|
|
337
|
+
.choices label.sel { border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--focus-ring); }
|
|
238
338
|
.choices input { position: absolute; opacity: 0; pointer-events: none; }
|
|
239
|
-
.choices b { display: block; font-size: 14px; }
|
|
240
|
-
.choices em { display: block; font-style: normal; color: var(--
|
|
339
|
+
.choices b { display: block; font-size: 14px; color: var(--ink); }
|
|
340
|
+
.choices em { display: block; font-style: normal; color: var(--faint); font-size: 12px; }
|
|
241
341
|
pre {
|
|
242
342
|
margin: 0 0 14px;
|
|
243
343
|
padding: 14px 16px;
|
|
244
|
-
background:
|
|
245
|
-
border: 1px solid var(--
|
|
246
|
-
border-radius:
|
|
344
|
+
background: var(--panel-2);
|
|
345
|
+
border: 1px solid var(--border);
|
|
346
|
+
border-radius: 11px;
|
|
247
347
|
font-family: var(--mono);
|
|
248
348
|
font-size: 13px;
|
|
249
|
-
|
|
349
|
+
line-height: 1.6;
|
|
350
|
+
color: var(--ink);
|
|
250
351
|
overflow-x: auto;
|
|
251
352
|
white-space: pre-wrap;
|
|
252
353
|
word-break: break-word;
|
|
354
|
+
box-shadow: var(--shadow-card);
|
|
253
355
|
}
|
|
254
|
-
pre
|
|
255
|
-
pre .
|
|
356
|
+
pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; }
|
|
357
|
+
pre .k { color: var(--accent); font-weight: 600; }
|
|
358
|
+
pre .s { color: var(--human); }
|
|
256
359
|
.badge {
|
|
257
360
|
display: inline-flex;
|
|
258
361
|
align-items: center;
|
|
259
362
|
gap: 7px;
|
|
260
363
|
font-size: 13px;
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
364
|
+
font-weight: 600;
|
|
365
|
+
color: var(--agent);
|
|
366
|
+
border: 1px solid var(--accent-tint-border);
|
|
367
|
+
background: var(--accent-tint-strong);
|
|
368
|
+
padding: 6px 12px;
|
|
265
369
|
border-radius: 999px;
|
|
266
370
|
margin: 0 0 14px;
|
|
267
371
|
}
|
|
@@ -277,14 +381,15 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
277
381
|
gap: 10px;
|
|
278
382
|
align-items: baseline;
|
|
279
383
|
padding: 9px 12px;
|
|
280
|
-
border: 1px solid var(--
|
|
281
|
-
border-radius:
|
|
384
|
+
border: 1px solid var(--border);
|
|
385
|
+
border-radius: 10px;
|
|
282
386
|
margin-bottom: 7px;
|
|
283
|
-
background:
|
|
387
|
+
background: var(--panel-2);
|
|
284
388
|
font-size: 13px;
|
|
285
389
|
}
|
|
286
|
-
.log code { font-family: var(--mono); color: var(--accent); }
|
|
287
|
-
.log .who { color: var(--
|
|
390
|
+
.log code { font-family: var(--mono); color: var(--accent); background: transparent; padding: 0; }
|
|
391
|
+
.log .who { color: var(--faint); font-size: 11px; margin-left: auto; }
|
|
392
|
+
.inline-cmd { font-family: var(--mono); color: var(--accent); background: var(--code); }
|
|
288
393
|
.anim-in { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
|
|
289
394
|
@keyframes rise {
|
|
290
395
|
from { opacity: 0; transform: translateY(10px); }
|
|
@@ -298,6 +403,18 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
298
403
|
</head>
|
|
299
404
|
<body>
|
|
300
405
|
<main class="stage" role="application" aria-label="Pane tutorial">
|
|
406
|
+
<div class="brandbar">
|
|
407
|
+
<svg class="mark" viewBox="0 0 100 100" aria-hidden="true">
|
|
408
|
+
<rect width="100" height="100" rx="22" fill="#D97757" />
|
|
409
|
+
<circle cx="62" cy="58" r="17" fill="#ffffff" />
|
|
410
|
+
<rect x="20" y="26" width="40" height="32" rx="10" fill="#D97757" />
|
|
411
|
+
<rect x="24" y="30" width="32" height="24" rx="7" fill="#ffffff" />
|
|
412
|
+
<circle cx="33.5" cy="42" r="3.4" fill="#D97757" />
|
|
413
|
+
<circle cx="46.5" cy="42" r="3.4" fill="#D97757" />
|
|
414
|
+
</svg>
|
|
415
|
+
<span class="name">Pane</span>
|
|
416
|
+
<span class="ttl">the 60-second tour</span>
|
|
417
|
+
</div>
|
|
301
418
|
<div class="progress" aria-hidden="true">
|
|
302
419
|
<i data-step="1"></i><i data-step="2"></i><i data-step="3"></i>
|
|
303
420
|
<i data-step="4"></i><i data-step="5"></i><i data-step="6"></i>
|
|
@@ -306,9 +423,9 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
306
423
|
<!-- Scene 1 — Hook -->
|
|
307
424
|
<section class="scene" data-scene="1">
|
|
308
425
|
<p class="kicker">A pane</p>
|
|
309
|
-
<h1>You're looking at a pane
|
|
426
|
+
<h1>You're looking at a <span class="grad">pane</span>.</h1>
|
|
310
427
|
<p class="lead">
|
|
311
|
-
An agent just handed you this UI
|
|
428
|
+
An agent just handed you this UI by URL, nothing installed. Whatever
|
|
312
429
|
you do here turns into structured data the agent reads back.
|
|
313
430
|
</p>
|
|
314
431
|
<p class="muted">Let's prove it in about a minute.</p>
|
|
@@ -327,7 +444,7 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
327
444
|
<div class="node"><span class="ic">▦</span>this page<small>the pane</small></div>
|
|
328
445
|
</div>
|
|
329
446
|
<p>
|
|
330
|
-
You ran <code>pane demo</code>
|
|
447
|
+
You ran <code>pane demo</code> and that command is acting as your
|
|
331
448
|
agent right now. It's watching this session over a WebSocket.
|
|
332
449
|
</p>
|
|
333
450
|
<button class="cta" id="b-hello" type="button">Click me</button>
|
|
@@ -337,7 +454,7 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
337
454
|
<section class="scene" data-scene="3">
|
|
338
455
|
<div class="badge">✓ Your agent just received your click.</div>
|
|
339
456
|
<h1>That landed in two places.</h1>
|
|
340
|
-
<p class="point">Look at your terminal
|
|
457
|
+
<p class="point">Look at your terminal, it printed the same event.</p>
|
|
341
458
|
<p>
|
|
342
459
|
The click became a <code>demo.hello</code> event, streamed to the
|
|
343
460
|
agent, which streamed a reply back to redraw this page. No polling, no
|
|
@@ -350,7 +467,7 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
350
467
|
<!-- Scene 4 — Structured data -->
|
|
351
468
|
<section class="scene" data-scene="4">
|
|
352
469
|
<p class="kicker">Structured data</p>
|
|
353
|
-
<h1>Interactions aren't clicks
|
|
470
|
+
<h1>Interactions aren't clicks, they're data.</h1>
|
|
354
471
|
<label class="field">
|
|
355
472
|
<span>Your name (optional)</span>
|
|
356
473
|
<input type="text" id="f-name" autocomplete="off" maxlength="80"
|
|
@@ -372,7 +489,7 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
372
489
|
<div class="badge" style="margin-top:16px">✓ Your agent received:</div>
|
|
373
490
|
<pre id="echo-pre"></pre>
|
|
374
491
|
<p class="muted">
|
|
375
|
-
That's the exact payload
|
|
492
|
+
That's the exact payload, typed and validated by the relay before
|
|
376
493
|
the agent ever saw it.
|
|
377
494
|
</p>
|
|
378
495
|
</div>
|
|
@@ -389,7 +506,7 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
389
506
|
<ul class="log" id="log"></ul>
|
|
390
507
|
<p class="muted">
|
|
391
508
|
From your terminal that's just:
|
|
392
|
-
<code
|
|
509
|
+
<code class="inline-cmd">pane show <id></code>
|
|
393
510
|
</p>
|
|
394
511
|
</section>
|
|
395
512
|
|
|
@@ -398,13 +515,13 @@ export const DEMO_ARTIFACT_HTML = `<!doctype html>
|
|
|
398
515
|
<p class="kicker">Your turn</p>
|
|
399
516
|
<h1>That's the whole idea.</h1>
|
|
400
517
|
<p>An agent hands a human a UI, gets structured data back. To build one:</p>
|
|
401
|
-
<pre><span class="k">pane</span> create \\
|
|
402
|
-
--template ./form.html --name "My form" \\
|
|
518
|
+
<pre><code><span class="k">pane</span> create \\
|
|
519
|
+
--template ./form.html --name <span class="s">"My form"</span> \\
|
|
403
520
|
--event-schema ./schema.json
|
|
404
|
-
<span class="k">pane</span> watch <id> --type form.submitted</pre>
|
|
521
|
+
<span class="k">pane</span> watch <id> --type form.submitted</code></pre>
|
|
405
522
|
<p>
|
|
406
523
|
The full guide is in the skill:
|
|
407
|
-
<code
|
|
524
|
+
<code class="inline-cmd">pane skill show</code>.
|
|
408
525
|
</p>
|
|
409
526
|
<p class="muted">Now go hand one to a human.</p>
|
|
410
527
|
</section>
|
package/dist/version.js
CHANGED
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
// Keep this in lockstep with packages/cli/package.json's `version` field;
|
|
9
9
|
// they're consulted in different places (here for the runtime header,
|
|
10
10
|
// package.json for npm publish + dependency resolution).
|
|
11
|
-
export const VERSION = "0.0.
|
|
11
|
+
export const VERSION = "0.0.19";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paneui/cli",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"description": "Command-line client for the Pane relay: create panes, inspect state, send and watch events.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"test:unit": "vitest run"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@paneui/core": "^0.0.
|
|
44
|
+
"@paneui/core": "^0.0.19",
|
|
45
45
|
"qrcode-terminal": "^0.12.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|