viberoom 0.5.0 → 0.5.2

package/README.md

@@ -14,7 +14,7 @@ Open a room, summon the agents you already have, give each one a role, and let t
 </p>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/todor-rusev/viberoom/main/docs/screenshots/conversation.png" width="960" alt="Three vibemates arguing out a dedupe rule in a room">
+  <img src="https://raw.githubusercontent.com/todor-rusev/viberoom/main/docs/screenshots/conversation.png" width="960" alt="A Forge & Lumen room: Forge explains a git command from a screenshot, Lumen adds the part that changes whose problem it is">
 </p>
 
 <p align="center">

package/dist/room.js

@@ -1539,7 +1539,7 @@ export class Room extends EventEmitter {
         await this.awaitSkillChannel(participant, runtime);
         if (!runtime.agent.alive || participant.muted || this.focused)
             return;
-        const unreadAll = this.messages.filter((m) => m.kind !== "hidden" && m.seq > runtime.lastSeenSeq && (m.kind === "system" || m.from !== id || m.seq <= runtime.replayOwnUntilSeq));
+        const unreadAll = this.messages.filter((m) => m.kind !== "hidden" && m.audience !== "human" && m.seq > runtime.lastSeenSeq && (m.kind === "system" || m.from !== id || m.seq <= runtime.replayOwnUntilSeq));
         if (!unreadAll.some((m) => m.kind === "chat" || m.wakes))
             return;
         const cap = this.settings.backlogCap;
@@ -1660,6 +1660,7 @@ export class Room extends EventEmitter {
         }
         const startedAt = runtime.turn.startedAt;
         const published = runtime.turn.published;
+        const publishedAt = runtime.turn.publishedAt ?? null;
         runtime.turn = null;
         runtime.turnActive = false;
         this.drafts.delete(draft.id);
@@ -1689,9 +1690,9 @@ export class Room extends EventEmitter {
                 this.closeRetry(retry, "the correction turn failed; nothing was posted");
             return null;
         }
-        return this.finalizeTurn(participant, runtime, draft, result, Date.now() - startedAt, retry, published);
+        return this.finalizeTurn(participant, runtime, draft, result, Date.now() - startedAt, retry, published, publishedAt);
     }
-    finalizeTurn(participant, runtime, draft, result, durationMs, retry, published) {
+    finalizeTurn(participant, runtime, draft, result, durationMs, retry, published, publishedAt = null) {
         participant.status = "idle";
         this.push({ type: "participant", participant });
         const text = draft.text.trim();
@@ -1787,6 +1788,11 @@ export class Room extends EventEmitter {
             durationMs,
         };
         this.commit(message);
+        if (publishedAt !== null && this.messages.some((x) => x.kind === "chat" && x.id !== message.id && x.ts > publishedAt)) {
+            const at = new Date(draft.ts);
+            const hhmm = `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`;
+            this.postSystem(`${participant.name} finished the reply started at ${hhmm} · ${Math.round(durationMs / 1000)} s`, "human", false, { refId: message.id, agentId: participant.id });
+        }
         if (retry) {
             this.closeRetry(retry, corrections.length ? `corrected reply posted, but it still breaks: ${corrections.map((c) => c.replace(/^reminder:\s*/i, "")).join("; ")}` : "corrected reply posted");
         }
@@ -1869,6 +1875,7 @@ export class Room extends EventEmitter {
         if (turn.published)
             return;
         turn.published = true;
+        turn.publishedAt = Date.now();
         this.push({ type: "message", message: turn.message });
     }
     onSessionUpdate(id, update) {
@@ -2184,7 +2191,7 @@ export class Room extends EventEmitter {
                 return p;
         return undefined;
     }
-    postSystem(text, audience, wakes) {
+    postSystem(text, audience, wakes, details) {
         const message = {
             id: randomUUID(),
             seq: ++this.seq,
@@ -2200,6 +2207,8 @@ export class Room extends EventEmitter {
             message.audience = audience;
         if (wakes)
             message.wakes = true;
+        if (details)
+            message.details = details;
         this.commit(message);
     }
     async setDir(dir) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "viberoom: group chat rooms for a human and several coding agents over the Agent Client Protocol",
   "type": "module",
   "engines": {

package/templates/forge-and-lumen/template.json

@@ -11,18 +11,18 @@
     "turnTaking": "parallel",
     "agentsWakeEachOther": false,
     "hopLimit": 12,
-    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to Forge and a question to Lumen.\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. The builder reports to the human, never to the other vibemate.\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 (a task: Forge; a question: Lumen); 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."
+    "customRules": "Both build, both explain, both review; @ decides who does what. Without @, a task goes to Forge and a question to Lumen.\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. The builder reports to the human, never to the other vibemate. 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 (a task: Forge; a question: Lumen); 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": "Forge",
       "tagline": "builds by default; explains and reviews when asked",
-      "role": "You are Forge, one of two equal vibemates, Forge and Lumen. Either of you builds, explains or reviews, whatever the human asks; without an address, a task goes to Forge and a question to Lumen. The human decides when work is reviewed; do not review, comment on or extend the other's work unless asked, and do not answer the other's report unless it asks you something. When you build, read the code first, keep the change small, and report to the human — never to the other vibemate — 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 and what is left. When asked to review, first say in one line what you will check, then review by that criterion, not an impression: a number, a live check, the risky case. Say no with a reason and a cheaper alternative; never concede to be agreeable, never object to seem rigorous. Work only on your own task, never on the other's; do not touch what the other is working on. On a message to everyone, answer only if it concerns you; never add to, correct or comment on the other's reply unless the human asks. Before building something, check whether the other already did it."
+      "role": "You are Forge, one of two equal vibemates, Forge and Lumen. You lean to building: a task without an address is yours; read the code before you change it and keep each change small. Everything else is in the room rules."
     },
     {
       "name": "Lumen",
       "tagline": "explains by default; builds and reviews when asked",
-      "role": "You are Lumen, one of two equal vibemates, Forge and Lumen. Either of you builds, explains or reviews, whatever the human asks; without an address, a task goes to Forge and a question to Lumen. The human decides when work is reviewed; do not review, comment on or extend the other's work unless asked, and do not answer the other's report unless it asks you something. When you build, read the code first, keep the change small, and report to the human — never to the other vibemate — 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 and what is left. When asked to review, first say in one line what you will check, then review by that criterion, not an impression: a number, a live check, the risky case. Say no with a reason and a cheaper alternative; never concede to be agreeable, never object to seem rigorous. Work only on your own task, never on the other's; do not touch what the other is working on. On a message to everyone, answer only if it concerns you; never add to, correct or comment on the other's reply unless the human asks. Before building something, check whether the other already did it."
+      "role": "You are Lumen, one of two equal vibemates, Forge and Lumen. 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."
     }
   ]
 }

package/ui/app.css

@@ -264,7 +264,9 @@
 .jump-latest { position: absolute; right: 30px; bottom: 96px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--card); color: var(--primary); font: inherit; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-pop); cursor: pointer; animation: rise var(--t-base) var(--ease-out); }
 .jump-latest:hover { background: var(--soft); }
 .done-notes { position: absolute; left: 30px; bottom: 96px; z-index: 5; display: flex; flex-direction: column-reverse; gap: 6px; }
-.done-note { display: inline-flex; align-items: stretch; max-width: 230px; border-radius: 14px; background: var(--warm); color: var(--warm-ink); box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
+.done-note { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; background: var(--warm); color: var(--warm-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
+.done-note:hover { background: #ffeaa8; }
+.done-note .avatar { flex: none; }
 .done-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
 .done-go:hover { background: #ffeaa8; }
 .done-go .avatar { flex: none; }
@@ -372,7 +374,20 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .tool { display: inline-flex; flex-direction: column; max-width: 100%; min-width: 0; }
 .tool.open { flex-basis: 100%; }
 .tool > .chip { font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; text-align: left; }
-.tool-body { margin: 4px 0 2px; padding: 8px 10px; background: var(--soft); border-radius: 10px; font-size: 12px; max-height: 340px; overflow: auto; }
+.tool > .chip-completed { --tool-bg: var(--mint); --tool-ink: var(--mint-ink); }
+.tool > .chip-failed { --tool-bg: var(--rose); --tool-ink: var(--rose-ink); }
+.tool > .chip-in_progress { --tool-bg: var(--warm); --tool-ink: var(--warm-ink); }
+.tool > .chip-pending { --tool-bg: var(--lav); --tool-ink: var(--primary); }
+.tool > .chip::after { content: "▾"; margin-left: auto; padding-left: 8px; opacity: 0.55; transition: transform var(--t-fast); }
+.tool.open > .chip { width: 100%; border-radius: 12px 12px 0 0; padding: 6px 12px; white-space: normal; }
+.tool.open > .chip::after { transform: rotate(180deg); }
+.tool.open { --tool-bg: var(--lav); --tool-ink: var(--primary); }
+.tool.open > .chip-completed ~ .tool-body, .tool.open > .chip-completed + .tool-body { --tool-bg: var(--mint); --tool-ink: var(--mint-ink); }
+.tool.open > .chip-failed + .tool-body { --tool-bg: var(--rose); --tool-ink: var(--rose-ink); }
+.tool.open > .chip-in_progress + .tool-body { --tool-bg: var(--warm); --tool-ink: var(--warm-ink); }
+.tool-body { margin: 0; padding: 8px 10px 10px; background: var(--card); border: 2px solid var(--tool-bg, var(--lav)); border-top: 0; border-radius: 0 0 12px 12px; font-size: 12px; max-height: 340px; overflow: auto; }
+.tool-body pre { background: var(--soft); color: var(--ink); padding: 6px 8px; border-radius: 8px; }
+.tool-sec b { color: var(--tool-ink, var(--muted)); }
 .tool-sec + .tool-sec { margin-top: 8px; }
 .tool-sec b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
 .tool-sec.muted { color: var(--muted); font-style: italic; }
@@ -466,6 +481,8 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .composer textarea::placeholder { color: var(--placeholder); font-weight: 600; }
 .send-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--grad-primary); color: #fff; display: grid; place-content: center; box-shadow: var(--shadow-primary); flex: none; transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast); }
 .send-btn .i { width: 18px; height: 18px; display: block; }
+.composer-clear { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--placeholder); font-size: 20px; line-height: 1; cursor: pointer; flex: none; margin-right: 2px; transition: background var(--t-fast), color var(--t-fast); }
+.composer-clear:hover { background: var(--soft); color: var(--danger); }
 .send-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
 .send-btn:active { transform: translateY(1px); }
 .chat .mention-menu { left: 24px; bottom: calc(var(--composer-h, 60px) + 18px); }
@@ -572,3 +589,10 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .composer.gated { opacity: 0.7; }
 .composer.gated textarea { cursor: not-allowed; }
 .check-list.locked { pointer-events: none; opacity: 0.6; }
+.msg.system.done { justify-content: center; }
+.done-row { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 0; border-radius: var(--r-pill); background: var(--warm); color: var(--warm-ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: var(--edge); }
+.done-row:hover { background: #ffeaa8; }
+.done-notes { flex-direction: column; }
+.done-note.new { background: var(--card); color: var(--ink-2); }
+.done-note.new:hover { background: var(--soft); }
+.meta .seen-by { color: var(--primary); font-weight: 800; margin-left: 6px; }

package/ui/app.js

@@ -1210,6 +1210,12 @@
     }
     if (m.kind === "system") {
       el.className = "msg system";
+      if (m.audience === "human") {
+        el.className = "msg system done";
+        const who = m.details && m.details.agentId ? findById(room, m.details.agentId) : null;
+        el.innerHTML = `<button type="button" class="done-row" data-ref="${esc((m.details && m.details.refId) || "")}" title="${esc(fullTime(m.ts))} · go to the reply">${who ? avatar(who, 20, {}) : ""}<span>${esc(m.text)}</span></button>`;
+        return el;
+      }
       if (m.audience === "agents") {
         el.className = "msg hidden";
         el.innerHTML = `<details class="hidden-turn"><summary>${ic("info")} hub → vibemates · ${esc(m.text.split(":")[0])}</summary><div class="hidden-body"><div class="hidden-label">What the vibemates were told</div><div class="hidden-text">${esc(m.text)}</div></div></details>`;
@@ -1291,6 +1297,8 @@
     if (e.key === "Escape" && !els.lightbox.hidden) closeLightbox();
   });
   els.messages.addEventListener("click", (e) => {
+    const done = e.target.closest(".done-row");
+    if (done) return void jumpToMessage(els.messages.querySelector(`.msg[data-id="${done.dataset.ref}"]`));
     const shot = e.target.closest(".shot");
     if (shot) return void openLightbox(shot.dataset.src, shot.title);
     const ref = e.target.closest(".img-ref");
@@ -1409,7 +1417,8 @@
       if (m.durationMs) parts.push(`<span title="how long the reply took">${ic("clock")} ${(m.durationMs / 1000).toFixed(1)} s</span>`);
       if (m.usage) parts.push(`<span title="tokens in">${ic("arrow-down")} ${fmtTokens(m.usage.inputTokens)}</span><span title="tokens out">${ic("arrow-up")} ${fmtTokens(m.usage.outputTokens)}</span>${m.usage.cachedWriteTokens ? `<span title="tokens written to the cache">${ic("database")} ${fmtTokens(m.usage.cachedWriteTokens)}</span>` : ""}`);
       meta.innerHTML = parts.join("<span class=\"sep\">·</span>");
-    } else if (m.from === "human") refreshSeen(room);
+      fillSeen(el, room, m);
+    } else if (m.from === "human") fillSeen(el, room, m);
     else meta.textContent = "";
   }
 
@@ -1421,23 +1430,47 @@
     return null;
   }
   function seenHtml(room, m) {
-    const present = room.participants.filter((p) => p.kind === "agent" && p.status !== "left" && p.status !== "offline");
+    const present = room.participants.filter((p) => p.kind === "agent" && p.status !== "left" && p.status !== "offline" && p.id !== m.from);
+    if (!present.length) return "";
     const seen = present.filter((p) => p.lastSeenSeq != null && p.lastSeenSeq >= m.seq);
+    if (seen.length === present.length) return "";
     if (!seen.length) return `<span class="ticks">✓</span> sent`;
-    if (present.length > 1 && seen.length === present.length) return `<span class="ticks">✓✓</span> seen by all`;
     return `<span class="ticks">✓✓</span> seen by ${esc(seen.map((p) => p.name).join(", "))}`;
   }
+  function fillSeen(el, room, m) {
+    if (m.kind !== "chat" || m.streaming) return;
+    const html = seenHtml(room, m);
+    if (m.from === "human") {
+      const meta = el.querySelector(".meta");
+      if (!meta) return;
+      meta.innerHTML = html;
+      meta.classList.toggle("seen", !!html);
+    } else {
+      const meta = el.querySelector(".meta");
+      let span = meta && meta.querySelector(".seen-by");
+      if (!span && meta && html) {
+        span = document.createElement("span");
+        span.className = "seen-by";
+        meta.appendChild(span);
+      }
+      if (span) {
+        span.innerHTML = html;
+        span.hidden = !html;
+      }
+    }
+  }
   function refreshSeen(room) {
-    const last = lastHumanMessage(room);
+    const present = room.participants.filter((p) => p.kind === "agent" && p.status !== "left" && p.status !== "offline");
+    const floor = present.length ? Math.min(...present.map((p) => (p.lastSeenSeq == null ? 0 : p.lastSeenSeq))) : Infinity;
     const byId = new Map(room.messages.map((m) => [m.id, m]));
-    for (const el of els.messages.querySelectorAll(".msg.mine")) {
-      const meta = el.querySelector(".meta");
-      if (!meta) continue;
-      const isLast = last && el.dataset.id === last.id;
-      meta.innerHTML = isLast ? seenHtml(room, last) : "";
-      meta.classList.toggle("seen", !!isLast);
+    for (const el of els.messages.querySelectorAll(".msg.mine, .msg.agent")) {
+      const seq = Number(el.dataset.seq);
+      const hasLabel = el.querySelector(".meta.seen, .seen-by:not([hidden])");
+      if (seq <= floor && !hasLabel) continue;
       const m = byId.get(el.dataset.id);
-      if (m && (isLast || el.classList.contains("waiting"))) renderWaiting(el, room, m);
+      if (!m) continue;
+      fillSeen(el, room, m);
+      if (m.from === "human" && (seq > floor || el.classList.contains("waiting"))) renderWaiting(el, room, m);
     }
   }
 
@@ -1528,6 +1561,7 @@
       if (empty) empty.remove();
       els.messages.appendChild(messageElement(room, m));
       if (m.from === "human") refreshSeen(room);
+      else if (!stick && m.kind === "chat") noteNew(room, m);
     }
     if (stick) scrollToBottom();
     if (m.streaming) updateWorkingNow();
@@ -3175,7 +3209,20 @@
   let shotSeq = 0;
   const shotMarker = (n) => `[img ${n}]`;
 
+  const composerClear = $("#composer-clear");
+  function updateComposerClear() {
+    composerClear.hidden = !(els.input.value.trim() || pendingShots.length);
+  }
+  composerClear.addEventListener("click", () => {
+    els.input.value = "";
+    clearShots();
+    autosize();
+    updateComposerClear();
+    els.input.focus();
+  });
+  els.input.addEventListener("input", updateComposerClear);
   function renderShotsTray() {
+    updateComposerClear();
     els.shotsTray.hidden = !pendingShots.length;
     els.shotsTray.innerHTML = pendingShots
       .map((shot, i) => `<span class="shot-chip"><img src="${esc(shot.data)}" alt=""><span class="shot-n">${shot.n}</span><button type="button" class="shot-drop" data-i="${i}" title="Remove ${esc(shot.name)}">×</button></span>`)
@@ -3652,6 +3699,8 @@
     els.jumpLatest.hidden = stuck;
     updateTimelineView();
     updateWorkingNow();
+    if (stuck) clearNotes();
+    else pruneDoneNotes();
   });
   els.jumpLatest.addEventListener("click", scrollToBottom);
   document.addEventListener("mousedown", (e) => {
@@ -3860,6 +3909,7 @@
     return (t ? t.textContent : el.textContent).trim().replace(/\s+/g, " ").slice(0, 240);
   }
   const doneNotes = [];
+  const NOTE_TTL_MS = 4000;
   function bubbleInView(id) {
     const head = els.messages.querySelector(`.msg[data-id="${id}"] .head`);
     if (!head) return false;
@@ -3867,14 +3917,43 @@
     const r = head.getBoundingClientRect();
     return r.bottom > box.top && r.top < box.bottom;
   }
+  function pushNote(note) {
+    const i = doneNotes.findIndex((n) => n.id === note.id);
+    if (i >= 0) {
+      clearTimeout(doneNotes[i].timer);
+      doneNotes.splice(i, 1);
+    }
+    note.timer = setTimeout(() => dropNote(note.id), NOTE_TTL_MS);
+    doneNotes.push(note);
+    while (doneNotes.length > 4) dropNote(doneNotes[0].id);
+    renderDoneNotes();
+  }
+  function dropNote(id) {
+    const i = doneNotes.findIndex((n) => n.id === id);
+    if (i < 0) return;
+    clearTimeout(doneNotes[i].timer);
+    doneNotes.splice(i, 1);
+    renderDoneNotes();
+  }
+  function clearNotes() {
+    for (const n of doneNotes) clearTimeout(n.timer);
+    doneNotes.length = 0;
+    renderDoneNotes();
+  }
   function noteFinished(room, m) {
     if (room.id !== state.currentRoomId || state.view !== "room") return;
     requestAnimationFrame(() => {
-      if (bubbleInView(m.id) || doneNotes.some((n) => n.id === m.id)) return;
+      if (bubbleInView(m.id)) return;
       const p = findById(room, m.from) || { name: m.fromName, color: "#9ca3af", kind: "agent" };
-      doneNotes.push({ id: m.id, name: p.name, p, startedAt: m.ts, durationMs: m.durationMs || 0 });
-      while (doneNotes.length > 3) doneNotes.shift();
-      renderDoneNotes();
+      pushNote({ id: m.id, kind: "done", p, text: `${p.name} finished`, sub: `started ${time(m.ts)}${m.durationMs ? ` · ${spanText(m.durationMs)}` : ""}` });
+    });
+  }
+  function noteNew(room, m) {
+    if (room.id !== state.currentRoomId || state.view !== "room") return;
+    requestAnimationFrame(() => {
+      if (bubbleInView(m.id)) return;
+      const p = findById(room, m.from) || { name: m.fromName, color: "#9ca3af", kind: "agent" };
+      pushNote({ id: m.id, kind: "new", p, text: `${p.name} wrote below`, sub: time(m.ts) });
     });
   }
   function spanText(ms) {
@@ -3885,19 +3964,18 @@
   function renderDoneNotes() {
     els.doneNotes.hidden = doneNotes.length === 0;
     els.doneNotes.innerHTML = doneNotes
-      .map((n) => `<div class="done-note" data-id="${esc(n.id)}"><button type="button" class="done-go" title="Go to the reply">${avatar(n.p, 18, {})}<span class="done-text"><b>${esc(n.name)} finished</b><small>started ${esc(time(n.startedAt))}${n.durationMs ? ` · ${esc(spanText(n.durationMs))}` : ""}</small></span></button><button type="button" class="done-x" title="Dismiss">×</button></div>`)
+      .map((n) => `<button type="button" class="done-note ${n.kind}" data-id="${esc(n.id)}" title="Go to the message">${avatar(n.p, 18, {})}<span class="done-text"><b>${esc(n.text)}</b><small>${esc(n.sub)}</small></span></button>`)
       .join("");
   }
+  function pruneDoneNotes() {
+    for (const n of [...doneNotes]) if (bubbleInView(n.id)) dropNote(n.id);
+  }
   els.doneNotes.addEventListener("click", (e) => {
     const note = e.target.closest(".done-note");
     if (!note) return;
-    if (e.target.closest(".done-x")) {
-      const i = doneNotes.findIndex((n) => n.id === note.dataset.id);
-      if (i >= 0) doneNotes.splice(i, 1);
-      renderDoneNotes();
-      return;
-    }
-    jumpToMessage(els.messages.querySelector(`.msg[data-id="${note.dataset.id}"]`));
+    const id = note.dataset.id;
+    dropNote(id);
+    jumpToMessage(els.messages.querySelector(`.msg[data-id="${id}"]`));
   });
   function jumpToMessage(el) {
     if (!el) return;

package/ui/index.html

@@ -103,6 +103,7 @@
             <div class="shots-tray" id="shots-tray" hidden></div>
             <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>
           </div>
+          <button type="button" id="composer-clear" class="composer-clear" title="Clear the message" hidden>×</button>
           <button type="submit" class="send-btn" title="Send"><span data-icon="send"></span></button>
         </form>
       </section>