@parley-im/parley 0.2.5 → 0.2.7

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/package.json

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

package/web/app.css

@@ -1,63 +1,62 @@
 /* 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; }
+   control panel and parley's site. Deep, murky ocean green on paper, 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 while it
+   writes, P goes by in Morse. 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; }
+@font-face { font-family: "Instrument Sans"; src: url("/static/fonts/instrument-sans-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
+@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
 
 :root {
-  --bg: #f5f3ee; /* sail */
+  --bg: #f2f4f1; /* paper, a little sea-washed */
   --panel: #ffffff;
-  --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;
+  --subtle: #eaeeea;
+  --hover: #e1e7e3;
+  --line: #dde4e0;
+  --line-strong: #c6d0cb;
+  --text: #0f1d1a; /* abyss */
+  --muted: #55645e;
+  --faint: #8c9893;
+  --accent: #22574c; /* deep murky green, for links and marks */
+  --accent-fill: #22574c; /* buttons */
+  --accent-soft: #e1eae5;
   --accent-ink: #ffffff;
-  --guest: #e6ecfa; /* your own messages */
-  --guest-ink: #23314f;
-  --brass: #d99a2b; /* small touches only */
-  --ok: #1e8a52;
-  --warn: #b7791f;
-  --danger: #c4302b;
-  --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;
+  --tile: #22574c; /* the mark's tile */
+  --guest: #e1eae5; /* your own messages */
+  --guest-ink: #183a32;
+  --ok: #2f7d5b;
+  --warn: #a8741c;
+  --danger: #c4383a;
+  --shadow: 0 1px 2px rgba(15, 29, 26, 0.05), 0 12px 32px -16px rgba(15, 29, 26, 0.24);
+  --sans: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --display: var(--sans);
+  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
   color-scheme: light;
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --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;
+    --bg: #0b1513; /* the deep */
+    --panel: #111c19;
+    --subtle: #16231f;
+    --hover: #1d2b27;
+    --line: #1f2d29;
+    --line-strong: #30423c;
+    --text: #e3ebe7;
+    --muted: #9baea6;
+    --faint: #62726b;
+    --accent: #86c2ae; /* sea glass, through murky water */
+    --accent-fill: #2e6c5f;
+    --accent-soft: #19302a;
     --accent-ink: #ffffff;
-    --guest: #1e2b4b;
-    --guest-ink: #dce5fa;
-    --brass: #e3ab45;
-    --ok: #3ccf7a;
-    --warn: #e3a948;
-    --danger: #ff6b63;
+    --tile: #2e6c5f;
+    --guest: #1b2e28;
+    --guest-ink: #dbe9e3;
+    --ok: #5fc296;
+    --warn: #dba54a;
+    --danger: #ff6f6b;
     --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
     color-scheme: dark;
   }
@@ -79,51 +78,41 @@ body {
 a { color: inherit; }
 button, input, textarea, select { font: inherit; color: inherit; }
 h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
+code, kbd, pre { font-family: var(--mono); }
 
 /* ---------- shared pieces ---------- */
 
-/* The mark: the code flag for P, a blue field with a white square. */
+/* 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 .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; }
+.mark .tile { fill: var(--tile); }
+.mark .glyph { fill: #ffffff; }
+.wordmark { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; }
 
 .topbar {
   display: flex; align-items: center; gap: 10px; min-height: 52px;
   padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
   border-bottom: 1px solid var(--line); background: var(--bg);
 }
-.crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
-.crumbs .product { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: 17px; color: var(--text); }
+.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
+.crumbs .product { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; font-size: 16px; color: var(--text); }
 .crumbs .slash { color: var(--faint); }
-.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); }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none !important; font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -0.04em; }
+.brand:hover .mark { filter: brightness(1.15); }
 .lost .own { margin-top: 18px; font-size: 13px; color: var(--faint); }
 .lost .own a { color: var(--accent); }
 .crumbs .here { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .crumbs a { text-decoration: none; }
 .crumbs a:hover { text-decoration: underline; }
 
-.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
-.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
-.dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
+.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
+.dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
 .dot.busy { background: var(--accent); animation: pulse 1.4s infinite ease-in-out; }
-.dot.warn { background: var(--warn); }
-.dot.off { background: var(--danger); }
+.dot.warn { background: transparent; box-shadow: inset 0 0 0 2px var(--faint); }
+.dot.off { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
+.app.offline .status { color: 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;
@@ -143,7 +132,7 @@ h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
 
 .chip {
   font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap;
-  padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--subtle);
+  padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--subtle);
 }
 .chip.low { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
 .info-btn { width: 34px; height: 34px; margin-right: -6px; }
@@ -173,7 +162,7 @@ h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
   background: var(--subtle); border-left: 3px solid var(--warn); color: var(--text);
 }
 
-.label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
+.label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
 
 /* ---------- chat ---------- */
 
@@ -202,14 +191,15 @@ 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: ""; 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 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 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 { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-bottom: 2px; }
 .meta .who { color: var(--muted); font-weight: 600; }
 .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; }
@@ -257,15 +247,17 @@ 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 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; }
+/* Writing: P in Morse (dot, dash, dash, dot), passing by. */
+.thinking { display: inline-flex; align-items: center; gap: 4px; height: 26px; }
+.thinking span { width: 7px; height: 7px; border-radius: 4px; background: var(--accent); opacity: 0.25; animation: morse 1.6s ease-in-out infinite; }
+.thinking span:nth-child(2), .thinking span:nth-child(3) { width: 17px; }
+.thinking span:nth-child(2) { animation-delay: 0.16s; }
+.thinking span:nth-child(3) { animation-delay: 0.32s; }
+.thinking span:nth-child(4) { animation-delay: 0.48s; }
+@keyframes morse { 0%, 70%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
+@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; } }
 
 .dock { border-top: 1px solid var(--line); background: var(--bg); }
 .dock .chat-inner { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
@@ -422,8 +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: 36px; height: 36px; border-radius: 9px; margin: 0 auto 16px; }
-.lost .mark svg { width: 20px; height: 20px; }
+.lost .mark { width: 40px; height: 40px; 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; }
 
@@ -462,7 +453,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; }
@@ -475,8 +468,8 @@ 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, beside a glimpse of a
-   parley. */
+/* 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; }
@@ -486,18 +479,31 @@ body.panel { overflow: auto; }
 .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; }
-.glimpse {
-  flex: 1 1 320px; min-width: 0; display: grid; gap: 14px; padding: 20px; background: var(--panel);
-  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
-}
-.glimpse .says { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 16px; line-height: 1.55; }
-.glimpse .says .flag { margin-top: 5px; }
-.glimpse .reply { justify-self: end; max-width: 85%; padding: 8px 12px; background: var(--guest); color: var(--guest-ink); border-radius: 13px 13px 4px 13px; font-size: 14px; line-height: 1.45; }
-.glimpse .writing { display: flex; gap: 10px; align-items: center; }
-.glimpse .writing .thinking { padding: 0; height: 16px; }
+.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(--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 .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.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 li::before { content: "0" counter(step); font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 13px; }
 .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); }

package/web/chat.html

@@ -5,13 +5,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
 <meta name="robots" content="noindex, nofollow">
 <meta name="referrer" content="no-referrer">
-<meta name="theme-color" content="#0c0c0d" media="(prefers-color-scheme: dark)">
-<meta name="theme-color" content="#fafaf9" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#0b1513" media="(prefers-color-scheme: dark)">
+<meta name="theme-color" content="#f2f4f1" media="(prefers-color-scheme: light)">
 <meta property="og:title" content="{{PREVIEW_TITLE}}">
 <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=3" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=5" 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="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>
+        <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><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

@@ -222,7 +222,7 @@
     if (live.text.trim()) {
       live.bodyEl.innerHTML = window.renderMarkdown(live.text);
       live.bodyEl.lastElementChild?.classList.add("cursor");
-    } else live.bodyEl.innerHTML = `<span class="thinking"><span></span><span></span><span></span></span>`;
+    } else live.bodyEl.innerHTML = `<span class="thinking" role="img" aria-label="Writing"><span></span><span></span><span></span><span></span></span>`;
     // 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 })));
@@ -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="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.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>`;
     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=3" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=5" 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="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
+    <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>
     <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 → LICENSE-instrument-sans.txt}

@@ -1,4 +1,4 @@
-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)
+Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans) InstrumentSans-Italic[wdth,wght].ttf: Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
 
 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:

package/web/fonts/{LICENSE-bricolage-grotesque.txt → LICENSE-jetbrains-mono.txt}

@@ -1,4 +1,4 @@
-Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
 
 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:

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" role="img" aria-label="Writing"><span></span><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 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>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#22574C"/><rect x="19.5" y="16" width="7" height="32" rx="1.5" fill="#FFFFFF"/><path fill="#FFFFFF" 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>

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=3" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=5" 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="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
+    <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>
     <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=3" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=5" 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="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
+  <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>
   <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();