@parley-im/parley 0.0.0-stage → 0.1.1

package/web/chat.js

@@ -0,0 +1,901 @@
+(function () {
+  const { base, owner, maxText, relay, sender, project: knownProject } = window.PARLEY;
+  const $ = (id) => document.getElementById(id);
+  const els = {
+    project: $("project"), crumbs: $("crumbs"), status: $("status"), statusDot: $("status-dot"), statusText: $("status-text"),
+    banner: $("banner"), layout: $("layout"), scroll: $("scroll"), content: $("content"), intro: $("intro"),
+    older: $("older"), olderBtn: $("older-btn"), messages: $("messages"), dock: $("dock"), composer: $("composer"),
+    input: $("input"), send: $("send"), file: $("file"), attachments: $("attachments"), paused: $("paused"),
+    hints: $("hints"), hintLeft: $("hint-left"), hintRight: $("hint-right"), drop: $("drop"), side: $("side"),
+    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");
+
+  let session = null;
+  let ownerName = null;
+  let repliesLeft = null;
+  let more = false;
+  let loadingOlder = false;
+  const seen = new Set();
+  let live = null; // { el, text, steps, bodyEl, stepsEl }
+  let attachments = []; // { handle, preview, uploading }
+  let sending = false;
+  let ended = false;
+  let offline = false;
+
+  const agentName = () => (session?.agent === "codex" ? "Codex" : "Claude");
+  const ownerLabel = () => ownerName || "the developer";
+  const clock = (iso) => new Date(iso).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  const touch = matchMedia("(pointer: coarse)").matches;
+  const el = (tag, props = {}, ...children) => {
+    const node = Object.assign(document.createElement(tag), props);
+    node.append(...children.filter((c) => c != null));
+    return node;
+  };
+
+  // ---------- staying at the bottom ----------
+  //
+  // If you're following along at the bottom, you stay there whatever changes:
+  // your own message, streamed text, status lines, images, a resize, the
+  // keyboard. Only you can unpin it, by scrolling up yourself (wheel, touch,
+  // keys, scrollbar). Scroll events the page causes don't count, which is
+  // what used to strand you above your own message.
+
+  const scroller = els.scroll;
+  const PIN = 48;
+  let following = true;
+  let fromBottom = 0;
+  let viewHeight = scroller.clientHeight;
+  let yoursUntil = 0;
+  let touching = false;
+  let dragging = false;
+
+  const distance = () => Math.max(0, scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight);
+  const yours = () => touching || dragging || performance.now() < yoursUntil;
+  const markYours = (ms) => (yoursUntil = Math.max(yoursUntil, performance.now() + ms));
+
+  scroller.addEventListener("wheel", () => markYours(250), { passive: true });
+  scroller.addEventListener("touchstart", () => (touching = true), { passive: true });
+  // Momentum keeps scrolling after your finger lifts.
+  scroller.addEventListener("touchend", () => ((touching = false), markYours(1500)), { passive: true });
+  scroller.addEventListener("pointerdown", (e) => {
+    if (e.target === scroller) dragging = true; // the scrollbar
+  });
+  addEventListener("pointerup", () => {
+    if (dragging) (dragging = false), markYours(300);
+  });
+  addEventListener("keydown", (e) => {
+    if (e.target === els.input) return;
+    if (["PageUp", "PageDown", "ArrowUp", "ArrowDown", "Home", "End", " "].includes(e.key)) markYours(500);
+  });
+
+  function toEnd() {
+    following = true;
+    fromBottom = 0;
+    scroller.scrollTop = scroller.scrollHeight;
+  }
+
+  function viewResized() {
+    viewHeight = scroller.clientHeight;
+    if (following) toEnd();
+    else scroller.scrollTop = scroller.scrollHeight - scroller.clientHeight - fromBottom;
+  }
+
+  scroller.addEventListener(
+    "scroll",
+    () => {
+      if (scroller.clientHeight !== viewHeight) return viewResized();
+      const d = distance();
+      if (d < PIN) {
+        following = true;
+        fromBottom = 0;
+      } else if (yours()) {
+        following = false;
+        fromBottom = d;
+      }
+    },
+    { passive: true },
+  );
+
+  // The conversation changed size.
+  new ResizeObserver(() => {
+    if (following) toEnd();
+    else fromBottom = distance();
+  }).observe(els.content);
+
+  // The view changed size: window, keyboard, composer growing.
+  new ResizeObserver(() => {
+    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.
+  const vv = window.visualViewport;
+  if (vv) {
+    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");
+    };
+    vv.addEventListener("resize", fit);
+    vv.addEventListener("scroll", fit);
+    addEventListener("resize", fit);
+  }
+
+  // ---------- 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" });
+    if (body) body.innerHTML = window.renderMarkdown(m.body);
+    const shots = m.images.length
+      ? el(
+          "div",
+          { className: "shots" },
+          ...m.images.map((ref) => {
+            const img = el("img", { alt: "Screenshot" });
+            transport.image(ref).then(
+              (src) => {
+                img.src = src;
+                img.addEventListener("click", () => lightbox(src));
+              },
+              () => (img.alt = "Screenshot (can't load while the sender's computer is offline)"),
+            );
+            return img;
+          }),
+        )
+      : 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 === "error") return el("li", { className: "msg error" }, body);
+    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);
+  }
+
+  // Your view: what the reply looked at, which model wrote it, and how.
+  function trailEl(turn) {
+    const bits = [`${turn.activity.length} lookup${turn.activity.length === 1 ? "" : "s"}`];
+    if (turn.seconds != null) bits.push(`${turn.seconds}s`);
+    if (turn.model) bits.push(turn.model);
+    if (turn.auth) bits.push(turn.auth === "none" ? "subscription" : turn.auth);
+    if (turn.costUsd != null) bits.push(`$${Number(turn.costUsd).toFixed(3)} at API prices`);
+    return el(
+      "details",
+      { className: "trail" },
+      el("summary", { textContent: bits.join(" · ") }),
+      el("ul", {}, ...turn.activity.map((line) => el("li", { textContent: line }))),
+    );
+  }
+
+  function addMessage(m, { prepend = false } = {}) {
+    if (seen.has(m.id)) return;
+    seen.add(m.id);
+    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();
+  }
+
+  function showLive(state) {
+    clearLive();
+    const meta = el("div", { className: "meta" }, el("span", { className: "who", textContent: agentName() }), " · working");
+    const bodyEl = el("div", { className: "body" });
+    const stepsEl = el("ul", { className: "steps" });
+    const node = el("li", { className: "msg agent live" }, meta, bodyEl, stepsEl);
+    live = { el: node, text: state.text || "", steps: state.activity ? [state.activity] : [], bodyEl, stepsEl };
+    els.messages.append(node);
+    paintLive();
+    paintStatus();
+  }
+
+  function paintLive() {
+    if (!live) return;
+    if (live.text.trim()) {
+      live.bodyEl.innerHTML = window.renderMarkdown(live.text);
+      live.bodyEl.lastElementChild?.classList.add("cursor");
+    } else live.bodyEl.innerHTML = `<span class="thinking"><span></span><span></span><span></span></span>`;
+    // The last few things it looked at, newest highlighted.
+    live.stepsEl.textContent = "";
+    live.steps.slice(-4).forEach((line, i, shown) => live.stepsEl.append(el("li", { className: i === shown.length - 1 ? "now" : "", textContent: line })));
+  }
+
+  function clearLive() {
+    live?.el.remove();
+    live = null;
+    paintStatus();
+  }
+
+  async function loadOlder() {
+    if (!more || loadingOlder) return;
+    const oldest = Math.min(...seen);
+    if (!Number.isFinite(oldest)) return;
+    loadingOlder = true;
+    els.olderBtn.textContent = "Loading…";
+    try {
+      const data = await transport.history(oldest);
+      // Keep what you're looking at in place while older messages go above it.
+      const before = scroller.scrollHeight;
+      for (const m of data.messages.slice().reverse()) addMessage(m, { prepend: true });
+      scroller.scrollTop += scroller.scrollHeight - before;
+      more = data.more;
+    } catch {
+      banner("Couldn't load earlier messages. Try again in a moment.");
+    } finally {
+      loadingOlder = false;
+      els.older.hidden = !more;
+      els.olderBtn.textContent = "Show earlier messages";
+    }
+  }
+  els.olderBtn.addEventListener("click", loadOlder);
+  new IntersectionObserver((entries) => entries.some((e) => e.isIntersecting) && loadOlder(), { root: scroller, rootMargin: "200px 0px 0px 0px" }).observe(els.older);
+
+  // ---------- chrome around the conversation ----------
+
+  // Who's answering, with the model once a reply says which one.
+  const speaker = () => (session?.model ? `${agentName()} ${session.model}`.replace(/^Claude (?=Opus|Sonnet|Haiku|Fable)/, "") : agentName());
+
+  function paintStatus() {
+    if (!session) return;
+    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…");
+    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.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.
+  function openSheet() {
+    const who = sender?.name || ownerName || "The person who sent this link";
+    const whom = ownerName || "them";
+    const theirs = ownerName ? `${ownerName}'s` : "their";
+    const projectName = session?.project ?? knownProject ?? "this project";
+    const strong = (t) => el("strong", { textContent: t });
+    const kv = (pairs) => el("dl", { className: "kv" }, ...pairs.flatMap(([k, v]) => [el("dt", { textContent: k }), el("dd", { textContent: v })]));
+    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}`]);
+    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}.`),
+      relay
+        ? el(
+            "p",
+            {},
+            `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.`),
+    );
+    els.sheet.hidden = els.sheetBack.hidden = false;
+    els.sheetClose.focus();
+  }
+  const closeSheet = () => (els.sheet.hidden = els.sheetBack.hidden = true);
+  els.infoBtn.addEventListener("click", openSheet);
+  els.sheetClose.addEventListener("click", closeSheet);
+  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
+  // conversation loads, from what parley.im vouches for.
+  function paintTester() {
+    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" });
+    more.onclick = openSheet;
+    els.intro.replaceChildren(
+      name ? strong(name) : "Someone",
+      " wants your take on ",
+      strong(projectName),
+      `. ${agentName()} can read the code but can't change anything, and everything here is saved for ${name || "them"}${relay ? ", end-to-end encrypted" : ""}. `,
+      more,
+    );
+    els.dock.hidden = !session;
+    if (session) paintComposer();
+  }
+
+  function paintComposer() {
+    if (owner || ended) return;
+    const out = repliesLeft === 0;
+    els.composer.hidden = out;
+    els.paused.hidden = !out;
+    els.paused.textContent = out ? `This session has used all its replies. ${ownerLabel()[0].toUpperCase() + ownerLabel().slice(1)} can add more, and then you can keep going here.` : "";
+    // The only line under the composer: a counter, once you're near the limit.
+    const length = els.input.value.trim().length;
+    els.hints.hidden = out || length <= maxText * 0.8;
+    els.hintLeft.textContent = "";
+    els.hintRight.className = length > maxText ? "over" : "warn";
+    els.hintRight.textContent = `${length.toLocaleString()} / ${maxText.toLocaleString()} characters${length > maxText ? ", too long to send" : ""}`;
+    updateSend();
+    paintStatus();
+  }
+
+  function showEnded() {
+    showNote("This parley has ended", "Thanks for the feedback. The conversation isn't available here anymore.");
+  }
+
+  // Replaces the conversation with a note, for good.
+  function showNote(title, text) {
+    if (ended) return;
+    ended = true;
+    clearLive();
+    banner("");
+    els.status.hidden = true;
+    els.chip.hidden = true;
+    els.layout.textContent = "";
+    els.layout.append(el("div", { className: "lost inline", style: "flex:1" }, el("div", {}, markEl(), el("h1", { textContent: title }), el("p", { textContent: text }))));
+  }
+
+  function markEl() {
+    const span = el("span", { className: "mark" });
+    span.innerHTML = `<svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg>`;
+    return span;
+  }
+
+  function banner(text) {
+    els.banner.hidden = !text;
+    els.banner.textContent = text || "";
+  }
+
+  // ---------- your session view ----------
+
+  let pendingConfirm = null;
+
+  async function refreshSide() {
+    if (!owner) return;
+    try {
+      const res = await fetch("/api/panel", { cache: "no-store" });
+      const data = await res.json();
+      const fresh = data.sessions.find((s) => s.id === session.id);
+      if (fresh) (session = fresh), paintSide();
+    } catch {}
+  }
+
+  function paintSide() {
+    const s = session;
+    els.side.hidden = false;
+    els.crumbs.innerHTML = "";
+    els.crumbs.append(
+      el("a", { className: "product", href: "/", textContent: "parley" }),
+      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}` }),
+    );
+    document.title = `${s.tester} 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 })]));
+    const ago = (iso) => (iso ? `${clock(iso)}, ${new Date(iso).toLocaleDateString([], { month: "short", day: "numeric" })}` : "not yet");
+
+    const limitInput = el("input", { type: "number", min: "1", value: String(s.replyLimit), style: "width:80px;height:32px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;background:var(--bg)" });
+    const setLimit = async (limit) => {
+      await post(`/api/sessions/${s.id}/limit`, { limit });
+      refreshSide();
+    };
+    const open = s.status === "open";
+    const linkInput = el("input", { value: s.link, readOnly: true });
+    linkInput.addEventListener("focus", () => linkInput.select());
+    const copy = el("button", { className: "btn", type: "button", textContent: "Copy" });
+    copy.onclick = async () => {
+      await navigator.clipboard.writeText(s.link);
+      copy.textContent = "Copied";
+      setTimeout(() => (copy.textContent = "Copy"), 1500);
+    };
+
+    const kill = confirmButton(open ? "End session" : "Delete", open ? "End it for good?" : "Erase everything?", async () => {
+      await post(`/api/sessions/${s.id}/${open ? "end" : "delete"}`);
+      if (open) refreshSide();
+      else location.href = "/";
+    });
+
+    els.side.textContent = "";
+    els.side.append(
+      el("h2", { textContent: s.tester }),
+      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` }),
+        open
+          ? el(
+              "div",
+              { className: "actions" },
+              Object.assign(el("button", { className: "btn", type: "button", textContent: "+50 replies" }), { onclick: () => setLimit(s.replyLimit + 50) }),
+              limitInput,
+              Object.assign(el("button", { className: "btn ghost", type: "button", textContent: "Set" }), { onclick: () => setLimit(Number(limitInput.value)) }),
+            )
+          : null,
+      ),
+      el(
+        "section",
+        {},
+        kv([
+          ["Messages from tester", String(s.stats.tester_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)],
+          ["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,
+      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." })),
+    );
+    paintStatus();
+  }
+
+  // A button that asks once more in place, instead of a browser dialog.
+  function confirmButton(label, question, action) {
+    const button = el("button", { className: "btn danger", type: "button", textContent: label });
+    button.onclick = async () => {
+      if (pendingConfirm !== button) {
+        pendingConfirm = button;
+        button.textContent = question;
+        button.className = "btn confirm";
+        setTimeout(() => {
+          if (pendingConfirm === button) (pendingConfirm = null), (button.textContent = label), (button.className = "btn danger");
+        }, 4000);
+        return;
+      }
+      pendingConfirm = null;
+      button.disabled = true;
+      await action();
+    };
+    return button;
+  }
+
+  async function post(path, body) {
+    const res = await fetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body ?? {}) });
+    if (!res.ok) banner(((await res.json().catch(() => null)) ?? {}).message || "That didn't work.");
+    return res;
+  }
+
+  // ---------- talking to the conversation ----------
+  //
+  // Local links and your own view talk plain HTTP to this computer. parley.im
+  // links talk through parley.im over one WebSocket, with every request,
+  // reply, update and screenshot sealed with the key from the link's "#".
+
+  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 });
+
+  function httpTransport() {
+    let h;
+    let epoch = null;
+    let cursor = 0;
+    const problemFrom = async (res) => {
+      const body = await res.json().catch(() => ({}));
+      return problemError(res.status, body.error, body.message || `Something went wrong (${res.status}).`);
+    };
+    async function load() {
+      const res = await fetch(`${base}/api/state`, { cache: "no-store" });
+      if (res.status === 410) return h.ended();
+      if (!res.ok) throw new Error(`state ${res.status}`);
+      const state = await res.json();
+      epoch = state.epoch;
+      cursor = state.seq;
+      h.state(state);
+    }
+    // Long polling: each request returns as soon as anything changes.
+    async function poll() {
+      let failures = 0;
+      while (!ended) {
+        try {
+          const res = await fetch(`${base}/api/updates?after=${cursor}&epoch=${epoch}`, { cache: "no-store", signal: AbortSignal.timeout(40_000) });
+          if (res.status === 410) return h.ended();
+          if (!res.ok) throw new Error(`updates ${res.status}`);
+          const data = await res.json();
+          failures = 0;
+          h.offline(false);
+          if (data.reset) {
+            await load();
+            continue;
+          }
+          for (const event of data.events) h.event(event);
+          cursor = data.seq;
+        } catch {
+          failures++;
+          if (failures > 1) h.offline(true);
+          await new Promise((r) => setTimeout(r, Math.min(1000 * failures, 5000)));
+        }
+      }
+    }
+    return {
+      start(handlers) {
+        h = handlers;
+        load()
+          .catch(() => banner("Couldn't load this session. Try refreshing."))
+          .finally(poll);
+      },
+      async history(before) {
+        const res = await fetch(`${base}/api/history?before=${before}`, { cache: "no-store" });
+        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 }) });
+        if (!res.ok) throw await problemFrom(res);
+        return res.json();
+      },
+      async upload(file) {
+        const res = await fetch(`${base}/api/uploads`, { method: "POST", headers: { "content-type": file.type }, body: file });
+        if (!res.ok) throw await problemFrom(res);
+        return (await res.json()).name;
+      },
+      image: async (src) => src,
+    };
+  }
+
+  function relayTransport() {
+    const S = window.ParleySeal;
+    const token = base.split("/").pop();
+    const pending = new Map();
+    const images = new Map();
+    let h;
+    let key = null;
+    let ws = null;
+    let epoch = null;
+    let cursor = 0;
+    let loading = null;
+    let early = [];
+    let failures = 0;
+
+    const RELAY_ERRORS = {
+      ended: "This parley has ended.",
+      slow_down: "That's a lot of messages very fast. Give it a few seconds.",
+      stale: "That didn't go through. Try again.",
+      bad_request: "This link's key doesn't match the conversation. Ask for the link again.",
+    };
+
+    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 });
+      return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+          pending.delete(r);
+          reject(problemError(504, "timeout", `No answer from ${ownerLabel()}'s computer. Try again in a moment.`));
+        }, timeoutMs);
+        pending.set(r, { resolve, reject, timer });
+        ws.send(JSON.stringify({ t: "req", r, d }));
+      });
+    }
+
+    async function load() {
+      if (loading) return loading;
+      loading = (async () => {
+        try {
+          const state = await request("state");
+          epoch = state.epoch;
+          cursor = state.seq;
+          h.state(state);
+          // Updates that raced the state: keep only the newer ones.
+          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.code === "bad_request") h.badKey();
+        } finally {
+          early = [];
+          loading = null;
+        }
+      })();
+      return loading;
+    }
+
+    async function onFrame(raw) {
+      const m = JSON.parse(raw);
+      if (m.t === "res") {
+        const p = pending.get(m.r);
+        if (!p) return;
+        pending.delete(m.r);
+        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);
+        return body.ok ? p.resolve(body.result) : p.reject(problemError(body.status, body.error, body.message));
+      }
+      if (m.t === "evt") {
+        const item = await S.open(key, token, "evt", m.d);
+        if (loading) return early.push(item);
+        if (item.epoch !== epoch) return load();
+        if (item.seq > cursor) (cursor = item.seq), h.event(item.event);
+        return;
+      }
+      if (m.t === "host") {
+        h.offline(!m.on);
+        if (m.on) load();
+        return;
+      }
+      if (m.t === "ended") h.ended();
+    }
+
+    function connect() {
+      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.onclose = (event) => {
+        for (const p of pending.values()) clearTimeout(p.timer), p.reject(offlineError());
+        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));
+      };
+    }
+
+    return {
+      async start(handlers) {
+        h = handlers;
+        try {
+          key = await S.importKey(location.hash.slice(1));
+        } catch {
+          return h.missingKey();
+        }
+        connect();
+      },
+      history: (before) => request("history", { before }),
+      send: (text, images) => request("send", { text, images }),
+      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 });
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) throw problemError(res.status, body.error, body.message || "Couldn't upload that image.");
+        return { id: body.id, type: file.type };
+      },
+      image(ref) {
+        if (!images.has(ref.id)) {
+          images.set(
+            ref.id,
+            (async () => {
+              // Screenshots live on the sender's computer, so one may not load
+              // 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()));
+              return URL.createObjectURL(new Blob([plain], { type: ref.type }));
+            })().catch((error) => {
+              images.delete(ref.id);
+              throw error;
+            }),
+          );
+        }
+        return images.get(ref.id);
+      },
+    };
+  }
+
+  const transport = relay ? relayTransport() : httpTransport();
+
+  function showState(state) {
+    session = state.session;
+    ownerName = state.ownerName;
+    repliesLeft = state.repliesLeft;
+    more = state.more;
+    els.older.hidden = !more;
+    els.messages.textContent = "";
+    seen.clear();
+    live = null;
+    for (const m of state.messages) addMessage(m);
+    if (state.live) showLive(state.live);
+    if (owner) paintSide();
+    else paintTester();
+    banner("");
+    toEnd();
+  }
+
+  function setOffline(on) {
+    if (on === offline) return;
+    offline = on;
+    paintStatus();
+    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("");
+  }
+
+  // A live update: a new message, the reply streaming in, what the agent is
+  // looking at (your view only), replies left, or the end.
+  function apply(event) {
+    if (event.type === "message") addMessage(event.message);
+    else if (event.type === "turn") event.live ? showLive(event.live) : clearLive();
+    else if (event.type === "delta") {
+      if (!live) showLive({ text: "", activity: null });
+      live.text += event.text;
+      paintLive();
+    } else if (event.type === "activity") {
+      if (!live) showLive({ text: "", activity: null });
+      live.steps.push(event.line);
+      paintLive();
+    } else if (event.type === "replies") {
+      repliesLeft = event.left;
+      if (!owner && event.model && session) session.model = event.model;
+      if (owner) refreshSide();
+      else paintComposer();
+    } else if (event.type === "ended") {
+      if (owner) refreshSide();
+      else showEnded();
+    }
+  }
+
+  // ---------- composing ----------
+
+  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);
+  }
+
+  // Browsers with field-sizing size the box themselves (no jumping while you
+  // dictate); others get measured. CSS caps it either way.
+  const nativeSizing = window.CSS?.supports?.("field-sizing", "content");
+  function autosize() {
+    if (nativeSizing) return;
+    els.input.style.height = "auto";
+    els.input.style.height = `${els.input.scrollHeight}px`;
+  }
+
+  function paintAttachments() {
+    els.attachments.hidden = !attachments.length;
+    els.attachments.textContent = "";
+    for (const a of attachments) {
+      const x = el("button", { type: "button", textContent: "×", title: "Remove" });
+      x.onclick = () => {
+        attachments = attachments.filter((b) => b !== a);
+        paintAttachments();
+      };
+      els.attachments.append(el("div", { className: `thumb ${a.uploading ? "loading" : ""}` }, el("img", { src: a.preview, alt: "" }), x));
+    }
+    updateSend();
+  }
+
+  async function addFiles(files) {
+    for (const file of files) {
+      if (!/^image\/(png|jpeg|gif|webp)$/.test(file.type)) {
+        banner("Only images can be added: PNG, JPEG, GIF or WebP.");
+        continue;
+      }
+      if (attachments.length >= 6) break;
+      const a = { handle: null, preview: URL.createObjectURL(file), uploading: true };
+      attachments.push(a);
+      paintAttachments();
+      try {
+        a.handle = await transport.upload(file);
+        a.uploading = false;
+      } catch (error) {
+        attachments = attachments.filter((b) => b !== a);
+        if (error.status === 410) return showEnded();
+        banner(`Couldn't add that image. ${error.message}`);
+      }
+      paintAttachments();
+    }
+  }
+
+  async function submit(e) {
+    e?.preventDefault?.();
+    if (els.send.disabled) return;
+    const text = els.input.value.trim();
+    const images = attachments.filter((a) => a.handle).map((a) => a.handle);
+    sending = true;
+    updateSend();
+    try {
+      const { message } = await transport.send(text, images);
+      addMessage(message);
+      toEnd(); // you just spoke: back to the bottom, and follow from here
+      els.input.value = "";
+      attachments = [];
+      paintAttachments();
+      autosize();
+      banner("");
+    } catch (error) {
+      if (error.status === 410) return showEnded();
+      if (error.code === "out_of_replies") {
+        repliesLeft = 0;
+        return;
+      }
+      banner(`${error.message} Your text is still in the box.`);
+    } finally {
+      sending = false;
+      paintComposer();
+      if (!touch) els.input.focus();
+    }
+  }
+
+  function lightbox(src) {
+    const div = el("div", { className: "lightbox" }, el("img", { src, alt: "Screenshot" }));
+    div.onclick = () => div.remove();
+    document.body.append(div);
+  }
+
+  els.input.addEventListener("input", () => {
+    autosize();
+    paintComposer();
+  });
+  els.input.addEventListener("keydown", (e) => {
+    // On phones Return makes a new line; the send button sends.
+    if (e.key === "Enter" && !e.shiftKey && !touch && !e.isComposing) submit(e);
+  });
+  els.input.addEventListener("paste", (e) => {
+    const files = [...(e.clipboardData?.files || [])];
+    if (files.length) {
+      e.preventDefault();
+      addFiles(files);
+    }
+  });
+  els.file.addEventListener("change", () => {
+    addFiles([...els.file.files]);
+    els.file.value = "";
+  });
+  els.send.addEventListener("click", submit);
+
+  if (!owner) {
+    let depth = 0;
+    addEventListener("dragenter", (e) => {
+      if (![...(e.dataTransfer?.types || [])].includes("Files") || ended || repliesLeft === 0) return;
+      depth++;
+      els.drop.hidden = false;
+    });
+    addEventListener("dragleave", () => {
+      if (--depth <= 0) (depth = 0), (els.drop.hidden = true);
+    });
+    addEventListener("dragover", (e) => e.preventDefault());
+    addEventListener("drop", (e) => {
+      e.preventDefault();
+      depth = 0;
+      els.drop.hidden = true;
+      if (!ended && repliesLeft !== 0) addFiles([...(e.dataTransfer?.files || [])]);
+    });
+  }
+
+  let started = false;
+  if (relay) paintTester();
+  transport.start({
+    state(state) {
+      showState(state);
+      if (started) return;
+      started = true;
+      if (owner) setInterval(refreshSide, 5000);
+      else if (!touch) els.input.focus();
+    },
+    event: apply,
+    offline: setOffline,
+    ended: showEnded,
+    missingKey: () =>
+      showNote("This link is incomplete", "The part after the # is missing, and it's the key to this conversation. Ask whoever sent it to send the whole link again."),
+    badKey: () => showNote("This link doesn't open the conversation", "Its key doesn't match. Ask whoever sent it to send the whole link again."),
+  });
+})();