@parley-im/parley 0.2.12 → 0.2.14

package/README.md

@@ -55,7 +55,7 @@ guest's browser ──wss──▶ parley.im (Cloudflare Worker) ◀──wss─
 
 Each session has a random 256-bit key, kept in your parley database and in the link after the `#`, which browsers never send to a server. Every request, reply, live update and screenshot is sealed with AES-256-GCM (fresh IV each time) and bound to its session and direction, so parley.im can't read or alter anything, or move it between sessions. Your computer refuses requests older than five minutes or seen before, so replays go nowhere. `src/seal.ts` and `web/seal.js` are the two halves; the tests check they read each other.
 
-What it doesn't hide, said plainly on the guest's info sheet: parley.im knows who sent a link, the project name, and when messages pass; the page's code comes from parley.im, so the promise relies on parley.im serving it honestly (a strict Content-Security-Policy means the key can only ever go back to parley.im); and Claude or Codex reads the conversation to reply. Anyone with the whole link can read and join the chat.
+What it doesn't hide, said plainly on the guest's info sheet: parley.im knows who sent a link, the project name, which agent is answering and how many replies it has given, and when messages pass; the page's code comes from parley.im, so the promise relies on parley.im serving it honestly (a strict Content-Security-Policy means the key can only ever go back to parley.im); and Claude or Codex reads the conversation to reply. Anyone with the whole link can read and join the chat.
 
 ## What the guest gets
 

package/dist/account.js

@@ -32,9 +32,11 @@ async function call(creds, path, init = {}) {
         signal: AbortSignal.timeout(15_000),
     });
     if (res.status === 401)
-        throw Object.assign(new Error("This computer isn't linked to your parley account anymore. Run parley login."), { unlinked: true });
-    if (!res.ok)
-        throw new Error((await res.json().catch(() => null))?.message ?? `Parley's servers answered ${res.status}`);
+        throw Object.assign(new Error("This computer isn't linked to your Parley account anymore. Run parley login."), { unlinked: true });
+    if (!res.ok) {
+        const body = (await res.json().catch(() => null));
+        throw Object.assign(new Error(body?.message ?? `Parley's servers answered ${res.status}`), { status: res.status, code: body?.error });
+    }
     return res.json();
 }
 // What parley.im is told about a session: its id and a title for link
@@ -74,7 +76,7 @@ export async function login(config, show) {
         }
         // Signed in on parley.im, but not let in yet: no computer links until then.
         if (poll.status === "waitlisted") {
-            throw new Error(`You're on the parley waitlist as ${poll.email}. You'll get an email when you're let in; then run parley login again.`);
+            throw new Error(`You're on the Parley waitlist as ${poll.email}. You'll get an email when you're let in; then run parley login again.`);
         }
         if (poll.status === "expired")
             break;

package/dist/api.js

@@ -142,6 +142,7 @@ export class Conversations {
     ownerView(s) {
         return {
             id: s.id,
+            token: s.token,
             project: s.project_name,
             projectDir: s.project_dir,
             guest: s.guest,

package/dist/relay.js

@@ -6,6 +6,7 @@ import { Problem, MAX_IMAGES } from "./api.js";
 import { readCredentials, relay as registry } from "./account.js";
 import { seal, open, sealBytes, openBytes } from "./seal.js";
 import { VERSION } from "./version.js";
+import { modelLabel } from "./models.js";
 const IMAGE_TYPES = { "image/png": ".png", "image/jpeg": ".jpg", "image/gif": ".gif", "image/webp": ".webp" };
 const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
 const MAX_SEALED_BYTES = 11 * 1024 * 1024;
@@ -89,6 +90,8 @@ export class RelayLink {
             catch (error) {
                 console.error(`parley.im sync failed: ${error.message}`);
             }
+            this.told = "";
+            this.tellDashboard();
         };
         ws.onmessage = (event) => {
             this.onFrame(String(event.data)).catch((error) => console.error("relay frame:", error));
@@ -303,7 +306,32 @@ export class RelayLink {
             this.send({ t: "piece", r: frame.r, d: Buffer.from(sealed.subarray(at, at + PIECE)).toString("base64url") });
         answer({});
     }
+    // For your dashboard on parley.im: which agent runs each open session and
+    // how many of its replies it has used, and the port this computer's control
+    // panel listens on. Never the guest's name, the brief or anything said.
+    told = "";
+    telling = null;
+    tellDashboard() {
+        if (this.telling)
+            return;
+        this.telling = setTimeout(() => {
+            this.telling = null;
+            if (this.ws?.readyState !== WebSocket.OPEN)
+                return;
+            const sessions = {};
+            for (const s of this.store.sessions({ status: "open" })) {
+                sessions[s.token] = { agent: s.agent, model: modelLabel(this.store.latestModel(s.id) ?? s.model), used: this.store.repliesUsed(s.id), limit: s.reply_limit };
+            }
+            const frame = JSON.stringify({ t: "meta", panel: this.config.dashboardPort, sessions });
+            if (frame === this.told)
+                return;
+            this.told = frame;
+            this.ws.send(frame);
+        }, 1000);
+    }
     forward(sessionId, entry) {
+        if (entry.event.type === "replies" || entry.event.type === "ended")
+            this.tellDashboard();
         if (this.ws?.readyState !== WebSocket.OPEN)
             return;
         const session = this.store.session(sessionId);

package/dist/server.js

@@ -105,6 +105,12 @@ export async function serve() {
                 return problem(res, 400, "invalid", error.message);
             }
             const shared = await share(session);
+            // Parley's servers refused it for good (the account is at its limit
+            // of open sessions), so it isn't kept here either.
+            if (typeof shared === "string") {
+                store.deleteSession(session.id);
+                return problem(res, 429, "too_many", shared);
+            }
             return json(res, { ...api.ownerView(session), session, shared });
         }
         const action = url.pathname.match(/^\/api\/sessions\/([a-z0-9]+)\/(end|delete|limit)$/);
@@ -137,17 +143,20 @@ export async function serve() {
         return handleSession(req, res, { session, base: `/o/${m[1]}`, owner: true, images: "url" }, m[2] ?? "/", url);
     }
     // Registers a new session with parley.im so its link works there.
+    // True once parley.im has it; false if it couldn't be reached (the next
+    // connection's sync catches up); the reason if it refused for good.
     async function share(session) {
         const creds = readCredentials(config);
         if (!creds)
             return false;
         try {
             await registry.register(creds, session);
+            link.tellDashboard();
             return true;
         }
         catch (error) {
             console.error(`parley.im didn't take ${session.id}: ${error.message}`);
-            return false;
+            return error.code === "too_many" ? error.message : false;
         }
     }
     async function handleSession(req, res, scope, rest, url) {

package/package.json

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

@@ -513,6 +513,9 @@ span.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px
   .docs .flow { grid-template-columns: 1fr; gap: 26px; }
   .docs .flow div + div::before { left: 50%; top: -21px; transform: translateX(-50%) rotate(90deg); }
 }
+/* Admin: letting people in a batch at a time. */
+.let-in-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 14px; }
+.let-in-next .search { flex: none; width: 76px; }
 /* Admin: page views and where visitors came from. */
 .table-wrap { overflow-x: auto; }
 table.views { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
@@ -523,6 +526,16 @@ table.views tfoot td { font-weight: 600; border-bottom: 0; }
 .referrers { list-style: none; padding: 0; margin: 0 0 40px; max-width: 420px; }
 .referrers li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
 .trow.site-row { grid-template-columns: 1fr auto; }
+.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
+.dash-hero h1 { margin-bottom: 4px; }
+.dash-hero p { margin: 0; }
+.dash .stats { margin: 24px 0 8px; }
+.dash .stat .value { white-space: nowrap; }
+.dash .row-actions { align-items: center; }
+.dash .row-actions .live { margin-right: 6px; }
+.dash .update-note { font-size: 12.5px; color: var(--warn); margin-top: 4px; }
+.dash .empty q { color: var(--text); }
+.dash .setup { margin-top: 24px; }
 /* Long details shorten instead of pushing the buttons off a phone screen. */
 .trow.site-row .who-cell { min-width: 0; }
 
@@ -579,6 +592,14 @@ table.views tfoot td { font-weight: 600; border-bottom: 0; }
 .how h2 { font-size: 20px; margin: 0; }
 .how p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
 .how q { color: var(--text); }
+.setup { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 16px 0 0; }
+.setup > div { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--panel); display: grid; gap: 12px; align-content: start; min-width: 0; }
+.setup h2 { font-size: 20px; margin: 0; }
+.setup p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
+.setup .paste { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); padding: 10px 10px 10px 14px; }
+.setup .paste code { flex: 1 1 230px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: break-word; }
+.setup .paste .btn { flex: none; height: 32px; padding: 0 12px; font-size: 13px; }
+.setup pre { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px 14px; font-size: 13.5px; line-height: 1.7; overflow-x: auto; color: var(--text); }
 .promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin: 40px 0 0; padding: 32px 0 48px; border-top: 1px solid var(--line-strong); }
 .promises h3 { font-family: var(--sans); font-size: 16px; letter-spacing: 0; margin: 0 0 6px; }
 .promises p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }

package/web/chat.js

@@ -367,7 +367,7 @@
         ? el(
             "p",
             {},
-            `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. Parley passes them along but can't read them; it knows who sent this link, the project's name and when messages go by, and counts how many times pages are opened each day. 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's servers, so that promise relies on Parley serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
+            `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. Parley passes them along but can't read them; it knows who sent this link, the project's name, which agent is answering and how many replies it has given, and when messages go by, and counts how many times pages are opened each day. 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's servers, so that promise relies on Parley 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 once the chat ends.`),

package/web/dashboard.js

@@ -1,11 +1,15 @@
 // 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. Each
+// now, when they were last active, whether a reply is coming in, and what
+// each computer says about its sessions (which agent, replies used). 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 PANEL = 4748;
+  const live = new Map(); // session id -> { here, active, replying, online, agent, model, used, limit }
+  const computers = new Map(); // computer id -> { on, version }
+  const latest = document.querySelector(".dash")?.dataset.latest || "";
 
   const ago = (ms) => {
     const s = Math.max(0, Math.round((Date.now() - ms) / 1000));
@@ -14,25 +18,67 @@
     if (s < 86400) return `${Math.round(s / 3600)}h ago`;
     return `${Math.round(s / 86400)}d ago`;
   };
+  const newer = (a, b) => {
+    const pa = a.split(".").map(Number);
+    const pb = b.split(".").map(Number);
+    for (let i = 0; i < 3; i++) if ((pa[i] ?? 0) !== (pb[i] ?? 0)) return (pa[i] ?? 0) > (pb[i] ?? 0);
+    return false;
+  };
   const dot = (kind, text) => {
     const span = document.createElement("span");
     span.className = `dot${kind ? ` ${kind}` : ""}`;
     return [span, document.createTextNode(text)];
   };
+  const replyingNow = (s) => s.replying && Date.now() - s.replying < REPLYING_MS;
+  const outOfReplies = (s) => s.limit && s.used != null && s.used >= s.limit;
   // Matches live() in relay/src/pages.ts.
   const liveNodes = (s) => {
     if (s.online === false) return dot("off", "computer offline");
-    if (s.replying && Date.now() - s.replying < REPLYING_MS) return dot("busy", "replying");
+    if (replyingNow(s)) return dot("busy", "replying");
+    if (outOfReplies(s)) return dot("warn", "out of replies");
     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");
   };
+  // Matches about() in relay/src/pages.ts.
+  const about = (s) => (s.agent ? `${s.agent === "codex" ? "Codex" : "Claude"}${s.model ? ` ${s.model}` : ""} · ${s.used}/${s.limit} replies · ` : "");
+
+  function setStat(key, value, note) {
+    const v = document.querySelector(`[data-stat="${key}"]`);
+    const n = document.querySelector(`[data-note="${key}"]`);
+    if (v) v.textContent = value;
+    if (n) n.textContent = note;
+  }
+
+  // The numbers at the top, from the same news as the rows.
+  function paintStats() {
+    const rows = [...document.querySelectorAll("[data-session]")].map((row) => live.get(row.dataset.session)).filter(Boolean);
+    if (!rows.length && !computers.size) return;
+    const replying = rows.filter(replyingNow).length;
+    const out = rows.filter(outOfReplies).length;
+    const open = document.querySelectorAll("[data-session]").length;
+    setStat("open", String(open), replying ? `${replying} replying now` : out ? `${out} out of replies` : open ? "links are live" : "none yet");
+    const here = rows.reduce((n, s) => n + s.here, 0);
+    const busy = rows.filter((s) => s.here).length;
+    const last = Math.max(0, ...rows.map((s) => s.active ?? 0));
+    setStat("here", String(here), busy ? `on ${busy === 1 ? "one session" : `${busy} sessions`}` : last ? `last active ${ago(last)}` : "no one yet");
+    const told = rows.filter((s) => s.used != null);
+    if (told.length) setStat("replies", String(told.reduce((n, s) => n + s.used, 0)), `of ${told.reduce((n, s) => n + s.limit, 0)} allowed`);
+    const all = document.querySelectorAll("[data-computer]");
+    const on = [...computers.values()].filter((c) => c.on);
+    const outdated = [...all].some((row) => latest && row.dataset.version && newer(latest, row.dataset.version));
+    setStat("computers", `${on.length} of ${all.length}`, outdated ? "an update is out" : on[0]?.version ? `Parley ${on[0].version}` : on.length ? "connected" : "none connected");
+  }
 
   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));
+      if (!s) continue;
+      row.querySelector(".live")?.replaceChildren(...liveNodes(s));
+      const text = about(s);
+      if (text) row.querySelector(".about").textContent = text;
     }
+    paintStats();
   }
 
   function apply(computer, m) {
@@ -40,6 +86,7 @@
     if (m.t !== "live") return;
     // Times come from parley.im's clock; shift them onto this one.
     const shift = Date.now() - m.now;
+    const panel = `http://localhost:${m.panel || PANEL}`;
     for (const row of document.querySelectorAll(`[data-device="${computer}"]`)) {
       const s = m.sessions[row.dataset.session] ?? {};
       live.set(row.dataset.session, {
@@ -47,12 +94,22 @@
         here: s.here ?? 0,
         active: s.active ? s.active + shift : null,
         replying: s.replying ? s.replying + shift : null,
+        agent: s.agent ?? null,
+        model: s.model ?? null,
+        used: s.used ?? null,
+        limit: s.limit ?? null,
       });
+      const open = row.querySelector("a.btn");
+      if (open) open.href = `${panel}/#s=${encodeURIComponent(row.dataset.session)}`;
     }
+    computers.set(computer, { on: m.on, version: m.version });
     const row = document.querySelector(`[data-computer="${computer}"]`);
     if (row) {
+      if (m.version) row.dataset.version = m.version;
       row.querySelector(".dot").className = `dot${m.on ? " on" : ""}`;
       row.querySelector(".computer-status").textContent = m.on ? `online now${m.version ? ` · Parley ${m.version}` : ""}` : "offline";
+      row.querySelector(".update-note").hidden = !(latest && row.dataset.version && newer(latest, row.dataset.version));
+      row.querySelector("a.btn").href = panel;
     }
     paint();
   }
@@ -72,6 +129,18 @@
     };
   }
 
+  // "Copy" for the line people paste into their agent, before any computer
+  // is linked.
+  document.querySelectorAll("[data-copy]").forEach((button) => {
+    if (!navigator.clipboard) return;
+    button.hidden = false;
+    button.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(document.getElementById(button.dataset.copy).textContent);
+      button.textContent = "Copied";
+      setTimeout(() => (button.textContent = "Copy"), 1500);
+    });
+  });
+
   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

@@ -139,6 +139,17 @@
     }
   }
 
+  // "Copy" for the line people paste into their agent.
+  document.querySelectorAll("[data-copy]").forEach((button) => {
+    if (!navigator.clipboard) return;
+    button.hidden = false;
+    button.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(document.getElementById(button.dataset.copy).textContent);
+      button.textContent = "Copied";
+      setTimeout(() => (button.textContent = "Copy"), 1500);
+    });
+  });
+
   tabs.forEach((tab, i) => tab.addEventListener("click", () => (still ? show(i) : loop(i, STAY))));
   if (!still) loop(0);
 })();

package/web/panel.js

@@ -30,10 +30,19 @@
     return json;
   }
 
+  // A session's "Open" on the parley.im dashboard comes here as #s=<its link id>.
+  let wanted = location.hash.match(/^#s=([A-Za-z0-9_-]+)$/)?.[1] ?? null;
+
   async function refresh() {
     try {
       const res = await fetch("/api/panel", { cache: "no-store" });
       data = await res.json();
+      if (wanted) {
+        const found = data.sessions.find((s) => s.token === wanted);
+        wanted = null;
+        history.replaceState(null, "", location.pathname);
+        if (found) return location.replace(`/o/${found.id}`);
+      }
       render();
     } catch {
       $("server-dot").className = "dot off";