viberoom 0.2.0

package/ui/avatars.js

@@ -0,0 +1,113 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+(() => {
+  "use strict";
+
+  function hash(text) {
+    let h = 2166136261;
+    for (const ch of String(text)) {
+      h ^= ch.codePointAt(0);
+      h = Math.imul(h, 16777619) >>> 0;
+    }
+    return h;
+  }
+
+  function shade(hex, amount) {
+    const n = parseInt(hex.replace("#", ""), 16);
+    const r = Math.min(255, Math.max(0, ((n >> 16) & 255) + amount));
+    const g = Math.min(255, Math.max(0, ((n >> 8) & 255) + amount));
+    const b = Math.min(255, Math.max(0, (n & 255) + amount));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
+  }
+
+  function initials(name) {
+    const parts = String(name).trim().split(/[\s_-]+/).filter(Boolean);
+    if (!parts.length) return "?";
+    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[1][0]).toUpperCase();
+  }
+
+  function avatarSvg(name, color, emoji, size) {
+    const s = size || 40;
+    const c1 = shade(color, 30);
+    const c2 = shade(color, -25);
+    const id = `g${hash(name + color).toString(36)}`;
+    const label = emoji ? emoji : initials(name);
+    const fontSize = emoji ? s * 0.55 : s * 0.42;
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${s} ${s}" width="${s}" height="${s}" role="img" aria-label="${escapeAttr(name)}">
+  <defs><linearGradient id="${id}" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${c1}"/><stop offset="1" stop-color="${c2}"/></linearGradient></defs>
+  <circle cx="${s / 2}" cy="${s / 2}" r="${s / 2}" fill="url(#${id})"/>
+  <circle cx="${s / 2}" cy="${s * 0.36}" r="${s * 0.34}" fill="#ffffff" opacity="0.10"/>
+  <text x="50%" y="53%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui, 'Segoe UI Emoji', sans-serif" font-size="${fontSize}" font-weight="700" fill="#ffffff">${escapeText(label)}</text>
+</svg>`;
+  }
+
+  function escapeText(value) {
+    return String(value).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+  }
+  function escapeAttr(value) {
+    return String(value).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+  }
+
+  function avatarHtml(participant, size, options) {
+    const opts = options || {};
+    const color = participant.color || "#5b5bf0";
+    const s = size || 40;
+    const emoji = participant.avatar;
+    const label = emoji ? emoji : initials(participant.name);
+    const fontSize = Math.round(emoji ? s * 0.56 : s * 0.38);
+    const radius = Math.round(s * 0.32);
+    const svg = `<span class="av-tile" role="img" aria-label="${escapeAttr(participant.name)}" style="background:color-mix(in srgb, ${escapeAttr(color)} 16%, #ffffff);color:${escapeAttr(color)};font-size:${fontSize}px;border-radius:${radius}px">${escapeText(label)}</span>`;
+    const status = opts.status ? `<span class="avatar-status status-${escapeAttr(participant.status || "idle")}"></span>` : "";
+    let badge = "";
+    if (opts.vendor && participant.kind === "agent") {
+      const recipe = opts.recipes ? opts.recipes.find((r) => r.id === participant.agentType) : null;
+      const letter = escapeText((participant.agentVendor || participant.agentType || "?").slice(0, 1).toUpperCase());
+      const title = escapeAttr(participant.agentLabel || participant.agentType || "");
+      badge = recipe && recipe.icon
+        ? `<span class="avatar-badge" title="${title}"><img src="${escapeAttr(recipe.icon)}" alt="" onerror="this.replaceWith(document.createTextNode('${letter}'))"></span>`
+        : `<span class="avatar-badge" title="${title}">${letter}</span>`;
+    }
+    return `<span class="avatar" style="width:${size}px;height:${size}px">${svg}${badge}${status}</span>`;
+  }
+
+  const GALLERY = [
+    "🦊", "🐼", "🦉", "🐯", "🐸", "🤖", "👩‍💻", "🧑‍🚀", "🧙", "🐙", "🦄", "🐺", "🧑‍🎨", "🕵️", "🧑‍🔬", "🐝", "🐧", "🦁", "🐨", "👾",
+    "🐱", "🐶", "🦝", "🐢", "🐬", "🦋", "🦩", "🐲", "🦖", "🐳", "🦭", "🐹", "🦔", "🐻", "🐮", "🐵",
+    "🧑‍🍳", "🧑‍🚒", "🧑‍⚕️", "🧑‍🏫", "🧑‍✈️", "🧛", "🧜", "🧞", "🦸", "🥷", "🤠", "👽", "👻", "🎃",
+    "🌙", "⭐", "🔥", "🍀", "🌵", "🌈", "🎧", "🎸", "🚀", "🛸", "🧠", "🎯", "🧩", "💎", "🍕", "☕",
+  ];
+
+  function pickerElement(current, onPick) {
+    const wrap = document.createElement("div");
+    wrap.className = "avatar-picker";
+    const render = (value) => {
+      wrap.innerHTML = "";
+      const none = document.createElement("button");
+      none.type = "button";
+      none.className = "none" + (!value ? " selected" : "");
+      none.textContent = "Aa";
+      none.title = "Initials";
+      none.addEventListener("click", () => {
+        onPick("");
+        render("");
+      });
+      wrap.appendChild(none);
+      for (const e of GALLERY) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.textContent = e;
+        b.className = e === value ? "selected" : "";
+        b.addEventListener("click", () => {
+          onPick(e);
+          render(e);
+        });
+        wrap.appendChild(b);
+      }
+    };
+    render(current || "");
+    wrap.setValue = render;
+    return wrap;
+  }
+
+  window.Avatars = { avatarSvg, avatarHtml, initials, pickerElement, GALLERY };
+})();

package/ui/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The Nunito Project Authors (https://github.com/googlefonts/nunito)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/ui/fonts/nunito.css

@@ -0,0 +1,6 @@
+/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
+@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/nunito-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/nunito-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/nunito-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
+@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

package/ui/icons.js

@@ -0,0 +1,76 @@
+// viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE
+(() => {
+  "use strict";
+
+  const GEAR = `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>`;
+  const BELL_OFF = `<path d="M6 8a6 6 0 0 1 10.5-4M18 8v5l2 3H4l2-3V8"/><path d="M10 20a2 2 0 0 0 4 0M3 3l18 18"/>`;
+
+  const ICONS = {
+    rooms: `<rect x="4" y="4" width="7" height="7" rx="2"/><rect x="13" y="4" width="7" height="7" rx="2"/><rect x="4" y="13" width="7" height="7" rx="2"/><rect x="13" y="13" width="7" height="7" rx="2"/>`,
+    chat: `<path d="M20 12a8 8 0 0 1-8 8H5l-1.5 1.5V12a8 8 0 1 1 16 0z"/><path d="M8.5 12h.01M12 12h.01M15.5 12h.01" stroke-width="2.6"/>`,
+    skills: `<path d="M2 4.5h5.5a4 4 0 0 1 4 4V20a3 3 0 0 0-3-3H2z"/><path d="M22 4.5h-5.5a4 4 0 0 0-4 4V20a3 3 0 0 1 3-3H22z"/>`,
+    puzzle: `<path d="M10 4a2 2 0 1 1 4 0h3a1 1 0 0 1 1 1v3a2 2 0 1 1 0 4v3a1 1 0 0 1-1 1h-3a2 2 0 1 1-4 0H7a1 1 0 0 1-1-1v-3a2 2 0 1 1 0-4V5a1 1 0 0 1 1-1h3z"/>`,
+    settings: GEAR,
+    user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
+    plus: `<path d="M12 5v14M5 12h14"/>`,
+    search: `<circle cx="11" cy="11" r="6"/><path d="M20 20l-4.3-4.3"/>`,
+    filter: `<path d="M22 3H2l8 9.5V19l4 2v-8.5z"/>`,
+    back: `<path d="M15 18l-6-6 6-6"/>`,
+    forward: `<path d="M9 18l6-6-6-6"/>`,
+    collapse: `<path d="M11 7l-5 5 5 5M18 7l-5 5 5 5"/>`,
+    expand: `<path d="M6 7l5 5-5 5M13 7l5 5-5 5"/>`,
+    close: `<path d="M18 6L6 18M6 6l12 12"/>`,
+    down: `<path d="M6 9l6 6 6-6"/>`,
+    stop: `<rect x="6" y="6" width="12" height="12" rx="2"/>`,
+    refresh: `<path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/>`,
+    bell: `<path d="M6 8a6 6 0 1 1 12 0v5l2 3H4l2-3V8z"/><path d="M10 20a2 2 0 0 0 4 0"/>`,
+    "bell-off": BELL_OFF,
+    hush: BELL_OFF,
+    at: `<circle cx="12" cy="12" r="4"/><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1"/>`,
+    trash: `<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>`,
+    pencil: `<path d="M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>`,
+    send: `<path d="M4 12l16-8-6 16-2.5-6.5L4 12z"/>`,
+    folder: `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>`,
+    spark: `<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/><path d="M19 15l.6 1.6 1.6.6-1.6.6L19 19.4l-.6-1.6-1.6-.6 1.6-.6z"/>`,
+    check: `<path d="M20 6L9 17l-5-5"/>`,
+    alert: `<path d="M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>`,
+    info: `<circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/>`,
+    more: `<path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/>`,
+    logout: `<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/>`,
+    link: `<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/>`,
+    wand: `<path d="M15 4V2M15 16v-2M8 9h2M20 9h2M17.8 11.8L19 13M17.8 6.2L19 5M3 21l9-9M12.2 6.2L11 5"/>`,
+    bolt: `<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>`,
+    save: `<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/>`,
+    eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
+    lock: `<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+    sun: `<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>`,
+    geek: `<rect x="2.5" y="10" width="8" height="7" rx="2.5"/><rect x="13.5" y="10" width="8" height="7" rx="2.5"/><path d="M10.5 13h3M2.5 12l1.8-4.5M21.5 12l-1.8-4.5"/>`,
+    clock: `<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>`,
+    tool: `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z"/>`,
+    smile: `<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/>`,
+    "arrow-down": `<path d="M12 5v14M19 12l-7 7-7-7"/>`,
+    "arrow-up": `<path d="M12 19V5M5 12l7-7 7 7"/>`,
+    database: `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.7-4 3-9 3s-9-1.3-9-3M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/>`,
+    hand: `<path d="M18 11V6a2 2 0 0 0-4 0v1M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 0 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-5.9-2.3L2.6 15.6a2 2 0 0 1 2.8-2.8L7 14.4"/>`,
+  };
+
+  function install() {
+    if (document.getElementById("viberoom-icons")) return;
+    const symbols = Object.entries(ICONS)
+      .map(([name, body]) => `<symbol id="i-${name}" viewBox="0 0 24 24">${body}</symbol>`)
+      .join("");
+    const holder = document.createElement("div");
+    holder.id = "viberoom-icons";
+    holder.setAttribute("aria-hidden", "true");
+    holder.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
+    holder.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${symbols}</svg>`;
+    document.body.prepend(holder);
+  }
+
+  function svg(name, cls) {
+    if (!ICONS[name]) name = "info";
+    return `<svg class="i${cls ? ` ${cls}` : ""}" aria-hidden="true"><use href="#i-${name}"/></svg>`;
+  }
+
+  window.Icons = { install, svg, names: Object.keys(ICONS) };
+})();

package/ui/index.html

@@ -0,0 +1,217 @@
+<!-- viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE -->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>viberoom</title>
+  <link rel="icon" href="/icon.svg?v=7" type="image/svg+xml">
+  <link rel="icon" href="/favicon.ico?v=7" sizes="any">
+  <link rel="apple-touch-icon" href="/icon-256.png?v=7">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#6d5dfc">
+  <link rel="stylesheet" href="/theme.css">
+  <link rel="stylesheet" href="/app.css">
+</head>
+<body>
+  <div id="app" class="shell view-rooms">
+    <nav class="rail" id="rail" aria-label="Main menu">
+      <div class="rail-head">
+        <button class="rail-logo" id="rail-logo" title="viberoom"><img class="mark" src="/icon-256.png?v=7" alt=""><span class="word">viberoom</span></button>
+      </div>
+      <div class="rail-items">
+        <button class="rail-item new" id="rail-new-room" title="Open a room"><span class="ico" data-icon="plus"></span><span class="label">Open a room</span></button>
+        <button class="rail-item" data-nav="rooms" title="Rooms"><span class="ico" data-icon="rooms"></span><span class="label">Rooms</span></button>
+        <button class="rail-item" data-nav="room" title="Current room" id="rail-room" hidden><span class="ico" data-icon="chat"></span><span class="label" id="rail-room-label">Room</span><span class="rail-count" id="rail-unread" hidden></span></button>
+        <button class="rail-item" data-nav="skills" title="Skills"><span class="ico" data-icon="skills"></span><span class="label">Skills</span></button>
+        <button class="rail-item" data-nav="settings" title="Settings"><span class="ico" data-icon="settings"></span><span class="label">Settings</span></button>
+      </div>
+      <div class="rail-foot">
+        <button class="rail-item me" data-nav="me" title="Your vibe" id="rail-me"><span class="ico" id="rail-me-avatar"></span><span class="label" id="rail-me-label">You</span></button>
+        <div class="rail-status"><span class="conn" id="conn" title="Connection to the hub"></span><span class="label conn-label" id="conn-label">connected</span></div>
+        <button class="rail-toggle" id="rail-toggle" title="Expand the menu"><span data-icon="expand"></span></button>
+      </div>
+    </nav>
+    <aside class="side" id="side">
+      <div class="side-rooms" id="side-rooms">
+        <div class="side-head">
+          <h2 id="side-rooms-title">Rooms</h2>
+        </div>
+        <label class="search"><span class="search-icon" data-icon="search"></span><input id="room-search" type="search" placeholder="Find a room…" autocomplete="off"></label>
+        <ul class="side-list" id="room-list"></ul>
+      </div>
+      <div class="side-room" id="side-room" hidden>
+        <div class="side-head room">
+          <button class="icon-btn ghost sm" id="back-to-rooms" title="All rooms"><span data-icon="back"></span></button>
+          <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>
+          <button class="icon-btn ghost sm" id="room-settings-btn" title="Room settings"><span data-icon="settings"></span></button>
+          <button class="icon-btn ghost sm" id="side-toggle" title="Fold this column"><span data-icon="collapse"></span></button>
+        </div>
+        <div class="side-actions">
+          <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>
+        </div>
+        <div class="side-label">In this room</div>
+        <ul id="participants" class="side-list participants"></ul>
+        <div class="side-foot">
+          <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>
+          <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>
+        </div>
+      </div>
+    </aside>
+    <main class="main" id="main">
+      <section class="home" id="home-view" hidden></section>
+      <section class="rooms-view" id="rooms-view">
+        <header class="main-head">
+          <div><h1>Your rooms</h1><div class="hint" id="rooms-sub">Pick a room or open a new one.</div></div>
+        </header>
+        <div class="rooms-grid" id="rooms-grid"></div>
+      </section>
+      <section class="chat" id="chat-view" hidden>
+        <header class="main-head chat-head">
+          <div class="chat-title">
+            <h1 id="chat-room-name">…</h1>
+            <div class="chat-sub" id="chat-room-sub"></div>
+          </div>
+          <div class="chat-actions">
+            <label class="search"><span class="search-icon" data-icon="search"></span><input id="search" type="search" placeholder="Search in this room…" autocomplete="off"></label>
+            <button id="chat-info-btn" class="icon-btn" title="Room settings"><span data-icon="settings"></span></button>
+          </div>
+        </header>
+        <div id="messages" class="messages"></div>
+        <div id="mention-menu" class="mention-menu" hidden></div>
+        <div id="emoji-menu" class="mention-menu emoji-menu" hidden></div>
+        <form id="composer" class="composer">
+          <button type="button" class="smile-btn" id="emoji-btn" title="Add an emoji"><span data-icon="smile"></span></button>
+          <div class="composer-box">
+            <textarea id="input" rows="1" placeholder="Message the room… @Name or /skill" title="Enter sends, Shift+Enter is a new line"></textarea>
+          </div>
+          <button type="submit" class="send-btn" title="Send"><span data-icon="send"></span></button>
+        </form>
+      </section>
+      <section class="page" id="page-view" hidden>
+        <div class="page-inner" id="page-inner"></div>
+      </section>
+    </main>
+    <aside class="details" id="details" hidden>
+      <div class="resizer" id="details-resizer" title="Drag to resize; double-click to fit"></div>
+      <div class="details-inner" id="details-inner"></div>
+    </aside>
+  </div>
+  <div class="toasts" id="toasts"></div>
+  <dialog id="profile-dialog" class="dialog">
+    <form id="profile-form" method="dialog">
+      <h3><span class="h-ico" data-icon="spark"></span>Welcome to viberoom</h3>
+      <p class="lead">Every room needs a human with a vibe. Set yours: it is how the vibemates will know you. You can change it any time under Your vibe.</p>
+      <label>Vibename <span class="hint">(how you appear in every room)</span><input id="pf-name" type="text" maxlength="24" required autocomplete="off" placeholder="letters, digits, _ or -"></label>
+      <label>Vibeface <span class="hint">(pick one, or type any emoji)</span>
+        <div id="pf-avatar-picker"></div>
+        <input id="pf-avatar" type="text" maxlength="8" placeholder="custom emoji (optional)"></label>
+      <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>
+        <textarea id="pf-desc" rows="3" maxlength="200" placeholder="e.g. software engineer, curious about agent protocols; likes short answers"></textarea></label>
+      <p class="error" id="pf-error" hidden></p>
+      <div class="actions"><button type="submit" class="btn primary lg">Start vibing</button></div>
+    </form>
+  </dialog>
+  <dialog id="confirm-dialog" class="dialog narrow">
+    <form method="dialog">
+      <h3 id="cf-title">Are you sure?</h3>
+      <p class="lead" id="cf-text"></p>
+      <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>
+    </form>
+  </dialog>
+  <dialog id="room-dialog" class="dialog">
+    <form id="room-form" method="dialog">
+      <h3><span class="h-ico" data-icon="rooms"></span>Open a room</h3>
+      <p class="lead">A room is a shared space for you and the vibemates you summon. Give it a name.</p>
+      <label>Room name<input id="room-name" type="text" maxlength="60" required placeholder="e.g. Architecture review"></label>
+      <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>
+        <input id="room-dir" type="text" placeholder="C:\projects\my-app"></label>
+      <p class="error" id="room-error" hidden></p>
+      <div class="actions"><button type="button" class="btn ghost" data-close>Cancel</button><button type="submit" class="btn primary">Open the room</button></div>
+    </form>
+  </dialog>
+  <dialog id="invite-dialog" class="dialog wide">
+    <form id="invite-form" method="dialog">
+      <h3><span class="h-ico" data-icon="spark"></span>Summon a Vibemate</h3>
+      <p class="lead">Pick a vibemate, give it a vibename and a character, and it joins the room.</p>
+      <div class="agent-grid" id="inv-agents"></div>
+      <p class="hint" id="inv-none" hidden></p>
+      <select id="inv-type" hidden></select>
+      <div id="inv-options" hidden>
+        <div class="choice-row"><span class="label">Model</span><div class="chips" data-for="inv-model"></div><select id="inv-model" hidden></select><input id="inv-model-custom" type="text" placeholder="or type a model name" hidden></div>
+        <div class="choice-row"><span class="label">Effort</span><div class="chips" data-for="inv-effort"></div><select id="inv-effort" hidden></select></div>
+        <div class="choice-row"><span class="label">Mode</span><div class="chips" data-for="inv-mode"></div><select id="inv-mode" hidden></select></div>
+      </div>
+      <div class="two-col">
+        <label>Vibename <span class="hint">(required)</span><input id="inv-name" type="text" maxlength="24" required autocomplete="off" placeholder="letters, digits, _ or -"></label>
+        <label>Vibersona <span class="hint">(optional; a few words under the vibename)</span><input id="inv-tagline" type="text" maxlength="80" placeholder="e.g. curious analyst"></label>
+      </div>
+      <label>Vibeface <span class="hint">(pick one, or type any emoji)</span>
+        <div id="inv-avatar-picker"></div>
+        <input id="inv-avatar" type="text" maxlength="8" placeholder="custom emoji (optional)"></label>
+      <label>Vibio <span class="hint">(only this vibemate reads it)</span><button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>Who it is, how it speaks, what it cares about. It reaches the vibemate as instructions in its brief; the other participants never see it. You can change it later in the vibemate's panel.</span>
+        <textarea id="inv-role" rows="4" maxlength="4000" placeholder="e.g. A calm team lead who asks one question at a time."></textarea></label>
+      <details class="geek" id="inv-geek">
+        <summary><span data-icon="geek"></span>for geeks<span class="g-hint">reply delay, skills, where the vibemate lives</span><span class="chev" data-icon="down"></span></summary>
+        <div class="geek-body">
+          <label>Reply delay override, seconds<button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>Empty: the room's delay. A value here overrides it for this vibemate only. Before each turn the vibemate waits a random 0–N seconds, so replies cross less often; messages that arrive meanwhile land in its backlog.</span><input id="inv-delay" type="number" min="0" max="120" step="0.5" placeholder="the room's"></label>
+          <label>Skills <span class="hint">(from the library)</span><div id="inv-skills" class="check-list"></div></label>
+          <p class="hint" id="inv-where"></p>
+          <p class="hint" id="inv-note"></p>
+          <p class="hint accent" id="inv-status"></p>
+          <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>
+        </div>
+      </details>
+      <p class="error" id="inv-error" hidden></p>
+      <div class="actions">
+        <button type="button" class="btn ghost" data-close>Cancel</button>
+        <button type="submit" id="inv-submit" class="btn primary">Summon</button>
+      </div>
+    </form>
+  </dialog>
+  <dialog id="edit-dialog" class="dialog">
+    <form id="edit-form" method="dialog">
+      <h3><span class="h-ico" data-icon="pencil"></span>Edit your message</h3>
+      <p class="lead" id="ed-summary"></p>
+      <div class="choice-list">
+        <div class="choice"><span><strong>Notify vibemates</strong> — the message changes in place; the vibemates that read the old version are told.<button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>The vibemates that already read the old version get a room event with the change and reply only if it matters to them. Cheap; their memory still holds the old wording.</span></span></div>
+        <div class="choice"><span><strong>Rewrite from here</strong> — <span id="ed-rewrite-detail"></span> The vibemates that read the old version start over from this message.<button type="button" class="geek-tip" title="For geeks"><span data-icon="geek"></span>for geeks</button><span class="geek-text" hidden>Those vibemates restart with a fresh session and the conversation up to this message; they lose their working memory (tool results, reasoning). The removed messages are kept for you in <code>history.deleted.jsonl</code>.</span></span></div>
+      </div>
+      <p class="error" id="ed-error" hidden></p>
+      <div class="actions">
+        <button type="button" class="btn ghost" data-close>Cancel</button>
+        <button type="button" id="ed-rewrite" class="btn danger">Rewrite from here</button>
+        <button type="button" id="ed-notify" class="btn primary" autofocus>Notify vibemates</button>
+      </div>
+    </form>
+  </dialog>
+  <dialog id="reconnect-dialog" class="dialog">
+    <form id="reconnect-form" method="dialog">
+      <h3><span class="h-ico" data-icon="refresh"></span>Welcome back</h3>
+      <p class="lead" id="rc-intro"></p>
+      <div class="choice-list">
+        <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>
+        <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>
+      </div>
+      <table class="rc-table" id="rc-table"></table>
+      <p class="error" id="rc-error" hidden></p>
+      <div class="actions">
+        <button type="button" class="btn ghost" data-close>Later</button>
+        <button type="submit" id="rc-submit" class="btn primary">Reconnect</button>
+      </div>
+    </form>
+  </dialog>
+  <dialog id="erase-dialog" class="dialog narrow">
+    <form id="erase-form" method="dialog">
+      <h3><span class="h-ico danger" data-icon="alert"></span>Erase my vibe</h3>
+      <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>
+      <label>Type <code>erase</code> to confirm<input id="erase-word" type="text" autocomplete="off" placeholder="erase"></label>
+      <p class="error" id="erase-error" hidden></p>
+      <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>
+    </form>
+  </dialog>
+  <script src="/icons.js"></script>
+  <script src="/avatars.js"></script>
+  <script src="/app.js"></script>
+</body>
+</html>

package/ui/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "viberoom",
+  "short_name": "viberoom",
+  "description": "Group chat rooms for a human and several coding agents over the Agent Client Protocol",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#f3f2fb",
+  "theme_color": "#6d5dfc",
+  "icons": [
+    { "src": "/icon.svg?v=6", "sizes": "any", "type": "image/svg+xml", "purpose": "any" },
+    { "src": "/icon-256.png?v=6", "sizes": "256x256", "type": "image/png" },
+    { "src": "/icon-512.png?v=6", "sizes": "512x512", "type": "image/png" }
+  ]
+}