@parley-im/parley 0.2.9 → 0.2.11

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.9",
+  "version": "0.2.11",
   "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

@@ -2,8 +2,10 @@
    control panel and parley's site. Dark, with lilac for the accents, for the
    people who use Claude Code and Codex: Instrument Sans for everything
    people read, JetBrains Mono for the wordmark, labels, files and numbers.
-   The agent's words are marked with a dot, as in Claude Code, and three
-   dots pulse while it writes. The fonts are served from here, never from a
+   The mark (mark.js) is equilateral triangles gathered into hexagons, and
+   its triangles do the motion: they say when a page opens, when the agent
+   is reading or writing, when a reply lands, and when the sender's computer
+   is offline. Six of them mark the agent's words. The fonts are served from here, never from a
    font service, so guest pages only ever talk to parley. */
 
 @font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@@ -24,7 +26,6 @@
   --accent-fill: #9d92ff; /* buttons, with dark text */
   --accent-soft: #221f3d;
   --accent-ink: #0c0c0d;
-  --tile: #9d92ff; /* the mark's tile */
   --guest: #221f3d; /* your own messages */
   --guest-ink: #e6e2ff;
   --ok: #3ccf7a;
@@ -57,11 +58,27 @@ code, kbd, pre { font-family: var(--mono); }
 
 /* ---------- shared pieces ---------- */
 
-/* The mark, for now: a p on a deep green tile. */
-.mark { display: inline-block; width: 24px; height: 24px; flex: none; }
-.mark svg { display: block; width: 100%; height: 100%; }
-.mark .tile { fill: var(--tile); }
-.mark .glyph { fill: var(--accent-ink); }
+/* The mark: a ring of thirty triangles around a ring of space and a core of
+   six, two tones each by which way a triangle points. */
+.mark { display: inline-block; width: 26px; height: 26px; flex: none; }
+.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.r1 { fill: #9d92ff; } .r2 { fill: #8a7ff0; }
+.c1 { fill: #d2ccff; } .c2 { fill: #bdb4ff; }
+.g1 { fill: #6b60d6; } .g2 { fill: #5e54c4; }
+.mark path { transition: fill 0.4s ease; }
+/* Offline, the ring goes dark and the core turns red; ended, it all dims. */
+.app.offline .topbar .mark .r1, .mark.dim .r1, .mark.dim .c1 { fill: #2e2a45; }
+.app.offline .topbar .mark .r2, .mark.dim .r2, .mark.dim .c2 { fill: #28253c; }
+.app.offline .topbar .mark .c1 { fill: #ff6b63; }
+.app.offline .topbar .mark .c2 { fill: #e85a53; }
+/* As a page opens, the ring builds around and then the core arrives. */
+.mark.opening .r1, .mark.opening .r2 { transform-box: fill-box; transform-origin: center; animation: build 0.45s ease-out both; }
+.mark.opening .c1, .mark.opening .c2 { transform-box: view-box; transform-origin: 32px 32px; animation: arrive 0.5s ease-out 1.05s both; }
+@keyframes build { from { opacity: 0; transform: scale(0.2); } }
+@keyframes arrive { from { opacity: 0; transform: scale(0.3); } 70% { transform: scale(1.12); } }
+/* A reply lands: the core pulses once. */
+.mark.pulse .c1, .mark.pulse .c2 { transform-box: view-box; transform-origin: 32px 32px; animation: pulse-core 0.8s ease-in-out; }
+@keyframes pulse-core { 40% { transform: scale(1.3); } 75% { transform: scale(0.94); } }
 .wordmark { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; }
 
 .topbar {
@@ -166,8 +183,12 @@ 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;
 }
-/* The agent's words get a dot, as in Claude Code. */
-.msg.agent::before { content: ""; left: 3px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+/* The agent's words are marked with the mark's core: six triangles. */
+.msg.agent::before {
+  content: ""; left: 2px; top: 6px; width: 11px; height: 12.7px;
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  background: conic-gradient(#d2ccff 0deg 60deg, #bdb4ff 60deg 120deg, #d2ccff 120deg 180deg, #bdb4ff 180deg 240deg, #d2ccff 240deg 300deg, #bdb4ff 300deg 360deg);
+}
 /* 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. */
@@ -222,15 +243,21 @@ 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; }
 
-/* Writing: three dots, pulsing in turn. */
-.thinking { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
-.thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: pulse-dot 1.2s ease-in-out infinite; }
-.thinking span:nth-child(2) { animation-delay: 0.16s; }
-.thinking span:nth-child(3) { animation-delay: 0.32s; }
-@keyframes pulse-dot { 0%, 70%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
+/* Working: the mark, small. Light runs around its empty ring while the agent
+   writes; while it looks things up (.reading), its core flickers instead. */
+.thinking { display: inline-block; width: 24px; height: 24px; margin-top: 2px; vertical-align: top; }
+.thinking svg { display: block; width: 100%; height: 100%; }
+.thinking .g1, .thinking .g2 { opacity: 0; animation: chase 1.8s linear infinite; }
+.thinking.reading .g1, .thinking.reading .g2 { animation: none; }
+.thinking.reading .c1, .thinking.reading .c2 { animation: scan 1.2s ease-in-out infinite; }
+@keyframes chase { 0% { opacity: 0; } 4% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes scan { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
 @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
 .cursor::after { content: ""; display: inline-block; width: 7px; height: 1.05em; background: var(--accent); border-radius: 1px; margin-left: 3px; vertical-align: -3px; animation: blink 1.06s steps(1) infinite; }
-@media (prefers-reduced-motion: reduce) { .thinking span, .cursor::after, .dot.busy { animation: none; } .thinking span { opacity: 0.7; } }
+@media (prefers-reduced-motion: reduce) {
+  .cursor::after, .dot.busy, .thinking .c1, .thinking .c2, .mark.opening path, .mark.pulse path { animation: none; }
+  .thinking .g1, .thinking .g2 { animation: none; opacity: 0.6; }
+}
 
 .dock { border-top: 1px solid var(--line); background: var(--bg); }
 .dock .chat-inner { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
@@ -387,7 +414,7 @@ body.panel { overflow: auto; }
 
 .lost { min-height: 100dvh; display: grid; place-items: center; padding: 16px; text-align: center; }
 .lost.inline { min-height: 100%; }
-.lost .mark { width: 40px; height: 40px; margin: 0 auto 16px; }
+.lost .mark { width: 52px; height: 52px; margin: 0 auto 16px; }
 .lost h1 { font-size: 20px; margin: 0 0 6px; letter-spacing: -0.01em; }
 .lost p { color: var(--muted); margin: 0 auto; max-width: 34ch; }
 
@@ -429,14 +456,63 @@ 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); }
+}
 .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; }
@@ -457,23 +533,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: 8px; }
+.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

@@ -10,7 +10,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=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
@@ -18,8 +18,8 @@
   <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">
-        <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span><span class="product">parley</span>
+      <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>
     <span class="status" id="status" hidden><span class="dot" id="status-dot"></span><span id="status-text"></span></span>
@@ -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>
@@ -84,6 +84,7 @@
 <script>window.PARLEY = {{CONFIG}};</script>
 <script src="/static/markdown.js"></script>
 <script src="/static/seal.js"></script>
+<script src="/static/mark.js"></script>
 <script src="/static/chat.js"></script>
 </body>
 </html>

package/web/chat.js

@@ -222,7 +222,16 @@
     if (live.text.trim()) {
       live.bodyEl.innerHTML = window.renderMarkdown(live.text);
       live.bodyEl.lastElementChild?.classList.add("cursor");
-    } else live.bodyEl.innerHTML = `<span class="thinking" role="img" aria-label="Writing"><span></span><span></span><span></span></span>`;
+    } else {
+      // Working: the mark's core flickers while it looks things up, and light
+      // runs around it while it writes.
+      let working = live.bodyEl.querySelector(".thinking");
+      if (!working) {
+        live.bodyEl.innerHTML = `<span class="thinking" role="img" aria-label="Working">${window.parleyMark({ moving: true })}</span>`;
+        working = live.bodyEl.querySelector(".thinking");
+      }
+      working.classList.toggle("reading", live.steps.length > 0 && !live.text);
+    }
     // The last few things it looked at, newest highlighted.
     live.stepsEl.textContent = "";
     live.steps.slice(-4).forEach((line, i, shown) => live.stepsEl.append(el("li", { className: i === shown.length - 1 ? "now" : "", textContent: line })));
@@ -294,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(), "");
@@ -345,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,
@@ -358,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. 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.`),
@@ -421,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);
   }
 
@@ -438,12 +447,26 @@
     els.layout.append(el("div", { className: "lost inline", style: "flex:1" }, el("div", {}, markEl(), el("h1", { textContent: title }), el("p", { textContent: text }), extra())));
   }
 
+  // An ended or broken link shows the mark dimmed.
   function markEl() {
-    const span = el("span", { className: "mark" });
-    span.innerHTML = `<svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg>`;
+    const span = el("span", { className: "mark dim" });
+    span.innerHTML = window.parleyMark();
     return span;
   }
 
+  // The header's mark: it builds itself as the page opens, and its core
+  // pulses once when a reply lands.
+  const headMark = document.querySelector(".topbar .mark");
+  function markOnce(name, ms) {
+    if (!headMark || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    headMark.classList.remove(name);
+    void headMark.offsetWidth;
+    headMark.classList.add(name);
+    setTimeout(() => headMark.classList.remove(name), ms);
+  }
+  headMark?.querySelectorAll(".r1, .r2").forEach((path, i) => (path.style.animationDelay = `${i * 30}ms`));
+  markOnce("opening", 1800);
+
   function banner(text) {
     els.banner.hidden = !text;
     els.banner.textContent = text || "";
@@ -474,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 })]));
@@ -902,7 +925,10 @@
   // A live update: a new message, the reply streaming in, what the agent is
   // looking at (your view only), replies left, or the end.
   function apply(event) {
-    if (event.type === "message") addMessage(event.message);
+    if (event.type === "message") {
+      if (event.message.role === "agent" && !seen.has(event.message.id)) markOnce("pulse", 900);
+      addMessage(event.message);
+    }
     else if (event.type === "turn") event.live ? showLive(event.live) : clearLive();
     else if (event.type === "delta") {
       if (!live) showLive({ text: "", activity: null });

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/ended.html

@@ -6,13 +6,13 @@
 <meta name="theme-color" content="#0c0c0d">
 <meta name="robots" content="noindex, nofollow">
 <title>This parley has ended</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" 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="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+    <span class="mark dim" 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>
     <h1>This parley has ended</h1>
     <p>Thanks for the feedback. The conversation isn't available here anymore.</p>
   </div>

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. 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) => {
@@ -32,6 +39,43 @@
   };
   const wait = (ms, id) => new Promise((resolve, reject) => setTimeout(() => (id === run ? resolve() : reject(new Error("stopped"))), ms));
 
+  // Each parley opens the way a guest's does: the mark builds itself.
+  const mark = root.querySelector(".demo-top .mark");
+  mark?.querySelectorAll(".r1, .r2").forEach((path, k) => (path.style.animationDelay = `${k * 30}ms`));
+  function opening() {
+    if (!mark) return;
+    mark.classList.remove("opening");
+    void mark.getBoundingClientRect();
+    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);
@@ -49,42 +93,52 @@
     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 agent looks something up in the project, then writes.
+    // Working: the mark reads (its core flickers), then writes (light runs
+    // around it), then the reply streams in.
     const node = el("li", "msg agent");
     const body = el("div", "body");
-    body.innerHTML = `<span class="thinking" role="img" aria-label="Writing"><span></span><span></span><span></span></span>`;
-    const steps = el("ul", "steps");
-    node.append(body, steps);
+    body.innerHTML = `<span class="thinking reading" role="img" aria-label="Working">${window.parleyMark({ moving: true })}</span>`;
+    node.append(body);
     list.append(node);
-    await wait(700, id);
-    steps.append(el("li", "now", scene.step));
+    toEnd();
+    await wait(1600, id);
+    body.firstElementChild.classList.remove("reading");
     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(" ");
+      toEnd();
       await wait(55, id);
     }
     p.classList.remove("cursor");
-    steps.remove();
-    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/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#9D92FF"/><rect x="19.5" y="16" width="7" height="32" rx="1.5" fill="#0C0C0D"/><path fill="#0C0C0D" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#1E1C27"/><path fill="#9D92FF" d="M32 7L39.2 11.2L32 15.3Z"/><path fill="#8A7FF0" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path fill="#9D92FF" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path fill="#8A7FF0" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path fill="#9D92FF" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path fill="#8A7FF0" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path fill="#9D92FF" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path fill="#8A7FF0" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path fill="#9D92FF" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path fill="#8A7FF0" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path fill="#9D92FF" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path fill="#8A7FF0" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path fill="#9D92FF" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path fill="#8A7FF0" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path fill="#9D92FF" d="M32 48.7L39.2 52.8L32 57Z"/><path fill="#8A7FF0" d="M32 48.7L32 57L24.8 52.8Z"/><path fill="#9D92FF" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path fill="#8A7FF0" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path fill="#9D92FF" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path fill="#8A7FF0" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path fill="#9D92FF" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path fill="#8A7FF0" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path fill="#9D92FF" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path fill="#8A7FF0" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path fill="#9D92FF" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path fill="#8A7FF0" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path fill="#9D92FF" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path fill="#8A7FF0" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path fill="#9D92FF" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path fill="#8A7FF0" d="M32 7L32 15.3L24.8 11.2Z"/><path fill="#D2CCFF" d="M32 23.7L39.2 27.8L32 32Z"/><path fill="#BDB4FF" d="M39.2 27.8L39.2 36.2L32 32Z"/><path fill="#D2CCFF" d="M32 32L39.2 36.2L32 40.3Z"/><path fill="#BDB4FF" d="M32 32L32 40.3L24.8 36.2Z"/><path fill="#D2CCFF" d="M24.8 27.8L32 32L24.8 36.2Z"/><path fill="#BDB4FF" d="M32 23.7L32 32L24.8 27.8Z"/></svg>

package/web/mark.js

@@ -0,0 +1,43 @@
+// parley's mark, drawn on an isometric grid of equilateral triangles: a ring
+// of thirty around a ring of space and a core of six. The same triangles do
+// the motion. While the agent works, the core flickers as it reads and light
+// runs around the empty ring as it writes (app.css has the animations).
+(() => {
+  const S = 25 / 3; // a triangle's side, so the mark spans 50 of 64 units
+  const H = Math.sqrt(3) / 2;
+  const at = (i, j) => [32 + i * S * H, 32 + j * S + (i * S) / 2];
+  const far = (i, j) => Math.max(Math.abs(i), Math.abs(j), Math.abs(i + j));
+  const fmt = (n) => +n.toFixed(1);
+
+  const tris = [];
+  for (let i = -4; i <= 3; i++) {
+    for (let j = -4; j <= 3; j++) {
+      for (const corners of [[[i, j], [i + 1, j], [i, j + 1]], [[i + 1, j], [i + 1, j + 1], [i, j + 1]]]) {
+        const ring = Math.max(...corners.map(([a, b]) => far(a, b)));
+        if (ring > 3) continue;
+        const pts = corners.map(([a, b]) => at(a, b));
+        const cx = (pts[0][0] + pts[1][0] + pts[2][0]) / 3 - 32;
+        const cy = (pts[0][1] + pts[1][1] + pts[2][1]) / 3 - 32;
+        const xs = pts.map((p) => p[0]).sort((a, b) => a - b);
+        tris.push({
+          ring,
+          turn: ((Math.atan2(cx, -cy) * 180) / Math.PI + 360) % 360, // clockwise from the top
+          tone: Math.abs(xs[0] - xs[1]) < 0.01 ? 1 : 2, // which way it points
+          d: "M" + pts.map((p) => `${fmt(p[0])} ${fmt(p[1])}`).join("L") + "Z",
+        });
+      }
+    }
+  }
+  tris.sort((a, b) => a.turn - b.turn);
+  const SCAN = [0, 0.4, 0.8, 0.2, 0.6, 1.0];
+
+  // The still mark, or with `moving` the one that reads and writes.
+  window.parleyMark = ({ moving = false } = {}) => {
+    const ring = tris.filter((t) => t.ring === 3).map((t) => `<path class="r${t.tone}" d="${t.d}"/>`);
+    const core = tris
+      .filter((t) => t.ring === 1)
+      .map((t, k) => `<path class="c${t.tone}"${moving ? ` style="animation-delay:${SCAN[k]}s"` : ""} d="${t.d}"/>`);
+    const space = moving ? tris.filter((t) => t.ring === 2).map((t, k) => `<path class="g${t.tone}" style="animation-delay:${(k * 0.1).toFixed(1)}s" d="${t.d}"/>`) : [];
+    return `<svg viewBox="0 0 64 64" aria-hidden="true">${ring.join("")}${core.join("")}${space.join("")}</svg>`;
+  };
+})();

package/web/missing.html

@@ -6,13 +6,13 @@
 <meta name="theme-color" content="#0c0c0d">
 <meta name="robots" content="noindex, nofollow">
 <title>Link not found</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" 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="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+    <span class="mark dim" 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>
     <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,13 +4,13 @@
 <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>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<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>
 <body class="panel">
 <header class="topbar">
-  <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+  <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>
   <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>

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}`;