npm - roger-roger - Versions diffs - 0.1.0 - Mend

roger-roger 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/LICENSE +21 -0
package/README.md +147 -0
package/package.json +45 -0
package/skills/roger-roger/SKILL.md +289 -0
package/skills/roger-roger/herdr-plugin.toml +38 -0
package/skills/roger-roger/scripts/agent.mjs +132 -0
package/skills/roger-roger/scripts/audio.mjs +392 -0
package/skills/roger-roger/scripts/client.mjs +121 -0
package/skills/roger-roger/scripts/daemon.mjs +604 -0
package/skills/roger-roger/scripts/decisions.mjs +158 -0
package/skills/roger-roger/scripts/handlers.mjs +1151 -0
package/skills/roger-roger/scripts/herdr.mjs +140 -0
package/skills/roger-roger/scripts/hooks-codex.mjs +154 -0
package/skills/roger-roger/scripts/hooks-opencode.mjs +167 -0
package/skills/roger-roger/scripts/hooks.mjs +420 -0
package/skills/roger-roger/scripts/inbox.mjs +381 -0
package/skills/roger-roger/scripts/install.mjs +560 -0
package/skills/roger-roger/scripts/lib.mjs +1133 -0
package/skills/roger-roger/scripts/names.mjs +84 -0
package/skills/roger-roger/scripts/progress.mjs +91 -0
package/skills/roger-roger/scripts/protocol.mjs +71 -0
package/skills/roger-roger/scripts/roger-roger.mjs +536 -0
package/skills/roger-roger/scripts/router.mjs +86 -0
package/skills/roger-roger/scripts/sessions.mjs +218 -0
package/skills/roger-roger/scripts/slack.mjs +240 -0
package/skills/roger-roger/scripts/slackapp.mjs +205 -0
package/skills/roger-roger/scripts/slackcli.mjs +144 -0
package/skills/roger-roger/scripts/speaker.mjs +224 -0
package/skills/roger-roger/scripts/speechkey.mjs +106 -0
package/skills/roger-roger/scripts/tray.mjs +128 -0
package/skills/roger-roger/scripts/tts.mjs +275 -0
package/skills/roger-roger/scripts/tui.mjs +465 -0
package/skills/roger-roger/slack/manifest.json +34 -0
package/skills/roger-roger/sounds/alert.wav +0 -0
package/skills/roger-roger/sounds/bubble.wav +0 -0
package/skills/roger-roger/sounds/chime.wav +0 -0
package/skills/roger-roger/sounds/ding.wav +0 -0
package/skills/roger-roger/sounds/marimba.wav +0 -0
package/skills/roger-roger/tray/main.mjs +749 -0
package/skills/roger-roger/tray/panel.html +501 -0

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

@@ -0,0 +1,501 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>roger-roger</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #101317;
+        --bg-section: #1a2027;
+        --border: #39424d;
+        --border-subtle: #28313a;
+        --text: #f2f5f7;
+        --text-dim: #b3bdc7;
+        --text-muted: #7f8b96;
+        --accent: #e5b94f;
+        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+        color: var(--text);
+      }
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { height: 100%; background: transparent; overflow: hidden; }
+      body { margin: 0; font-size: 13px; }
+      button, input, select, textarea { font: inherit; color: inherit; }
+      button, input, select, textarea {
+        border: 1px solid var(--border);
+        border-radius: 0;
+        background: var(--bg-section);
+      }
+      input, select, textarea { padding: 6px 8px; }
+      button { cursor: pointer; padding: 6px 9px; }
+      button:hover { border-color: var(--accent); }
+      .secondary-btn, .icon-btn { color: var(--text-dim); }
+      .slim-btn { padding: 4px 7px; font-size: 11px; }
+      .icon-btn { display: grid; place-items: center; padding: 5px; }
+      .badge { padding: 3px 6px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; text-transform: uppercase; }
+      .status-dot { width: 7px; height: 7px; background: var(--text-muted); }
+      .switch { position: relative; display: inline-flex; }
+      .switch input { position: absolute; opacity: 0; pointer-events: none; }
+      .switch-track { width: 32px; height: 18px; padding: 2px; border: 1px solid var(--border); background: var(--bg-section); }
+      .switch-thumb { display: block; width: 12px; height: 12px; background: var(--text-muted); transition: transform 120ms ease; }
+      .switch input:checked + .switch-track { border-color: var(--accent); }
+      .switch input:checked + .switch-track .switch-thumb { background: var(--accent); transform: translateX(14px); }
+      /*
+       * Translucent, not blurred: a webview on Windows cannot blur what is behind its own window.
+       * Letting the desktop through and lighting the surface from the top left is the whole effect.
+       */
+      .card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--border);
+        background:
+          linear-gradient(150deg, rgba(255, 255, 255, 0.06), transparent 46%),
+          color-mix(in srgb, var(--bg) 78%, transparent);
+        overflow: hidden;
+      }
+      header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 10px 10px 14px;
+        border-bottom: 1px solid var(--border-subtle, var(--border));
+        background: color-mix(in srgb, var(--bg-section) 55%, transparent);
+      }
+      /*
+       * The header is the handle. Windows does the dragging itself — a page relaying pointer moves
+       * to its own window loses them the moment the window starts moving — so the header is marked
+       * as the window's title bar, and the gear, which must still be clickable, is marked out of it.
+       */
+      header { app-region: drag; -webkit-app-region: drag; user-select: none; }
+      header button { app-region: no-drag; -webkit-app-region: no-drag; }
+      header h1 { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
+      header .count { font-size: 11px; color: var(--text-dim); }
+      header .spacer { margin-left: auto; }
+      main { flex: 1; overflow-y: auto; padding: 6px; }
+      main::-webkit-scrollbar { width: 0; }
+      .group { padding: 12px 8px 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted, var(--text-dim)); }
+      .row { padding: 8px 8px; border-bottom: 1px solid var(--border-subtle, var(--border)); }
+      .row:last-child { border-bottom: 0; }
+      .row:hover { background: color-mix(in srgb, var(--bg-section) 60%, transparent); }
+      .top { display: flex; align-items: center; gap: 8px; }
+      .status-dot { flex: none; }
+      .who { font-weight: 600; }
+      .state { font-size: 11px; color: var(--text-dim); }
+      .age { margin-left: auto; font-size: 11px; color: var(--text-muted, var(--text-dim)); font-variant-numeric: tabular-nums; }
+      .meta, .sub { margin-top: 3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .meta { color: var(--text-dim); }
+      .sub { color: var(--text-muted, var(--text-dim)); }
+      .sub strong { font-weight: 600; color: var(--text-dim); }
+      .empty { padding: 34px 14px; text-align: center; color: var(--text-muted, var(--text-dim)); }
+      .stale { margin: 2px 2px 6px; padding: 6px 8px; border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; }
+      .flash { margin: 0 6px 6px; padding: 6px 8px; border: 1px solid var(--accent); color: var(--text); font-size: 11px; }
+      /* Settings rows: label left, control right, nothing clever. */
+      .setting { display: flex; align-items: center; gap: 10px; padding: 7px 8px; }
+      .setting > label:first-child { flex: none; width: 118px; color: var(--text-dim); font-size: 12px; }
+      .setting .control { margin-left: auto; flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
+      .setting select, .setting input[type="text"] { width: 100%; }
+      .setting textarea { width: 100%; height: 54px; resize: none; }
+      .setting .switch { margin-left: auto; }
+      footer { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border-subtle, var(--border)); }
+      footer .secondary-btn { flex: 1; }
+      .secondary-btn.is-active { border-color: var(--accent); color: var(--text); }
+      .icon-btn.is-active { border-color: var(--accent); color: var(--accent); }
+      #pin.is-active svg { fill: currentColor; }
+      /* Settings, the parts that aren't a plain label and a control. */
+      .chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
+      .chip { padding: 4px 9px; font-size: 11px; color: var(--text-muted); background: transparent; border-color: var(--border-subtle); }
+      .chip.is-active { color: #101317; background: var(--accent); border-color: var(--accent); font-weight: 600; }
+      .chip:disabled { opacity: 0.4; cursor: default; }
+      .chip:disabled:hover { border-color: var(--border-subtle); }
+      .hint { margin: -2px 8px 6px; font-size: 11px; color: var(--text-muted); line-height: 1.4; }
+      .hint .ok { color: #7fd1a0; }
+      .hint .warn { color: var(--accent); }
+      .keyline { padding-top: 0; }
+      .keyline .hint { margin: 0; flex: 1; }
+      .times { justify-content: flex-end; }
+      .times label { color: var(--text-dim); font-size: 12px; }
+      .times label:first-child { flex: 1; width: auto; }
+      .times input[type="time"] { width: 92px; color-scheme: dark; }
+      .times.is-off { opacity: 0.45; }
+      .advanced { margin-top: 10px; border-top: 1px solid var(--border-subtle); }
+      .advanced summary { padding: 12px 8px 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; list-style: none; }
+      .advanced summary::before { content: "▸ "; }
+      .advanced[open] summary::before { content: "▾ "; }
+      .advanced .setting > label:first-child { width: 170px; }
+      /* A switch needs no room of its own, so its label can have the line. */
+      .setting:has(.switch) > label:first-child { flex: 1; width: auto; }
+      .slider { display: flex; align-items: center; gap: 8px; width: 100%; }
+      .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; }
+      svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <header>
+        <h1>roger-roger</h1>
+        <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="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>
+        <button class="icon-btn icon-btn-sm" id="gear" title="Settings">
+          <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>
+      <main id="body"></main>
+      <div class="flash" id="flash" hidden></div>
+      <footer id="actions"></footer>
+    </div>
+    <script>
+      const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+      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 settingsOpen = false;
+      let advancedOpen = false;
+      function ago(ms) {
+        const s = Math.round((ms ?? 0) / 1000);
+        if (s < 45) return "just now";
+        const m = Math.round(s / 60);
+        if (m < 60) return m + "m ago";
+        const h = Math.floor(m / 60);
+        return h + "h" + (m % 60 ? " " + (m % 60) + "m" : "") + " ago";
+      }
+      function until(iso) {
+        const ms = Date.parse(iso) - Date.now();
+        if (!isFinite(ms)) return "";
+        if (ms <= 0) return "settling now";
+        const m = Math.round(ms / 60000);
+        return m < 60 ? m + "m left" : Math.floor(m / 60) + "h " + (m % 60) + "m left";
+      }
+      function agentRow(a) {
+        const colour = a.colour ? ' style="background:' + esc(a.colour) + '; box-shadow: 0 0 0 3px ' + esc(a.colour) + '22"' : "";
+        const line = [a.project, a.agent, a.model, a.name].filter(Boolean).map(esc).join(" · ");
+        const bits = [];
+        if (a.waitingOn) bits.push("<strong>waiting on you</strong> · " + esc(a.waitingOn.question));
+        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">' +
+          '<span class="status-dot"' + colour + "></span>" +
+          '<span class="who">' + esc(a.nickname) + "</span>" +
+          '<span class="state">' + esc(a.state) + "</span>" +
+          '<span class="age">' + ago(a.quietForMs) + "</span></div>" +
+          (line ? '<div class="meta">' + line + "</div>" : "") +
+          (bits.length ? '<div class="sub">' + bits.join(" · ") + "</div>" : "") +
+          "</div>"
+        );
+      }
+      function questionRow(q) {
+        const mark = q.swatch ? esc(q.swatch) + " " : "";
+        const choices = (q.choices ?? []).length ? " · " + q.choices.map(esc).join(" / ") : "";
+        return (
+          '<div class="row"><div class="meta" style="margin:0;color:var(--text)">' + mark + esc(q.question) + "</div>" +
+          '<div class="sub">' + esc(q.nickname || "an agent") + " · " + until(q.expiresAt) + choices + "</div></div>"
+        );
+      }
+      // ---------------------------------------------------------------- settings
+      const setting = (label, control, hint) =>
+        '<div class="setting"><label>' + esc(label) + '</label><div class="control">' + control + "</div></div>" +
+        (hint ? '<p class="hint">' + hint + "</p>" : "");
+      // Options as [value, what a person would call it]. A bare value is its own label.
+      const select = (flag, value, options) =>
+        '<select data-set="' + flag + '">' +
+        (options || [])
+          .map((o) => (Array.isArray(o) ? o : [o, o]))
+          .map(([v, label]) => '<option value="' + esc(v) + '"' + (v === value ? " selected" : "") + ">" + esc(label) + "</option>")
+          .join("") +
+        "</select>";
+      const chips = (flag, chosen, options) =>
+        '<div class="chips" data-chips="' + flag + '">' +
+        (options || [])
+          .map((o) => '<button class="chip' + ((chosen || []).includes(o) ? " is-active" : "") + '" data-chip="' + esc(o) + '">' + esc(o) + "</button>")
+          .join("") +
+        "</div>";
+      const toggle = (flag, on) =>
+        '<label class="switch" data-toggle="' + flag + '">' +
+        '<input type="checkbox"' + (on ? " checked" : "") + " />" +
+        '<span class="switch-track"><span class="switch-thumb"></span></span></label>';
+      const WHEN = [
+        ["auto", "When it makes sense"],
+        ["done-and-blocked", "Done or blocked"],
+        ["blocked-only", "Only when blocked"],
+        ["on-request", "Only when I ask"],
+      ];
+      const SPEECH = [
+        ["auto", "Agent decides"],
+        ["brief", "One short sentence"],
+        ["same", "Same as the Slack message"],
+      ];
+      const ON_EXPIRE = [
+        ["recommended", "Pick the recommended"],
+        ["nothing", "Let it expire"],
+      ];
+      const REMIND = [["off", "Never"], ["5m", "After 5 minutes"], ["10m", "After 10 minutes"], ["15m", "After 15 minutes"], ["30m", "After 30 minutes"], ["1h", "After an hour"]];
+      // Quiet hours remembered while they are switched off, so turning them back on offers the same
+      // times rather than making you set them again.
+      let quietDraft = { from: "22:00", to: "08:00" };
+      function quietSection(s, o) {
+        if (s.quietHours) quietDraft = { from: s.quietHours.from, to: s.quietHours.to };
+        const on = Boolean(s.quietHours);
+        return (
+          '<p class="group">Quiet hours</p>' +
+          setting("Every night", toggle("quiet-on", on)) +
+          '<div class="setting times' + (on ? "" : " is-off") + '">' +
+          '<label>From</label><input type="time" data-quiet="from" value="' + esc(quietDraft.from) + '" />' +
+          '<label class="to">to</label><input type="time" data-quiet="to" value="' + esc(quietDraft.to) + '" />' +
+          "</div>" +
+          (on ? setting("Silence", chips("quiet-mute", s.quietMute, o.methods)) : "")
+        );
+      }
+      // Provider first, then where its key is, then — once the key is there and the provider has
+      // been asked — its own voices and models, and only then a test. Each step waits for the last.
+      function speechSection(s, o) {
+        const providers = (o.speechProviders || []).map((p) => [p.id, p.label]);
+        const provider = (o.speechProviders || []).find((p) => p.id === s.speechProvider) || { keyVars: [] };
+        const cat = o.speechCatalog || { voices: [], models: [] };
+        const status = s.speechKeyFound
+          ? '<span class="ok">Key found in ' + esc(s.speechKeyUsed) + "</span>"
+          : '<span class="warn">Nothing in ' + esc(s.speechKeyUsed) + " — set it, then come back</span>";
+        const rows = [
+          setting("Provider", select("speech-provider", s.speechProvider, providers)),
+          setting("API key variable", '<input type="text" data-set="speech-key-var" spellcheck="false" value="' + esc(s.speechKeyVar) +
+            '" placeholder="' + esc(provider.keyVars.join(" or ")) + '" />'),
+          '<p class="hint">' + status + "</p>",
+        ];
+        if (!s.speechKeyFound) return rows.join("");
+        const loading = !cat.fetchedAt;
+        const voiceOptions = cat.voices.map((v) => [v.id, v.name + (v.description ? " — " + v.description : "")]);
+        const modelOptions = cat.models.map((m) => [m.id, m.name]);
+        return rows.concat([
+          cat.voices.length
+            ? setting("Voice", select("voice", s.voice, voiceOptions))
+            : setting("Voice", '<span class="hint">' + (loading ? "Loading voices…" : "No voices found") + "</span>"),
+          cat.models.length ? setting("Model", select("model", s.model, modelOptions)) : "",
+          '<div class="setting keyline"><p class="hint">' + (loading ? "Asking " + esc(provider.label || "the provider") + " what it has…" : "") + "</p>" +
+            '<button class="chip" data-do="refresh-voices" title="Ask the provider again">Refresh</button>' +
+            '<button class="chip" data-do="test-voice" id="test-voice">Test</button></div>',
+        ]).join("");
+      }
+      // A slider sends its value when it is let go; while it moves, only the number next to it does.
+      const slider = (flag, value, min, max, suffix) =>
+        '<div class="slider"><input type="range" data-set="' + flag + '" min="' + min + '" max="' + max + '" step="5" value="' + esc(value) + '" />' +
+        '<output>' + esc(value) + suffix + "</output></div>";
+      // Music and videos turned down while the voice speaks, so it can be heard. Test does it too.
+      function duckRows(s) {
+        return (
+          setting("Lower other sounds while speaking", toggle("duck", s.duck)) +
+          (s.duck ? setting("Other sounds at", slider("duck-level", s.duckLevel, 0, 100, "%")) : "")
+        );
+      }
+      function settingsView(s, o) {
+        if (!s) return '<p class="empty">Not set up yet — ask an agent to set up roger-roger.</p>';
+        const speaks = (s.methods || []).includes("speech");
+        return [
+          '<p class="group">Notifications</p>',
+          setting("How", chips("methods", s.methods, o.methods)),
+          setting("When", select("when", s.when, WHEN)),
+          setting("Sound", select("sound", s.sound, o.sounds)),
+          '<p class="group">Speech</p>',
+          speechSection(s, o),
+          setting("Says", select("speech", s.speech, SPEECH)),
+          setting("Say who it is", toggle("say-who", s.sayWho)),
+          setting("Voice volume", slider("speech-volume", s.speechVolume ?? 100, 0, 150, "%")),
+          duckRows(s),
+          speaks ? "" : '<p class="hint">Speech is off — turn it on under How to hear any of this.</p>',
+          quietSection(s, o),
+          '<p class="group">Questions</p>',
+          setting("Remind me", select("remind", s.remind || "off", REMIND.some(([v]) => v === (s.remind || "off")) ? REMIND : REMIND.concat([[s.remind, s.remind]]))),
+          setting("If I don't answer", select("on-expire", s.onExpire, ON_EXPIRE)),
+          '<p class="group">Notes for every agent</p>',
+          '<div class="setting"><div class="control"><textarea data-set="notes" placeholder="e.g. never speak after 10pm; only Slack for errors">' + esc(s.notes) + "</textarea></div></div>",
+          '<details class="advanced"' + (advancedOpen ? " open" : "") + "><summary>Advanced</summary>",
+          setting("Name line in Slack", toggle("session-label", s.sessionLabel)),
+          setting("Computer voice if Gemini fails", toggle("local-fallback", s.localFallback)),
+          setting("Tray starts with the daemon", toggle("tray", s.tray !== "off")),
+          "</details>",
+        ].join("");
+      }
+      // ---------------------------------------------------------------- drawing
+      function draw() {
+        const state = latest;
+        const agents = state.agents ?? [];
+        const questions = state.questions ?? [];
+        const working = state.working ?? [];
+        const snoozed = state.muted && state.muted.snoozeUntil;
+        const quiet = state.muted && state.muted.quietNow;
+        document.getElementById("count").textContent = settingsOpen
+          ? "settings"
+          : agents.length
+            ? plural(agents.length, "agent", "agents") + (questions.length ? " · " + plural(questions.length, "question", "questions") : "")
+            : "nothing running";
+        const badge = document.getElementById("badge");
+        badge.hidden = !snoozed && !quiet;
+        badge.textContent = snoozed ? "snoozed" : "quiet hours";
+        document.getElementById("gear").classList.toggle("is-active", settingsOpen);
+        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 (!agents.length && !questions.length && !working.length) {
+          parts.push('<p class="empty">Nothing is running.</p>');
+        } else {
+          if (agents.length) parts.push(agents.map(agentRow).join(""));
+          if (questions.length) {
+            parts.push('<p class="group">Waiting on you</p>');
+            parts.push(questions.map(questionRow).join(""));
+          }
+          if (working.length) {
+            parts.push('<p class="group">In progress</p>');
+            parts.push(working.map((w) => '<div class="row"><div class="meta" style="margin:0;color:var(--text)">' + esc(w.headline) + "</div></div>").join(""));
+          }
+        }
+        document.getElementById("body").innerHTML = parts.join("");
+        document.getElementById("actions").innerHTML = snoozed
+          ? '<button class="secondary-btn" data-do="snooze" data-value="off">Stop snoozing</button>'
+          : '<button class="secondary-btn" data-do="snooze" data-value="15m">Snooze 15m</button>' +
+            '<button class="secondary-btn" data-do="snooze" data-value="1h">Snooze 1h</button>';
+      }
+      // When a settings control was last touched. A change takes a moment to go through `setup`
+      // and come back in the snapshot, and a redraw in between would put the old value back.
+      let touchedAt = 0;
+      const TOUCH_MS = 3000;
+      const inSettings = (el) => settingsOpen && el && el.closest && el.closest("#body");
+      window.render = function (state) {
+        latest = state || latest;
+        // Redrawing while someone is typing would take the words out from under them, and redrawing
+        // just after a click would flick a chip or switch back until the new value arrives.
+        const active = document.activeElement;
+        const typing = active && /INPUT|TEXTAREA|SELECT/.test(active.tagName) && inSettings(active);
+        const recent = settingsOpen && Date.now() - touchedAt < TOUCH_MS;
+        if (!typing && !recent) draw();
+      };
+      /** A short message from the tray, usually that a setting was refused. */
+      let flashTimer = null;
+      window.flash = function (message, kind) {
+        const el = document.getElementById("flash");
+        el.textContent = String(message ?? "");
+        el.hidden = !el.textContent;
+        el.classList.toggle("is-ok", kind === "ok");
+        clearTimeout(flashTimer);
+        flashTimer = setTimeout(() => (el.hidden = true), 6000);
+        // A refused change should show the value that is really in force, not the one just tried.
+        touchedAt = 0;
+        window.render();
+      };
+      for (const type of ["pointerdown", "input", "change"]) {
+        document.addEventListener(type, (e) => {
+          if (inSettings(e.target)) touchedAt = Date.now();
+        }, true);
+      }
+      document.addEventListener("input", (e) => {
+        if (e.target.type === "range") e.target.nextElementSibling.textContent = e.target.value + "%";
+      });
+      document.addEventListener("toggle", (e) => {
+        if (e.target.classList && e.target.classList.contains("advanced")) advancedOpen = e.target.open;
+      }, true);
+      // Pinned, the panel stays up when you click elsewhere. The tray keeps the real state; this
+      // button only shows it and flips it.
+      let keepOpen = false;
+      document.getElementById("pin").addEventListener("click", () => {
+        keepOpen = !keepOpen;
+        const pin = document.getElementById("pin");
+        pin.classList.toggle("is-active", keepOpen);
+        pin.title = keepOpen ? "Pinned: stays open until you click the tray icon" : "Keep open when I click elsewhere";
+        send({ do: "keep-open", value: keepOpen });
+      });
+      document.getElementById("gear").addEventListener("click", () => {
+        settingsOpen = !settingsOpen;
+        draw();
+      });
+      document.addEventListener("click", (e) => {
+        const action = e.target.closest("[data-do]");
+        if (action) {
+          e.preventDefault();
+          if (action.dataset.do === "test-voice") {
+            action.disabled = true;
+            action.textContent = "Speaking…";
+          }
+          return send({ do: action.dataset.do, value: action.dataset.value });
+        }
+        const chip = e.target.closest("[data-chip]");
+        if (chip) {
+          const group = chip.closest("[data-chips]");
+          chip.classList.toggle("is-active");
+          const chosen = [...group.querySelectorAll(".is-active")].map((c) => c.dataset.chip);
+          return send({ do: "set", flag: group.dataset.chips, value: chosen.join(",") || "off" });
+        }
+      });
+      document.addEventListener("change", (e) => {
+        const flip = e.target.closest("[data-toggle]");
+        if (flip && flip.dataset.toggle === "quiet-on") {
+          return send({ do: "set", flag: "quiet-hours", value: e.target.checked ? quietDraft.from + "-" + quietDraft.to : "off" });
+        }
+        if (flip) return send({ do: "set", flag: flip.dataset.toggle, value: e.target.checked ? "on" : "off" });
+        const time = e.target.closest("[data-quiet]");
+        if (time) {
+          if (!e.target.value) return;
+          quietDraft[time.dataset.quiet] = e.target.value;
+          // Changing the times while quiet hours are off only remembers them for when they go on.
+          if (latest.settings && latest.settings.quietHours) send({ do: "set", flag: "quiet-hours", value: quietDraft.from + "-" + quietDraft.to });
+          return;
+        }
+        const control = e.target.closest("[data-set]");
+        if (control) send({ do: "set", flag: control.dataset.set, value: control.value });
+      });
+      draw();
+    </script>
+  </body>
+</html>