@parley-im/parley 0.2.10 → 0.2.12

package/README.md

@@ -1,4 +1,4 @@
-# parley
+# Parley
 
 Send someone a link. They open a private chat with your own Claude or Codex, running read-only in your project folder, and tell it what they think. It asks follow-up questions, answers their questions by reading the code, and saves everything for you.
 
@@ -6,7 +6,7 @@ The agent runs on your computer, with your Claude or Codex login and plan. Links
 
 ## Using it
 
-Link your computer to your parley account once:
+Link your computer to your Parley account once:
 
 ```bash
 parley login
@@ -68,9 +68,9 @@ Each session is a fresh agent conversation in the project folder, guided by a ch
 It can read the project folder and nothing else on your computer. Inside it, a blocked list keeps it from secrets (`.env` files, keys and certificates, `.ssh`, cloud and package-manager logins, `secrets/`), from other guests' conversations in any `.parley` folder, and always from parley's own database. Each agent's own sandbox enforces that, not just the charter (which asks too). `src/access.ts` builds the rules; sessions won't start in your home folder. Both are settings (see Config).
 
 - **Claude:** `claude -p --restricted --tools Read,Grep,Glob --strict-mcp-config`, plus `Read(...)` deny rules from the blocked list. No command, write or web tools; `--restricted` confines the file tools to the project; your MCP servers are left out.
-- **Codex:** `codex exec --ignore-user-config` under a permission profile that can read the project and the system files tools need (`:minimal`), with the blocked list denied, no writes and no network. Apps, browser, computer use, plugins, hooks and web search are off; your model and reasoning effort carry over. Codex re-runs itself inside that sandbox, so parley starts it by its real path and lets it read that one file.
+- **Codex:** `codex exec --ignore-user-config` under a permission profile that can read the project and the system files tools need (`:minimal`), with the blocked list denied, no writes and no network. Apps, browser, computer use, plugins, hooks and web search are off; your model and reasoning effort carry over. Codex re-runs itself inside that sandbox, so Parley starts it by its real path and lets it read that one file.
 
-Before a session is made, parley checks the agent is installed and new enough for these flags, and says what to update if not.
+Before a session is made, Parley checks the agent is installed and new enough for these flags, and says what to update if not.
 
 Each reply records which model answered, on which login (`auth: "none"` means your subscription, not an API key), and what it would cost at API prices.
 

package/dist/access.js

@@ -44,7 +44,7 @@ export function agentProblem(config, agent) {
     try {
         const help = execFileSync(bin, NEEDS[agent].args, { encoding: "utf8", timeout: 20_000, env: cleanEnv(), stdio: ["ignore", "pipe", "pipe"] });
         if (NEEDS[agent].flags.some((flag) => !help.includes(flag))) {
-            problem = `This ${NAMES[agent]} is too old for parley's sandbox. Update it (${UPDATE[agent]}) and try again.`;
+            problem = `This ${NAMES[agent]} is too old for Parley's sandbox. Update it (${UPDATE[agent]}) and try again.`;
         }
     }
     catch (error) {

package/dist/account.js

@@ -34,7 +34,7 @@ async function call(creds, path, init = {}) {
     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 new Error((await res.json().catch(() => null))?.message ?? `Parley's servers answered ${res.status}`);
     return res.json();
 }
 // What parley.im is told about a session: its id and a title for link

package/dist/cli.js

@@ -12,8 +12,8 @@ import { readState, linkFor, dashboardUrl, isServerUp } from "./state.js";
 import { transcript, summaryLine } from "./transcript.js";
 import { startSession, endSession, deleteSession, setReplyLimit } from "./control.js";
 import { login, readCredentials, clearCredentials, relay as registry } from "./account.js";
-const HELP = `parley: someone chats with a read-only Claude or Codex running in this project, on this
-computer, and you get everything they said. Good for feedback from guests, or any interview.
+const HELP = `Parley: someone chats with a read-only Claude or Codex running in this project, on this
+computer, and what they share comes back to this project. Good for feedback from guests, or any interview.
 
 If you're an agent and the user asks for "a parley" (or to get someone's take on this project):
 
@@ -37,16 +37,16 @@ Commands
   parley limit ID N                            Let a session give N replies in total
   parley end ID                                Kill its link for good; the transcript stays
   parley delete ID                             Erase it, screenshots included
-  parley login | logout | whoami               Link this computer to your parley account
-  parley start | stop | status                 The background server (holds the connection to parley)
+  parley login | logout | whoami               Link this computer to your Parley account
+  parley start | stop | status                 The background server (holds the connection to Parley)
   parley panel                                 Open the control panel (localhost)
-  parley install                               Add parley's MCP tools to Claude Code and Codex; start at login
+  parley install                               Add Parley's MCP tools to Claude Code and Codex; start at login
   parley uninstall                             Undo install (your conversations stay)
   parley serve | mcp                           Run the server in the foreground | MCP over stdio
   parley --version
 
 Conversations and screenshots live in each project's .parley folder (kept out of git), with a
-readable transcript.md per session. Settings and your parley login live in ${paths.home}.`;
+readable transcript.md per session. Settings and your Parley login live in ${paths.home}.`;
 const CLI_PATH = fileURLToPath(import.meta.url);
 async function main() {
     const [command, ...rest] = process.argv.slice(2);
@@ -253,14 +253,14 @@ async function install(config) {
     if (config.claude.bin.startsWith("/")) {
         run(config.claude.bin, ["mcp", "remove", "--scope", "user", "parley"]);
         const ok = run(config.claude.bin, ["mcp", "add", "--scope", "user", "parley", "--", ...launch]);
-        console.log(ok ? "Claude Code: added the parley MCP server (user scope)." : "Claude Code: couldn't add the MCP server.");
+        console.log(ok ? "Claude Code: added the Parley MCP server (user scope)." : "Claude Code: couldn't add the MCP server.");
     }
     else
         console.log("Claude Code: not found, skipped.");
     if (config.codex.bin.startsWith("/")) {
         run(config.codex.bin, ["mcp", "remove", "parley"]);
         const ok = run(config.codex.bin, ["mcp", "add", "parley", "--", ...launch]);
-        console.log(ok ? "Codex: added the parley MCP server." : "Codex: couldn't add the MCP server.");
+        console.log(ok ? "Codex: added the Parley MCP server." : "Codex: couldn't add the MCP server.");
     }
     else
         console.log("Codex: not found, skipped.");

package/dist/daemon.js

@@ -15,7 +15,7 @@ export async function ensureServer(config, waitMs = 20_000) {
     const running = await serverHealth(config);
     if (running?.version && running.version !== VERSION) {
         if (compareVersions(running.version, VERSION) > 0) {
-            throw new Error(`parley was updated to ${running.version}, but this process is still ${VERSION}. Restart this Claude Code or Codex session (or the parley command) to use the new version.`);
+            throw new Error(`Parley was updated to ${running.version}, but this process is still ${VERSION}. Restart this Claude Code or Codex session (or the parley command) to use the new version.`);
         }
         await stopServer(config);
         await waitUntilDown(config);

package/dist/mcp.js

@@ -20,7 +20,7 @@ export async function runMcp() {
     const currentLink = (id) => linkFor(store.session(id), config);
     server.registerTool("create_session", {
         title: "Create a feedback session",
-        description: "Create a parley session: a private link the user can send to a guest. The guest chats with a fresh, read-only " +
+        description: "Create a Parley session: a private link the user can send to a guest. The guest chats with a fresh, read-only " +
             "agent in the project folder that hears their feedback, answers questions by reading the code, and records everything. " +
             "Starts the local server and tunnel if needed. Returns the link to give the user. Only for guests the user trusts, " +
             "since the guest can ask about anything in the project folder.",
@@ -83,14 +83,14 @@ export async function runMcp() {
         }
         else {
             lines.push("Everything after the # in the link is the session's encryption key: share the whole link, and only with the guest. " +
-                "Replies come from this computer, so it needs to be awake with parley running.");
+                "Replies come from this computer, so it needs to be awake with Parley running.");
         }
         lines.push(`Tell the user to send it only to someone they trust: ${session.guest} can ask about anything in this project folder.`);
         return reply(lines.join("\n"));
     });
     server.registerTool("list_sessions", {
         title: "List feedback sessions",
-        description: "List parley sessions, newest activity first, with how many guest messages are new since you last read each one. " +
+        description: "List Parley sessions, newest activity first, with how many guest messages are new since you last read each one. " +
             "Open sessions include their current guest link.",
         inputSchema: {
             status: z.enum(["open", "ended", "all"]).optional().describe("Defaults to open."),
@@ -111,7 +111,7 @@ export async function runMcp() {
     });
     server.registerTool("get_transcript", {
         title: "Read a feedback session",
-        description: "Read a parley session as Markdown: the brief, every message, which model interviewed, and paths to screenshots the " +
+        description: "Read a Parley session as Markdown: the brief, every message, which model interviewed, and paths to screenshots the " +
             "guest shared. Set only_new to read just what came in since you last read it. Reading marks it read.",
         inputSchema: {
             session_id: z.string(),
@@ -125,7 +125,7 @@ export async function runMcp() {
     });
     server.registerTool("end_session", {
         title: "End a feedback session",
-        description: "End a parley session for good when the user is done with it. The guest's link stops working entirely and an open " +
+        description: "End a Parley session for good when the user is done with it. The guest's link stops working entirely and an open " +
             "page clears itself. The transcript stays readable here. This can't be undone; make a new session to talk again.",
         inputSchema: { session_id: z.string() },
     }, async (args) => {

package/dist/relay.js

@@ -108,7 +108,7 @@ export class RelayLink {
                 return;
             }
             if (event.code === 4000) {
-                this.status = { state: "replaced", relayUrl: creds.relayUrl, error: "Another parley on this computer took over the connection." };
+                this.status = { state: "replaced", relayUrl: creds.relayUrl, error: "Another Parley server on this computer took over the connection." };
                 return;
             }
             this.status = { state: "offline", relayUrl: creds.relayUrl, email: creds.account.email, error: `Reconnecting to ${creds.relayUrl}` };

package/dist/server.js

@@ -156,7 +156,7 @@ export async function serve() {
             if (rest === "/" && req.method === "GET") {
                 const from = ownerName(config);
                 const html = readFileSync(join(WEB, "chat.html"), "utf8")
-                    .replaceAll("{{TITLE}}", escapeHtml(`${session.project_name} · parley`))
+                    .replaceAll("{{TITLE}}", escapeHtml(`${session.project_name} · Parley`))
                     .replaceAll("{{PREVIEW_TITLE}}", escapeHtml(`${from ? `${from} wants` : "Someone wants"} your feedback on ${session.project_name}`))
                     .replaceAll("{{PREVIEW_TEXT}}", escapeHtml(`A private chat about ${session.project_name}.`))
                     .replace("{{CONFIG}}", JSON.stringify({ base: scope.base, owner: scope.owner, maxText: MAX_TEXT }).replaceAll("<", "\\u003c"));
@@ -245,7 +245,7 @@ export async function serve() {
     // Already running (started at login, and again by hand, say): leave it be
     // and exit cleanly, which also tells a login service not to retry.
     if (await isServerUp(config)) {
-        console.log(`parley: a server is already running on ${config.dashboardPort}; leaving it be.`);
+        console.log(`Parley: a server is already running on ${config.dashboardPort}; leaving it be.`);
         process.exit(0);
     }
     guest.listen(config.port, "127.0.0.1");
@@ -255,7 +255,7 @@ export async function serve() {
         server.once("error", reject);
     })));
     writeState(state);
-    console.log(`parley: control panel http://localhost:${config.dashboardPort}, local links on ${config.port}`);
+    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

package/package.json

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

@@ -456,14 +456,72 @@ body.panel { overflow: auto; }
 /* A session's status on the dashboard (not the chat's reply in progress,
    which is li.live). */
 span.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; }
-.docs p, .docs li { max-width: 66ch; }
-.docs ul { padding-left: 1.2em; }
-.docs li { margin: 6px 0; }
-.docs pre { background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
-.docs pre code { background: none; border: 0; padding: 0; font-size: inherit; }
-.docs blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; color: var(--text); }
+/* The docs: a contents column beside the article. */
+.docs-page { max-width: 1120px; }
+.docs-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; padding: 32px 0 80px; }
+.docs-nav { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 1px; font-size: 14px; }
+.docs-nav .label { margin: 18px 0 6px 10px; }
+.docs-nav .label:first-child { margin-top: 4px; }
+.docs-nav a { color: var(--muted); text-decoration: none; padding: 5px 10px; border-radius: 7px; }
+.docs-nav a:hover { color: var(--text); background: var(--subtle); }
+.docs { min-width: 0; max-width: 760px; font-size: 15.5px; line-height: 1.65; }
+.docs-head { padding-bottom: 8px; }
+.docs-head .label { margin: 0 0 8px; }
+.docs h1 { font-size: 38px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 14px; }
+.docs .lede { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
+.docs h2 { font-size: 23px; letter-spacing: -0.02em; margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
+.docs h3 { font-size: 16px; letter-spacing: -0.01em; margin: 26px 0 8px; }
+.docs p { margin: 0 0 14px; }
+.docs ul { padding-left: 1.2em; margin: 0 0 16px; }
+.docs li { margin: 7px 0; }
+.docs li::marker { color: var(--faint); }
+.docs a { color: var(--accent); }
+.docs code { font-family: var(--mono); font-size: 0.85em; background: var(--subtle); border: 1px solid var(--line); padding: 0.08em 0.35em; border-radius: 5px; white-space: nowrap; }
+.docs pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; margin: 0 0 16px; }
+.docs pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }
+.docs blockquote { margin: 0 0 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
+.docs blockquote::before { content: "you"; display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint); margin-bottom: 2px; }
+.docs table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }
+.docs th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding: 8px 12px; border-bottom: 1px solid var(--line-strong); }
+.docs td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
+.docs td:first-child { white-space: nowrap; }
+.docs .table-wrap { overflow-x: auto; margin: 0 0 18px; }
+.docs .table-wrap table { margin: 0; }
+.docs .callout { margin: 18px 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; }
+.docs .callout.warn { border-left-color: var(--warn); }
+.docs .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 22px 0; position: relative; }
+.docs .flow div { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; position: relative; }
+.docs .flow div + div::before { content: "⇄"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 16px; }
+.docs .flow strong { font-size: 15px; }
+.docs .flow span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
+.docs .howto { list-style: none; counter-reset: step; padding: 0; margin: 22px 0; display: grid; gap: 18px; }
+.docs .howto li { counter-increment: step; position: relative; padding-left: 44px; margin: 0; }
+.docs .howto li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent-fill); }
+.docs .howto h3 { margin: 2px 0 8px; }
+.docs .howto p, .docs .howto pre { margin: 0 0 8px; }
+.docs details.more { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 14px; }
+.docs details.more summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
+.docs details.more[open] summary { margin-bottom: 10px; }
+.docs details.more pre { background: var(--bg); }
+.docs .faq dt { font-weight: 600; margin-top: 18px; }
+.docs .faq dd { margin: 4px 0 0; color: var(--muted); }
+@media (max-width: 860px) {
+  .docs-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
+  .docs-nav { position: static; max-height: none; grid-template-columns: 1fr 1fr; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
+  .docs-nav .label { display: none; }
+  .docs h1 { font-size: 30px; }
+  .docs .flow { grid-template-columns: 1fr; gap: 26px; }
+  .docs .flow div + div::before { left: 50%; top: -21px; transform: translateX(-50%) rotate(90deg); }
+}
+/* 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; }
+table.views th { text-align: right; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding: 8px 14px; border-bottom: 1px solid var(--line); }
+table.views td { text-align: right; padding: 7px 14px; border-bottom: 1px solid var(--line); }
+table.views th:first-child, table.views td:first-child { text-align: left; white-space: nowrap; }
+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; }
 /* Long details shorten instead of pushing the buttons off a phone screen. */
 .trow.site-row .who-cell { min-width: 0; }
@@ -484,23 +542,37 @@ span.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px
 .demo-tabs button { font-family: var(--mono); font-size: 12px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
 .demo-tabs button:hover { color: var(--text); }
 .demo-tabs button.on { background: var(--panel); border-color: var(--line); color: var(--text); }
-.demo-chat { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
+/* A fixed frame, like the real chat: the conversation scrolls inside it. */
+.demo-chat { height: 500px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
 .demo-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
 .demo-top .mark { width: 20px; height: 20px; }
 .demo-top .product { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; }
 .demo-top .slash { color: var(--faint); }
 .demo-top .here { font-weight: 600; flex: 1; }
-.demo-msgs { list-style: none; margin: 0; padding: 18px 18px 6px; min-height: 340px; display: flex; flex-direction: column; gap: 14px; }
+.demo-msgs { flex: 1; min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
 .demo .msg { margin: 0; animation: rise 0.25s ease-out; }
 .demo .msg.agent .body { font-size: 15.5px; }
 .demo .msg.agent::before { top: 5px; }
 .demo .msg.guest .bubble { font-size: 14.5px; max-width: 86%; }
 .demo .steps { margin-top: 2px; }
-.demo-say { margin: 0 14px 14px; padding: 8px 8px 8px 14px; border: 1.5px solid var(--line-strong); border-radius: 13px; color: var(--faint); font-size: 15px; display: flex; align-items: center; justify-content: space-between; }
-.demo-say .send-dot { width: 32px; height: 32px; border-radius: 9px; background: var(--subtle); }
+/* The demo's composer is the real one, played: text types in, the send
+   button wakes, and the message goes. */
+.demo-dock { padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--bg); }
+.demo .composer { box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; }
+.demo .composer.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.demo-input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 4px; font-size: 15px; line-height: 1.55; color: var(--text); }
+.demo-placeholder { color: var(--faint); }
+.demo .composer.focus .demo-input::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--text); animation: blink 1.06s steps(1) infinite; }
+.demo .icon-btn { cursor: default; }
+.demo .icon-btn:hover { background: transparent; color: var(--muted); }
+.demo .send, .demo .send:hover { background: var(--accent-fill); color: var(--accent-ink); transition: transform 0.12s, background 0.15s; }
+.demo .send.off { background: var(--subtle); color: var(--faint); }
+.demo .send.press { transform: scale(0.9); }
+.demo-top .chip { margin-left: 4px; }
+.demo-top .icon-btn { width: 32px; height: 32px; margin-right: -6px; }
 @keyframes rise { from { opacity: 0; transform: translateY(4px); } }
 @media (prefers-reduced-motion: reduce) { .demo .msg { animation: none; } }
-@media (max-width: 560px) { .demo-msgs { min-height: 400px; padding: 14px 12px 6px; } }
+@media (max-width: 560px) { .demo-chat { height: 560px; } .demo-msgs { padding: 14px 12px 12px; } }
 .how { list-style: none; counter-reset: step; padding: 0; margin: 40px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
 .how li { counter-increment: step; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--panel); display: grid; gap: 10px; align-content: start; }
 .how li::before { content: "0" counter(step); font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 13px; }

package/web/chat.html

@@ -18,7 +18,7 @@
   <header class="topbar">
     <nav class="crumbs" id="crumbs">
       <!-- 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">
+      <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="0 0 64 64" aria-hidden="true"><path class="r1" d="M32 7L39.2 11.2L32 15.3Z"/><path class="r2" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path class="r1" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path class="r2" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path class="r1" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path class="r2" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path class="r1" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path class="r2" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path class="r1" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path class="r2" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path class="r1" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path class="r2" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path class="r1" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path class="r2" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path class="r1" d="M32 48.7L39.2 52.8L32 57Z"/><path class="r2" d="M32 48.7L32 57L24.8 52.8Z"/><path class="r1" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path class="r2" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path class="r1" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path class="r2" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path class="r1" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path class="r2" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path class="r1" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path class="r2" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path class="r1" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path class="r2" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path class="r1" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path class="r2" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path class="r1" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path class="r2" d="M32 7L32 15.3L24.8 11.2Z"/><path class="c1" d="M32 23.7L39.2 27.8L32 32Z"/><path class="c2" d="M39.2 27.8L39.2 36.2L32 32Z"/><path class="c1" d="M32 32L39.2 36.2L32 40.3Z"/><path class="c2" d="M32 32L32 40.3L24.8 36.2Z"/><path class="c1" d="M24.8 27.8L32 32L24.8 36.2Z"/><path class="c2" d="M32 23.7L32 32L24.8 27.8Z"/></svg></span><span class="product">parley</span>
       </a><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
     </nav>
@@ -48,7 +48,7 @@
             <div class="attachments" id="attachments" hidden></div>
             <div class="row">
               <span class="prompt" aria-hidden="true">›</span>
-              <textarea id="input" rows="1" placeholder="Say anything. Ramble away." autocomplete="off" autocorrect="on" spellcheck="true" aria-label="Message"></textarea>
+              <textarea id="input" rows="1" placeholder="Write a message" autocomplete="off" autocorrect="on" spellcheck="true" aria-label="Message"></textarea>
               <label class="icon-btn" title="Add a screenshot">
                 <input type="file" id="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
                 <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="14" rx="2.5"/><path d="m4 16 4.5-4.5a1.5 1.5 0 0 1 2.1 0L15 16"/><path d="m13.5 14.5 1.7-1.7a1.5 1.5 0 0 1 2.1 0l2.7 2.7"/><circle cx="15.5" cy="9.5" r="1.2"/></svg>

package/web/chat.js

@@ -303,7 +303,7 @@
       if (seen.size === before) break;
     }
     const projectName = session?.project ?? knownProject ?? "a project";
-    const lines = [`parley about ${projectName}, ${new Date().toLocaleDateString()}`, ""];
+    const lines = [`A 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(), "");
@@ -354,7 +354,7 @@
     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 checked it's really them, with Google.` : "."),
+      el("p", {}, strong(who), " set this up to hear what you think of ", strong(projectName), sender ? `. Parley checked it's really them, with Google.` : "."),
       kv(facts),
       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,
@@ -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. 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 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.`),
@@ -430,7 +430,7 @@
   function showEnded() {
     // 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" }));
+      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);
   }
 
@@ -497,7 +497,7 @@
       el("span", { className: "slash", textContent: "/" }),
       el("span", { className: "here", textContent: `${s.guest} on ${s.project}` }),
     );
-    document.title = `${s.guest} on ${s.project} · parley`;
+    document.title = `${s.guest} on ${s.project} · Parley`;
     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 })]));

package/web/dashboard.js

@@ -52,7 +52,7 @@
     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";
+      row.querySelector(".computer-status").textContent = m.on ? `online now${m.version ? ` · Parley ${m.version}` : ""}` : "offline";
     }
     paint();
   }

package/web/home.js

@@ -1,7 +1,9 @@
-// parley's front page: plays the demo, three short parleys in turn, the way
-// a guest sees one (mark.js draws the working mark). The first is already in the page, so without script (or
-// for anyone who prefers less motion) it just sits there, and the tabs swap
-// scenes without playing them.
+// Parley's front page: plays the demo, three short parleys in turn, the way
+// a guest sees one. The header, the composer and the working mark (mark.js)
+// are the real chat's. The first scene is already in the page, so without
+// script (or for anyone who prefers less motion) it just sits there, and the
+// tabs swap scenes without playing them. Picking a scene plays it, then
+// stays on it for a while before the others come round again.
 (() => {
   const root = document.getElementById("demo");
   const list = document.getElementById("demo-msgs");
@@ -9,7 +11,12 @@
   if (!root || !list || !data) return;
   const scenes = JSON.parse(data.textContent);
   const tabs = [...root.querySelectorAll("[data-scene]")];
+  const composer = document.getElementById("demo-composer");
+  const input = document.getElementById("demo-input");
+  const send = document.getElementById("demo-send");
+  const chip = document.getElementById("demo-chip");
   const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const STAY = 30_000; // after someone picks a scene
   let run = 0; // a new run cancels the one playing
 
   const el = (tag, className, text) => {
@@ -42,6 +49,33 @@
     mark.classList.add("opening");
   }
 
+  // Like the real chat, the frame stays put and the conversation scrolls.
+  const toEnd = () => (list.scrollTop = list.scrollHeight);
+
+  function setInput(text) {
+    input?.replaceChildren(text ? document.createTextNode(text) : el("span", "demo-placeholder", "Write a message"));
+    send?.classList.toggle("off", !text);
+    toEnd();
+  }
+
+  // The guest types into the composer and sends, as in the real chat.
+  async function say(text, id) {
+    composer?.classList.add("focus");
+    for (let k = 2; k < text.length; k += 2) {
+      setInput(text.slice(0, k));
+      await wait(30, id);
+    }
+    setInput(text);
+    await wait(450, id);
+    send?.classList.add("press");
+    await wait(130, id);
+    send?.classList.remove("press");
+    setInput("");
+    composer?.classList.remove("focus");
+    list.append(guest(text));
+    toEnd();
+  }
+
   function pick(i) {
     tabs.forEach((tab, j) => {
       tab.classList.toggle("on", i === j);
@@ -59,10 +93,13 @@
     const scene = scenes[i];
     pick(i);
     list.replaceChildren();
+    setInput("");
+    composer?.classList.remove("focus");
+    if (chip) chip.textContent = "100/100";
     opening();
+    await wait(1200, id);
+    await say(scene.asks, id);
     await wait(500, id);
-    list.append(guest(scene.asks));
-    await wait(900, id);
     // Working: the mark reads (its core flickers), then writes (light runs
     // around it), then the reply streams in.
     const node = el("li", "msg agent");
@@ -70,6 +107,7 @@
     body.innerHTML = `<span class="thinking reading" role="img" aria-label="Working">${window.parleyMark({ moving: true })}</span>`;
     node.append(body);
     list.append(node);
+    toEnd();
     await wait(1600, id);
     body.firstElementChild.classList.remove("reading");
     await wait(1400, id);
@@ -78,23 +116,29 @@
     const words = scene.says.split(" ");
     for (let w = 1; w <= words.length; w++) {
       p.textContent = words.slice(0, w).join(" ");
+      toEnd();
       await wait(55, id);
     }
     p.classList.remove("cursor");
-    await wait(1500, id);
-    list.append(guest(scene.then));
+    if (chip) chip.textContent = "99/100";
+    await wait(1600, id);
+    await say(scene.then, id);
     await wait(4500, id);
   }
 
-  async function loop(from) {
+  async function loop(from, stay = 0) {
     const id = ++run;
     try {
-      for (let i = from; ; i = (i + 1) % scenes.length) await play(i, id);
+      for (let i = from; ; i = (i + 1) % scenes.length) {
+        await play(i, id);
+        if (stay) await wait(stay, id);
+        stay = 0;
+      }
     } catch {
       // Stopped for another scene.
     }
   }
 
-  tabs.forEach((tab, i) => tab.addEventListener("click", () => (still ? show(i) : loop(i))));
+  tabs.forEach((tab, i) => tab.addEventListener("click", () => (still ? show(i) : loop(i, STAY))));
   if (!still) loop(0);
 })();

package/web/panel.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#0c0c0d">
-<title>Control panel · parley</title>
+<title>Control panel · Parley</title>
 <link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>

package/web/panel.js

@@ -51,7 +51,7 @@
       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"],
+      replaced: ["off", "Another Parley server took over"],
     };
     const [dot, label] = RELAY[relay.state] ?? ["warn", relay.state];
     $("server-dot").className = `dot ${dot}`;