@parley-im/parley 0.1.2 → 0.2.1

package/web/chat.js

@@ -10,7 +10,7 @@
     chip: $("chip"), infoBtn: $("info-btn"), sheet: $("sheet"), sheetBack: $("sheet-back"), sheetBody: $("sheet-body"),
     sheetClose: $("sheet-close"), app: document.querySelector(".app"),
   };
-  if (!owner) document.body.classList.add("tester-view");
+  if (!owner) document.body.classList.add("guest-view");
 
   let session = null;
   let ownerName = null;
@@ -18,9 +18,11 @@
   let more = false;
   let loadingOlder = false;
   const seen = new Set();
+  const kept = new Map(); // id -> message, for saving a copy
   let live = null; // { el, text, steps, bodyEl, stepsEl }
   let attachments = []; // { handle, preview, uploading }
   let sending = false;
+  let draftId = null; // see submit()
   let ended = false;
   let offline = false;
 
@@ -109,34 +111,42 @@
     if (scroller.clientHeight !== viewHeight) viewResized();
   }).observe(scroller);
 
-  // iOS doesn't shrink the page for the keyboard; it shrinks and scrolls the
-  // visible area instead. While a keyboard is up, pin the app to exactly that
-  // area (its size and its offset), or Safari shows the composer floating at
-  // the top with empty space under it.
+  // Phones show the keyboard over the page and then scroll the page to keep
+  // the box in view, which pushes the header off the top and leaves empty
+  // space above the composer (Safari, and apps' in-app browsers). So the app
+  // is always pinned to exactly the visible area, its size and its offset,
+  // keyboard or not, and any scrolling of the page itself is undone. Desktop
+  // browsers see no difference.
   const vv = window.visualViewport;
   if (vv) {
+    let queued = false;
     const fit = () => {
-      if (vv.height < window.innerHeight - 80) {
-        Object.assign(els.app.style, {
-          position: "fixed",
-          left: "0",
-          right: "0",
-          top: "0",
-          height: `${vv.height}px`,
-          transform: `translateY(${vv.offsetTop}px)`,
-        });
-      } else els.app.removeAttribute("style");
+      queued = false;
+      Object.assign(els.app.style, {
+        position: "fixed",
+        left: "0",
+        right: "0",
+        top: "0",
+        height: `${vv.height}px`,
+        transform: vv.offsetTop ? `translateY(${vv.offsetTop}px)` : "",
+      });
+      if (window.scrollY) window.scrollTo(0, 0);
+    };
+    const soon = () => {
+      if (!queued) (queued = true), requestAnimationFrame(fit);
     };
+    fit();
     vv.addEventListener("resize", fit);
-    vv.addEventListener("scroll", fit);
+    vv.addEventListener("scroll", soon);
     addEventListener("resize", fit);
+    addEventListener("scroll", soon, { passive: true });
   }
 
   // ---------- messages ----------
 
   function messageEl(m) {
     const time = clock(m.createdAt);
-    const body = m.role === "tester" && m.body === "(screenshot)" && m.images.length ? null : el("div", { className: "body" });
+    const body = m.role === "guest" && m.body === "(screenshot)" && m.images.length ? null : el("div", { className: "body" });
     if (body) body.innerHTML = window.renderMarkdown(m.body);
     const shots = m.images.length
       ? el(
@@ -156,11 +166,12 @@
         )
       : null;
 
-    if (m.role === "tester") {
-      const who = owner ? session.tester : "You";
-      return el("li", { className: "msg tester" }, el("div", { className: "bubble" }, body, shots), el("div", { className: "stamp", textContent: `${who} · ${time}` }));
+    if (m.role === "guest") {
+      const who = owner ? session.guest : "You";
+      return el("li", { className: "msg guest" }, el("div", { className: "bubble" }, body, shots), el("div", { className: "stamp", textContent: `${who} · ${time}` }));
     }
-    if (m.role === "error") return el("li", { className: "msg error" }, body);
+    // Your own view says why a reply failed; guests just get the apology.
+    if (m.role === "error") return el("li", { className: "msg error" }, body, m.detail ? el("div", { className: "detail mono", textContent: m.detail }) : null);
     const meta = el("div", { className: "meta" }, el("span", { className: "who", textContent: agentName() }), ` · ${time}`);
     return el("li", { className: "msg agent" }, meta, body, shots, owner && m.turn ? trailEl(m.turn) : null);
   }
@@ -183,11 +194,12 @@
   function addMessage(m, { prepend = false } = {}) {
     if (seen.has(m.id)) return;
     seen.add(m.id);
+    kept.set(m.id, m);
     const node = messageEl(m);
     if (prepend) els.messages.prepend(node);
     else if (live?.el.isConnected) els.messages.insertBefore(node, live.el);
     else els.messages.append(node);
-    if (m.role !== "tester" && !prepend) clearLive();
+    if (m.role !== "guest" && !prepend) clearLive();
   }
 
   function showLive(state) {
@@ -253,21 +265,65 @@
     els.status.hidden = false;
     let dot = "on";
     let label = owner ? `${agentName()} · live` : speaker();
-    if (offline) (dot = "warn"), (label = "reconnecting");
-    else if (live) (dot = "busy"), (label = owner ? `${agentName()} is replying` : "replying…");
+    if (offline) (dot = "off"), (label = offlineWhy === "connection" ? "reconnecting" : "offline");
+    // A reply in progress shows as typing dots in the conversation; the
+    // header stays put.
+    else if (live && owner) (dot = "busy"), (label = `${agentName()} is replying`);
     else if (!owner && repliesLeft === 0) (dot = "warn"), (label = "paused");
     else if (owner && session.status !== "open") (dot = "off"), (label = "ended");
     els.statusDot.className = `dot ${dot}`;
     els.statusText.textContent = label;
     if (!owner && repliesLeft != null) {
       els.chip.hidden = false;
-      els.chip.textContent = `${repliesLeft} left`;
+      els.chip.textContent = `${repliesLeft}/${session.replyLimit}`;
       els.chip.title = `${repliesLeft} of ${session.replyLimit} replies left in this chat`;
       els.chip.className = `chip ${repliesLeft <= 10 ? "low" : ""}`;
     }
   }
 
-  // Everything a tester might wonder about, behind the info button.
+  // The conversation as plain text, everything from the start, for the guest
+  // to keep.
+  async function saveCopy() {
+    while (more) {
+      const before = seen.size;
+      await loadOlder();
+      if (seen.size === before) break;
+    }
+    const projectName = session?.project ?? knownProject ?? "a project";
+    const lines = [`parley about ${projectName}, ${new Date().toLocaleDateString()}`, ""];
+    for (const m of [...kept.values()].sort((a, b) => a.id - b.id)) {
+      if (m.role === "error") continue;
+      lines.push(`${m.role === "guest" ? "You" : agentName()} · ${new Date(m.createdAt).toLocaleString()}`, m.body.trim(), "");
+    }
+    const a = el("a", { href: URL.createObjectURL(new Blob([lines.join("\n")], { type: "text/plain" })), download: `parley-${projectName.replace(/[^\w-]+/g, "-")}.txt` });
+    document.body.append(a);
+    a.click();
+    a.remove();
+  }
+
+  // The guest is done: the link stops working for everyone, and the sender
+  // keeps what was said. Two taps, so it can't happen by accident.
+  async function endConversation(button) {
+    if (!button.dataset.armed) {
+      button.dataset.armed = "1";
+      button.textContent = "Tap again to end it";
+      return;
+    }
+    button.disabled = true;
+    button.textContent = "Ending…";
+    try {
+      await transport.end();
+      closeSheet();
+      showEnded();
+    } catch (error) {
+      button.disabled = false;
+      delete button.dataset.armed;
+      button.textContent = "End conversation";
+      banner(`Couldn't end it just now. ${error.message}`);
+    }
+  }
+
+  // Details and actions for the guest, behind the button in the header.
   function openSheet() {
     const who = sender?.name || ownerName || "The person who sent this link";
     const whom = ownerName || "them";
@@ -278,11 +334,22 @@
     const facts = [];
     if (sender) facts.push(["Sent by", `${sender.name} (${sender.email})`]);
     if (session) facts.push(["Talking with", session.model ? `${agentName()} (${session.model})` : agentName()]);
-    if (session && repliesLeft != null) facts.push(["Replies left", `${repliesLeft} of ${session.replyLimit}`]);
+    if (session && repliesLeft != null) facts.push(["Replies left", `${repliesLeft}/${session.replyLimit}`]);
+    const save = el("button", { className: "btn", type: "button", textContent: "Save a copy" });
+    save.onclick = () => saveCopy().catch(() => banner("Couldn't save a copy just now."));
+    const end = el("button", { className: "btn danger", type: "button", textContent: "End conversation" });
+    end.onclick = () => endConversation(end);
+    const open = !ended && session?.status !== "ended";
     els.sheetBody.replaceChildren(
       el("p", {}, strong(who), " set this up to hear what you think of ", strong(projectName), sender ? `. parley.im checked it's really them, with Google.` : "."),
       kv(facts),
-      el("p", {}, `${agentName()} runs on ${theirs} computer. It can read ${projectName}'s code to answer your questions, but it can't change anything. Everything you write here, screenshots included, is saved for ${whom}.`),
+      el("div", { className: "sheet-actions" }, save, open ? end : null),
+      open ? el("p", { className: "fine" }, `Ending it stops this link working, for you and anyone else who has it. ${ownerName || "They"} keep${ownerName ? "s" : ""} everything said so far.`) : null,
+      el(
+        "details",
+        { className: "how" },
+        el("summary", { textContent: "How this works" }),
+        el("p", {}, `${agentName()} runs on ${theirs} computer. It can read ${projectName}'s code to answer your questions, but it can't change anything. Everything you write here, screenshots included, is saved for ${whom}.`),
       relay
         ? el(
             "p",
@@ -290,7 +357,8 @@
             `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. parley.im passes them along but can't read them; it knows who sent this link, the project's name and when messages go by. The key is the part of your link after the #, so anyone with the whole link can read this chat: keep it to yourself. (This page's code comes from parley.im, so that promise relies on parley.im serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
           )
         : null,
-      el("p", {}, `When the replies run out, the chat pauses until ${whom} adds more. Replies come from ${theirs} computer, so it needs to be on, and the link stops working for good if ${whom} ends the chat.`),
+        el("p", {}, `When the replies run out, the chat pauses until ${whom} adds more. Replies come from ${theirs} computer, so it needs to be on, and the link stops working for good once the chat ends.`),
+      ),
     );
     els.sheet.hidden = els.sheetBack.hidden = false;
     els.sheetClose.focus();
@@ -301,16 +369,16 @@
   els.sheetBack.addEventListener("click", closeSheet);
   addEventListener("keydown", (e) => e.key === "Escape" && closeSheet());
 
-  // The tester's intro. On parley.im links it can show before the
+  // The guest's intro. On parley.im links it can show before the
   // conversation loads, from what parley.im vouches for.
-  function paintTester() {
+  function paintGuest() {
     const name = ownerName || sender?.name?.split(" ")[0];
     const projectName = session?.project ?? knownProject ?? "";
     els.project.textContent = projectName;
     els.infoBtn.hidden = false;
     els.intro.hidden = false;
     const strong = (t) => el("strong", { textContent: t });
-    const more = el("button", { type: "button", textContent: "About this chat" });
+    const more = el("button", { type: "button", textContent: "Details" });
     more.onclick = openSheet;
     els.intro.replaceChildren(
       name ? strong(name) : "Someone",
@@ -389,9 +457,9 @@
       el("span", { className: "slash", textContent: "/" }),
       el("a", { className: "product", href: "/", textContent: "Control panel" }),
       el("span", { className: "slash", textContent: "/" }),
-      el("span", { className: "here", textContent: `${s.tester} on ${s.project}` }),
+      el("span", { className: "here", textContent: `${s.guest} on ${s.project}` }),
     );
-    document.title = `${s.tester} on ${s.project} · parley`;
+    document.title = `${s.guest} on ${s.project} · parley`;
     const used = s.replyLimit - s.repliesLeft;
     const pct = Math.min(100, Math.round((used / s.replyLimit) * 100));
     const kv = (pairs) => el("dl", { className: "kv" }, ...pairs.flatMap(([k, v]) => [el("dt", { textContent: k }), el("dd", { textContent: v })]));
@@ -420,14 +488,14 @@
 
     els.side.textContent = "";
     els.side.append(
-      el("h2", { textContent: s.tester }),
+      el("h2", { textContent: s.guest }),
       el("div", { className: "sub", textContent: `${s.project} · ${s.agent === "codex" ? "Codex" : "Claude"} · ${open ? (s.busy ? "replying now" : "open") : "ended"}` }),
       el(
         "section",
         {},
         el("div", { className: "label", textContent: "Replies" }),
         el("div", { className: `meter ${s.repliesLeft === 0 ? "full" : ""}` }, el("span", { style: `width:${pct}%` })),
-        el("div", { className: "cell-muted", textContent: s.repliesLeft === 0 ? `All ${s.replyLimit} used. The tester is paused until you add more.` : `${used} of ${s.replyLimit} used, ${s.repliesLeft} left` }),
+        el("div", { className: "cell-muted", textContent: s.repliesLeft === 0 ? `All ${s.replyLimit} used. The guest is paused until you add more.` : `${used} of ${s.replyLimit} used, ${s.repliesLeft} left` }),
         open
           ? el(
               "div",
@@ -442,15 +510,15 @@
         "section",
         {},
         kv([
-          ["Messages from tester", String(s.stats.tester_messages)],
+          ["Messages from guest", String(s.stats.guest_messages)],
           ["Model", s.model ?? "known after the first reply"],
           ["Spend", s.stats.cost_usd ? `$${s.stats.cost_usd.toFixed(2)} at API prices` : s.agent === "codex" ? "not reported by Codex" : "$0.00"],
-          ["Last heard from", ago(s.stats.last_tester_at)],
+          ["Last heard from", ago(s.stats.last_guest_at)],
           ["Started", ago(s.createdAt)],
           ["Session", s.id],
         ]),
       ),
-      open ? el("section", {}, el("div", { className: "label", textContent: "Tester link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, linkInput, copy)) : null,
+      open ? el("section", {}, el("div", { className: "label", textContent: "Guest link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, linkInput, copy)) : null,
       el("section", {}, el("div", { className: "label", textContent: "Brief" }), el("div", { className: "brief-text", style: "margin-top:6px", textContent: s.brief })),
       el("section", {}, el("div", { className: "actions", style: "margin-top:0" }, kill), el("div", { className: "cell-muted", style: "margin-top:8px", textContent: open ? "Ending kills the link for good. You keep the transcript." : "Deleting erases the transcript and screenshots." })),
     );
@@ -491,6 +559,7 @@
 
   const problemError = (status, code, message) => Object.assign(new Error(message), { status, code });
   const offlineError = () => Object.assign(new Error(`${ownerLabel()[0].toUpperCase() + ownerLabel().slice(1)}'s computer is offline right now.`), { offline: true });
+  const connectionError = () => Object.assign(new Error("The connection dropped. Reconnecting…"), { offline: true, connection: true });
 
   function httpTransport() {
     let h;
@@ -545,8 +614,12 @@
         if (!res.ok) throw await problemFrom(res);
         return res.json();
       },
-      async send(text, images) {
-        const res = await fetch(`${base}/api/messages`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text, images }) });
+      async end() {
+        const res = await fetch(`${base}/api/end`, { method: "POST" });
+        if (!res.ok) throw await problemFrom(res);
+      },
+      async send(text, images, cid) {
+        const res = await fetch(`${base}/api/messages`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text, images, cid }) });
         if (!res.ok) throw await problemFrom(res);
         return res.json();
       },
@@ -580,13 +653,16 @@
       bad_request: "This link's key doesn't match the conversation. Ask for the link again.",
     };
 
-    async function request(op, params = {}, timeoutMs = 30_000) {
+    async function request(op, params = {}, timeoutMs = 15_000) {
       if (ws?.readyState !== WebSocket.OPEN) throw offlineError();
       const r = crypto.randomUUID();
-      const d = await S.seal(key, token, "req", { op, r, at: Date.now(), ...params });
+      const d = await S.seal(key, token, "req", { op, r, at: Date.now() + clock, ...params });
       return new Promise((resolve, reject) => {
+        // No answer means the computer is gone, whatever parley.im last said:
+        // show it offline until it's heard from again.
         const timer = setTimeout(() => {
           pending.delete(r);
+          h.offline(true, "computer");
           reject(problemError(504, "timeout", `No answer from ${ownerLabel()}'s computer. Try again in a moment.`));
         }, timeoutMs);
         pending.set(r, { resolve, reject, timer });
@@ -606,7 +682,7 @@
           for (const item of early) if (item.epoch === epoch && item.seq > cursor) (cursor = item.seq), h.event(item.event);
         } catch (error) {
           if (error.code === "ended") h.ended();
-          else if (error.offline) h.offline(true);
+          else if (error.offline) h.offline(true, error.connection ? "connection" : "computer");
           else if (error.code === "bad_request") h.badKey();
         } finally {
           early = [];
@@ -623,9 +699,13 @@
         if (!p) return;
         pending.delete(m.r);
         clearTimeout(p.timer);
-        if (m.offline) return p.reject(offlineError());
+        if (m.offline) {
+          h.offline(true, "computer");
+          return p.reject(offlineError());
+        }
+        h.offline(false, "computer");
         if (m.error) return p.reject(problemError(m.error === "ended" ? 410 : 400, m.error, RELAY_ERRORS[m.error] ?? "That didn't work."));
-        const body = await S.open(key, token, "res", m.d);
+        const body = await S.open(key, token, `res:${m.r}`, m.d);
         return body.ok ? p.resolve(body.result) : p.reject(problemError(body.status, body.error, body.message));
       }
       if (m.t === "evt") {
@@ -636,6 +716,7 @@
         return;
       }
       if (m.t === "host") {
+        if (typeof m.now === "number") clock = m.now - Date.now();
         h.offline(!m.on);
         if (m.on) load();
         return;
@@ -643,21 +724,43 @@
       if (m.t === "ended") h.ended();
     }
 
+    // Frames are handled one at a time, in order: decrypting is asynchronous,
+    // and a later update finishing first would make an earlier one look old.
+    let frames = Promise.resolve();
+    // parley.im's clock minus this phone's, so a request's age is judged the
+    // same way at both ends whatever time the phone thinks it is.
+    let clock = 0;
+    let retry = null;
+
     function connect() {
+      clearTimeout(retry);
+      retry = null;
       ws = new WebSocket(`${location.origin.replace(/^http/, "ws")}${base}/ws`);
-      ws.onopen = () => (failures = 0);
-      ws.onmessage = (event) => onFrame(event.data).catch((error) => console.error(error));
+      ws.onopen = () => {
+        failures = 0;
+        h.offline(false, "connection");
+      };
+      ws.onmessage = (event) => (frames = frames.then(() => onFrame(event.data)).catch((error) => console.error(error)));
       ws.onclose = (event) => {
-        for (const p of pending.values()) clearTimeout(p.timer), p.reject(offlineError());
+        for (const p of pending.values()) clearTimeout(p.timer), p.reject(connectionError());
         pending.clear();
         if (event.code === 4410) return h.ended();
         if (ended) return;
         failures++;
-        if (failures > 1) h.offline(true);
-        setTimeout(connect, Math.min(1000 * failures, 10_000));
+        // This page lost its own connection (a phone switching networks, or
+        // waking up); the sender's computer may be fine.
+        if (failures > 1) h.offline(true, "connection");
+        retry = setTimeout(connect, Math.min(1000 * failures, 10_000));
       };
     }
 
+    // Back from the background or back online: reconnect now, not on a timer.
+    const wake = () => {
+      if (!ended && document.visibilityState === "visible" && retry) connect();
+    };
+    document.addEventListener("visibilitychange", wake);
+    window.addEventListener("online", wake);
+
     return {
       async start(handlers) {
         h = handlers;
@@ -669,7 +772,8 @@
         connect();
       },
       history: (before) => request("history", { before }),
-      send: (text, images) => request("send", { text, images }),
+      send: (text, images, cid) => request("send", { text, images, cid }),
+      end: () => request("end"),
       async upload(file) {
         const sealed = await S.sealBytes(key, token, "blob", new Uint8Array(await file.arrayBuffer()));
         const res = await fetch(`${base}/blobs`, { method: "PUT", body: sealed });
@@ -686,7 +790,7 @@
               // while it's offline; forget the failure and try again later.
               const res = await fetch(`${base}/blobs/${ref.id}`);
               if (!res.ok) throw new Error(`screenshot ${res.status}`);
-              const plain = await S.openBytes(key, token, "blob", new Uint8Array(await res.arrayBuffer()));
+              const plain = await S.openBytes(key, token, `shot:${ref.id}`, new Uint8Array(await res.arrayBuffer()));
               return URL.createObjectURL(new Blob([plain], { type: ref.type }));
             })().catch((error) => {
               images.delete(ref.id);
@@ -713,16 +817,24 @@
     for (const m of state.messages) addMessage(m);
     if (state.live) showLive(state.live);
     if (owner) paintSide();
-    else paintTester();
+    else paintGuest();
     banner("");
     toEnd();
   }
 
-  function setOffline(on) {
-    if (on === offline) return;
+  // Offline means one of two things: the sender's computer (asleep, or
+  // parley isn't running), or this page's own connection.
+  let offlineWhy = null;
+  function setOffline(on, why = "computer") {
+    if (!on && offlineWhy && why !== offlineWhy) return;
+    if (on === offline && (!on || why === offlineWhy)) return;
     offline = on;
+    offlineWhy = on ? why : null;
+    els.app.classList.toggle("offline", on);
     paintStatus();
-    if (on) {
+    updateSend();
+    if (on && why === "connection") banner("The connection dropped. Reconnecting…");
+    else if (on) {
       const whose = ownerName ? `${ownerName}'s` : sender ? `${sender.name.split(" ")[0]}'s` : "The sender's";
       banner(`${whose} computer is offline right now, so nothing can be sent or loaded. This page will reconnect on its own.`);
     } else banner("");
@@ -757,7 +869,7 @@
   function updateSend() {
     const length = els.input.value.trim().length;
     const ready = !attachments.some((a) => a.uploading);
-    els.send.disabled = sending || !ready || length > maxText || (!length && !attachments.length);
+    els.send.disabled = offline || sending || !ready || length > maxText || (!length && !attachments.length);
   }
 
   // Browsers with field-sizing size the box themselves (no jumping while you
@@ -783,9 +895,28 @@
     updateSend();
   }
 
+  // Phone photos are often several MB, more than the agents take, so big
+  // ones are scaled down (2000 px on the long side) before they're sent.
+  async function shrink(file) {
+    if (file.type === "image/gif" || file.size <= 1_500_000) return file;
+    try {
+      const bitmap = await createImageBitmap(file);
+      const scale = Math.min(1, 2000 / Math.max(bitmap.width, bitmap.height));
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(bitmap.width * scale);
+      canvas.height = Math.round(bitmap.height * scale);
+      canvas.getContext("2d").drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.85));
+      return blob && blob.size < file.size ? new File([blob], "screenshot.jpg", { type: "image/jpeg" }) : file;
+    } catch {
+      return file;
+    }
+  }
+
   async function addFiles(files) {
-    for (const file of files) {
-      if (!/^image\/(png|jpeg|gif|webp)$/.test(file.type)) {
+    for (const original of files) {
+      const file = await shrink(original);
+      if (!/^image\/(png|jpeg|gif|webp)$/.test(original.type)) {
         banner("Only images can be added: PNG, JPEG, GIF or WebP.");
         continue;
       }
@@ -810,10 +941,14 @@
     if (els.send.disabled) return;
     const text = els.input.value.trim();
     const images = attachments.filter((a) => a.handle).map((a) => a.handle);
+    // One id per message you mean to send, kept until it goes through, so
+    // sending again after a lost answer can't post it twice.
+    draftId ??= crypto.randomUUID();
     sending = true;
     updateSend();
     try {
-      const { message } = await transport.send(text, images);
+      const { message } = await transport.send(text, images, draftId);
+      draftId = null;
       addMessage(message);
       toEnd(); // you just spoke: back to the bottom, and follow from here
       els.input.value = "";
@@ -842,6 +977,7 @@
   }
 
   els.input.addEventListener("input", () => {
+    draftId = null; // edited: a new message, not a resend
     autosize();
     paintComposer();
   });
@@ -882,7 +1018,7 @@
   }
 
   let started = false;
-  if (relay) paintTester();
+  if (relay) paintGuest();
   transport.start({
     state(state) {
       showState(state);

package/web/dashboard.js

@@ -0,0 +1,41 @@
+// Keeps the parley.im dashboard current: who's on each session's page right
+// now, when they were last active, and whether a reply is coming in. It
+// never shows what was said; parley.im doesn't have that.
+(() => {
+  const ago = (ms) => {
+    const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
+    if (s < 60) return "just now";
+    if (s < 3600) return `${Math.round(s / 60)}m ago`;
+    if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+    return `${Math.round(s / 86400)}d ago`;
+  };
+  const dot = (kind, text) => {
+    const span = document.createElement("span");
+    span.className = `dot${kind ? ` ${kind}` : ""}`;
+    return [span, document.createTextNode(text)];
+  };
+  // Matches live() in relay/src/pages.ts.
+  const liveNodes = (s) => {
+    if (s.online === false) return dot("off", "computer offline");
+    if (s.replying) return dot("busy", "replying");
+    if (s.here) return dot("on", s.here > 1 ? `${s.here} people here` : "here now");
+    if (s.active) return dot("", `active ${ago(s.active)}`);
+    return dot("", "not opened yet");
+  };
+
+  async function refresh() {
+    if (document.hidden) return;
+    try {
+      const res = await fetch("/dashboard.json", { cache: "no-store" });
+      if (!res.ok) return;
+      const { sessions } = await res.json();
+      const rows = [...document.querySelectorAll("[data-session]")];
+      // A session opened or ended elsewhere: show the page fresh.
+      if (rows.map((r) => r.dataset.session).sort().join() !== sessions.map((s) => s.id).sort().join()) return location.reload();
+      for (const s of sessions) rows.find((r) => r.dataset.session === s.id)?.querySelector(".live")?.replaceChildren(...liveNodes(s));
+    } catch {}
+  }
+
+  setInterval(refresh, 4000);
+  document.addEventListener("visibilitychange", refresh);
+})();

package/web/ended.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>This parley has ended</title>
-<link rel="icon" href="/static/icon.svg">
+<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>

package/web/missing.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>Link not found</title>
-<link rel="icon" href="/static/icon.svg">
+<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>

package/web/panel.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Control panel · parley</title>
-<link rel="icon" href="/static/icon.svg">
+<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body class="panel">
@@ -20,7 +20,7 @@
 
   <div class="toolbar">
     <div class="tabs" id="tabs" role="tablist"></div>
-    <input class="search" id="search" type="search" placeholder="Filter by tester or project" aria-label="Filter sessions">
+    <input class="search" id="search" type="search" placeholder="Filter by guest or project" aria-label="Filter sessions">
     <button class="btn primary" id="new" type="button">
       <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New session
     </button>
@@ -41,8 +41,8 @@
       <span class="help">The interviewer runs here, read-only.</span>
     </div>
     <div class="field">
-      <label for="f-tester">Who it's for</label>
-      <input id="f-tester" name="tester" placeholder="Sam" required autocomplete="off">
+      <label for="f-guest">Who it's for</label>
+      <input id="f-guest" name="guest" placeholder="Sam" required autocomplete="off">
     </div>
     <div class="field">
       <label for="f-brief">Brief</label>