@parley-im/parley 0.2.2 → 0.2.4

package/README.md

@@ -96,7 +96,7 @@ Each reply records which model answered, on which login (`auth: "none"` means yo
 | `src/mcp.ts` | `create_session`, `list_sessions`, `get_transcript`, `set_reply_limit`, `end_session` |
 | `src/db.ts` | Each project's `.parley/parley.db` (sessions with keys, messages, turns), a folder per session with screenshots and `transcript.md`, and `~/.parley/projects.json` listing the projects |
 | `web/` | Chat page, session view, control panel; parley.im serves the guest page's files from here too |
-| `relay/` | parley.im: Worker, a Durable Object per linked computer, D1; the front page's animation is `web/home.js` |
+| `relay/` | parley.im: Worker, a Durable Object per linked computer, D1 |
 
 ## Setup
 
@@ -122,7 +122,7 @@ Conversations live with their project, in `<project>/.parley/`: a database, and
 
 ## Running parley.im
 
-`relay/` is a Cloudflare Worker (`wrangler.jsonc`) with a Durable Object per linked computer and a D1 database (`migrations/`). Signed out, `/` is a wordless animation; signed in, it's your dashboard (open sessions, linked computers and whether they're online). `/docs` is the install guide; `/admin` is for admins (`ADMIN_EMAILS`): invites, the waitlist and who's in. Email goes through Cloudflare Email Service (the `EMAIL` binding, from `hello@parley.im`): a note when someone joins the waitlist (to them and the admins), when they're let in, and invites. Rate limits use the `LIMITS` binding. Secrets: `SESSION_SECRET` (random), `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` (a Google OAuth web client with redirect URI `https://parley.im/auth/google/callback`).
+`relay/` is a Cloudflare Worker (`wrangler.jsonc`) with a Durable Object per linked computer and a D1 database (`migrations/`). Signed out, `/` explains parley in plain words; signed in, it's your dashboard (open sessions, linked computers and whether they're online). `/docs` is the install guide; `/admin` is for admins (`ADMIN_EMAILS`): invites, the waitlist and who's in. Email goes through Cloudflare Email Service (the `EMAIL` binding, from `hello@parley.im`): a note when someone joins the waitlist (to them and the admins), when they're let in, and invites. Rate limits use the `LIMITS` binding. Secrets: `SESSION_SECRET` (random), `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` (a Google OAuth web client with redirect URI `https://parley.im/auth/google/callback`).
 
 ```bash
 cd relay

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Send someone a link. They talk to a read-only Claude or Codex in your project, on your computer, and you get everything they said.",
   "keywords": [
     "claude",

package/web/app.css

@@ -74,6 +74,10 @@ button, input, textarea, select { font: inherit; color: inherit; }
 .crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
 .crumbs .product { color: var(--muted); font-weight: 500; }
 .crumbs .slash { color: var(--faint); }
+.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: inherit; text-decoration: none !important; }
+.brand:hover .mark { filter: brightness(1.1); }
+.lost .own { margin-top: 18px; font-size: 13px; color: var(--faint); }
+.lost .own a { color: var(--accent); }
 .crumbs .here { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .crumbs a { text-decoration: none; }
 .crumbs a:hover { text-decoration: underline; }
@@ -429,15 +433,26 @@ body.panel { overflow: auto; }
 /* Long details shorten instead of pushing the buttons off a phone screen. */
 .trow.site-row .who-cell { min-width: 0; }
 
-/* parley.im's front page: no words, just home.js drawing on a faint grid. */
-body.home { overflow: hidden; }
-.home .topbar { position: relative; z-index: 1; background: transparent; border-bottom-color: transparent; }
-.stage { position: fixed; inset: 0; }
-.stage::before {
-  content: ""; position: absolute; inset: 0;
-  background-image: radial-gradient(circle, var(--line-strong) 0.9px, transparent 1.4px);
-  background-size: 22px 22px; background-position: center;
-  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
-  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
+/* parley.im's front page: what it is, in plain words. */
+.landing { max-width: 980px; }
+.intro { padding: 9vh 0 8px; max-width: 640px; }
+.intro h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
+.intro .lede { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; }
+.intro .cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 10px; }
+.intro .fine { font-size: 13px; color: var(--faint); margin: 0; }
+.how { list-style: none; counter-reset: step; padding: 0; margin: 56px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
+.how li { counter-increment: step; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
+.how li::before {
+  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px;
+  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px;
+}
+.how h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: -0.01em; }
+.how p { margin: 0; font-size: 14px; color: var(--muted); }
+.how q { color: var(--text); }
+.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 44px 0 0; padding: 28px 0 40px; border-top: 1px solid var(--line); }
+.promises h3 { font-size: 14px; margin: 0 0 4px; }
+.promises p { font-size: 14px; color: var(--muted); margin: 0; }
+@media (max-width: 720px) {
+  .how, .promises { grid-template-columns: 1fr; }
+  .intro { padding-top: 6vh; }
 }
-.stage canvas { position: absolute; inset: 0; display: block; }

package/web/chat.html

@@ -17,9 +17,11 @@
 <body>
 <div class="app">
   <header class="topbar">
-    <span class="mark" aria-hidden="true"><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></span>
     <nav class="crumbs" id="crumbs">
-      <span class="product">parley</span><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
+      <!-- What parley is, in a new tab so the conversation stays put. -->
+      <a class="brand" id="home-link" href="https://parley.im" target="_blank" rel="noopener" title="parley: let people talk to your agent">
+        <span class="mark" aria-hidden="true"><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></span><span class="product">parley</span>
+      </a><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
     </nav>
     <span class="status" id="status" hidden><span class="dot" id="status-dot"></span><span id="status-text"></span></span>
     <span class="chip" id="chip" hidden></span>

package/web/chat.js

@@ -1,5 +1,8 @@
 (function () {
   const { base, owner, maxText, relay, sender, project: knownProject } = window.PARLEY;
+  // parley's own homepage: this site on parley.im links, parley.im on local ones.
+  const homeUrl = relay ? "/" : "https://parley.im";
+  document.getElementById("home-link")?.setAttribute("href", homeUrl);
   const $ = (id) => document.getElementById(id);
   const els = {
     project: $("project"), crumbs: $("crumbs"), status: $("status"), statusDot: $("status-dot"), statusText: $("status-text"),
@@ -265,7 +268,8 @@
     els.status.hidden = false;
     let dot = "on";
     let label = owner ? `${agentName()} · live` : speaker();
-    if (offline) (dot = "off"), (label = offlineWhy === "connection" ? "reconnecting" : "offline");
+    if (idle) (dot = ""), (label = "paused");
+    else 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`);
@@ -415,11 +419,15 @@
   }
 
   function showEnded() {
-    showNote("This parley has ended", "Thanks for the feedback. The conversation isn't available here anymore.");
+    // For the guest, one quiet line about having their own.
+    const own = () =>
+      owner ? null : el("p", { className: "own" }, "Want people to talk to your agent? ", el("a", { href: homeUrl, target: "_blank", rel: "noopener", textContent: "Get parley" }));
+    showNote("This parley has ended", "Thanks for the feedback. The conversation isn't available here anymore.", own);
   }
 
-  // Replaces the conversation with a note, for good.
-  function showNote(title, text) {
+  // Replaces the conversation with a note, for good. `extra` makes anything
+  // to show under it.
+  function showNote(title, text, extra = () => null) {
     if (ended) return;
     ended = true;
     clearLive();
@@ -427,7 +435,7 @@
     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 }))));
+    els.layout.append(el("div", { className: "lost inline", style: "flex:1" }, el("div", {}, markEl(), el("h1", { textContent: title }), el("p", { textContent: text }), extra())));
   }
 
   function markEl() {
@@ -716,6 +724,7 @@
         return body.ok ? p.resolve(body.result) : p.reject(problemError(body.status, body.error, body.message));
       }
       if (m.t === "evt") {
+        stirred = Date.now(); // a reply coming in counts as you being here
         const item = await S.open(key, token, "evt", m.d);
         if (loading) return early.push(item);
         if (item.epoch !== epoch) return load();
@@ -743,6 +752,10 @@
       clearTimeout(retry);
       retry = null;
       ws = new WebSocket(`${location.origin.replace(/^http/, "ws")}${base}/ws`);
+      // Keep-alives, answered by parley.im at the edge (no cost), keep phone
+      // networks and proxies from dropping a quiet connection.
+      const ping = setInterval(() => ws.readyState === WebSocket.OPEN && ws.send('{"t":"ping"}'), 30_000);
+      ws.addEventListener("close", () => clearInterval(ping));
       ws.onopen = () => {
         failures = 0;
         h.offline(false, "connection");
@@ -752,7 +765,7 @@
         for (const p of pending.values()) clearTimeout(p.timer), p.reject(connectionError());
         pending.clear();
         if (event.code === 4410) return h.ended();
-        if (ended) return;
+        if (ended || paused) return;
         failures++;
         // This page lost its own connection (a phone switching networks, or
         // waking up); the sender's computer may be fine.
@@ -763,11 +776,42 @@
 
     // Back from the background or back online: reconnect now, not on a timer.
     const wake = () => {
-      if (!ended && document.visibilityState === "visible" && retry) connect();
+      if (!ended && !paused && document.visibilityState === "visible" && retry) connect();
     };
     document.addEventListener("visibilitychange", wake);
     window.addEventListener("online", wake);
 
+    // A page left open and untouched lets its connection go (after 15
+    // minutes, or 5 in a background tab), so a forgotten tab doesn't hold on
+    // forever or show as "here" on the sender's dashboard. Anything you do
+    // brings it back, caught up.
+    const IDLE_MS = 15 * 60_000;
+    const HIDDEN_MS = 5 * 60_000;
+    let stirred = Date.now();
+    let hiddenAt = null;
+    let paused = false;
+    const stir = () => {
+      stirred = Date.now();
+      if (paused && !ended) {
+        paused = false;
+        h.idle(false);
+        connect();
+      }
+    };
+    for (const type of ["pointerdown", "keydown", "touchstart", "wheel", "focusin"]) addEventListener(type, stir, { passive: true, capture: true });
+    document.addEventListener("visibilitychange", () => {
+      hiddenAt = document.hidden ? Date.now() : null;
+      if (!document.hidden) stir();
+    });
+    setInterval(() => {
+      if (paused || ended || ws?.readyState !== WebSocket.OPEN || h.busy()) return;
+      if ((hiddenAt && Date.now() - hiddenAt > HIDDEN_MS) || Date.now() - stirred > IDLE_MS) {
+        paused = true;
+        h.idle(true);
+        ws.close(1000, "idle");
+      }
+    }, 30_000);
+
     return {
       async start(handlers) {
         h = handlers;
@@ -829,6 +873,14 @@
     toEnd();
   }
 
+  // Paused: this page let its connection go while nobody was using it.
+  let idle = false;
+  function setIdle(on) {
+    idle = on;
+    paintStatus();
+    banner(on ? "Paused while you were away. Tap anywhere to pick up where you left off." : "");
+  }
+
   // 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;
@@ -1036,6 +1088,8 @@
     },
     event: apply,
     offline: setOffline,
+    idle: setIdle,
+    busy: () => !!live,
     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."),

package/web/dashboard.js

@@ -1,7 +1,12 @@
 // 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.
+// now, when they were last active, and whether a reply is coming in. Each
+// linked computer pushes news over its own WebSocket, which costs nothing
+// while it's quiet, so nothing here polls. It never shows what was said;
+// parley.im doesn't have that.
 (() => {
+  const REPLYING_MS = 6000;
+  const live = new Map(); // session id -> { here, active, replying, online }
+
   const ago = (ms) => {
     const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
     if (s < 60) return "just now";
@@ -17,25 +22,57 @@
   // 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.replying && Date.now() - s.replying < REPLYING_MS) 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 {}
+  function paint() {
+    for (const row of document.querySelectorAll("[data-session]")) {
+      const s = live.get(row.dataset.session);
+      if (s) row.querySelector(".live")?.replaceChildren(...liveNodes(s));
+    }
+  }
+
+  function apply(computer, m) {
+    if (m.t === "changed") return location.reload();
+    if (m.t !== "live") return;
+    // Times come from parley.im's clock; shift them onto this one.
+    const shift = Date.now() - m.now;
+    for (const row of document.querySelectorAll(`[data-device="${computer}"]`)) {
+      const s = m.sessions[row.dataset.session] ?? {};
+      live.set(row.dataset.session, {
+        online: m.on,
+        here: s.here ?? 0,
+        active: s.active ? s.active + shift : null,
+        replying: s.replying ? s.replying + shift : null,
+      });
+    }
+    const row = document.querySelector(`[data-computer="${computer}"]`);
+    if (row) {
+      row.querySelector(".dot").className = `dot${m.on ? " on" : ""}`;
+      row.querySelector(".computer-status").textContent = m.on ? `online now${m.version ? ` · parley ${m.version}` : ""}` : "offline";
+    }
+    paint();
+  }
+
+  function watch(computer, delay = 2000) {
+    const ws = new WebSocket(`${location.origin.replace(/^http/, "ws")}/dashboard/live?d=${encodeURIComponent(computer)}`);
+    const ping = setInterval(() => ws.readyState === WebSocket.OPEN && ws.send('{"t":"ping"}'), 30_000);
+    ws.onopen = () => (delay = 2000);
+    ws.onmessage = (event) => {
+      try {
+        apply(computer, JSON.parse(event.data));
+      } catch {}
+    };
+    ws.onclose = () => {
+      clearInterval(ping);
+      setTimeout(() => watch(computer, Math.min(delay * 2, 60_000)), delay);
+    };
   }
 
-  setInterval(refresh, 4000);
-  document.addEventListener("visibilitychange", refresh);
+  for (const row of document.querySelectorAll("[data-computer]")) watch(row.dataset.computer);
+  // "active 3m ago" and the end of "replying" move on with the clock alone.
+  setInterval(paint, 5000);
 })();

package/web/home.js

@@ -1,552 +0,0 @@
-// parley.im's front page, without a word on it. An agent in the middle checks
-// in with people, one and then another, hears them out and writes down what
-// it hears. When the page fills up it boils it down, sends it off and starts
-// again, forever. Every line is a line of text with the letters taken out.
-(() => {
-  const canvas = document.getElementById("field");
-  const ctx = canvas && canvas.getContext("2d");
-  if (!ctx) return;
-
-  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
-  const rand = (a, b) => a + Math.random() * (b - a);
-  const pick = (list) => list[Math.floor(Math.random() * list.length)];
-  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
-  const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
-  const toward = (v, to, rate, dt) => v + (to - v) * (1 - Math.exp(-rate * dt));
-
-  // Word lengths in characters, about as often as English uses them.
-  const LENGTHS = [1, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 6, 6, 7, 8, 9, 11];
-  function sentence(max, fill) {
-    const limit = Math.max(3, Math.round(max * fill));
-    const ws = [];
-    for (let n = 0; ; ) {
-      const w = pick(LENGTHS);
-      if (n + w > limit) break;
-      ws.push(w);
-      n += w + 1;
-    }
-    return ws.length ? ws : [3];
-  }
-  const span = (ws) => ws.reduce((n, w) => n + w + 1, -1);
-
-  const VISIBLE = 5; // lines a person's pane shows
-  let W = 0, H = 0, S = 1, CW = 4, BAR = 3, GAP = 10, PAD = 10;
-  let narrow = null, clock = 0, color = {};
-  let cx = 0, cy = 0, doc = null, people = [], packets = [], ripples = [], lifts = [], nextAsk = 0;
-
-  function readColors() {
-    const css = getComputedStyle(document.documentElement);
-    const v = (name) => css.getPropertyValue(name).trim();
-    color = { bg: v("--bg"), text: v("--text"), faint: v("--faint"), line: v("--line-strong"), accent: v("--accent") };
-  }
-
-  // ---------- the cast ----------
-
-  function build() {
-    const count = narrow ? 6 : W < 1000 ? 8 : 10;
-    people = Array.from({ length: count }, (_, i) => ({
-      angle: -Math.PI / 2 + ((i + (narrow ? 0 : 0.5)) / count) * Math.PI * 2 + rand(-0.14, 0.14),
-      reach: rand(0.82, 1),
-      bend: (i % 2 ? 1 : -1) * rand(0.1, 0.22),
-      phase: rand(0, 100),
-      chars: narrow ? 18 : 24,
-      lines: [],
-      scroll: 0,
-      state: "idle",
-      wait: rand(0.2, 3),
-      speed: rand(14, 30),
-      pause: 0,
-      plan: [],
-      busy: 0,
-    }));
-    doc = { chars: narrow ? 28 : 42, max: narrow ? 7 : 9, phase: "gather", t: 0, lines: [], queue: [], wait: 0, h: 0, titleY: null, title: { w: [], tw: [] } };
-    morph(doc.title, sentence(doc.chars * 0.55, rand(0.6, 1)));
-    doc.title.w = doc.title.tw.slice();
-    packets = [];
-    ripples = [];
-    lifts = [];
-    nextAsk = 0.4;
-  }
-
-  function place() {
-    const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    W = window.innerWidth;
-    H = window.innerHeight;
-    canvas.width = Math.round(W * dpr);
-    canvas.height = Math.round(H * dpr);
-    canvas.style.width = `${W}px`;
-    canvas.style.height = `${H}px`;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-    const top = (document.querySelector(".topbar")?.getBoundingClientRect().bottom ?? 0) + 6;
-    const wasNarrow = narrow;
-    narrow = W < 600;
-    S = narrow ? clamp(W / 400, 0.82, 1.05) : clamp(Math.min(W, H - top) / 720, 0.82, 1.3);
-    CW = 4 * S;
-    BAR = 3.2 * S;
-    GAP = 10 * S;
-    PAD = 10 * S;
-    if (narrow !== wasNarrow || people.length !== (narrow ? 6 : W < 1000 ? 8 : 10)) build();
-
-    const x0 = 12, x1 = W - 12, y0 = top, y1 = H - 18;
-    cx = W / 2;
-    cy = (y0 + y1) / 2;
-    doc.w = doc.chars * CW + PAD * 2 + 9 * S;
-    const docBox = { x: cx, y: cy, w: doc.w, h: (doc.max + 1.7) * GAP + PAD * 2 };
-    const pw = people[0].chars * CW + PAD * 2 + 9 * S;
-    const ph = VISIBLE * GAP + PAD * 1.2;
-    const ry = (y1 - y0 - ph) / 2;
-    const rx = Math.min((x1 - x0 - pw) / 2, ry * 1.9);
-    for (const p of people) {
-      p.w = pw;
-      p.h = ph;
-      p.x = cx + Math.cos(p.angle) * rx * p.reach;
-      p.y = cy + Math.sin(p.angle) * ry * p.reach;
-    }
-    // Nudge panes apart where they'd overlap each other or the notes in the middle.
-    const margin = 12 * S;
-    for (let k = 0; k < 80; k++) {
-      for (const p of people) {
-        shove(p, docBox, margin, 1);
-        for (const q of people) if (q !== p) shove(p, q, margin, 0.5);
-        p.x = clamp(p.x, x0 + pw / 2, x1 - pw / 2);
-        p.y = clamp(p.y, y0 + ph / 2, y1 - ph / 2);
-      }
-    }
-  }
-
-  function shove(p, o, margin, share) {
-    const dx = p.x - o.x, dy = p.y - o.y;
-    const ox = (p.w + o.w) / 2 + margin - Math.abs(dx);
-    const oy = (p.h + o.h) / 2 + margin - Math.abs(dy);
-    if (ox <= 0 || oy <= 0) return;
-    if (ox < oy) p.x += (Math.sign(dx) || 1) * ox * share;
-    else p.y += (Math.sign(dy) || 1) * oy * share;
-  }
-
-  // A line that can be rewritten in place: its words ease toward new lengths.
-  function morph(line, ws) {
-    const n = Math.max(line.w.length, ws.length);
-    line.w = Array.from({ length: n }, (_, i) => line.w[i] ?? 0);
-    line.tw = Array.from({ length: n }, (_, i) => ws[i] ?? 0);
-  }
-
-  // ---------- what happens ----------
-
-  function ask(p) {
-    p.state = "asked";
-    const question = sentence(Math.round(p.chars * 0.85), rand(0.45, 1));
-    ripples.push({ t: 0 });
-    send(p, "out", [question], () => {
-      const count = pick([1, 2, 2, 3, 3, 4]);
-      p.plan = Array.from({ length: count }, (_, i) => sentence(p.chars, i === count - 1 ? rand(0.3, 0.8) : rand(0.8, 1)));
-      p.lines.push({ ws: question, shown: 0, kind: "q", sent: false, dim: 0 });
-      p.lines.push({ ws: p.plan.shift(), shown: 0, kind: "a", sent: false, dim: 0 });
-      p.state = "reading";
-      p.wait = rand(0.5, 1.8);
-    });
-  }
-
-  function send(p, dir, payload, arrive) {
-    const d = Math.hypot(p.x - cx, p.y - cy);
-    packets.push({ p, dir, payload, arrive, t: 0, dur: clamp(d / (230 * S), 0.8, 2.2) });
-  }
-
-  function stepPerson(p, dt) {
-    for (const l of p.lines) {
-      if (l.kind === "q") l.shown += 80 * dt;
-      l.dim = toward(l.dim, l.sent ? 1 : 0, 2.5, dt);
-    }
-    if (p.state === "idle") p.wait -= dt;
-    else if (p.state === "reading") {
-      p.wait -= dt;
-      if (p.wait <= 0) p.state = "typing";
-    } else if (p.state === "typing") {
-      const l = p.lines[p.lines.length - 1];
-      if (p.pause > 0) p.pause -= dt;
-      else {
-        l.shown += p.speed * dt;
-        if (Math.random() < dt * 0.8) p.pause = rand(0.15, 0.9);
-      }
-      if (l.shown >= span(l.ws)) {
-        l.shown = span(l.ws);
-        if (p.plan.length) p.lines.push({ ws: p.plan.shift(), shown: 0, kind: "a", sent: false, dim: 0 });
-        else {
-          p.state = "sending";
-          p.wait = 0.4;
-        }
-      }
-    } else if (p.state === "sending") {
-      p.wait -= dt;
-      if (p.wait <= 0) {
-        const mine = p.lines.filter((l) => !l.sent);
-        for (const l of mine) l.sent = true;
-        p.state = "idle";
-        p.wait = rand(1.5, 5);
-        send(p, "in", mine.filter((l) => l.kind === "a").map((l) => l.ws), (payload) => hear(payload));
-      }
-    }
-    const talking = p.state !== "idle" || packets.some((k) => k.p === p);
-    p.busy = toward(p.busy, talking ? 1 : 0, 4, dt);
-    // Scroll so the newest line shows, and forget lines long gone.
-    p.scroll = toward(p.scroll, Math.max(0, p.lines.length - VISIBLE), 6, dt);
-    while (p.lines.length > VISIBLE + 3 && p.scroll >= 3) {
-      p.lines.shift();
-      p.scroll -= 1;
-    }
-  }
-
-  // An answer reaches the middle: a line or two goes into the notes, and
-  // something already there may get rewritten in light of it.
-  function hear(payload) {
-    const d = doc;
-    if (d.phase !== "gather") return d.queue.push(payload);
-    const adds = Math.max(1, Math.round(payload.length * rand(0.4, 0.8)));
-    for (let i = 0; i < adds; i++) {
-      const ws = sentence(d.chars, rand(0.5, 1));
-      const at = Math.random() < 0.55 ? d.lines.length : Math.floor(rand(0, d.lines.length + 1));
-      d.lines.splice(at, 0, { w: ws.slice(), tw: ws, shown: 0, a: 0, heat: 1, y: null, keep: false, into: null });
-    }
-    const settled = d.lines.filter((l) => l.heat < 0.3);
-    if (settled.length && Math.random() < 0.7) {
-      const l = pick(settled);
-      morph(l, sentence(d.chars, rand(0.5, 1)));
-      l.heat = 0.6;
-    }
-    if (d.lines.length > d.max) condense();
-  }
-
-  // Too much to hold: everything folds into three lines.
-  function condense() {
-    const d = doc;
-    const n = d.lines.length;
-    const keys = [0, Math.floor((n - 1) / 2), n - 1];
-    keys.forEach((i) => {
-      const l = d.lines[i];
-      morph(l, sentence(d.chars, rand(0.85, 1)));
-      l.keep = true;
-      l.heat = 1;
-      l.shown = Infinity;
-    });
-    d.lines.forEach((l, i) => {
-      if (l.keep) return;
-      const nearest = keys.reduce((best, k) => (Math.abs(k - i) < Math.abs(best - i) ? k : best));
-      l.into = d.lines[nearest];
-      morph(l, []);
-    });
-    d.phase = "condense";
-    d.t = 0;
-  }
-
-  function stepDoc(dt) {
-    const d = doc;
-    d.t += dt;
-    for (const l of [d.title, ...d.lines]) for (let i = 0; i < l.w.length; i++) l.w[i] = toward(l.w[i], l.tw[i], 5, dt);
-    for (const l of d.lines) {
-      l.shown += 90 * dt;
-      l.a = toward(l.a, l.into ? 0 : 1, l.into ? 2.5 : 6, dt);
-      if (!l.keep) l.heat = toward(l.heat, 0, 0.8, dt);
-    }
-    if (d.phase === "gather") {
-      d.wait -= dt;
-      if (d.queue.length && d.wait <= 0) {
-        hear(d.queue.shift());
-        d.wait = 0.5;
-      }
-    } else if (d.phase === "condense" && d.t > 1.6) {
-      d.lines = d.lines.filter((l) => !l.into);
-      d.phase = "hold";
-      d.t = 0;
-    } else if (d.phase === "hold" && d.t > 1.2) {
-      // Sent off: the summary rises out of the notes, and they start over.
-      lifts.push({ lines: d.lines.map((l) => ({ ws: l.tw.slice(), y: l.y })), t: 0 });
-      d.lines = [];
-      morph(d.title, []);
-      d.phase = "rest";
-      d.t = 0;
-    } else if (d.phase === "rest" && d.t > 1.4) {
-      morph(d.title, sentence(d.chars * 0.55, rand(0.6, 1)));
-      d.phase = "gather";
-      d.t = 0;
-    }
-    const live = d.lines.filter((l) => !l.into);
-    const block = 1.7 * GAP + live.length * GAP;
-    const top = cy - block / 2;
-    d.titleY = d.titleY == null ? top + GAP / 2 : toward(d.titleY, top + GAP / 2, 6, dt);
-    live.forEach((l, i) => {
-      const ty = top + 1.7 * GAP + GAP / 2 + i * GAP;
-      l.y = l.y == null ? ty : toward(l.y, ty, 7, dt);
-    });
-    for (const l of d.lines) if (l.into) l.y = toward(l.y, l.into.y, 5, dt);
-    d.h = d.h ? toward(d.h, block, 6, dt) : block;
-  }
-
-  function step(dt) {
-    clock += dt;
-    nextAsk -= dt;
-    if (nextAsk <= 0) {
-      nextAsk = rand(0.5, 1.6);
-      const free = people.filter((p) => p.state === "idle" && p.wait <= 0);
-      const busy = people.filter((p) => p.state !== "idle").length;
-      if (doc.phase === "gather" && free.length && busy < Math.ceil(people.length * 0.6)) ask(pick(free));
-    }
-    for (const p of people) stepPerson(p, dt);
-    for (const k of packets) {
-      k.t += dt / k.dur;
-      if (k.t >= 1) k.arrive(k.payload);
-    }
-    packets = packets.filter((k) => k.t < 1);
-    for (const r of ripples) r.t += dt;
-    ripples = ripples.filter((r) => r.t < 1);
-    for (const l of lifts) l.t += dt;
-    lifts = lifts.filter((l) => l.t < 2.6);
-    stepDoc(dt);
-  }
-
-  // ---------- drawing ----------
-
-  function bar(x, y, w, h) {
-    if (ctx.roundRect) ctx.roundRect(x, y, w, h, h / 2);
-    else ctx.rect(x, y, w, h);
-  }
-
-  // A line of words from (x, y), the first `shown` characters of it. Returns
-  // where the typing has got to.
-  function words(ws, x, y, shown = Infinity, k = 1, tall = 1) {
-    const c = CW * k, h = BAR * k * tall;
-    let left = shown, end = x;
-    ctx.beginPath();
-    for (const w of ws) {
-      if (left <= 0) break;
-      const len = Math.min(w, left);
-      if (len > 0.05) bar(x, y - h / 2, len * c, h);
-      end = x + len * c;
-      x += (w + Math.min(1, w)) * c;
-      left -= w + 1;
-    }
-    ctx.fill();
-    return end;
-  }
-
-  function curve(p) {
-    const px = p.x + Math.sin(clock * 0.23 + p.phase) * 3 * S;
-    const py = p.y + Math.cos(clock * 0.19 + p.phase * 1.3) * 3 * S;
-    const dx = px - cx, dy = py - cy;
-    return { ax: cx, ay: cy, bx: (cx + px) / 2 - dy * p.bend, by: (cy + py) / 2 + dx * p.bend, px, py };
-  }
-  const at = (c, t) => {
-    const u = 1 - t;
-    return [u * u * c.ax + 2 * u * t * c.bx + t * t * c.px, u * u * c.ay + 2 * u * t * c.by + t * t * c.py];
-  };
-
-  function draw() {
-    ctx.clearRect(0, 0, W, H);
-    const curves = new Map(people.map((p) => [p, curve(p)]));
-
-    // Threads from the middle to everyone.
-    ctx.lineWidth = Math.max(1, S);
-    for (const p of people) {
-      const c = curves.get(p);
-      ctx.beginPath();
-      ctx.moveTo(c.ax, c.ay);
-      ctx.quadraticCurveTo(c.bx, c.by, c.px, c.py);
-      ctx.setLineDash([1.2 * S, 5 * S]);
-      ctx.globalAlpha = 0.9;
-      ctx.strokeStyle = color.line;
-      ctx.stroke();
-      if (p.busy > 0.02) {
-        ctx.setLineDash([]);
-        ctx.globalAlpha = p.busy * 0.4;
-        ctx.strokeStyle = color.faint;
-        ctx.stroke();
-      }
-    }
-    ctx.setLineDash([]);
-
-    // Panes, cut out of the grid.
-    ctx.fillStyle = color.bg;
-    ctx.globalAlpha = 1;
-    ctx.beginPath();
-    for (const p of people) {
-      const c = curves.get(p);
-      bar(c.px - p.w / 2, c.py - p.h / 2, p.w, p.h);
-    }
-    ctx.fill();
-    ctx.beginPath();
-    ctx.roundRect ? ctx.roundRect(cx - doc.w / 2, cy - doc.h / 2 - PAD, doc.w, doc.h + PAD * 2, 8 * S) : ctx.rect(cx - doc.w / 2, cy - doc.h / 2 - PAD, doc.w, doc.h + PAD * 2);
-    ctx.fill();
-
-    drawDoc();
-    for (const p of people) drawPerson(p, curves.get(p));
-    for (const k of packets) drawPacket(k, curves.get(k.p));
-    for (const l of lifts) drawLift(l);
-    ctx.globalAlpha = 1;
-  }
-
-  function drawDoc() {
-    const d = doc;
-    const left = cx - d.w / 2 + PAD;
-    const x = left + 9 * S;
-    // The agent: a dot that pulses while it's thinking things over.
-    const thinking = d.phase === "condense" || d.phase === "hold";
-    const r = 2.8 * S * (thinking ? 1 + 0.25 * Math.sin(clock * 7) : 1);
-    ctx.globalAlpha = 1;
-    ctx.fillStyle = color.accent;
-    ctx.beginPath();
-    ctx.arc(left + 2.5 * S, d.titleY, r, 0, Math.PI * 2);
-    ctx.fill();
-    for (const ring of ripples) {
-      ctx.globalAlpha = (1 - ring.t) * 0.55;
-      ctx.strokeStyle = color.accent;
-      ctx.lineWidth = S;
-      ctx.beginPath();
-      ctx.arc(left + 2.5 * S, d.titleY, 3 * S + ease(ring.t) * 16 * S, 0, Math.PI * 2);
-      ctx.stroke();
-    }
-    ctx.globalAlpha = 0.95;
-    words(d.title.w, x, d.titleY, Infinity, 1, 1.35);
-
-    for (const l of d.lines) {
-      if (l.y == null) continue;
-      if (l.heat < 0.99) {
-        ctx.globalAlpha = l.a * (1 - l.heat) * 0.82;
-        ctx.fillStyle = color.text;
-        words(l.w, x, l.y, l.shown);
-      }
-      if (l.heat > 0.01) {
-        ctx.globalAlpha = l.a * l.heat;
-        ctx.fillStyle = color.accent;
-        words(l.w, x, l.y, l.shown);
-      }
-    }
-  }
-
-  function drawPerson(p, c) {
-    const x = c.px - p.w / 2, y = c.py - p.h / 2;
-    const top = y + PAD * 0.6 + GAP / 2;
-    // Someone: a ring that fills in while they're talking with the agent.
-    const dot = [x + PAD + 2.5 * S, top];
-    ctx.globalAlpha = 1;
-    ctx.strokeStyle = color.faint;
-    ctx.lineWidth = Math.max(1, S);
-    ctx.beginPath();
-    ctx.arc(dot[0], dot[1], 2.4 * S, 0, Math.PI * 2);
-    ctx.stroke();
-    if (p.busy > 0.02) {
-      ctx.globalAlpha = p.busy;
-      ctx.fillStyle = color.text;
-      ctx.fill();
-    }
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(x, y + PAD * 0.25, p.w, p.h - PAD * 0.5);
-    ctx.clip();
-    const lx = x + PAD + 9 * S;
-    p.lines.forEach((l, j) => {
-      const v = j - p.scroll;
-      if (v < -1 || v > VISIBLE) return;
-      const ly = top + v * GAP;
-      const fade = clamp(v + 1, 0, 1);
-      if (l.kind === "q") {
-        ctx.globalAlpha = fade * (0.9 - 0.45 * l.dim);
-        ctx.fillStyle = color.accent;
-      } else {
-        ctx.globalAlpha = fade * (0.78 - 0.45 * l.dim);
-        ctx.fillStyle = color.text;
-      }
-      const end = words(l.ws, lx, ly, l.shown);
-      const last = j === p.lines.length - 1;
-      if (last && (p.state === "reading" || p.state === "typing")) {
-        const blink = p.state === "reading" || p.pause > 0 ? (Math.sin(clock * 8) > -0.3 ? 0.85 : 0.1) : 0.85;
-        ctx.globalAlpha = fade * blink;
-        ctx.fillStyle = color.text;
-        ctx.fillRect(l.shown > 0 ? end + 1.5 * S : lx, ly - BAR * 1.15, 1.4 * S, BAR * 2.3);
-      }
-    });
-    ctx.restore();
-  }
-
-  function drawPacket(k, c) {
-    const e = ease(clamp(k.t, 0, 1));
-    const out = k.dir === "out";
-    const head = out ? e : 1 - e;
-    const tail = out ? Math.max(0, head - 0.24) : Math.min(1, head + 0.24);
-    const fade = Math.min(1, k.t / 0.1, (1 - k.t) / 0.1);
-    const ink = out ? color.accent : color.text;
-    ctx.strokeStyle = ink;
-    ctx.lineWidth = 1.3 * S;
-    const steps = 12;
-    for (let i = 0; i < steps; i++) {
-      const [x0, y0] = at(c, tail + ((head - tail) * i) / steps);
-      const [x1, y1] = at(c, tail + ((head - tail) * (i + 1)) / steps);
-      ctx.globalAlpha = fade * ((i + 1) / steps) * 0.8;
-      ctx.beginPath();
-      ctx.moveTo(x0, y0);
-      ctx.lineTo(x1, y1);
-      ctx.stroke();
-    }
-    // What's being carried, in miniature.
-    const [hx, hy] = at(c, head);
-    const k2 = 0.55;
-    const wide = Math.max(...k.payload.map(span)) * CW * k2;
-    const tallness = k.payload.length * GAP * k2 * 0.8;
-    const bx = hx - wide / 2, by = hy - tallness / 2;
-    ctx.globalAlpha = fade * 0.9;
-    ctx.fillStyle = color.bg;
-    ctx.beginPath();
-    bar(bx - 3 * S, by - 2.5 * S, wide + 6 * S, tallness + 5 * S);
-    ctx.fill();
-    ctx.globalAlpha = fade;
-    ctx.fillStyle = ink;
-    k.payload.forEach((ws, i) => words(ws, bx, by + (i + 0.5) * GAP * k2 * 0.8, Infinity, k2));
-  }
-
-  function drawLift(l) {
-    const t = clamp(l.t / 2.6, 0, 1);
-    const rise = ease(t) * 54 * S;
-    const x = cx - doc.w / 2 + PAD + 9 * S;
-    ctx.fillStyle = color.accent;
-    ctx.globalAlpha = (1 - t) ** 1.6;
-    for (const line of l.lines) words(line.ws, x, line.y - rise);
-  }
-
-  // ---------- running ----------
-
-  let last = 0;
-  function frame(now) {
-    const dt = Math.min(0.05, last ? (now - last) / 1000 : 1 / 60);
-    last = now;
-    step(dt);
-    draw();
-    requestAnimationFrame(frame);
-  }
-
-  // Without motion: run it for a while and show one moment of it.
-  function snapshot() {
-    for (let i = 0; i < 30 * 24; i++) step(1 / 30);
-    draw();
-  }
-
-  readColors();
-  place();
-  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-    readColors();
-    if (still) draw();
-  });
-  let pending = false;
-  window.addEventListener("resize", () => {
-    if (pending) return;
-    pending = true;
-    requestAnimationFrame(() => {
-      pending = false;
-      place();
-      if (still) snapshot();
-    });
-  });
-  if (still) snapshot();
-  else {
-    for (let i = 0; i < 45; i++) step(1 / 30); // start with something already moving
-    requestAnimationFrame(frame);
-  }
-})();