roger-roger 0.1.4 → 0.1.13

package/skills/roger-roger/scripts/lib.mjs

@@ -535,8 +535,63 @@ export function slackText({ kind = "info", message, project, mention }) {
 
 /** What gets spoken: the agent's `--say` line, unless the user wants the message read verbatim. */
 export function speechText({ mode = "auto", message, say }) {
-  if (mode === "same") return message;
-  return say || message;
+  return speakable(mode === "same" ? message : say || message);
+}
+
+// A word that only makes sense on a screen: shell punctuation, a flag, a path, a quote, a template.
+const CODEISH = /[{}$|;<>=\\`"']|^--?[a-z]|[\w.~-]\/[\w.-]|^https?:|^[\w-]+\.[a-z]{2,4}[,.]?$|^\w+\(|\)$/i;
+
+/**
+ * Does this stretch read as code rather than as a sentence? `quoted` is for text already marked as
+ * code (in backticks): there one flag or path is enough. Loose text needs two, and a fair share.
+ */
+export function looksLikeCode(text, { quoted = false } = {}) {
+  const words = String(text).trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return false;
+  const codeish = words.filter((w) => CODEISH.test(w)).length;
+  if (words.length === 1) return words[0].length > 24 || /[{}$|;<>=\\/]/.test(words[0]);
+  if (quoted) return codeish >= 1;
+  return codeish >= 2 && codeish / words.length >= 0.3;
+}
+
+/** What a piece of code is, in words: "an ssh command", "a file", or just "a command". */
+function nameCode(code) {
+  const s = String(code).trim();
+  if (!/\s/.test(s) && /[\/\\]/.test(s) && !/^https?:/i.test(s)) return "a file";
+  const first = s.split(/\s+/)[0].replace(/^[^\w]+/, "");
+  // "an ssh", "an npm", "a git": a word with no vowel is spelt out, and f, h, l, m, n, r, s, x start with a vowel sound.
+  const an = /^[aeiou]/i.test(first) || (!/[aeiouy]/i.test(first) && /^[fhlmnrsx]/i.test(first));
+  if (/^[a-z][\w-]{1,15}$/i.test(first) && !/^(the|a|an|and|or|to|then)$/i.test(first)) return `${an ? "an" : "a"} ${first} command`;
+  return "a command";
+}
+
+/**
+ * The line as it should be heard. Nobody wants a voice reading out `ssh -o BatchMode=yes …` or a
+ * URL, so code is said as what it is: a fenced block becomes "the details are in Slack", inline
+ * code that is really code becomes "an lsblk command" or "a file", a link becomes "a link", and a
+ * stretch of bare command line becomes what it is too. Markdown emphasis goes; tone tags stay.
+ */
+export function speakable(text) {
+  let s = String(text ?? "");
+  s = s.replace(/```[\s\S]*?(```|$)/g, " (the details are in Slack) ");
+  s = s.replace(/`([^`\n]+)`/g, (_, code) => (looksLikeCode(code, { quoted: true }) ? nameCode(code) : code));
+  s = s.replace(/<?https?:\/\/[^\s>|]+(\|[^>]*)?>?/gi, "a link");
+  s = s
+    .split(/\n+|(?<=[.!?])\s+(?=[A-Z[])/)
+    .map((part) => {
+      // A sentence that ends in a command ("Can I run ssh -o … 'df -h'") keeps its words and names the command.
+      const words = part.trim().split(/\s+/);
+      const start = words.findIndex((w, i) => looksLikeCode(words.slice(i).join(" ")) && CODEISH.test(words[Math.min(i + 1, words.length - 1)]));
+      if (start < 0) return part;
+      return [...words.slice(0, start), nameCode(words.slice(start).join(" "))].join(" ");
+    })
+    .join(" ");
+  return s
+    .replace(/(^|\s)[*_~]+(?=\S)|(?<=\S)[*_~]+(?=\s|[,.!?;:]|$)/g, "$1")
+    .replace(/^\s*[>•-]\s+/gm, "")
+    .replace(/\s+([,.!?;:])/g, "$1")
+    .replace(/\s{2,}/g, " ")
+    .trim();
 }
 
 // Several agents share one pair of speakers, and a voice from the next room with no name on it is

package/skills/roger-roger/scripts/names.mjs

@@ -68,10 +68,22 @@ export function isNickname(value) {
  * A free nickname from the pool, chosen at random so consecutive sessions don't look alike. Falls
  * back to numbering (`sage2`) only once every name in the pool is in use.
  */
-export function pickName(taken = [], pool = NAMES, random = Math.random) {
+/**
+ * A name for a new session. `taken` are names in use right now and are never given out; `avoid`
+ * are names a quiet session was using lately, given out only once nothing else is left, so a
+ * session that goes quiet for an hour comes back to its own name rather than someone else's.
+ */
+export function pickName(taken = [], pool = NAMES, random = Math.random, { avoid = [] } = {}) {
   const used = new Set(taken.map((n) => String(n).toLowerCase()));
   const names = (pool.length ? pool : NAMES).map((n) => String(n).toLowerCase()).filter(isNickname);
-  const free = names.filter((n) => !used.has(n));
+  // `avoid` runs from the most recently quiet to the longest quiet. Names are freed from the end
+  // of it one at a time, so the name lent out is the one whose owner has been gone the longest.
+  const held = avoid.map((n) => String(n).toLowerCase());
+  let free = [];
+  for (let keep = held.length; keep >= 0 && !free.length; keep--) {
+    const reserved = new Set(held.slice(0, keep));
+    free = names.filter((n) => !used.has(n) && !reserved.has(n));
+  }
   // Two of a kind side by side defeat the point, so prefer an emoji nobody is wearing.
   const swatches = new Set([...used].map((n) => colourOf(n).swatch));
   const distinct = free.filter((n) => !swatches.has(colourOf(n).swatch));

package/skills/roger-roger/scripts/roger-roger.mjs

@@ -465,6 +465,7 @@ async function main() {
     case "control":
     case "listen":
     case "snooze":
+    case "hush":
     case "tray":
     case "ask":
     case "wait":

package/skills/roger-roger/scripts/sessions.mjs

@@ -16,7 +16,8 @@ import { NAMES, colourOf, pickName } from "./names.mjs";
 const QUIET_MS = 30 * 60 * 1000;
 // Even with a live pid, a session that hasn't said anything all day is no longer a sensible target.
 const MAX_IDLE_MS = 12 * 3600 * 1000;
-const FORGET_MS = 7 * 24 * 3600 * 1000;
+// A conversation can be picked up again weeks later, and should come back under the name it had.
+const FORGET_MS = 30 * 24 * 3600 * 1000;
 const MAX_QUEUE = 50;
 
 export const STATES = ["working", "waiting", "paused", "done"];
@@ -87,15 +88,20 @@ export function register(identity, about = {}, pool = NAMES) {
       : identity.id;
     if (fingerprint) state.aliases[fingerprint] = id;
     const existing = state.sessions[id];
-    const taken = Object.values(state.sessions)
-      .filter((s) => s.id !== id && isLive(s))
+    const others = Object.values(state.sessions).filter((s) => s.id !== id && !s.endedAt);
+    const taken = others.filter((s) => isLive(s)).map((s) => s.nickname);
+    // Names quiet sessions are still remembered by, the most recently quiet first: a newcomer gets
+    // one only when nothing else is free, and then the one whose owner has been gone longest.
+    const avoid = others
+      .filter((s) => !isLive(s))
+      .sort((a, b) => Date.parse(b.lastSeen ?? 0) - Date.parse(a.lastSeen ?? 0))
       .map((s) => s.nickname);
     const session = {
       ...existing,
       id,
       // A session keeps its name, unless someone else was given it while this one was quiet — two
       // live agents answering to "jade" is exactly what the names are there to prevent.
-      nickname: existing?.nickname && !taken.includes(existing.nickname) ? existing.nickname : pickName(taken, pool),
+      nickname: existing?.nickname && !taken.includes(existing.nickname) ? existing.nickname : pickName(taken, pool, Math.random, { avoid }),
       pid: identity.pid || existing?.pid || 0,
       cwd: identity.cwd ?? existing?.cwd ?? "",
       project: identity.project || existing?.project || "",

package/skills/roger-roger/scripts/tray.mjs

@@ -11,6 +11,7 @@ import {
   rogerRogerHome, inQuietHours, listSounds, snoozeUntil,
 } from "./lib.mjs";
 import * as decisions from "./decisions.mjs";
+import * as activity from "./activity.mjs";
 import * as progressStore from "./progress.mjs";
 import * as sessions from "./sessions.mjs";
 import { PROVIDERS, catalog, keyFor, providerOf } from "./tts.mjs";
@@ -46,6 +47,8 @@ export function snapshot({ config = null, daemon = null, now = Date.now() } = {}
   return {
     updatedAt: new Date(now).toISOString(),
     daemon: daemon ? { pid: daemon.pid, slackConnected: Boolean(daemon.slackConnected) } : null,
+    // Who is speaking right now ({ who, since }), so the panel can offer to stop it.
+    speaking: daemon?.speaking ?? null,
     muted: {
       snoozeUntil: snoozeUntil(config, new Date(now)),
       quietHours: config?.quietHours ?? null,
@@ -61,6 +64,8 @@ export function snapshot({ config = null, daemon = null, now = Date.now() } = {}
       expiresAt: d.expiresAt,
     })),
     working: progressStore.active(now).map((p) => ({ key: p.key, headline: p.headline, nickname: p.nickname ?? null })),
+    // Who said what lately, newest first: the Log view.
+    log: activity.recent(60),
     // Everything `setup` can change, so the panel can offer it without asking anyone. Tokens live
     // in slack.json and the environment and are deliberately not here.
     settings: config

package/skills/roger-roger/tray/main.mjs

@@ -191,6 +191,8 @@ function tooltip(state, stale) {
  */
 function menu(state, spot) {
   const items = [];
+  // While a voice plays, the first thing on the menu stops it.
+  if (state.speaking) items.push({ id: "hush", label: state.speaking.who ? `Stop ${state.speaking.who} speaking` : "Stop the voice" }, { id: "sep0", label: "-" });
   if (state.muted?.snoozeUntil) {
     items.push({ id: "snooze:off", label: "Stop snoozing" });
   } else {
@@ -203,9 +205,10 @@ function menu(state, spot) {
   return { items };
 }
 
-const menuKey = (state, spot) => `${state.muted?.snoozeUntil ? "snoozed" : "awake"}:${spot ? "spot" : "free"}`;
+const menuKey = (state, spot) => `${state.muted?.snoozeUntil ? "snoozed" : "awake"}:${spot ? "spot" : "free"}:${state.speaking ? `speaking-${state.speaking.who ?? ""}` : "silent"}`;
 
 function onMenu(id) {
+  if (id === "hush") return run("hush");
   if (id === "snooze:off") return run("snooze", "off");
   if (id?.startsWith("snooze:")) return run("snooze", id.slice("snooze:".length));
   return null;
@@ -463,6 +466,7 @@ async function main() {
         return log(`the panel said something I could not read: ${message?.body ?? message}`);
       }
       if (ask.do === "snooze") return run("snooze", ask.value || "1h");
+      if (ask.do === "hush") return run("hush");
       if (ask.do === "hide") return hidePanel();
       if (ask.do === "keep-open") {
         keepOpen = Boolean(ask.value);

package/skills/roger-roger/tray/panel.html

@@ -141,6 +141,40 @@
       .slider input[type="range"] { flex: 1; accent-color: var(--accent); padding: 0; border: 0; background: transparent; }
       .slider output { width: 40px; text-align: right; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
       .flash.is-ok { border-color: #7fd1a0; }
+
+      /* The log: who said what, newest first. The agent's colour runs down the left edge. */
+      .row.is-agent { cursor: pointer; }
+      .filters { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 4px 8px; }
+      .entry { position: relative; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
+      .entry::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--edge, var(--text-muted)); }
+      .entry.from-user::before { background: var(--accent); }
+      .entry:hover { background: color-mix(in srgb, var(--bg-section) 60%, transparent); }
+      .entry .top { gap: 6px; font-size: 11px; color: var(--text-dim); }
+      .entry .name { font-weight: 600; color: var(--text); }
+      .entry .arrow { color: var(--text-muted); }
+      .entry .kind { padding: 0 5px; border: 1px solid var(--border-subtle); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
+      .entry .kind.k-blocked, .entry .kind.k-error, .entry .kind.k-question { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
+      .entry .kind.k-done, .entry .kind.k-answer { color: #7fd1a0; border-color: #7fd1a055; }
+      .entry .text { margin-top: 4px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+      .entry.is-open .text { display: block; }
+      .entry .detail { margin-top: 3px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .entry.is-open .detail { white-space: normal; }
+      .day { padding: 12px 8px 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
+
+      /* On air: shown only while a voice or sound plays, with the one thing you might want — stop it. */
+      .onair { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+      .onair[hidden] { display: none; }
+      .onair .bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
+      .onair .bars i { width: 3px; background: var(--accent); animation: level 900ms ease-in-out infinite; }
+      .onair .bars i:nth-child(2) { animation-delay: -300ms; }
+      .onair .bars i:nth-child(3) { animation-delay: -600ms; }
+      @keyframes level { 0%, 100% { height: 4px; } 50% { height: 14px; } }
+      @media (prefers-reduced-motion: reduce) { .onair .bars i { animation: none; height: 10px; } }
+      .onair .label { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .onair .label strong { font-weight: 600; }
+      .onair button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #101317; background: var(--accent); border-color: var(--accent); }
+      .onair button:hover { filter: brightness(1.08); }
+      .onair button svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
       svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
     </style>
   </head>
@@ -151,6 +185,9 @@
         <span class="count" id="count"></span>
         <span class="spacer"></span>
         <span class="badge" id="badge" hidden></span>
+        <button class="icon-btn icon-btn-sm" id="log" title="Log: who said what">
+          <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M8 9h8"></path><path d="M8 13h5"></path></svg>
+        </button>
         <button class="icon-btn icon-btn-sm" id="pin" title="Keep open when I click elsewhere">
           <svg viewBox="0 0 24 24"><path d="M12 17v5"></path><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path></svg>
         </button>
@@ -158,6 +195,13 @@
           <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6h.09A1.65 1.65 0 0 0 10 3.09V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 15 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
         </button>
       </header>
+      <div class="onair" id="onair" hidden>
+        <span class="bars" aria-hidden="true"><i></i><i></i><i></i></span>
+        <span class="label" id="onair-label"></span>
+        <button data-do="hush" title="Stop this announcement (the Slack message stays)">
+          <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14"></rect></svg>Stop
+        </button>
+      </div>
       <main id="body"></main>
       <div class="flash" id="flash" hidden></div>
       <footer id="actions"></footer>
@@ -168,9 +212,15 @@
       const plural = (n, one, many) => n + " " + (n === 1 ? one : many);
       const send = (body) => window.ipc.postMessage(JSON.stringify(body));
 
-      let latest = { agents: [], questions: [], working: [] };
+      let latest = { agents: [], questions: [], working: [], log: [] };
       let settingsOpen = false;
       let advancedOpen = false;
+      // The log view, which agent it is narrowed to (null: everyone), and which entries are opened out.
+      let logOpen = false;
+      let logFilter = null;
+      // Stop was pressed: hide the strip at once rather than waiting for the daemon to say it stopped.
+      let hushedAt = 0;
+      const openEntries = new Set();
 
       function ago(ms) {
         const s = Math.round((ms ?? 0) / 1000);
@@ -197,7 +247,7 @@
         if (a.queued) bits.push(plural(a.queued, "message", "messages") + " unread");
         if (a.owes) bits.push(plural(a.owes, "answer", "answers") + " to collect");
         return (
-          '<div class="row"><div class="top">' +
+          '<div class="row is-agent" data-agent="' + esc(a.nickname) + '" title="Show what ' + esc(a.nickname) + ' said"><div class="top">' +
           '<span class="status-dot"' + colour + "></span>" +
           '<span class="who">' + esc(a.nickname) + "</span>" +
           '<span class="state">' + esc(a.state) + "</span>" +
@@ -217,6 +267,70 @@
         );
       }
 
+      // ---------------------------------------------------------------- log
+
+      const KIND_LABEL = { done: "done", blocked: "blocked", input: "needs you", milestone: "milestone", error: "error", info: "info", question: "question", answer: "answer", message: "message", cancelled: "cancelled", expired: "expired" };
+
+      function clock(iso) {
+        const d = new Date(iso);
+        return isFinite(d) ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
+      }
+
+      function dayOf(iso) {
+        const d = new Date(iso);
+        if (!isFinite(d)) return "";
+        const today = new Date();
+        const yesterday = new Date(today.getTime() - 864e5);
+        if (d.toDateString() === today.toDateString()) return "Today";
+        if (d.toDateString() === yesterday.toDateString()) return "Yesterday";
+        return d.toLocaleDateString([], { weekday: "long", day: "numeric", month: "short" });
+      }
+
+      function entryRow(e, i) {
+        const name = (a) => '<span class="name">' + esc(a ? (a.swatch ? a.swatch + " " : "") + a.nickname : "an agent") + "</span>";
+        const who = e.from === "user"
+          ? '<span class="name">you</span>' + (e.agent ? '<span class="arrow">→</span>' + name(e.agent) : "")
+          : name(e.agent) + '<span class="arrow">→</span><span class="name">you</span>';
+        const key = e.at + "|" + i;
+        const edge = e.agent && e.agent.colour ? ' style="--edge:' + esc(e.agent.colour) + '"' : "";
+        const detail = e.kind === "answer" && e.detail ? "to: " + e.detail : e.detail;
+        return (
+          '<div class="entry' + (e.from === "user" ? " from-user" : "") + (openEntries.has(key) ? " is-open" : "") + '" data-entry="' + esc(key) + '"' + edge + ">" +
+          '<div class="top">' + who +
+          '<span class="kind k-' + esc(e.kind) + '">' + esc(KIND_LABEL[e.kind] || e.kind) + "</span>" +
+          '<span class="age" title="' + esc(new Date(e.at).toLocaleString()) + '">' + clock(e.at) + "</span></div>" +
+          (e.text ? '<div class="text">' + esc(e.text) + "</div>" : "") +
+          (detail ? '<div class="detail">' + esc(detail) + "</div>" : "") +
+          "</div>"
+        );
+      }
+
+      function logView(log) {
+        const names = [...new Set(log.map((e) => e.agent && e.agent.nickname).filter(Boolean))];
+        const shown = logFilter ? log.filter((e) => e.agent && e.agent.nickname === logFilter) : log;
+        const parts = [];
+        if (names.length > 1 || logFilter) {
+          parts.push('<div class="filters">' +
+            '<button class="chip' + (logFilter ? "" : " is-active") + '" data-filter="">Everyone</button>' +
+            names.map((n) => '<button class="chip' + (logFilter === n ? " is-active" : "") + '" data-filter="' + esc(n) + '">' + esc(n) + "</button>").join("") +
+            "</div>");
+        }
+        if (!shown.length) {
+          parts.push('<p class="empty">' + (logFilter ? "Nothing from " + esc(logFilter) + " yet." : "Nothing said yet. Notifications, questions, your answers and your messages show up here.") + "</p>");
+          return parts.join("");
+        }
+        let day = "";
+        shown.forEach((e, i) => {
+          const d = dayOf(e.at);
+          if (d !== day) {
+            day = d;
+            parts.push('<p class="day">' + esc(d) + "</p>");
+          }
+          parts.push(entryRow(e, i));
+        });
+        return parts.join("");
+      }
+
       // ---------------------------------------------------------------- settings
 
       const setting = (label, control, hint) =>
@@ -363,6 +477,8 @@
 
         document.getElementById("count").textContent = settingsOpen
           ? "settings"
+          : logOpen
+            ? "log" + (logFilter ? " · " + logFilter : "")
           : agents.length
             ? plural(agents.length, "agent", "agents") + (questions.length ? " · " + plural(questions.length, "question", "questions") : "")
             : "nothing running";
@@ -371,12 +487,27 @@
         badge.hidden = !snoozed && !quiet;
         badge.textContent = snoozed ? "snoozed" : "quiet hours";
         document.getElementById("gear").classList.toggle("is-active", settingsOpen);
+        document.getElementById("log").classList.toggle("is-active", logOpen && !settingsOpen);
+
+        // Who is speaking, and the Stop button, only while something is.
+        const speaking = state.speaking;
+        const onair = document.getElementById("onair");
+        onair.hidden = !speaking || hushedAt > Date.now() - 2500;
+        if (speaking) {
+          const who = speaking.who;
+          const agent = agents.find((a) => a.nickname === who);
+          document.getElementById("onair-label").innerHTML = who && agent
+            ? "<strong>" + esc((agent.swatch ? agent.swatch + " " : "") + who) + "</strong> is speaking"
+            : who ? "Playing a " + esc(who) : "Speaking";
+        }
 
         const parts = [];
         // The tray says so when the file it reads has stopped being kept up to date.
         if (state.stale) parts.push('<p class="stale">Daemon not running — state may be old.</p>');
         if (settingsOpen) {
           parts.push(settingsView(state.settings, state.options || {}));
+        } else if (logOpen) {
+          parts.push(logView(state.log ?? []));
         } else if (!agents.length && !questions.length && !working.length) {
           parts.push('<p class="empty">Nothing is running.</p>');
         } else {
@@ -455,10 +586,40 @@
 
       document.getElementById("gear").addEventListener("click", () => {
         settingsOpen = !settingsOpen;
+        if (settingsOpen) logOpen = false;
+        draw();
+      });
+
+      document.getElementById("log").addEventListener("click", () => {
+        logOpen = settingsOpen ? true : !logOpen;
+        settingsOpen = false;
+        logFilter = null;
+        document.getElementById("body").scrollTop = 0;
         draw();
       });
 
       document.addEventListener("click", (e) => {
+        // An agent's row opens its log; a filter narrows the log; an entry opens out to its full text.
+        const agent = e.target.closest("[data-agent]");
+        if (agent) {
+          logOpen = true;
+          logFilter = agent.dataset.agent;
+          document.getElementById("body").scrollTop = 0;
+          return draw();
+        }
+        const filter = e.target.closest("[data-filter]");
+        if (filter) {
+          logFilter = filter.dataset.filter || null;
+          return draw();
+        }
+        const entry = e.target.closest("[data-entry]");
+        if (entry) {
+          const key = entry.dataset.entry;
+          if (openEntries.has(key)) openEntries.delete(key);
+          else openEntries.add(key);
+          entry.classList.toggle("is-open");
+          return;
+        }
         const action = e.target.closest("[data-do]");
         if (action) {
           e.preventDefault();
@@ -466,6 +627,10 @@
             action.disabled = true;
             action.textContent = "Speaking…";
           }
+          if (action.dataset.do === "hush") {
+            hushedAt = Date.now();
+            document.getElementById("onair").hidden = true;
+          }
           return send({ do: action.dataset.do, value: action.dataset.value });
         }
         const chip = e.target.closest("[data-chip]");