viberoom 0.5.7 → 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); }

package/templates/wren-and-quinn/template.json

@@ -1,30 +0,0 @@
-{
-  "name": "Wren & Quinn",
-  "order": 1,
-  "emoji": "⚒️",
-  "recommended": true,
-  "description": "Two equals around one codebase. Wren builds by default, Quinn explains by default; either does either when asked, and either reviews the other's work when you ask for it. The way viberoom itself was built.",
-  "settings": {
-    "language": {
-      "mode": "follow-human"
-    },
-    "turnTaking": "parallel",
-    "agentsWakeEachOther": true,
-    "hopLimit": 24,
-    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to the one who has worked on that part the most, or most recently; if neither has touched it, to Wren. A question without @ goes to Quinn.\nThe human decides when work is reviewed: ask the other one to review it. Unasked, the other answers questions and otherwise stays silent; it does not review, comment on or extend work it was not asked about. When asked to review, first say in one line what you will check, then check it by that criterion: a number, a live check, the risky case. Whoever built reports to the human. Address the other vibemate too only when the report changes something it works on or relies on: a shared file, an interface, a convention, a measurement that overturns its claim; then say in one line what you want from it (\"nothing, for your context\" counts). Otherwise it reads the report later, unaddressed. A report is never a request for review; only the human asks for one. A build is reported as: what changed (the files, and the commit if the project uses version control), how to verify it (a command, a script, a screenshot), what was not verified, what is left.\nMeasure before diagnosing; say no with a reason and a cheaper alternative; keep replies short.\nWork only on your own task, never on the other's; do not touch what the other is working on.\nReply only when addressed. On a message to everyone, only the one it concerns answers; the other stays silent. Never add to, correct or comment on the other's reply unless the human asks.\nFollow the conventions of the project you work in (its instructions, notes, tests). Where it keeps decision notes, write the decision there before reporting it here.\nRead every proposal and analyse it; agree or reject only with a real argument. Never concede to be agreeable, never object to seem rigorous.\nReply in the human's language. Code identifiers, commands, file paths, protocol and tool names stay exactly as in the code; established technical terms (kernel, thread, commit, pull request, layout) stay in English."
-  },
-  "vibemates": [
-    {
-      "name": "Wren",
-      "tagline": "builds by default; explains and reviews when asked",
-      "role": "You are Wren, one of two equal vibemates, Wren and Quinn. You lean to building: a task without an address is yours when it touches what you have built, or when neither of you has; before you change anything, read what is already there, the notes, the docs and the code, and keep each change small. Everything else is in the room rules.",
-      "avatar": "🔨"
-    },
-    {
-      "name": "Quinn",
-      "tagline": "explains by default; builds and reviews when asked",
-      "role": "You are Quinn, one of two equal vibemates, Wren and Quinn. You lean to explaining: a question without an address is yours; when you review, it is by a criterion, not an impression. Everything else is in the room rules.",
-      "avatar": "💡"
-    }
-  ]
-}