viberoom 0.5.8 → 0.5.9

package/ui/avatars.js

@@ -67,6 +67,7 @@
         ? `<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>`;
     }
+    if (opts.muted && participant.kind === "agent" && window.Icons) badge = `<span class="avatar-badge muted" title="muted: receives no prompts">${window.Icons.svg("mute")}</span>`;
     return `<span class="avatar" style="width:${size}px;height:${size}px">${svg}${badge}${status}</span>`;
   }
 
@@ -77,37 +78,135 @@
     "🌙", "⭐", "🔥", "🍀", "🌵", "🌈", "🎧", "🎸", "🚀", "🛸", "🧠", "🎯", "🧩", "💎", "🍕", "☕",
   ];
 
-  function pickerElement(current, onPick) {
+  const EMOJI_NAMES = {
+    "🎭": "theatre masks drama roles", "🚀": "rocket launch ship", "🧪": "test tube experiment lab", "🛠️": "hammer and wrench tools",
+    "🎨": "palette art design paint", "📚": "books library docs", "🧠": "brain mind thinking", "💬": "speech bubble chat talk",
+    "🔬": "microscope science research", "🎯": "target goal focus aim", "🐙": "octopus github", "☕": "coffee cup break cafe",
+    "🌈": "rainbow colors", "🏗️": "construction crane building site", "🎮": "game controller gaming play", "🔥": "fire hot flame",
+    "🧩": "puzzle piece", "📈": "chart up growth trending", "🗺️": "world map", "🎧": "headphones audio music",
+    "🌱": "seedling plant grow sprout", "🏠": "house home", "🛸": "flying saucer ufo", "🧭": "compass navigate direction",
+    "🧑‍💻": "technologist developer coder programmer laptop", "⚒️": "hammer and pick tools forge", "🔨": "hammer build", "🔧": "wrench fix repair",
+    "🔩": "nut and bolt hardware", "⚙️": "gear settings cog", "🧰": "toolbox tools kit", "🪛": "screwdriver",
+    "🧱": "brick wall", "🏭": "factory plant", "🔌": "electric plug power", "🖥️": "desktop computer monitor screen",
+    "💻": "laptop computer", "⌨️": "keyboard typing", "🤖": "robot bot ai", "🐛": "bug insect caterpillar",
+    "🐞": "lady beetle ladybug bug", "⚡": "lightning bolt zap fast electric", "🔋": "battery energy charge", "📊": "bar chart data statistics",
+    "📉": "chart down decline", "🧮": "abacus math calculate", "🔍": "magnifying glass search find zoom", "🔭": "telescope explore astronomy",
+    "🧬": "dna genetics biology", "⚗️": "alembic chemistry", "🧲": "magnet attract", "📡": "satellite antenna signal radar",
+    "🛰️": "satellite space orbit", "🗄️": "file cabinet archive storage", "💾": "floppy disk save storage", "🗃️": "card file box archive",
+    "🌐": "globe web internet network", "🔗": "link chain url", "☁️": "cloud weather sky", "✍️": "writing hand write author",
+    "📝": "memo note pencil notes", "📖": "open book read", "📰": "newspaper news", "📜": "scroll document parchment",
+    "📎": "paperclip attach", "📌": "pushpin pin", "🗂️": "card index dividers files folders", "🏷️": "label tag price",
+    "✉️": "envelope mail email letter", "📣": "megaphone announce loud", "🗣️": "speaking head talk speech", "🤝": "handshake deal agreement",
+    "👥": "busts silhouette people team group", "🖌️": "paintbrush paint brush", "🖼️": "framed picture image painting", "📷": "camera photo",
+    "🎬": "clapper board movie film", "🎥": "movie camera video", "🎵": "musical note music", "🎹": "piano keys music",
+    "🎸": "guitar music rock", "🎤": "microphone sing karaoke", "🎲": "game die dice random", "♟️": "chess pawn strategy",
+    "🧸": "teddy bear toy", "🎪": "circus tent", "🎁": "gift present wrapped", "📅": "calendar date schedule",
+    "⏰": "alarm clock time", "⏳": "hourglass waiting time sand", "🗳️": "ballot box vote election", "⚖️": "balance scale justice law",
+    "🧾": "receipt invoice bill", "💰": "money bag budget cash", "📦": "package box parcel delivery", "🚚": "delivery truck shipping",
+    "🛒": "shopping cart", "🏦": "bank finance", "🏢": "office building company", "🎓": "graduation cap learn study",
+    "🏫": "school", "🏁": "chequered flag finish race", "🏆": "trophy win award cup", "💎": "gem stone diamond",
+    "🔐": "locked with key security", "🔑": "key access password", "🛡️": "shield protect security defense", "🚨": "police light alarm alert siren",
+    "🚦": "traffic light", "🧯": "fire extinguisher", "🩺": "stethoscope health doctor medical", "🧹": "broom clean sweep",
+    "♻️": "recycle recycling", "🧑‍🍳": "cook chef kitchen", "🧑‍🔬": "scientist lab", "🧑‍🎨": "artist painter",
+    "🧑‍🏫": "teacher", "🧑‍🚀": "astronaut space", "🕵️": "detective spy investigate", "🧙": "mage wizard magic",
+    "🦉": "owl wise night bird", "🦊": "fox", "🐼": "panda", "🐝": "honeybee bee",
+    "🐢": "turtle slow tortoise", "🐬": "dolphin", "🦄": "unicorn", "🐲": "dragon face",
+    "🌍": "earth globe world europe africa", "🌙": "crescent moon night", "⭐": "star", "🌊": "water wave ocean sea",
+    "🏔️": "snow capped mountain", "🏝️": "desert island beach", "🌲": "evergreen tree forest pine", "🍀": "four leaf clover luck",
+    "🌸": "cherry blossom flower spring", "🍕": "pizza", "🍎": "red apple fruit", "✨": "sparkles magic shiny",
+    "💡": "light bulb idea", "🔮": "crystal ball fortune", "🪄": "magic wand", "❤️": "red heart love",
+    "🐯": "tiger face", "🐸": "frog face", "👩‍💻": "woman technologist developer coder", "🐺": "wolf face",
+    "🐧": "penguin", "🦁": "lion face", "🐨": "koala", "👾": "alien monster space invader pixel",
+    "🐱": "cat face", "🐶": "dog face", "🦝": "raccoon", "🦋": "butterfly",
+    "🦩": "flamingo", "🦖": "t-rex dinosaur", "🐳": "spouting whale", "🦭": "seal",
+    "🐹": "hamster", "🦔": "hedgehog", "🐻": "bear face", "🐮": "cow face",
+    "🐵": "monkey face", "🧑‍🚒": "firefighter", "🧑‍⚕️": "health worker doctor nurse", "🧑‍✈️": "pilot",
+    "🧛": "vampire", "🧜": "merperson mermaid", "🧞": "genie", "🦸": "superhero",
+    "🥷": "ninja", "🤠": "cowboy hat face", "👽": "alien", "👻": "ghost",
+    "🎃": "jack-o-lantern pumpkin halloween", "🌵": "cactus",
+    "😀": "grinning face smile happy", "😄": "grinning face smiling eyes happy", "😂": "face with tears of joy laugh lol", "🙂": "slightly smiling face",
+    "😉": "winking face wink", "😍": "smiling face heart eyes love", "🤔": "thinking face hmm", "😎": "smiling face sunglasses cool",
+    "🥳": "partying face party celebrate", "😅": "grinning face sweat nervous", "😢": "crying face sad tear", "😡": "pouting face angry mad",
+    "👍": "thumbs up yes like ok", "👎": "thumbs down no dislike", "👋": "waving hand hello bye", "🙏": "folded hands thanks please pray",
+    "👏": "clapping hands applause bravo", "💪": "flexed biceps strong muscle", "🎉": "party popper celebrate tada", "💜": "purple heart",
+    "✅": "check mark button done yes", "❌": "cross mark no wrong", "⚠️": "warning caution", "🤫": "shushing face quiet hush",
+  };
+  function emojiName(emoji) {
+    return EMOJI_NAMES[emoji] || "";
+  }
+  function emojiMatches(emoji, query) {
+    return emoji === query || emojiName(emoji).includes(query);
+  }
+
+  function searchableGrid(list, current, onPick, none) {
     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", () => {
+    wrap.className = "emoji-pick";
+    const search = document.createElement("input");
+    search.type = "search";
+    search.className = "emoji-search";
+    search.placeholder = "Search by name…";
+    search.autocomplete = "off";
+    search.spellcheck = false;
+    search.setAttribute("aria-label", "Search emoji by name");
+    const grid = document.createElement("div");
+    grid.className = "avatar-picker";
+    let value = current || "";
+    const button = (text, title, cls, onClick) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.textContent = text;
+      if (title) b.title = title;
+      b.className = cls;
+      b.addEventListener("click", onClick);
+      return b;
+    };
+    const render = () => {
+      grid.innerHTML = "";
+      const q = search.value.trim().toLowerCase();
+      if (none && !q) {
+        grid.appendChild(button(none.label, none.title, "none" + (!value ? " selected" : ""), () => {
+          value = "";
+          onPick("");
+          render();
+        }));
+      }
+      const shown = q ? list.filter((e) => emojiMatches(e, q)) : list;
+      for (const e of shown) {
+        grid.appendChild(button(e, emojiName(e), e === value ? "selected" : "", () => {
+          value = e;
           onPick(e);
-          render(e);
-        });
-        wrap.appendChild(b);
+          render();
+        }));
       }
+      if (!shown.length) {
+        const empty = document.createElement("div");
+        empty.className = "emoji-none";
+        empty.textContent = `No emoji called "${q}" here.`;
+        grid.appendChild(empty);
+      }
+    };
+    for (const type of ["input", "change"]) {
+      search.addEventListener(type, (e) => {
+        e.stopPropagation();
+        if (type === "input") render();
+      });
+    }
+    search.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") e.preventDefault();
+    });
+    wrap.append(search, grid);
+    render();
+    wrap.setValue = (v) => {
+      value = v || "";
+      render();
     };
-    render(current || "");
-    wrap.setValue = render;
     return wrap;
   }
 
-  window.Avatars = { avatarSvg, avatarHtml, initials, pickerElement, GALLERY };
+  function pickerElement(current, onPick) {
+    return searchableGrid(GALLERY, current, onPick, { label: "Aa", title: "Initials" });
+  }
+
+  window.Avatars = { avatarSvg, avatarHtml, initials, pickerElement, searchableGrid, emojiName, GALLERY };
 })();

package/ui/icons.js

@@ -26,6 +26,8 @@
     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,
+    unmute: `<path d="M19 5H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h7.5l3.5 3.5V17h3a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z"/>`,
+    mute: `<path d="M5.5 17H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h8.2"/><path d="M16.4 5H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3v3.5L12.5 17H9"/><path d="M5 20.5L16 3"/>`,
     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"/>`,

package/ui/theme.css

@@ -276,8 +276,10 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
 .section.danger > h4 { color: var(--rose-ink); }
 .save-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; }
 .save-row .hint { flex: 1; margin: 0; }
-.btn.save { min-width: 90px; }
-.btn.save.saved { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
+.field > .label .fsaved { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: 11px; font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
+.field > .label .fsaved .i { width: 13px; height: 13px; }
+.switch > .label .fsaved { float: right; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: 11px; font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
+.switch > .label .fsaved .i { width: 13px; height: 13px; }
 .section .row-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 2px 0 6px; flex-wrap: wrap; }
 .row-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
 .row-btns.start { justify-content: flex-start; }
@@ -342,6 +344,8 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
 .avatar .av-tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; }
 .avatar-badge { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; min-width: 15px; min-height: 15px; border-radius: 6px; background: #fff; border: 2px solid #fff; box-shadow: var(--shadow-tile); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--primary); overflow: hidden; }
 .avatar-badge img { width: 72%; height: 72%; object-fit: contain; }
+.avatar-badge.muted { color: var(--warm-ink); background: var(--warm); border-color: #fff; }
+.avatar-badge.muted .i { width: 78%; height: 78%; }
 .avatar-status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--faint); }
 .avatar-status.status-idle { background: var(--st-ready-dot); }
 .avatar-status.status-thinking { background: var(--st-thinking-dot); animation: pulse 1.2s ease-in-out infinite; }
@@ -355,6 +359,11 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
 .avatar-picker button:hover { transform: translateY(-1px); background: var(--lav); }
 .avatar-picker button.selected { border-color: var(--primary); background: var(--lav); }
 .avatar-picker button.none { font-size: 12px; font-weight: 800; color: var(--muted); }
+.emoji-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; min-width: 0; }
+.emoji-pick .avatar-picker { margin: 0; }
+.emoji-pick .emoji-search, .field .emoji-pick .emoji-search { width: 100%; box-sizing: border-box; height: 32px; min-height: 0; padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--lav); background: var(--soft); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); }
+.emoji-pick .emoji-search:focus, .field .emoji-pick .emoji-search:focus { outline: none; border-color: var(--primary); }
+.emoji-none { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 700; padding: 8px 4px; }
 .avatar-stack { display: flex; }
 .avatar-stack .avatar { margin-left: -8px; }
 .avatar-stack .avatar .av-tile { box-shadow: 0 0 0 2px #fff; }
@@ -406,6 +415,7 @@ code .open-link { color: inherit; }
 .mention-menu.inline { left: 0; top: 100%; bottom: auto; margin-top: 4px; }
 .emoji-menu { min-width: 0; width: 352px; padding: 8px; }
 .emoji-menu .avatar-picker { margin: 0; grid-template-columns: repeat(8, 1fr); }
+#rp-emoji-picker .avatar-picker { max-height: 236px; }
 .dialog { border: 0; border-radius: 22px; padding: 24px 26px; width: 580px; max-width: 94vw; max-height: 90vh; box-shadow: var(--shadow-dialog); overflow: auto; overflow-x: hidden; background: var(--card); color: var(--ink); }
 .dialog::backdrop { background: rgba(28, 27, 51, 0.4); backdrop-filter: blur(4px); }
 .dialog[open] { animation: pop var(--t-slow) var(--ease-pop); }