@parley-im/parley 0.2.4 → 0.2.6

package/README.md

@@ -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.im account once:
+Link your computer to your parley account once:
 
 ```bash
 parley login
@@ -22,6 +22,8 @@ Your agent writes a brief from what it knows and hands back a link like `https:/
 
 > We're done with Sam's session.
 
+Send parleys only to people you trust. A guest can ask about anything in the project folder, and the interviewer answers from what it finds there, including files you may have forgotten about. The blocked list and the agents' sandboxes keep secrets out and keep it inside the folder, but they shouldn't be the only thing between a stranger and your work.
+
 Or from a terminal:
 
 ```bash

package/dist/account.js

@@ -32,9 +32,9 @@ 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 parley.im anymore. Run parley login."), { unlinked: true });
+        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.im 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

@@ -37,8 +37,8 @@ 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 parley.im, or unlink it
-  parley start | stop | status                 The background server (holds the parley.im connection)
+  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 uninstall                             Undo install (your conversations stay)
@@ -46,7 +46,7 @@ Commands
   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.im 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);
@@ -88,7 +88,7 @@ async function main() {
             clearCredentials();
             if (await isServerUp(config))
                 await fetch(`http://localhost:${config.dashboardPort}/api/relay/restart`, { method: "POST" });
-            console.log(`Unlinked from ${creds.account.email}. Existing parley.im links stop working until you sign in again.`);
+            console.log(`Unlinked from ${creds.account.email}. Shared links stop working until you sign in again.`);
             return;
         }
         case "whoami": {
@@ -149,10 +149,11 @@ async function main() {
             console.log(`Link: ${linkFor(session, config)}`);
             console.log(`Replies allowed: ${session.reply_limit}`);
             console.log(`Watch: ${dashboardUrl(config, session)}`);
+            console.log(`\nSend it only to someone you trust: they can ask about anything in this folder.`);
             if (!readCredentials(config))
                 console.log("\nNot signed in, so this link only works on this computer. Run parley login to share links.");
             else if (!made.shared)
-                console.log(`\nparley.im didn't take the session yet; it will once the connection is back (see ${paths.log}).`);
+                console.log(`\nparley's servers didn't take the session yet; it will once the connection is back (see ${paths.log}).`);
             return;
         }
         case "list": {

package/dist/mcp.js

@@ -10,7 +10,7 @@ import { startSession, endSession, setReplyLimit } from "./control.js";
 import { readCredentials } from "./account.js";
 const INSTRUCTIONS = `Parley lets the user hand a guest a link to a private web chat with a read-only Claude or Codex running in their project folder. The guest talks; the agent listens, asks follow-ups, answers questions from the code, and everything is recorded.
 
-Use create_session when the user wants someone to give feedback on a project. Write the brief from what you know about the project and what the user wants to learn. Later, use list_sessions to see which sessions are open, which have new messages, and how many replies each has used and spent; get_transcript to read them; set_reply_limit to give a session more room or less; and end_session when the user is done with one. Links live on parley.im and are end-to-end encrypted; the conversation itself happens on the user's computer, so guests can only get replies while it's awake and the parley server is running.`;
+Use create_session when the user wants someone to give feedback on a project. Write the brief from what you know about the project and what the user wants to learn. Later, use list_sessions to see which sessions are open, which have new messages, and how many replies each has used and spent; get_transcript to read them; set_reply_limit to give a session more room or less; and end_session when the user is done with one. Parleys are for people the user trusts: a guest can ask about anything in the project folder, and the interviewer may answer from files the user has forgotten are there. If the user wants to send one to strangers or post it publicly, say so plainly before making it. Links live on parley.im and are end-to-end encrypted; the conversation itself happens on the user's computer, so guests can only get replies while it's awake and the parley server is running.`;
 export async function runMcp() {
     const config = loadConfig();
     const store = new Store();
@@ -22,7 +22,8 @@ export async function runMcp() {
         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 " +
             "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.",
+            "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.",
         inputSchema: {
             project_dir: z.string().describe("Absolute path of the project folder, normally your current working directory."),
             guest: z.string().describe("Name of the person who will give feedback, e.g. 'Sam'."),
@@ -72,18 +73,19 @@ export async function runMcp() {
             "",
         ];
         if (!readCredentials(config)) {
-            lines.push("This computer isn't signed in to parley.im, so the link only works here. Have the user run `parley login` to share links.");
+            lines.push("This computer isn't signed in to parley, so the link only works here. Have the user run `parley login` to share links.");
         }
         else if (!made.serverUp) {
             lines.push("Warning: the parley server didn't come up, so the link won't answer yet. Check ~/.parley/server.log, then run `parley start`.");
         }
         else if (!made.shared) {
-            lines.push("Warning: parley.im didn't take the session yet. It will once the connection is back; `parley status` shows it.");
+            lines.push("Warning: parley's servers didn't take the session yet. It will once the connection is back; `parley status` shows it.");
         }
         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.");
         }
+        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", {

package/dist/relay.js

@@ -100,7 +100,7 @@ export class RelayLink {
                 return;
             this.ws = null;
             if (event.code === 4401) {
-                this.status = { state: "unlinked", relayUrl: creds.relayUrl, error: "This computer was unlinked from its parley.im account. Run parley login." };
+                this.status = { state: "unlinked", relayUrl: creds.relayUrl, error: "This computer was unlinked from its parley account. Run parley login." };
                 return;
             }
             if (event.code === 4426) {
@@ -123,7 +123,7 @@ export class RelayLink {
         try {
             const res = await fetch(`${creds.relayUrl}/api/me`, { headers: { authorization: `Bearer ${creds.token}` }, signal: AbortSignal.timeout(10_000) });
             if (res.status === 401) {
-                this.status = { state: "unlinked", relayUrl: creds.relayUrl, error: "This computer isn't linked to a parley.im account anymore. Run parley login." };
+                this.status = { state: "unlinked", relayUrl: creds.relayUrl, error: "This computer isn't linked to a parley account anymore. Run parley login." };
                 return;
             }
         }

package/dist/server.js

@@ -21,6 +21,7 @@ const STATIC_TYPES = {
     ".css": "text/css; charset=utf-8",
     ".svg": "image/svg+xml",
     ".html": "text/html; charset=utf-8",
+    ".woff2": "font/woff2",
 };
 // Two local servers: your control panel (and your view of each session), and
 // local guest links for development or when you're not signed in. Shared
@@ -276,7 +277,7 @@ function sendFile(res, status, name) {
     send(res, status, STATIC_TYPES[extname(name)], readFileSync(join(WEB, name)));
 }
 function sendStatic(res, name) {
-    if (!/^[a-z0-9-]+\.(js|css|svg|html)$/.test(name))
+    if (!/^(fonts\/)?[a-z0-9-]+\.(js|css|svg|html|woff2)$/.test(name))
         return notFound(res);
     const file = join(WEB, name);
     if (!existsSync(file))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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",
@@ -40,6 +40,8 @@
     "zod": "^4.6.5"
   },
   "devDependencies": {
+    "@fontsource-variable/atkinson-hyperlegible-next": "^5.3.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.3.0",
     "@types/jsdom": "^30.0.0",
     "@types/node": "^26.6.4",
     "jsdom": "^29.1.1",

package/web/app.css

@@ -1,46 +1,64 @@
-/* parley: one stylesheet for the guest chat, your session view and your
-   control panel. Neutral surfaces, one accent, and a monospace face only where
-   it means something (code, paths, the agent's activity, numbers). */
+/* parley: one stylesheet for the guest chat, your session view, your
+   control panel and parley.im. The Signal flag look: the code flag for P
+   (blue field, white square) as the mark, flag blue on sail, Bricolage
+   Grotesque for headlines and the wordmark, Atkinson Hyperlegible Next for
+   everything people read, and a monospace face only where it means
+   something (code, paths, the agent's activity, numbers). The fonts are
+   served from here, never from a font service, so guest pages only ever
+   talk to parley.im. */
+
+@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fonts/atkinson-hyperlegible-next.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
+@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/static/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
+@font-face { font-family: "Bricolage Grotesque"; src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
 
 :root {
-  --bg: #fafaf9;
+  --bg: #f5f3ee; /* sail */
   --panel: #ffffff;
-  --subtle: #f3f3f1;
-  --hover: #ececea;
-  --line: #e4e4e1;
-  --line-strong: #d2d2ce;
-  --text: #19191a;
-  --muted: #66666c;
-  --faint: #9c9ca3;
-  --accent: #5b4cdb;
-  --accent-soft: #eeecfd;
+  --subtle: #eeebe4;
+  --hover: #e7e3d9;
+  --line: #e4e1d9;
+  --line-strong: #cfcbc1;
+  --text: #121c33; /* ink */
+  --muted: #5b6476;
+  --faint: #8b93a3;
+  --accent: #1f48b8; /* flag blue, for links and marks */
+  --accent-fill: #1f48b8; /* buttons and the flag itself */
+  --accent-soft: #e6ecfa;
   --accent-ink: #ffffff;
-  --ok: #1f9d55;
+  --guest: #e6ecfa; /* your own messages */
+  --guest-ink: #23314f;
+  --brass: #d99a2b; /* small touches only */
+  --ok: #1e8a52;
   --warn: #b7791f;
   --danger: #c4302b;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
-  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --shadow: 0 1px 2px rgba(18, 28, 51, 0.05), 0 12px 32px -16px rgba(18, 28, 51, 0.22);
+  --sans: "Atkinson Hyperlegible Next", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --display: "Bricolage Grotesque", var(--sans);
   --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
   color-scheme: light;
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #0c0c0d;
-    --panel: #131315;
-    --subtle: #19191c;
-    --hover: #212125;
-    --line: #26262b;
-    --line-strong: #36363c;
-    --text: #ececef;
-    --muted: #9b9ba4;
-    --faint: #66666f;
-    --accent: #9d92ff;
-    --accent-soft: #221f3d;
-    --accent-ink: #0c0c0d;
+    --bg: #0d1322; /* ink at night */
+    --panel: #141c2f;
+    --subtle: #1a2338;
+    --hover: #222c44;
+    --line: #232d45;
+    --line-strong: #33405e;
+    --text: #e8ecf4;
+    --muted: #9aa4b8;
+    --faint: #67718a;
+    --accent: #84a4f6;
+    --accent-fill: #3b6be8;
+    --accent-soft: #1c2a4d;
+    --accent-ink: #ffffff;
+    --guest: #1e2b4b;
+    --guest-ink: #dce5fa;
+    --brass: #e3ab45;
     --ok: #3ccf7a;
     --warn: #e3a948;
     --danger: #ff6b63;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
     color-scheme: dark;
   }
 }
@@ -60,11 +78,19 @@ body {
 .mono { font-family: var(--mono); font-size: 0.86em; }
 a { color: inherit; }
 button, input, textarea, select { font: inherit; color: inherit; }
+h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
 
 /* ---------- shared pieces ---------- */
 
-.mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); flex: none; }
-.mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
+/* The mark: the code flag for P, a blue field with a white square. */
+.mark { display: inline-block; width: 24px; height: 24px; flex: none; }
+.mark svg { display: block; width: 100%; height: 100%; }
+.mark .field { fill: var(--accent-fill); }
+.mark .square { fill: #ffffff; }
+/* The same flag, small, drawn in CSS: beside the interviewer's words, and
+   hoisting in turn while it writes. */
+.flag { display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 3.5px var(--accent-fill), inset 0 0 0 13px #ffffff; }
+.wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
 
 .topbar {
   display: flex; align-items: center; gap: 10px; min-height: 52px;
@@ -72,9 +98,9 @@ button, input, textarea, select { font: inherit; color: inherit; }
   border-bottom: 1px solid var(--line); background: var(--bg);
 }
 .crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
-.crumbs .product { color: var(--muted); font-weight: 500; }
+.crumbs .product { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: 17px; color: var(--text); }
 .crumbs .slash { color: var(--faint); }
-.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: inherit; text-decoration: none !important; }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none !important; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.025em; }
 .brand:hover .mark { filter: brightness(1.1); }
 .lost .own { margin-top: 18px; font-size: 13px; color: var(--faint); }
 .lost .own a { color: var(--accent); }
@@ -89,6 +115,15 @@ button, input, textarea, select { font: inherit; color: inherit; }
 .dot.warn { background: var(--warn); }
 .dot.off { background: var(--danger); }
 @keyframes pulse { 50% { opacity: 0.35; } }
+/* In a chat's header the status is a flag on its staff: flying when the
+   sender's computer is there, at half-mast (and red) when it isn't. */
+.status .dot { position: relative; width: 12px; height: 15px; border-radius: 0; background: none; box-shadow: none; animation: none; }
+.status .dot::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 15px; border-radius: 1px; background: var(--muted); }
+.status .dot::after { content: ""; position: absolute; left: 2px; top: 0; width: 9px; height: 8px; border-radius: 0 2px 2px 0; background: var(--accent-fill); box-shadow: inset 0 0 0 2.5px var(--accent-fill), inset 0 0 0 9px #ffffff; transition: top 0.4s ease; }
+.status .dot.off::after { top: 7px; box-shadow: inset 0 0 0 2.5px var(--danger), inset 0 0 0 9px #ffffff; }
+.status .dot.warn::after { top: 7px; box-shadow: inset 0 0 0 2.5px var(--faint), inset 0 0 0 9px var(--bg); }
+.status .dot.busy::after { animation: flutter 1.2s ease-in-out infinite; }
+@keyframes flutter { 50% { transform: skewY(-8deg); } }
 
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
@@ -98,7 +133,7 @@ button, input, textarea, select { font: inherit; color: inherit; }
 }
 .btn:hover { background: var(--subtle); }
 .btn:disabled { opacity: 0.5; cursor: default; }
-.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
+.btn.primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
 .btn.primary:hover { opacity: 0.88; }
 .btn.danger { color: var(--danger); }
 .btn.confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
@@ -167,17 +202,21 @@ body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
   position: absolute; left: 0; top: 0; width: 14px; text-align: center;
   font-family: var(--mono); font-size: 14px; line-height: 1.55;
 }
-.msg.agent::before { content: "●"; color: var(--accent); font-size: 10px; line-height: 23px; }
-.msg.guest::before { content: "›"; color: var(--muted); font-weight: 600; top: 10px; }
+.msg.agent::before { content: ""; top: 5px; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 3.5px var(--accent-fill), inset 0 0 0 13px #ffffff; }
+/* The interviewer's words are what people read: set for reading. */
+.msg.agent .body { font-size: 16.5px; line-height: 1.6; }
+/* Your own words are compact and plainly yours, on the right. */
+.msg.guest { padding-left: 0; display: flex; flex-direction: column; align-items: flex-end; }
+.msg.guest::before { content: none; }
 .msg.error::before { content: "!"; color: var(--danger); font-weight: 700; }
 .meta { font-size: 12px; color: var(--faint); margin-bottom: 2px; }
 .meta .who { color: var(--muted); font-weight: 600; }
-.msg.guest .bubble { background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
+.msg.guest .bubble { max-width: min(82%, 560px); background: var(--guest); color: var(--guest-ink); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 15px; line-height: 1.45; }
 .msg.guest .meta { display: none; }
 /* Guests get just the conversation: no names or times on every message. */
 .guest-view .msg .meta, .guest-view .msg .stamp { display: none; }
 .guest-view .msg { margin-bottom: 16px; }
-.guest-view .msg.guest::before { top: 9px; }
+
 .msg.guest .stamp { font-size: 12px; color: var(--faint); margin-top: 4px; }
 .msg.error .body { color: var(--danger); font-size: 14px; }
 .msg.error .detail { margin-top: 6px; font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
@@ -218,23 +257,26 @@ body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
 .body th { background: var(--subtle); font-weight: 600; white-space: nowrap; }
 .body tr:last-child td { border-bottom: 0; }
 
-.thinking { display: inline-flex; gap: 4px; padding: 8px 0 4px; }
-.thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite ease-in-out both; }
+/* Writing: three tiny flags hoisting in turn. */
+.thinking { display: inline-flex; align-items: flex-end; gap: 5px; height: 22px; padding-top: 4px; }
+.thinking span { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 2.5px var(--accent-fill), inset 0 0 0 8px #ffffff; animation: hoist 1.2s ease-in-out infinite; }
 .thinking span:nth-child(2) { animation-delay: 0.15s; }
 .thinking span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes hoist { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
+@media (prefers-reduced-motion: reduce) { .thinking span, .status .dot.busy::after { animation: none; } }
 @keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
 .cursor::after { content: ""; display: inline-block; width: 7px; height: 1.05em; background: var(--accent); margin-left: 3px; vertical-align: -3px; animation: blink 1s infinite; }
 
 .dock { border-top: 1px solid var(--line); background: var(--bg); }
 .dock .chat-inner { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
-.composer { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
+.composer { border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
 .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 /* The sender's computer (or this page's connection) is offline: nothing can
    be sent until it's back, and it looks that way. */
 .app.offline .composer, .app.offline .composer:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
 .app.offline .prompt { color: var(--danger); }
 .composer .row { display: flex; align-items: flex-end; gap: 2px; padding: 4px 4px 4px 12px; }
-.prompt { font-family: var(--mono); color: var(--accent); font-weight: 600; padding: 9px 4px 9px 0; line-height: 1.55; }
+.prompt { display: none; }
 textarea {
   flex: 1; resize: none; border: 0; outline: 0; background: transparent;
   padding: 8px 4px; min-height: 40px; line-height: 1.55; font-size: 16px;
@@ -256,8 +298,8 @@ textarea::placeholder { color: var(--faint); }
 }
 .icon-btn:hover { background: var(--subtle); color: var(--text); }
 .icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.send { background: var(--accent); color: var(--accent-ink); }
-.send:hover { background: var(--accent); color: var(--accent-ink); opacity: 0.9; }
+.send { background: var(--accent-fill); color: var(--accent-ink); border-radius: 11px; }
+.send:hover { background: var(--accent-fill); color: var(--accent-ink); opacity: 0.9; }
 .send:disabled { background: var(--subtle); color: var(--faint); cursor: default; opacity: 1; }
 .attachments { display: flex; gap: 8px; padding: 10px 10px 0; flex-wrap: wrap; }
 .thumb { position: relative; }
@@ -336,7 +378,7 @@ body.panel { overflow: auto; }
 .trow.ended { color: var(--muted); }
 .who-cell .name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
 .who-cell .where { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.badge { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--accent); color: var(--accent-ink); }
+.badge { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--accent-fill); color: var(--accent-ink); }
 .badge.soft { background: var(--subtle); color: var(--muted); border: 1px solid var(--line); }
 .cell-muted { font-size: 13px; color: var(--muted); }
 .num { font-family: var(--mono); font-size: 13px; }
@@ -420,7 +462,9 @@ body.panel { overflow: auto; }
 .menu-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @keyframes drop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
 
-.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
+/* 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; }
@@ -433,26 +477,47 @@ body.panel { overflow: auto; }
 /* Long details shorten instead of pushing the buttons off a phone screen. */
 .trow.site-row .who-cell { min-width: 0; }
 
-/* parley.im's front page: what it is, in plain words. */
-.landing { max-width: 980px; }
-.intro { padding: 9vh 0 8px; max-width: 640px; }
-.intro h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
-.intro .lede { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; }
-.intro .cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 10px; }
-.intro .fine { font-size: 13px; color: var(--faint); margin: 0; }
-.how { list-style: none; counter-reset: step; padding: 0; margin: 56px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
-.how li { counter-increment: step; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
-.how li::before {
-  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px;
-  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px;
-}
-.how h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: -0.01em; }
-.how p { margin: 0; font-size: 14px; color: var(--muted); }
+/* parley's front page: what it is, in plain words, beside a parley playing
+   out (home.js). */
+.landing { max-width: 1080px; }
+.front { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 8vh 0 24px; }
+.front .intro { flex: 999 1 440px; min-width: 0; display: grid; gap: 18px; padding: 0; border: 0; background: none; margin: 0; font-size: inherit; color: inherit; }
+.front h1 { font-size: clamp(36px, 6.4vw, 56px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
+.front .lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 34em; }
+.front .cta { display: flex; gap: 8px; flex-wrap: wrap; }
+.front .cta .btn { height: 46px; padding: 0 20px; border-radius: 11px; font-size: 16px; font-weight: 700; }
+.front .cta .btn.ghost { color: var(--text); font-weight: 500; }
+.front .fine { font-size: 14px; color: var(--muted); margin: 0; }
+.demo { flex: 1 1 380px; min-width: 0; margin: 0; display: grid; gap: 10px; }
+.demo-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
+.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; }
+.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(--display); font-weight: 700; letter-spacing: -0.025em; }
+.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 .msg { margin: 0; animation: rise 0.25s ease-out; }
+.demo .msg.agent .body { font-size: 15.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); }
+@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; } }
+.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: counter(step); font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 15px; }
+.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); }
-.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 44px 0 0; padding: 28px 0 40px; border-top: 1px solid var(--line); }
-.promises h3 { font-size: 14px; margin: 0 0 4px; }
-.promises p { font-size: 14px; color: var(--muted); margin: 0; }
+.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; }
 @media (max-width: 720px) {
-  .how, .promises { grid-template-columns: 1fr; }
-  .intro { padding-top: 6vh; }
+  .front { padding-top: 5vh; gap: 32px; }
 }

package/web/chat.html

@@ -11,7 +11,7 @@
 <meta property="og:description" content="{{PREVIEW_TEXT}}">
 <meta property="og:site_name" content="parley">
 <title>{{TITLE}}</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
@@ -20,7 +20,7 @@
     <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">
-        <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><span class="product">parley</span>
+        <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span><span class="product">parley</span>
       </a><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
     </nav>
     <span class="status" id="status" hidden><span class="dot" id="status-dot"></span><span id="status-text"></span></span>

package/web/chat.js

@@ -345,7 +345,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.im 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,
@@ -358,7 +358,7 @@
         ? el(
             "p",
             {},
-            `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. parley.im passes them along but can't read them; it knows who sent this link, the project's name and when messages go by. The key is the part of your link after the #, so anyone with the whole link can read this chat: keep it to yourself. (This page's code comes from parley.im, so that promise relies on parley.im serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
+            `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.)`,
           )
         : 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.`),
@@ -440,7 +440,7 @@
 
   function markEl() {
     const span = el("span", { className: "mark" });
-    span.innerHTML = `<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.innerHTML = `<svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg>`;
     return span;
   }
 

package/web/ended.html

@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>This parley has ended</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <div class="lost">
   <div>
-    <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>
+    <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
     <h1>This parley has ended</h1>
     <p>Thanks for the feedback. The conversation isn't available here anymore.</p>
   </div>

package/web/fonts/LICENSE-atkinson-hyperlegible-next.txt

@@ -0,0 +1,93 @@
+Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next) AtkinsonHyperlegibleNext-Italic[wght].ttf: Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors (https://github.com/googlefonts/atkinson-hyperlegible-next)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/web/fonts/LICENSE-bricolage-grotesque.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/web/home.js

@@ -0,0 +1,90 @@
+// parley's front page: plays the demo, three short parleys in turn, the way
+// a guest sees one. 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.
+(() => {
+  const root = document.getElementById("demo");
+  const list = document.getElementById("demo-msgs");
+  const data = document.getElementById("scenes");
+  if (!root || !list || !data) return;
+  const scenes = JSON.parse(data.textContent);
+  const tabs = [...root.querySelectorAll("[data-scene]")];
+  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let run = 0; // a new run cancels the one playing
+
+  const el = (tag, className, text) => {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  };
+  const guest = (text) => {
+    const node = el("li", "msg guest");
+    node.append(el("div", "bubble", text));
+    return node;
+  };
+  const agent = (text) => {
+    const node = el("li", "msg agent");
+    const body = el("div", "body");
+    body.append(el("p", "", text));
+    node.append(body);
+    return node;
+  };
+  const wait = (ms, id) => new Promise((resolve, reject) => setTimeout(() => (id === run ? resolve() : reject(new Error("stopped"))), ms));
+
+  function pick(i) {
+    tabs.forEach((tab, j) => {
+      tab.classList.toggle("on", i === j);
+      tab.setAttribute("aria-pressed", String(i === j));
+    });
+  }
+
+  function show(i) {
+    const scene = scenes[i];
+    pick(i);
+    list.replaceChildren(guest(scene.asks), agent(scene.says), guest(scene.then));
+  }
+
+  async function play(i, id) {
+    const scene = scenes[i];
+    pick(i);
+    list.replaceChildren();
+    await wait(500, id);
+    list.append(guest(scene.asks));
+    await wait(900, id);
+    // Working: the agent looks something up in the project, then writes.
+    const node = el("li", "msg agent");
+    const body = el("div", "body");
+    body.innerHTML = `<span class="thinking"><span></span><span></span><span></span></span>`;
+    const steps = el("ul", "steps");
+    node.append(body, steps);
+    list.append(node);
+    await wait(700, id);
+    steps.append(el("li", "now", scene.step));
+    await wait(1400, id);
+    const p = el("p", "cursor");
+    body.replaceChildren(p);
+    const words = scene.says.split(" ");
+    for (let w = 1; w <= words.length; w++) {
+      p.textContent = words.slice(0, w).join(" ");
+      await wait(55, id);
+    }
+    p.classList.remove("cursor");
+    steps.remove();
+    await wait(1500, id);
+    list.append(guest(scene.then));
+    await wait(4500, id);
+  }
+
+  async function loop(from) {
+    const id = ++run;
+    try {
+      for (let i = from; ; i = (i + 1) % scenes.length) await play(i, id);
+    } catch {
+      // Stopped for another scene.
+    }
+  }
+
+  tabs.forEach((tab, i) => tab.addEventListener("click", () => (still ? show(i) : loop(i))));
+  if (!still) loop(0);
+})();

package/web/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#5b4cdb"/><circle cx="8" cy="10" r="2.2" fill="#fff"/><rect x="12" y="8" width="12" height="4" rx="2" fill="#fff"/><rect x="6" y="14" width="20" height="4" rx="2" fill="#fff" fill-opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" fill="#fff" fill-opacity=".7"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#1F48B8"/><rect x="20" y="20" width="24" height="24" rx="2" fill="#FFFFFF"/></svg>

package/web/missing.html

@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title>Link not found</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <div class="lost">
   <div>
-    <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>
+    <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
     <h1>This link doesn't lead anywhere</h1>
     <p>Check that you have the whole link, or ask whoever sent it for a fresh one.</p>
   </div>

package/web/panel.html

@@ -4,18 +4,18 @@
 <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?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <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>
+  <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></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>
+  <p class="notice" id="signed-out" hidden style="margin:18px 0 0">This computer isn't signed in to parley, 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">

package/web/panel.js

@@ -207,7 +207,7 @@
         await navigator.clipboard.writeText(s.link);
         copy.textContent = "Copied";
       };
-      $("made").replaceChildren(el("strong", { textContent: `Session for ${s.guest} is ready.` }), el("div", { className: "linkbox" }, link, copy), el("a", { className: "cell-muted", href: `/o/${s.id}`, textContent: "Open it" }));
+      $("made").replaceChildren(el("strong", { textContent: `Session for ${s.guest} is ready.` }), el("div", { className: "linkbox" }, link, copy), el("p", { className: "cell-muted", style: "margin:0", textContent: "Send it only to someone you trust: they can ask about anything in this project folder." }), el("a", { className: "cell-muted", href: `/o/${s.id}`, textContent: "Open it" }));
       $("made").hidden = false;
       $("f-guest").value = $("f-brief").value = $("f-greeting").value = "";
       refresh();