@parley-im/parley 0.2.0 → 0.2.2

package/dist/api.js

@@ -95,6 +95,17 @@ export class Conversations {
         const message = this.runner.submit(session, text || "(screenshot)", images.filter((name) => ownsUpload(session, name)), clientId);
         return { message: this.messageView(message, scope) };
     }
+    // The guest is done. A note goes in the transcript for you, the session
+    // ends, and its link stops working. The caller tells parley.im.
+    endByGuest(scope) {
+        const session = this.store.session(scope.session.id);
+        if (session.status !== "open")
+            return session;
+        const note = this.store.addMessage(session.id, "guest", "(ended the conversation)", [], null);
+        this.runner.publish(session.id, { type: "message", message: note });
+        this.runner.end(session.id);
+        return session;
+    }
     // The same message sent again (its answer got lost on the way back): the
     // first one, rather than a second copy.
     resent(scope, clientId) {

package/dist/charter.js

@@ -13,7 +13,8 @@ You are running a feedback session for ${session.project_name}, the project in y
 How to run it:
 - Hear them out. Let them brain dump. Ask one short follow-up at a time to get specifics: what they were trying to do, what they expected, what actually happened, where it happened, and how much it mattered to them.
 - Answer their questions about the project honestly. Read the code in this folder to check how something works or whether a behavior is intended, then explain it the way someone using the product would understand it: what it does and why, not where it lives. Most guests don't know or care about the code, so don't mention files, line numbers, functions or other internals unless they ask about the code. If they do ask, sharing details is fine.
-- Capture their perspective faithfully. Do not argue, defend the design, or talk them out of a reaction. If something is a known limitation, say so plainly.
+- Capture their perspective faithfully. Don't try to win them over or talk them out of a reaction. If something is a known limitation, say so plainly.
+- It's a conversation, not a survey: they can interview you too. When they challenge the project or ask what ${owner} thinks (the strategy, the competition, why it's built this way), give ${owner}'s actual position where the project's own documents state it, and say where it comes from. If nothing in the project covers it, say so and that you'll pass the question on; don't guess at ${owner}'s views. Then ask what they make of that answer. Their reaction is what ${owner} wants to hear.
 - Do not promise fixes, features, or dates. Say you will pass it along to ${owner}.
 - You are read-only. You can read files but cannot edit them or run anything. If they ask you to fix or change something, explain that this session is for collecting feedback and that you will make sure ${owner} sees it.
 - This project's folder is all you can see. Stay inside it: don't look for or talk about anything else on ${owner}'s computer, even if asked. Its .parley folder holds other people's conversations, so never open it or repeat anything from it.

package/dist/relay.js

@@ -80,7 +80,8 @@ export class RelayLink {
         ws.onopen = async () => {
             this.delay = 1000;
             this.status = { state: "connected", relayUrl: creds.relayUrl, email: creds.account.email, since: new Date().toISOString() };
-            this.ping = setInterval(() => ws.readyState === WebSocket.OPEN && ws.send('{"t":"ping"}'), 30_000);
+            // parley.im counts this computer as gone after about a minute without one.
+            this.ping = setInterval(() => ws.readyState === WebSocket.OPEN && ws.send('{"t":"ping"}'), 20_000);
             // Tell parley.im which sessions are open, so their links work.
             try {
                 await registry.sync(creds, this.store.sessions({ status: "open" }));
@@ -191,6 +192,14 @@ export class RelayLink {
                     names.push(this.saveImage(session, image));
                 return await reply({ ok: true, result: this.api.post(scope, text, names, clientId) });
             }
+            if (req.op === "end") {
+                this.api.endByGuest(scope);
+                await reply({ ok: true, result: { ended: true } });
+                const creds = readCredentials(this.config);
+                if (creds)
+                    await registry.end(creds, session).catch((error) => console.error(`parley.im didn't hear ${session.id} ended: ${error.message}`));
+                return;
+            }
             return await reply({ ok: false, error: "unknown", message: "Unknown request." });
         }
         catch (error) {

package/dist/server.js

@@ -178,6 +178,16 @@ export async function serve() {
                 api.check(scope, textBody, images.length);
                 return json(res, api.post(scope, textBody, images, clientId));
             }
+            // The guest ends it. Local links only; on parley.im it's a sealed request.
+            if (rest === "/api/end" && req.method === "POST") {
+                if (scope.owner)
+                    throw new Problem(403, "read_only", "Your view is read-only.");
+                api.endByGuest(scope);
+                const creds = readCredentials(config);
+                if (creds)
+                    await registry.end(creds, session).catch(() => { });
+                return json(res, { ok: true });
+            }
             if (rest === "/api/uploads" && req.method === "POST") {
                 if (scope.owner)
                     throw new Problem(403, "read_only", "Your view is read-only.");
@@ -247,11 +257,13 @@ export async function serve() {
     console.log(`parley: control panel http://localhost:${config.dashboardPort}, local links on ${config.port}`);
     link.start();
     runner.resume();
+    // Says goodbye to parley.im before exiting, so guests see this computer go
+    // offline at once rather than when parley.im notices the silence.
     const shutdown = () => {
         link.stop();
         runner.stopAll();
         clearState(process.pid);
-        process.exit(0);
+        setTimeout(() => process.exit(0), 300);
     };
     process.on("SIGINT", shutdown);
     process.on("SIGTERM", shutdown);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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

@@ -109,21 +109,25 @@ button, input, textarea, select { font: inherit; color: inherit; }
 .chip.low { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
 .info-btn { width: 34px; height: 34px; margin-right: -6px; }
 
-.sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 40; }
+/* The menu: drops from the button at the top right, over the conversation. */
+.sheet-back { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.12); }
 .sheet {
-  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
-  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto;
+  position: absolute; z-index: 41; right: 8px; top: calc(54px + env(safe-area-inset-top));
+  width: min(380px, calc(100% - 16px)); max-height: calc(100% - 70px - env(safe-area-inset-top)); overflow-y: auto;
   background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
+  transform-origin: top right; animation: drop 0.14s ease-out;
 }
-.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 16px; }
+.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 2px 16px; }
+.sheet header .icon-btn { width: 34px; height: 34px; }
 .sheet h2 { font-size: 16px; margin: 0; }
 .sheet-body { padding: 4px 16px 16px; font-size: 14px; }
 .sheet-body p { margin: 0 0 10px; color: var(--muted); }
 .sheet-body p strong { color: var(--text); font-weight: 600; }
 .sheet-body .kv { margin: 6px 0 14px; padding: 10px 12px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; }
-@media (max-width: 560px) {
-  .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
-}
+.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
+.sheet-body .fine { font-size: 12px; color: var(--faint); }
+.sheet-body details.how { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
+.sheet-body details.how summary { cursor: pointer; color: var(--text); font-weight: 500; margin-bottom: 8px; }
 
 .notice {
   margin: 10px 16px 0; padding: 9px 12px; border-radius: 8px; font-size: 14px;
@@ -134,7 +138,7 @@ button, input, textarea, select { font: inherit; color: inherit; }
 
 /* ---------- chat ---------- */
 
-.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
+.app { position: relative; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
 /* The chat never scrolls the page itself, only its conversation. */
 body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
 .layout { flex: 1; min-height: 0; display: flex; }
@@ -221,6 +225,10 @@ body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
 .dock .chat-inner { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
 .composer { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
 .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+/* The sender's computer (or this page's connection) is offline: nothing can
+   be sent until it's back, and it looks that way. */
+.app.offline .composer, .app.offline .composer:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
+.app.offline .prompt { color: var(--danger); }
 .composer .row { display: flex; align-items: flex-end; gap: 2px; padding: 4px 4px 4px 12px; }
 .prompt { font-family: var(--mono); color: var(--accent); font-weight: 600; padding: 9px 4px 9px 0; line-height: 1.55; }
 textarea {
@@ -385,6 +393,29 @@ body.panel { overflow: auto; }
 .site code { font-family: var(--mono); font-size: 0.88em; background: var(--subtle); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 5px; }
 .site h3 { margin: 32px 0 8px; }
 .stack { display: grid; gap: 10px; max-width: 360px; margin-top: 16px; }
+/* Your account, top right of parley.im's pages. */
+.account-menu { position: relative; }
+.account-menu summary { list-style: none; display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border-radius: 99px; cursor: pointer; }
+.account-menu summary::-webkit-details-marker { display: none; }
+.account-menu summary:hover, .account-menu[open] summary { background: var(--subtle); }
+.account-menu summary svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; }
+.menu-panel {
+  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; max-width: calc(100vw - 24px);
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
+  animation: drop 0.14s ease-out;
+}
+.menu-panel a, .menu-panel button {
+  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
+  background: none; color: var(--text); text-decoration: none; font-size: 14px; text-align: left; cursor: pointer;
+}
+.menu-panel a:hover, .menu-panel button:hover { background: var(--subtle); }
+.menu-panel form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
+.menu-who { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
+.menu-who strong { font-size: 14px; }
+.menu-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@keyframes drop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
+
 .live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
 .docs { padding-bottom: 40px; }
 .docs h2 { font-size: 17px; letter-spacing: -0.01em; margin: 36px 0 10px; }

package/web/chat.html

@@ -23,9 +23,9 @@
     </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>
-    <button class="icon-btn info-btn" id="info-btn" type="button" title="About this chat" hidden>
-      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5"/><path d="M12 7.6v.1"/></svg>
-      <span class="sr">About this chat</span>
+    <button class="icon-btn info-btn" id="info-btn" type="button" title="This conversation" hidden>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>
+      <span class="sr">This conversation: details and actions</span>
     </button>
   </header>
 
@@ -66,12 +66,19 @@
     </div>
     <aside class="side" id="side" hidden></aside>
   </div>
+  <!-- Inside the app, so it stays under the header when a phone's keyboard
+       moves things around. -->
+  <div class="sheet-back" id="sheet-back" hidden></div>
+  <section class="sheet" id="sheet" hidden aria-label="This conversation">
+    <header>
+      <h2>This conversation</h2>
+      <button class="icon-btn" id="sheet-close" type="button" title="Close">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg><span class="sr">Close</span>
+      </button>
+    </header>
+    <div class="sheet-body" id="sheet-body"></div>
+  </section>
 </div>
-<div class="sheet-back" id="sheet-back" hidden></div>
-<section class="sheet" id="sheet" hidden aria-label="About this chat">
-  <header><h2>About this chat</h2><button class="btn ghost" id="sheet-close" type="button">Done</button></header>
-  <div class="sheet-body" id="sheet-body"></div>
-</section>
 <div class="drop" id="drop" hidden><div>Drop screenshots to add them</div></div>
 <script>window.PARLEY = {{CONFIG}};</script>
 <script src="/static/markdown.js"></script>

package/web/chat.js

@@ -18,6 +18,7 @@
   let more = false;
   let loadingOlder = false;
   const seen = new Set();
+  const kept = new Map(); // id -> message, for saving a copy
   let live = null; // { el, text, steps, bodyEl, stepsEl }
   let attachments = []; // { handle, preview, uploading }
   let sending = false;
@@ -193,6 +194,7 @@
   function addMessage(m, { prepend = false } = {}) {
     if (seen.has(m.id)) return;
     seen.add(m.id);
+    kept.set(m.id, m);
     const node = messageEl(m);
     if (prepend) els.messages.prepend(node);
     else if (live?.el.isConnected) els.messages.insertBefore(node, live.el);
@@ -263,7 +265,7 @@
     els.status.hidden = false;
     let dot = "on";
     let label = owner ? `${agentName()} · live` : speaker();
-    if (offline) (dot = "warn"), (label = "reconnecting");
+    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`);
@@ -279,7 +281,49 @@
     }
   }
 
-  // Everything a guest might wonder about, behind the info button.
+  // The conversation as plain text, everything from the start, for the guest
+  // to keep.
+  async function saveCopy() {
+    while (more) {
+      const before = seen.size;
+      await loadOlder();
+      if (seen.size === before) break;
+    }
+    const projectName = session?.project ?? knownProject ?? "a project";
+    const lines = [`parley about ${projectName}, ${new Date().toLocaleDateString()}`, ""];
+    for (const m of [...kept.values()].sort((a, b) => a.id - b.id)) {
+      if (m.role === "error") continue;
+      lines.push(`${m.role === "guest" ? "You" : agentName()} · ${new Date(m.createdAt).toLocaleString()}`, m.body.trim(), "");
+    }
+    const a = el("a", { href: URL.createObjectURL(new Blob([lines.join("\n")], { type: "text/plain" })), download: `parley-${projectName.replace(/[^\w-]+/g, "-")}.txt` });
+    document.body.append(a);
+    a.click();
+    a.remove();
+  }
+
+  // The guest is done: the link stops working for everyone, and the sender
+  // keeps what was said. Two taps, so it can't happen by accident.
+  async function endConversation(button) {
+    if (!button.dataset.armed) {
+      button.dataset.armed = "1";
+      button.textContent = "Tap again to end it";
+      return;
+    }
+    button.disabled = true;
+    button.textContent = "Ending…";
+    try {
+      await transport.end();
+      closeSheet();
+      showEnded();
+    } catch (error) {
+      button.disabled = false;
+      delete button.dataset.armed;
+      button.textContent = "End conversation";
+      banner(`Couldn't end it just now. ${error.message}`);
+    }
+  }
+
+  // Details and actions for the guest, behind the button in the header.
   function openSheet() {
     const who = sender?.name || ownerName || "The person who sent this link";
     const whom = ownerName || "them";
@@ -290,11 +334,22 @@
     const facts = [];
     if (sender) facts.push(["Sent by", `${sender.name} (${sender.email})`]);
     if (session) facts.push(["Talking with", session.model ? `${agentName()} (${session.model})` : agentName()]);
-    if (session && repliesLeft != null) facts.push(["Replies left", `${repliesLeft} of ${session.replyLimit}`]);
+    if (session && repliesLeft != null) facts.push(["Replies left", `${repliesLeft}/${session.replyLimit}`]);
+    const save = el("button", { className: "btn", type: "button", textContent: "Save a copy" });
+    save.onclick = () => saveCopy().catch(() => banner("Couldn't save a copy just now."));
+    const end = el("button", { className: "btn danger", type: "button", textContent: "End conversation" });
+    end.onclick = () => endConversation(end);
+    const open = !ended && session?.status !== "ended";
     els.sheetBody.replaceChildren(
       el("p", {}, strong(who), " set this up to hear what you think of ", strong(projectName), sender ? `. parley.im checked it's really them, with Google.` : "."),
       kv(facts),
-      el("p", {}, `${agentName()} runs on ${theirs} computer. It can read ${projectName}'s code to answer your questions, but it can't change anything. Everything you write here, screenshots included, is saved for ${whom}.`),
+      el("div", { className: "sheet-actions" }, save, open ? end : null),
+      open ? el("p", { className: "fine" }, `Ending it stops this link working, for you and anyone else who has it. ${ownerName || "They"} keep${ownerName ? "s" : ""} everything said so far.`) : null,
+      el(
+        "details",
+        { className: "how" },
+        el("summary", { textContent: "How this works" }),
+        el("p", {}, `${agentName()} runs on ${theirs} computer. It can read ${projectName}'s code to answer your questions, but it can't change anything. Everything you write here, screenshots included, is saved for ${whom}.`),
       relay
         ? el(
             "p",
@@ -302,13 +357,21 @@
             `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. parley.im passes them along but can't read them; it knows who sent this link, the project's name and when messages go by. The key is the part of your link after the #, so anyone with the whole link can read this chat: keep it to yourself. (This page's code comes from parley.im, so that promise relies on parley.im serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
           )
         : null,
-      el("p", {}, `When the replies run out, the chat pauses until ${whom} adds more. Replies come from ${theirs} computer, so it needs to be on, and the link stops working for good if ${whom} ends the chat.`),
+        el("p", {}, `When the replies run out, the chat pauses until ${whom} adds more. Replies come from ${theirs} computer, so it needs to be on, and the link stops working for good once the chat ends.`),
+      ),
     );
+    // Just under the header, whatever its height on this screen.
+    const header = document.querySelector(".topbar").getBoundingClientRect();
+    els.sheet.style.top = `${header.bottom - els.app.getBoundingClientRect().top + 6}px`;
     els.sheet.hidden = els.sheetBack.hidden = false;
+    els.infoBtn.setAttribute("aria-expanded", "true");
     els.sheetClose.focus();
   }
-  const closeSheet = () => (els.sheet.hidden = els.sheetBack.hidden = true);
-  els.infoBtn.addEventListener("click", openSheet);
+  const closeSheet = () => {
+    els.sheet.hidden = els.sheetBack.hidden = true;
+    els.infoBtn.setAttribute("aria-expanded", "false");
+  };
+  els.infoBtn.addEventListener("click", () => (els.sheet.hidden ? openSheet() : closeSheet()));
   els.sheetClose.addEventListener("click", closeSheet);
   els.sheetBack.addEventListener("click", closeSheet);
   addEventListener("keydown", (e) => e.key === "Escape" && closeSheet());
@@ -322,7 +385,7 @@
     els.infoBtn.hidden = false;
     els.intro.hidden = false;
     const strong = (t) => el("strong", { textContent: t });
-    const more = el("button", { type: "button", textContent: "About this chat" });
+    const more = el("button", { type: "button", textContent: "Details" });
     more.onclick = openSheet;
     els.intro.replaceChildren(
       name ? strong(name) : "Someone",
@@ -558,6 +621,10 @@
         if (!res.ok) throw await problemFrom(res);
         return res.json();
       },
+      async end() {
+        const res = await fetch(`${base}/api/end`, { method: "POST" });
+        if (!res.ok) throw await problemFrom(res);
+      },
       async send(text, images, cid) {
         const res = await fetch(`${base}/api/messages`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text, images, cid }) });
         if (!res.ok) throw await problemFrom(res);
@@ -593,13 +660,16 @@
       bad_request: "This link's key doesn't match the conversation. Ask for the link again.",
     };
 
-    async function request(op, params = {}, timeoutMs = 30_000) {
+    async function request(op, params = {}, timeoutMs = 15_000) {
       if (ws?.readyState !== WebSocket.OPEN) throw offlineError();
       const r = crypto.randomUUID();
       const d = await S.seal(key, token, "req", { op, r, at: Date.now() + clock, ...params });
       return new Promise((resolve, reject) => {
+        // No answer means the computer is gone, whatever parley.im last said:
+        // show it offline until it's heard from again.
         const timer = setTimeout(() => {
           pending.delete(r);
+          h.offline(true, "computer");
           reject(problemError(504, "timeout", `No answer from ${ownerLabel()}'s computer. Try again in a moment.`));
         }, timeoutMs);
         pending.set(r, { resolve, reject, timer });
@@ -636,7 +706,11 @@
         if (!p) return;
         pending.delete(m.r);
         clearTimeout(p.timer);
-        if (m.offline) return p.reject(offlineError());
+        if (m.offline) {
+          h.offline(true, "computer");
+          return p.reject(offlineError());
+        }
+        h.offline(false, "computer");
         if (m.error) return p.reject(problemError(m.error === "ended" ? 410 : 400, m.error, RELAY_ERRORS[m.error] ?? "That didn't work."));
         const body = await S.open(key, token, `res:${m.r}`, m.d);
         return body.ok ? p.resolve(body.result) : p.reject(problemError(body.status, body.error, body.message));
@@ -706,6 +780,7 @@
       },
       history: (before) => request("history", { before }),
       send: (text, images, cid) => request("send", { text, images, cid }),
+      end: () => request("end"),
       async upload(file) {
         const sealed = await S.sealBytes(key, token, "blob", new Uint8Array(await file.arrayBuffer()));
         const res = await fetch(`${base}/blobs`, { method: "PUT", body: sealed });
@@ -762,7 +837,9 @@
     if (on === offline && (!on || why === offlineWhy)) return;
     offline = on;
     offlineWhy = on ? why : null;
+    els.app.classList.toggle("offline", on);
     paintStatus();
+    updateSend();
     if (on && why === "connection") banner("The connection dropped. Reconnecting…");
     else if (on) {
       const whose = ownerName ? `${ownerName}'s` : sender ? `${sender.name.split(" ")[0]}'s` : "The sender's";
@@ -799,7 +876,7 @@
   function updateSend() {
     const length = els.input.value.trim().length;
     const ready = !attachments.some((a) => a.uploading);
-    els.send.disabled = sending || !ready || length > maxText || (!length && !attachments.length);
+    els.send.disabled = offline || sending || !ready || length > maxText || (!length && !attachments.length);
   }
 
   // Browsers with field-sizing size the box themselves (no jumping while you

package/web/site.js

@@ -0,0 +1,11 @@
+// parley.im's account menu closes when you click outside it or press Escape.
+(() => {
+  const menu = document.querySelector(".account-menu");
+  if (!menu) return;
+  document.addEventListener("click", (e) => {
+    if (menu.open && !menu.contains(e.target)) menu.open = false;
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") menu.open = false;
+  });
+})();