@parley-im/parley 0.1.2 → 0.2.0

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;
@@ -21,6 +21,7 @@
   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 +110,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 +165,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);
   }
@@ -187,7 +197,7 @@
     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) {
@@ -254,20 +264,22 @@
     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…");
+    // 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.
+  // Everything a guest might wonder about, behind the info button.
   function openSheet() {
     const who = sender?.name || ownerName || "The person who sent this link";
     const whom = ownerName || "them";
@@ -301,9 +313,9 @@
   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;
@@ -389,9 +401,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 +432,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 +454,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 +503,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 +558,8 @@
         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 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();
       },
@@ -583,7 +596,7 @@
     async function request(op, params = {}, timeoutMs = 30_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) => {
         const timer = setTimeout(() => {
           pending.delete(r);
@@ -606,7 +619,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 = [];
@@ -625,7 +638,7 @@
         clearTimeout(p.timer);
         if (m.offline) return p.reject(offlineError());
         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 +649,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 +657,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 +705,7 @@
         connect();
       },
       history: (before) => request("history", { before }),
-      send: (text, images) => request("send", { text, images }),
+      send: (text, images, cid) => request("send", { text, images, cid }),
       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 +722,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 +749,22 @@
     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;
     paintStatus();
-    if (on) {
+    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("");
@@ -783,9 +825,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 +871,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 +907,7 @@
   }
 
   els.input.addEventListener("input", () => {
+    draftId = null; // edited: a new message, not a resend
     autosize();
     paintComposer();
   });
@@ -882,7 +948,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>

package/web/panel.js

@@ -86,7 +86,7 @@
     const q = query.toLowerCase();
     const shown = sessions
       .filter((s) => (tab === "all" ? true : tab === "open" ? s.status === "open" : s.status !== "open"))
-      .filter((s) => !q || `${s.tester} ${s.project} ${s.projectDir}`.toLowerCase().includes(q));
+      .filter((s) => !q || `${s.guest} ${s.project} ${s.projectDir}`.toLowerCase().includes(q));
 
     const head = el(
       "div",
@@ -113,16 +113,16 @@
   function row(s) {
     const open = s.status === "open";
     const used = s.replyLimit - s.repliesLeft;
-    const name = el("div", { className: "name" }, el("span", { className: `dot ${!open ? "" : s.busy ? "busy" : s.repliesLeft === 0 ? "warn" : "on"}` }), s.tester);
+    const name = el("div", { className: "name" }, el("span", { className: `dot ${!open ? "" : s.busy ? "busy" : s.repliesLeft === 0 ? "warn" : "on"}` }), s.guest);
     if (s.stats.unread) name.append(el("span", { className: "badge", textContent: `${s.stats.unread} new` }));
     const who = el("a", { className: "who-cell", href: `/o/${s.id}`, style: "text-decoration:none" }, name, el("div", { className: "where", textContent: `${s.project} · ${s.model ?? (s.agent === "codex" ? "Codex" : "Claude")} · ${s.id}`, title: s.projectDir }));
 
     const activity = el(
       "div",
       { className: "c-activity cell-muted" },
-      !open ? `ended ${ago(s.endedAt)}` : s.busy ? "replying now" : s.stats.last_tester_at ? `heard from ${ago(s.stats.last_tester_at)}` : "hasn't said anything yet",
+      !open ? `ended ${ago(s.endedAt)}` : s.busy ? "replying now" : s.stats.last_guest_at ? `heard from ${ago(s.stats.last_guest_at)}` : "hasn't said anything yet",
     );
-    const messages = el("div", { className: "c-messages num", textContent: `${s.stats.tester_messages} message${s.stats.tester_messages === 1 ? "" : "s"}` });
+    const messages = el("div", { className: "c-messages num", textContent: `${s.stats.guest_messages} message${s.stats.guest_messages === 1 ? "" : "s"}` });
     const pct = Math.min(100, Math.round((used / s.replyLimit) * 100));
     const replies = el(
       "div",
@@ -207,9 +207,9 @@
         await navigator.clipboard.writeText(s.link);
         copy.textContent = "Copied";
       };
-      $("made").replaceChildren(el("strong", { textContent: `Session for ${s.tester} is ready.` }), el("div", { className: "linkbox" }, link, copy), el("a", { className: "cell-muted", href: `/o/${s.id}`, textContent: "Open it" }));
+      $("made").replaceChildren(el("strong", { textContent: `Session for ${s.guest} is ready.` }), el("div", { className: "linkbox" }, link, copy), el("a", { className: "cell-muted", href: `/o/${s.id}`, textContent: "Open it" }));
       $("made").hidden = false;
-      $("f-tester").value = $("f-brief").value = $("f-greeting").value = "";
+      $("f-guest").value = $("f-brief").value = $("f-greeting").value = "";
       refresh();
     } catch (error) {
       $("form-error").textContent = error.message;