viberoom 0.5.1 → 0.5.2

package/dist/room.js

@@ -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,7 +1788,7 @@ export class Room extends EventEmitter {
             durationMs,
         };
         this.commit(message);
-        if (this.messages.some((x) => x.kind === "chat" && x.id !== message.id && x.ts > draft.ts)) {
+        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 });
@@ -1874,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberoom",
-  "version": "0.5.1",
+  "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/ui/app.css

@@ -374,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; }
@@ -582,3 +595,4 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .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

@@ -1417,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 = "";
   }
 
@@ -1429,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);
     }
   }