@parley-im/parley 0.2.13 → 0.2.15

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/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

@@ -151,6 +151,7 @@ export async function serve() {
             return false;
         try {
             await registry.register(creds, session);
+            link.tellDashboard();
             return true;
         }
         catch (error) {

package/package.json

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

@@ -334,7 +334,10 @@ textarea::placeholder { color: var(--faint); }
 .linkbox { display: flex; gap: 6px; }
 .linkbox input { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 8px; background: var(--subtle); font-family: var(--mono); font-size: 12px; }
 
-@media (max-width: 900px) {
+/* Your session view only runs on your own computer, so the side panel stays
+   beside the conversation in all but the narrowest windows. */
+@media (max-width: 900px) { .side { width: 280px; } }
+@media (max-width: 600px) {
   .layout { flex-direction: column; }
   .side { width: auto; border-left: 0; border-bottom: 1px solid var(--line); max-height: 45vh; order: -1; }
 }
@@ -526,6 +529,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; }
 
@@ -582,6 +595,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.`),
@@ -486,81 +486,109 @@
     } catch {}
   }
 
+  // The side panel is built once (again only when the session ends, since
+  // its controls change) and refreshes only update what's in it, so scrolling
+  // the brief, typing a reply limit or a pending "End it for good?" survive
+  // the refresh every few seconds.
+  let side = null;
+
   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.guest} on ${s.project}` }),
-    );
+    const open = s.status === "open";
+    if (!side || side.open !== open) buildSide(open);
     document.title = `${s.guest} on ${s.project} · Parley`;
+    side.here.textContent = `${s.guest} on ${s.project}`;
     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 })]));
+    side.sub.textContent = `${s.project} · ${s.agent === "codex" ? "Codex" : "Claude"} · ${open ? (s.busy ? "replying now" : "open") : "ended"}`;
+    side.meter.className = `meter ${s.repliesLeft === 0 ? "full" : ""}`;
+    side.bar.style.width = `${Math.min(100, Math.round((used / s.replyLimit) * 100))}%`;
+    side.replies.textContent = s.repliesLeft === 0 ? `All ${s.replyLimit} used. The guest is paused until you add more.` : `${used} of ${s.replyLimit} used, ${s.repliesLeft} left`;
+    if (side.limit && document.activeElement !== side.limit) side.limit.value = String(s.replyLimit);
     const ago = (iso) => (iso ? `${clock(iso)}, ${new Date(iso).toLocaleDateString([], { month: "short", day: "numeric" })}` : "not yet");
+    const values = [
+      String(s.stats.guest_messages),
+      s.model ?? "known after the first reply",
+      s.stats.cost_usd ? `$${s.stats.cost_usd.toFixed(2)} at API prices` : s.agent === "codex" ? "not reported by Codex" : "$0.00",
+      ago(s.stats.last_guest_at),
+      ago(s.createdAt),
+      s.id,
+    ];
+    values.forEach((v, i) => side.values[i].textContent !== v && (side.values[i].textContent = v));
+    if (side.link && side.link.value !== s.link) side.link.value = s.link;
+    if (side.brief.textContent !== s.brief) side.brief.textContent = s.brief;
+    paintStatus();
+  }
 
-    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)" });
+  function buildSide(open) {
+    const kv = (keys) => {
+      const values = keys.map(() => el("dd"));
+      return [el("dl", { className: "kv" }, ...keys.flatMap((k, i) => [el("dt", { textContent: k }), values[i]])), values];
+    };
     const setLimit = async (limit) => {
-      await post(`/api/sessions/${s.id}/limit`, { limit });
+      await post(`/api/sessions/${session.id}/limit`, { limit });
       refreshSide();
     };
-    const open = s.status === "open";
-    const linkInput = el("input", { value: s.link, readOnly: true });
-    linkInput.addEventListener("focus", () => linkInput.select());
+    const limit = open ? el("input", { type: "number", min: "1", style: "width:80px;height:32px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;background:var(--bg)" }) : null;
+    const link = open ? el("input", { readOnly: true }) : null;
+    link?.addEventListener("focus", () => link.select());
     const copy = el("button", { className: "btn", type: "button", textContent: "Copy" });
     copy.onclick = async () => {
-      await navigator.clipboard.writeText(s.link);
+      await navigator.clipboard.writeText(session.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"}`);
+      await post(`/api/sessions/${session.id}/${open ? "end" : "delete"}`);
       if (open) refreshSide();
       else location.href = "/";
     });
+    const [details, values] = kv(["Messages from guest", "Model", "Spend", "Last heard from", "Started", "Session"]);
+    const bar = el("span");
+    side = {
+      open,
+      here: el("span", { className: "here" }),
+      sub: el("div", { className: "sub" }),
+      meter: el("div", { className: "meter" }, bar),
+      bar,
+      replies: el("div", { className: "cell-muted" }),
+      limit,
+      values,
+      link,
+      brief: el("div", { className: "brief-text", style: "margin-top:6px" }),
+    };
 
-    els.side.textContent = "";
-    els.side.append(
-      el("h2", { textContent: s.guest }),
-      el("div", { className: "sub", textContent: `${s.project} · ${s.agent === "codex" ? "Codex" : "Claude"} · ${open ? (s.busy ? "replying now" : "open") : "ended"}` }),
+    els.side.hidden = false;
+    els.crumbs.replaceChildren(
+      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: "/" }),
+      side.here,
+    );
+    els.side.replaceChildren(
+      el("h2", { textContent: session.guest }),
+      side.sub,
       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 guest is paused until you add more.` : `${used} of ${s.replyLimit} used, ${s.repliesLeft} left` }),
+        side.meter,
+        side.replies,
         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)) }),
+              Object.assign(el("button", { className: "btn", type: "button", textContent: "+50 replies" }), { onclick: () => setLimit(session.replyLimit + 50) }),
+              limit,
+              Object.assign(el("button", { className: "btn ghost", type: "button", textContent: "Set" }), { onclick: () => setLimit(Number(limit.value)) }),
             )
           : null,
       ),
-      el(
-        "section",
-        {},
-        kv([
-          ["Messages from guest", String(s.stats.guest_messages)],
-          ["Model", s.model ?? "known after the first reply"],
-          ["Spend", s.stats.cost_usd ? `$${s.stats.cost_usd.toFixed(2)} at API prices` : s.agent === "codex" ? "not reported by Codex" : "$0.00"],
-          ["Last heard from", ago(s.stats.last_guest_at)],
-          ["Started", ago(s.createdAt)],
-          ["Session", s.id],
-        ]),
-      ),
-      open ? el("section", {}, el("div", { className: "label", textContent: "Guest link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, linkInput, copy)) : null,
-      el("section", {}, el("div", { className: "label", textContent: "Brief" }), el("div", { className: "brief-text", style: "margin-top:6px", textContent: s.brief })),
+      el("section", {}, details),
+      open ? el("section", {}, el("div", { className: "label", textContent: "Guest link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, link, copy)) : null,
+      el("section", {}, el("div", { className: "label", textContent: "Brief" }), side.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.

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";