viberoom 0.5.9 → 0.6.1

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 (28) hide show
  1. package/README.md +2 -0
  2. package/dist/agent-health.js +52 -0
  3. package/dist/duration.js +12 -0
  4. package/dist/hub.js +9 -0
  5. package/dist/launcher.js +19 -2
  6. package/dist/main.js +78 -35
  7. package/dist/mcp-skills-server.js +24 -0
  8. package/dist/persona.js +69 -14
  9. package/dist/quotes.js +41 -0
  10. package/dist/recipes.js +30 -2
  11. package/dist/room.js +136 -33
  12. package/dist/rows.js +19 -0
  13. package/dist/server.js +251 -27
  14. package/dist/shortcuts.js +1 -1
  15. package/dist/update.js +32 -2
  16. package/dist/viewer.js +69 -2
  17. package/dist/ws.js +175 -0
  18. package/package.json +2 -1
  19. package/ui/app.css +341 -251
  20. package/ui/app.js +1283 -278
  21. package/ui/avatars.js +6 -4
  22. package/ui/components.css +140 -0
  23. package/ui/components.js +342 -0
  24. package/ui/icons.js +9 -0
  25. package/ui/index.html +58 -36
  26. package/ui/theme.css +450 -183
  27. package/ui/tokens.js +620 -0
  28. package/ui/ui.js +113 -0
package/ui/index.html CHANGED
@@ -11,6 +11,7 @@
11
11
  <link rel="manifest" href="/manifest.json">
12
12
  <meta name="theme-color" content="#6d5dfc">
13
13
  <link rel="stylesheet" href="/theme.css">
14
+ <link rel="stylesheet" href="/components.css">
14
15
  <link rel="stylesheet" href="/app.css">
15
16
  </head>
16
17
  <body>
@@ -42,19 +43,19 @@
42
43
  </div>
43
44
  <div class="side-room" id="side-room" hidden>
44
45
  <div class="side-head room">
45
- <button class="icon-btn ghost sm" id="back-to-rooms" title="All rooms"><span data-icon="back"></span></button>
46
+ <button data-ui="icon-button" data-kind="ghost" data-size="sm" id="back-to-rooms" title="All rooms"><span data-icon="back"></span></button>
46
47
  <div class="side-room-title"><h2><span id="side-room-name">Room</span> <span id="side-room-emoji"></span></h2><div class="hint" id="side-room-sub"></div></div>
47
- <button class="icon-btn ghost sm" id="room-settings-btn" title="Room settings"><span data-icon="settings"></span></button>
48
- <button class="icon-btn ghost sm" id="side-toggle" title="Fold this column"><span data-icon="collapse"></span></button>
48
+ <button data-ui="icon-button" data-kind="ghost" data-size="sm" id="room-settings-btn" title="Room settings"><span data-icon="settings"></span></button>
49
+ <button data-ui="icon-button" data-kind="ghost" data-size="sm" id="side-toggle" title="Fold this column"><span data-icon="collapse"></span></button>
49
50
  </div>
50
51
  <div class="side-actions">
51
- <button id="invite-btn" class="btn primary cta full"><span class="cta-ico" data-icon="spark"></span><span class="label">Summon a Vibemate</span></button>
52
+ <button id="invite-btn" data-ui="button" data-kind="primary" data-size="cta" data-full><span class="cta-ico" data-icon="spark"></span><span class="label">Summon a Vibemate</span></button>
52
53
  </div>
53
54
  <div class="side-label">In this room</div>
54
55
  <ul id="participants" class="side-list participants"></ul>
55
56
  <div class="side-foot">
56
- <button id="reconnect-all-btn" class="btn wake full" hidden title="Bring offline vibemates back"><span data-icon="refresh"></span><span class="label">Wake everyone up</span></button>
57
- <button id="focus-btn" class="btn hush full" title="Stop every running reply; vibemates stay quiet until you speak again"><span class="hush-face">🤫</span><span class="label">Hush the room</span></button>
57
+ <button id="reconnect-all-btn" data-ui="button" data-full class="wake" hidden title="Bring offline vibemates back"><span data-icon="refresh"></span><span class="label">Wake everyone up</span></button>
58
+ <button id="focus-btn" data-ui="button" data-full class="hush" title="Stop every running reply; vibemates stay quiet until you speak again"><span class="hush-face">🤫</span><span class="label">Hush the room</span></button>
58
59
  </div>
59
60
  </div>
60
61
  </aside>
@@ -74,9 +75,9 @@
74
75
  <div class="chat-sub" id="chat-room-sub"></div>
75
76
  </div>
76
77
  <div class="chat-actions">
77
- <button id="pins-btn" class="chip pins-chip" type="button" hidden title="Pinned messages"></button>
78
+ <button id="pins-btn" data-ui="chip" data-button type="button" hidden title="Pinned messages"></button>
78
79
  <label class="search"><span class="search-icon" data-icon="search"></span><input id="search" type="search" placeholder="Search in this room…" autocomplete="off"></label>
79
- <button id="chat-info-btn" class="icon-btn" title="Room settings"><span data-icon="settings"></span></button>
80
+ <button id="chat-info-btn" data-ui="icon-button" title="Room settings"><span data-icon="settings"></span></button>
80
81
  </div>
81
82
  </header>
82
83
  <div id="cast-banner" class="cast-banner" hidden></div>
@@ -87,7 +88,7 @@
87
88
  <div class="tl-ticks"></div>
88
89
  <div class="tl-pop" hidden></div>
89
90
  </div>
90
- <button type="button" id="jump-latest" class="jump-latest" title="Back to the latest messages" hidden><span data-icon="arrow-down"></span>Latest</button>
91
+ <button type="button" id="jump-latest" class="jump-latest" title="Back to the latest messages" hidden><span data-icon="chevrons-down"></span></button>
91
92
  <div id="done-notes" class="done-notes" hidden></div>
92
93
  <div id="timeline" class="timeline" hidden>
93
94
  <div class="tl-view"></div>
@@ -100,6 +101,7 @@
100
101
  <div class="composer-grip" id="composer-grip" title="Drag to make the box taller; double-click to reset"></div>
101
102
  <button type="button" class="smile-btn" id="emoji-btn" title="Add an emoji"><span data-icon="smile"></span></button>
102
103
  <div class="composer-box">
104
+ <div class="quotes-tray" id="quotes-tray" hidden></div>
103
105
  <div class="shots-tray" id="shots-tray" hidden></div>
104
106
  <textarea id="input" rows="1" placeholder="Message the room… @Name or /skill" title="Enter sends, Shift+Enter is a new line; paste or drop an image"></textarea>
105
107
  </div>
@@ -128,14 +130,14 @@
128
130
  <label>Your vibe line <span class="hint">(a sentence or two about you)</span><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>The vibemates get this line in every room's brief, so they know who they are talking to. A room can add its own line or replace it (Your vibe, in the room).</span>
129
131
  <textarea id="pf-desc" rows="3" maxlength="200" placeholder="e.g. software engineer, curious about agent protocols; likes short answers"></textarea></label>
130
132
  <p class="error" id="pf-error" hidden></p>
131
- <div class="actions"><button type="submit" class="btn primary lg">Start vibing</button></div>
133
+ <div class="actions"><button type="submit" data-ui="button" data-kind="primary" data-size="lg">Start vibing</button></div>
132
134
  </form>
133
135
  </dialog>
134
136
  <dialog id="confirm-dialog" class="dialog narrow">
135
137
  <form method="dialog">
136
138
  <h3 id="cf-title">Are you sure?</h3>
137
139
  <p class="lead" id="cf-text"></p>
138
- <div class="actions"><button class="btn ghost" value="cancel" type="submit">Cancel</button><button class="btn primary" id="cf-ok" value="ok" type="submit">OK</button></div>
140
+ <div class="actions"><button data-ui="button" data-kind="ghost" value="cancel" type="submit">Cancel</button><button data-ui="button" data-kind="primary" id="cf-ok" value="ok" type="submit">OK</button></div>
139
141
  </form>
140
142
  </dialog>
141
143
  <dialog id="room-dialog" class="dialog">
@@ -144,9 +146,9 @@
144
146
  <p class="lead">A room is a shared space for you and the vibemates you summon. Give it a name.</p>
145
147
  <label>Room name<input id="room-name" type="text" maxlength="60" required placeholder="e.g. Architecture review"></label>
146
148
  <label>Working directory <span class="hint">(optional)</span><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>The folder the vibemates work in (their cwd). Leave it empty and the hub keeps a folder per room. Instruction files in it (CLAUDE.md, AGENTS.md, GEMINI.md, .cursor/rules) are read by the vibemates by their own conventions; the hub tells you if it finds any.</span>
147
- <span class="dir-row"><input id="room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" class="btn ghost browse-btn" id="room-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
149
+ <span class="dir-row"><input id="room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" data-ui="button" data-kind="ghost" class="browse-btn" id="room-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
148
150
  <p class="error" id="room-error" hidden></p>
149
- <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary">Open the room</button></div>
151
+ <div class="actions"><button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button><button type="submit" data-ui="button" data-kind="primary">Open the room</button></div>
150
152
  </form>
151
153
  </dialog>
152
154
  <dialog id="template-dialog" class="dialog wide">
@@ -154,14 +156,14 @@
154
156
  <h3><span class="h-ico" data-icon="rooms"></span>Start from a template</h3>
155
157
  <p class="lead">A template is a room's rules and its vibemates, ready to summon. Pick one, choose who runs each vibemate, name the room.</p>
156
158
  <div class="tpl-layout">
157
- <div class="tpl-list" id="tpl-list"></div>
158
- <div class="tpl-detail" id="tpl-detail"></div>
159
+ <div class="tpl-pane"><div class="tpl-list" id="tpl-list"></div></div>
160
+ <div class="tpl-pane"><div class="tpl-detail" id="tpl-detail"></div></div>
159
161
  </div>
160
162
  <label>Room name<input id="tpl-room-name" type="text" maxlength="60" required placeholder="e.g. Payments refactor"></label>
161
163
  <label>Working directory <span class="hint">(optional)</span>
162
- <span class="dir-row"><input id="tpl-room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" class="btn ghost browse-btn" id="tpl-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
164
+ <span class="dir-row"><input id="tpl-room-dir" type="text" placeholder="C:\projects\my-app"><button type="button" data-ui="button" data-kind="ghost" class="browse-btn" id="tpl-dir-browse" title="Choose a folder"><span data-icon="folder"></span>Browse</button></span></label>
163
165
  <p class="error" id="tpl-error" hidden></p>
164
- <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary" id="tpl-create">Create the room</button></div>
166
+ <div class="actions"><button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button><button type="submit" data-ui="button" data-kind="primary" id="tpl-create">Create the room</button></div>
165
167
  </form>
166
168
  </dialog>
167
169
  <dialog id="save-template-dialog" class="dialog wide">
@@ -172,7 +174,7 @@
172
174
  <label>Description <span class="hint">(optional)</span><textarea id="stp-desc" rows="2" maxlength="400" placeholder="what this setup is good for"></textarea></label>
173
175
  <div class="stp-preview" id="stp-preview"></div>
174
176
  <p class="error" id="stp-error" hidden></p>
175
- <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary" id="stp-create">Create the template</button></div>
177
+ <div class="actions"><button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button><button type="submit" data-ui="button" data-kind="primary" id="stp-create">Create the template</button></div>
176
178
  </form>
177
179
  </dialog>
178
180
  <dialog id="invite-dialog" class="dialog wide">
@@ -204,17 +206,27 @@
204
206
  <p class="hint" id="inv-where"></p>
205
207
  <p class="hint" id="inv-note"></p>
206
208
  <p class="hint accent" id="inv-status"></p>
207
- <div class="row-btns start"><button type="button" id="inv-refresh" class="btn ghost sm" title="Ask the vibemate again what it offers"><span data-icon="refresh"></span>Ask the vibemate again what it offers</button></div>
209
+ <div class="row-btns start"><button type="button" id="inv-refresh" data-ui="button" data-kind="ghost" data-size="sm" title="Ask the vibemate again what it offers"><span data-icon="refresh"></span>Ask the vibemate again what it offers</button></div>
208
210
  </div>
209
211
  </details>
210
212
  <p class="error" id="inv-error" hidden></p>
211
213
  <div class="actions">
212
- <button type="button" class="btn ghost" data-close>Cancel</button>
213
- <button type="submit" id="inv-submit" class="btn primary">Summon</button>
214
+ <button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button>
215
+ <button type="submit" id="inv-submit" data-ui="button" data-kind="primary">Summon</button>
214
216
  </div>
215
217
  </form>
216
218
  </dialog>
217
219
  <div id="lightbox" class="lightbox" hidden><img alt=""></div>
220
+ <div id="diagram-view" class="diagram-view" hidden>
221
+ <div class="dv-stage" id="dv-stage"></div>
222
+ <div class="dv-bar" id="dv-bar">
223
+ <button type="button" class="dv-btn" id="dv-out" title="Zoom out (−)"><span data-icon="zoom-out"></span></button>
224
+ <button type="button" class="dv-level" id="dv-level" title="Fit the diagram to the window">100%</button>
225
+ <button type="button" class="dv-btn" id="dv-in" title="Zoom in (+)"><span data-icon="zoom-in"></span></button>
226
+ <span class="dv-hint">drag to move · double-click to fit</span>
227
+ <button type="button" class="dv-btn" id="dv-close" title="Close (Esc)"><span data-icon="minimize"></span></button>
228
+ </div>
229
+ </div>
218
230
  <dialog id="edit-dialog" class="dialog">
219
231
  <form id="edit-form" method="dialog">
220
232
  <h3><span class="h-ico" data-icon="pencil"></span>Edit your message</h3>
@@ -225,9 +237,9 @@
225
237
  </div>
226
238
  <p class="error" id="ed-error" hidden></p>
227
239
  <div class="actions">
228
- <button type="button" class="btn ghost" data-close>Cancel</button>
229
- <button type="button" id="ed-rewrite" class="btn danger">Rewrite from here</button>
230
- <button type="button" id="ed-notify" class="btn primary" autofocus>Notify vibemates</button>
240
+ <button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button>
241
+ <button type="button" id="ed-rewrite" data-ui="button" data-kind="danger">Rewrite from here</button>
242
+ <button type="button" id="ed-notify" data-ui="button" data-kind="primary" autofocus>Notify vibemates</button>
231
243
  </div>
232
244
  </form>
233
245
  </dialog>
@@ -236,14 +248,14 @@
236
248
  <h3><span class="h-ico" data-icon="refresh"></span>Welcome back</h3>
237
249
  <p class="lead" id="rc-intro"></p>
238
250
  <div class="choice-list">
239
- <label class="choice"><input type="radio" name="rc-mode" value="replay" checked> <span><strong>Replay the last</strong> <input id="rc-replay" type="number" min="0" max="500" value="10" class="rc-num"> <strong>chat messages</strong> — a fresh start with the recent history.<button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>A new vibemate session that reads the recent room history (room events in between come along), like a person coming back from a break. Cheap and works for every vibemate.</span></span></label>
240
- <label class="choice"><input type="radio" name="rc-mode" value="load"> <span><strong>Restore the full session</strong> — the vibemate comes back with everything it knew.<button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>ACP <code>session/load</code>: the vibemate reloads its own stored conversation, with tool results and reasoning. Its next turn pays for the whole history again. Falls back to replay if the vibemate cannot load it.</span></span></label>
251
+ <label class="choice"><input type="radio" name="rc-mode" value="replay" checked> <span><strong>Replay the last</strong> <input id="rc-replay" type="number" min="0" max="500" value="10" class="rc-num"> <strong>chat messages</strong> — a fresh start with the recent history.<span class="rc-is-default" hidden>default</span><button type="button" class="link-btn rc-default" data-mode="replay" hidden>Make default</button><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>A new vibemate session that reads the recent room history (room events in between come along), like a person coming back from a break. Cheap and works for every vibemate.</span></span></label>
252
+ <label class="choice"><input type="radio" name="rc-mode" value="load"> <span><strong>Restore the full session</strong> — the vibemate comes back with everything it knew.<span class="rc-is-default" hidden>default</span><button type="button" class="link-btn rc-default" data-mode="load" hidden>Make default</button><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>ACP <code>session/load</code>: the vibemate reloads its own stored conversation, with tool results and reasoning. Its next turn pays for the whole history again. Falls back to replay if the vibemate cannot load it.</span></span></label>
241
253
  </div>
242
254
  <table class="rc-table" id="rc-table"></table>
243
255
  <p class="error" id="rc-error" hidden></p>
244
256
  <div class="actions">
245
- <button type="button" class="btn ghost" data-close>Later</button>
246
- <button type="submit" id="rc-submit" class="btn primary">Reconnect</button>
257
+ <button type="button" data-ui="button" data-kind="ghost" data-close>Later</button>
258
+ <button type="submit" id="rc-submit" data-ui="button" data-kind="primary">Reconnect</button>
247
259
  </div>
248
260
  </form>
249
261
  </dialog>
@@ -253,7 +265,7 @@
253
265
  <p class="lead">This wipes <strong>everything</strong> in this viberoom: your vibe, all rooms and their history, every vibemate session, your skills (the built-in ones come back). The next start asks you to set a vibe again.</p>
254
266
  <label>Type <code>erase</code> to confirm<input id="erase-word" type="text" autocomplete="off" placeholder="erase"></label>
255
267
  <p class="error" id="erase-error" hidden></p>
256
- <div class="actions"><button type="button" class="btn ghost" data-close>Keep my vibe</button><button type="submit" id="erase-submit" class="btn danger solid" disabled>Erase everything</button></div>
268
+ <div class="actions"><button type="button" data-ui="button" data-kind="ghost" data-close>Keep my vibe</button><button type="submit" id="erase-submit" data-ui="button" data-kind="danger-solid" disabled>Erase everything</button></div>
257
269
  </form>
258
270
  </dialog>
259
271
  <dialog id="folder-dialog" class="dialog wide folder-dialog">
@@ -261,8 +273,8 @@
261
273
  <h3><span class="h-ico" data-icon="folder"></span>Choose a folder</h3>
262
274
  <div class="fp-bar">
263
275
  <input id="fp-path" type="text" spellcheck="false" placeholder="Type a path and press Enter, or pick one below">
264
- <button type="button" class="btn ghost" id="fp-home" title="Your home folder"><span data-icon="user"></span>Home</button>
265
- <button type="button" class="btn ghost" id="fp-new" title="New folder inside the selected one"><span data-icon="plus"></span>New folder</button>
276
+ <button type="button" data-ui="button" data-kind="ghost" id="fp-home" title="Your home folder"><span data-icon="user"></span>Home</button>
277
+ <button type="button" data-ui="button" data-kind="ghost" id="fp-new" title="New folder inside the selected one"><span data-icon="plus"></span>New folder</button>
266
278
  </div>
267
279
  <div class="fp-recent" id="fp-recent"></div>
268
280
  </div>
@@ -272,23 +284,33 @@
272
284
  <p class="error" id="fp-error" hidden></p>
273
285
  <div class="actions">
274
286
  <span class="fp-selected" id="fp-selected"></span>
275
- <button type="button" class="btn ghost" data-close>Cancel</button>
276
- <button type="button" class="btn primary" id="fp-choose">Choose this folder</button>
287
+ <button type="button" data-ui="button" data-kind="ghost" data-close>Cancel</button>
288
+ <button type="button" data-ui="button" data-kind="primary" id="fp-choose">Choose this folder</button>
277
289
  </div>
278
290
  </dialog>
279
- <dialog id="file-dialog" class="dialog wide file-dialog">
291
+ <dialog id="file-dialog" class="dialog wide file-dialog light-dismiss">
280
292
  <div class="file-head">
281
293
  <h3><span class="h-ico" data-icon="link"></span><span id="fv-title">File</span></h3>
282
294
  <p class="lead" id="fv-path"></p>
295
+ <div class="fv-tools" id="fv-tools" hidden>
296
+ <label class="search fv-find"><span class="search-icon" data-icon="search"></span><input id="fv-search" type="search" placeholder="Find in this file…" autocomplete="off"></label>
297
+ <span class="fv-hits" id="fv-hits"></span>
298
+ <label class="fv-goto">line <input id="fv-line" type="number" min="1" step="1" placeholder="1"></label>
299
+ <label class="fv-wrap"><input id="fv-wrap" type="checkbox"> wrap</label>
300
+ <span class="fv-count" id="fv-count"></span>
301
+ </div>
283
302
  </div>
284
303
  <div id="fv-body" class="file-view"></div>
285
304
  <div class="actions">
286
- <button type="button" id="fv-open" class="btn ghost">Open in editor</button>
287
- <button type="button" class="btn primary" data-close>Close</button>
305
+ <button type="button" id="fv-open" data-ui="button" data-kind="ghost">Open in editor</button>
306
+ <button type="button" data-ui="button" data-kind="primary" data-close>Close</button>
288
307
  </div>
289
308
  </dialog>
290
309
  <script src="/vendor/marked.umd.js"></script>
310
+ <script src="/tokens.js"></script>
291
311
  <script src="/icons.js"></script>
312
+ <script src="/ui.js"></script>
313
+ <script src="/components.js"></script>
292
314
  <script src="/avatars.js"></script>
293
315
  <script src="/app.js"></script>
294
316
  </body>