@parley-im/parley 0.0.0-stage → 0.1.0

package/web/panel.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Control panel · parley</title>
+<link rel="icon" href="/static/icon.svg">
+<link rel="stylesheet" href="/static/app.css">
+</head>
+<body class="panel">
+<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"><span class="product">parley</span><span class="slash">/</span><span class="here">Control panel</span></nav>
+  <span class="status" id="server"><span class="dot" id="server-dot"></span><span id="server-text">Checking…</span></span>
+</header>
+
+<div class="page">
+  <p class="notice" id="signed-out" hidden style="margin:18px 0 0">This computer isn't signed in to parley.im, so links only work on this computer. Run <code>parley login</code> in a terminal to share them.</p>
+  <div class="stats" id="stats"></div>
+
+  <div class="toolbar">
+    <div class="tabs" id="tabs" role="tablist"></div>
+    <input class="search" id="search" type="search" placeholder="Filter by tester or project" aria-label="Filter sessions">
+    <button class="btn primary" id="new" type="button">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New session
+    </button>
+  </div>
+
+  <div class="table" id="table"></div>
+  <p class="cell-muted" style="margin-top:12px">Only visible on this computer. Spend is what replies would cost at API prices; a Claude or ChatGPT subscription isn't billed per reply, but replies count toward its usage limits.</p>
+</div>
+
+<div class="drawer-back" id="drawer-back" hidden></div>
+<aside class="drawer" id="drawer" hidden aria-label="New session">
+  <header><h2>New session</h2><button class="btn ghost" id="close" type="button">Close</button></header>
+  <form id="form">
+    <div class="field">
+      <label for="f-dir">Project folder</label>
+      <input id="f-dir" name="projectDir" list="dirs" placeholder="/Users/you/src/app" required autocomplete="off">
+      <datalist id="dirs"></datalist>
+      <span class="help">The interviewer runs here, read-only.</span>
+    </div>
+    <div class="field">
+      <label for="f-tester">Who it's for</label>
+      <input id="f-tester" name="tester" placeholder="Sam" required autocomplete="off">
+    </div>
+    <div class="field">
+      <label for="f-brief">Brief</label>
+      <textarea id="f-brief" name="brief" required placeholder="What the project is, how they'll try it, what you most want to learn, known issues to skip."></textarea>
+      <span class="help">Written to the interviewer. Your Claude or Codex can write a better one from inside the project; just ask it to make a parley.</span>
+    </div>
+    <div class="field">
+      <label for="f-greeting">First message (optional)</label>
+      <input id="f-greeting" name="greeting" placeholder="Hi Sam! Thanks for trying it…" autocomplete="off">
+    </div>
+    <div class="field">
+      <label>Interviewer</label>
+      <div class="segmented">
+        <label><input type="radio" name="agent" value="claude" checked>Claude</label>
+        <label><input type="radio" name="agent" value="codex">Codex</label>
+      </div>
+    </div>
+    <div class="field">
+      <label for="f-limit">Reply limit</label>
+      <input id="f-limit" name="replyLimit" type="number" min="1" style="width:120px">
+      <span class="help">The session pauses after this many replies until you add more.</span>
+    </div>
+    <div class="form-error" id="form-error" hidden></div>
+    <div class="made" id="made" hidden></div>
+    <div><button class="btn primary" id="create" type="submit">Create session</button></div>
+  </form>
+</aside>
+
+<script src="/static/panel.js"></script>
+</body>
+</html>

package/web/panel.js

@@ -0,0 +1,224 @@
+(function () {
+  const $ = (id) => document.getElementById(id);
+  const el = (tag, props = {}, ...children) => {
+    const node = Object.assign(document.createElement(tag), props);
+    node.append(...children.filter((c) => c != null));
+    return node;
+  };
+
+  let data = null;
+  let tab = "open";
+  let query = "";
+  // Inline confirmations survive the refresh that redraws the table.
+  const confirming = new Map();
+
+  const ago = (iso) => {
+    if (!iso) return "never";
+    const s = (Date.now() - Date.parse(iso)) / 1000;
+    if (s < 60) return "just now";
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+    return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric" });
+  };
+  const money = (usd) => `$${usd.toFixed(2)}`;
+  const today = (iso) => iso && new Date(iso).toDateString() === new Date().toDateString();
+
+  async function post(path, body) {
+    const res = await fetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body ?? {}) });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(json.message || "That didn't work.");
+    return json;
+  }
+
+  async function refresh() {
+    try {
+      const res = await fetch("/api/panel", { cache: "no-store" });
+      data = await res.json();
+      render();
+    } catch {
+      $("server-dot").className = "dot off";
+      $("server-text").textContent = "Server not responding";
+    }
+  }
+
+  function render() {
+    const { server, sessions, relay } = data;
+    // This computer's connection to parley.im, which shared links depend on.
+    const host = relay.relayUrl.replace(/^https?:\/\//, "");
+    const RELAY = {
+      connected: ["on", `${host} · ${relay.email}`],
+      connecting: ["busy", `Connecting to ${host}`],
+      offline: ["warn", `Reconnecting to ${host}`],
+      "signed-out": ["warn", "Not signed in · run parley login"],
+      unlinked: ["off", "Unlinked · run parley login"],
+      replaced: ["off", "Another parley took over"],
+    };
+    const [dot, label] = RELAY[relay.state] ?? ["warn", relay.state];
+    $("server-dot").className = `dot ${dot}`;
+    $("server-text").textContent = label;
+    $("server").title = relay.error ?? `Server up since ${new Date(server.startedAt).toLocaleString()}`;
+    $("signed-out").hidden = relay.state !== "signed-out" && relay.state !== "unlinked";
+
+    const open = sessions.filter((s) => s.status === "open");
+    const paused = open.filter((s) => s.repliesLeft === 0);
+    const unread = sessions.reduce((n, s) => n + s.stats.unread, 0);
+    const replies = sessions.reduce((n, s) => n + s.stats.replies, 0);
+    const spend = sessions.reduce((n, s) => n + s.stats.cost_usd, 0);
+    const busy = open.filter((s) => s.busy).length;
+    const stat = (label, value, note) => el("div", { className: "stat" }, el("div", { className: "label", textContent: label }), el("div", { className: "value", textContent: value }), el("div", { className: "note", textContent: note }));
+    $("stats").replaceChildren(
+      stat("Open sessions", String(open.length), paused.length ? `${paused.length} paused, out of replies` : busy ? `${busy} replying now` : "links are live"),
+      stat("New messages", String(unread), unread ? `in ${sessions.filter((s) => s.stats.unread).length} session(s)` : "you're caught up"),
+      stat("Replies", String(replies), `${sessions.filter((s) => today(s.stats.last_message_at)).length} session(s) active today`),
+      stat("Spend", money(spend), "at API prices, all sessions"),
+    );
+
+    const ended = sessions.filter((s) => s.status !== "open");
+    const tabs = [["open", "Open", open.length], ["ended", "Ended", ended.length], ["all", "All", sessions.length]];
+    $("tabs").replaceChildren(
+      ...tabs.map(([key, label, count]) => {
+        const b = el("button", { type: "button", className: tab === key ? "on" : "", textContent: `${label} ${count}` });
+        b.onclick = () => ((tab = key), render());
+        return b;
+      }),
+    );
+
+    const q = query.toLowerCase();
+    const shown = sessions
+      .filter((s) => (tab === "all" ? true : tab === "open" ? s.status === "open" : s.status !== "open"))
+      .filter((s) => !q || `${s.tester} ${s.project} ${s.projectDir}`.toLowerCase().includes(q));
+
+    const head = el(
+      "div",
+      { className: "thead label" },
+      el("span", { textContent: "Session" }),
+      el("span", { textContent: "Activity" }),
+      el("span", { textContent: "Messages" }),
+      el("span", { textContent: "Replies" }),
+      el("span", { textContent: "Spend" }),
+      el("span", { textContent: "" }),
+    );
+    if (!shown.length) {
+      const msg = sessions.length
+        ? el("div", { className: "empty", textContent: q ? "Nothing matches that." : tab === "open" ? "Nothing open right now." : "Nothing here." })
+        : el("div", { className: "empty" }, "No sessions yet. Ask Claude or Codex in any project to make a parley for someone, or use New session.");
+      $("table").replaceChildren(msg);
+    } else $("table").replaceChildren(head, ...shown.map(row));
+
+    const dirs = [...new Set(sessions.map((s) => s.projectDir))];
+    $("dirs").replaceChildren(...dirs.map((d) => el("option", { value: d })));
+    if (!$("f-limit").value) $("f-limit").value = String(server.replyLimit);
+  }
+
+  function row(s) {
+    const open = s.status === "open";
+    const used = s.replyLimit - s.repliesLeft;
+    const name = el("div", { className: "name" }, el("span", { className: `dot ${!open ? "" : s.busy ? "busy" : s.repliesLeft === 0 ? "warn" : "on"}` }), s.tester);
+    if (s.stats.unread) name.append(el("span", { className: "badge", textContent: `${s.stats.unread} new` }));
+    const who = el("a", { className: "who-cell", href: `/o/${s.id}`, style: "text-decoration:none" }, name, el("div", { className: "where", textContent: `${s.project} · ${s.model ?? (s.agent === "codex" ? "Codex" : "Claude")} · ${s.id}`, title: s.projectDir }));
+
+    const activity = el(
+      "div",
+      { className: "c-activity cell-muted" },
+      !open ? `ended ${ago(s.endedAt)}` : s.busy ? "replying now" : s.stats.last_tester_at ? `heard from ${ago(s.stats.last_tester_at)}` : "hasn't said anything yet",
+    );
+    const messages = el("div", { className: "c-messages num", textContent: `${s.stats.tester_messages} message${s.stats.tester_messages === 1 ? "" : "s"}` });
+    const pct = Math.min(100, Math.round((used / s.replyLimit) * 100));
+    const replies = el(
+      "div",
+      { className: "c-replies" },
+      el("div", { className: "num", textContent: `${used} / ${s.replyLimit} replies` }),
+      el("div", { className: `meter ${s.repliesLeft === 0 ? "full" : ""}`, style: "margin:4px 0 0;max-width:140px" }, el("span", { style: `width:${pct}%` })),
+    );
+    const spend = el("div", { className: "c-spend num", textContent: s.stats.cost_usd ? money(s.stats.cost_usd) : s.agent === "codex" ? "n/a" : "$0.00" });
+
+    const actions = el("div", { className: "row-actions" });
+    if (open) {
+      if (s.repliesLeft <= 10) {
+        const more = el("button", { className: "btn", type: "button", textContent: "+50 replies" });
+        more.onclick = () => post(`/api/sessions/${s.id}/limit`, { limit: s.replyLimit + 50 }).then(refresh);
+        actions.append(more);
+      }
+      const copy = el("button", { className: "btn", type: "button", textContent: "Copy link" });
+      copy.onclick = async () => {
+        await navigator.clipboard.writeText(s.link);
+        copy.textContent = "Copied";
+        setTimeout(() => (copy.textContent = "Copy link"), 1500);
+      };
+      actions.append(copy);
+    }
+    actions.append(el("a", { className: "btn", href: `/o/${s.id}`, textContent: "Open" }));
+    actions.append(confirmButton(s.id, open ? "End" : "Delete", open ? "End for good?" : "Erase it?", () => post(`/api/sessions/${s.id}/${open ? "end" : "delete"}`)));
+
+    return el("div", { className: `trow ${open ? "" : "ended"}` }, who, activity, messages, replies, spend, actions);
+  }
+
+  // Asks once more in place, instead of a browser dialog.
+  function confirmButton(id, label, question, action) {
+    const asking = (confirming.get(id) ?? 0) > Date.now();
+    const button = el("button", { className: asking ? "btn confirm" : "btn danger", type: "button", textContent: asking ? question : label });
+    button.onclick = async () => {
+      if (!((confirming.get(id) ?? 0) > Date.now())) {
+        confirming.set(id, Date.now() + 4000);
+        render();
+        setTimeout(render, 4100);
+        return;
+      }
+      confirming.delete(id);
+      button.disabled = true;
+      await action().catch((e) => alertInline(e.message));
+      refresh();
+    };
+    return button;
+  }
+
+  function alertInline(message) {
+    $("server-text").textContent = message;
+  }
+
+  $("search").addEventListener("input", (e) => {
+    query = e.target.value;
+    render();
+  });
+
+  // ---------- new session ----------
+
+  const openDrawer = () => {
+    $("drawer").hidden = $("drawer-back").hidden = false;
+    $("made").hidden = $("form-error").hidden = true;
+    $("f-dir").focus();
+  };
+  const closeDrawer = () => ($("drawer").hidden = $("drawer-back").hidden = true);
+  $("new").onclick = openDrawer;
+  $("close").onclick = closeDrawer;
+  $("drawer-back").onclick = closeDrawer;
+  addEventListener("keydown", (e) => e.key === "Escape" && closeDrawer());
+
+  $("form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const form = new FormData($("form"));
+    $("form-error").hidden = true;
+    $("create").disabled = true;
+    try {
+      const s = await post("/api/sessions", Object.fromEntries(form));
+      const link = el("input", { value: s.link, readOnly: true, className: "search", style: "font-family:var(--mono);font-size:12px" });
+      const copy = el("button", { className: "btn primary", type: "button", textContent: "Copy link" });
+      copy.onclick = async () => {
+        await navigator.clipboard.writeText(s.link);
+        copy.textContent = "Copied";
+      };
+      $("made").replaceChildren(el("strong", { textContent: `Session for ${s.tester} is ready.` }), el("div", { className: "linkbox" }, link, copy), el("a", { className: "cell-muted", href: `/o/${s.id}`, textContent: "Open it" }));
+      $("made").hidden = false;
+      $("f-tester").value = $("f-brief").value = $("f-greeting").value = "";
+      refresh();
+    } catch (error) {
+      $("form-error").textContent = error.message;
+      $("form-error").hidden = false;
+    } finally {
+      $("create").disabled = false;
+    }
+  });
+
+  refresh();
+  setInterval(refresh, 4000);
+})();

package/web/seal.js

@@ -0,0 +1,44 @@
+// The browser side of parley's end-to-end encryption (see src/seal.ts for the
+// format). The key comes from the link after the "#" and never leaves this
+// page except to encrypt and decrypt.
+(function () {
+  const subtle = crypto.subtle;
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  const toB64 = (bytes) => {
+    let s = "";
+    for (const b of bytes) s += String.fromCharCode(b);
+    return btoa(s).replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/, "");
+  };
+  const fromB64 = (text) => {
+    const bin = atob(text.replaceAll("-", "+").replaceAll("_", "/"));
+    return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+  };
+  const aad = (session, purpose) => encoder.encode(`parley:${session}:${purpose}`);
+
+  async function importKey(text) {
+    const raw = fromB64(text);
+    if (raw.length !== 32) throw new Error("bad key");
+    return subtle.importKey("raw", raw, "AES-GCM", false, ["encrypt", "decrypt"]);
+  }
+
+  async function sealBytes(key, session, purpose, plain) {
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const sealed = new Uint8Array(await subtle.encrypt({ name: "AES-GCM", iv, additionalData: aad(session, purpose) }, key, plain));
+    const out = new Uint8Array(12 + sealed.length);
+    out.set(iv);
+    out.set(sealed, 12);
+    return out;
+  }
+
+  async function openBytes(key, session, purpose, data) {
+    const plain = await subtle.decrypt({ name: "AES-GCM", iv: data.subarray(0, 12), additionalData: aad(session, purpose) }, key, data.subarray(12));
+    return new Uint8Array(plain);
+  }
+
+  const seal = async (key, session, purpose, value) => toB64(await sealBytes(key, session, purpose, encoder.encode(JSON.stringify(value))));
+  const open = async (key, session, purpose, text) => JSON.parse(decoder.decode(await openBytes(key, session, purpose, fromB64(text))));
+
+  (typeof window !== "undefined" ? window : globalThis).ParleySeal = { importKey, seal, open, sealBytes, openBytes };
+})();