roger-roger 0.1.3 → 0.1.8

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]");