@parley-im/parley 0.2.3 → 0.2.5

package/README.md

@@ -96,7 +96,7 @@ Each reply records which model answered, on which login (`auth: "none"` means yo
 | `src/mcp.ts` | `create_session`, `list_sessions`, `get_transcript`, `set_reply_limit`, `end_session` |
 | `src/db.ts` | Each project's `.parley/parley.db` (sessions with keys, messages, turns), a folder per session with screenshots and `transcript.md`, and `~/.parley/projects.json` listing the projects |
 | `web/` | Chat page, session view, control panel; parley.im serves the guest page's files from here too |
-| `relay/` | parley.im: Worker, a Durable Object per linked computer, D1; the front page's animation is `web/home.js` |
+| `relay/` | parley.im: Worker, a Durable Object per linked computer, D1 |
 
 ## Setup
 
@@ -122,7 +122,7 @@ Conversations live with their project, in `<project>/.parley/`: a database, and
 
 ## Running parley.im
 
-`relay/` is a Cloudflare Worker (`wrangler.jsonc`) with a Durable Object per linked computer and a D1 database (`migrations/`). Signed out, `/` is a wordless animation; signed in, it's your dashboard (open sessions, linked computers and whether they're online). `/docs` is the install guide; `/admin` is for admins (`ADMIN_EMAILS`): invites, the waitlist and who's in. Email goes through Cloudflare Email Service (the `EMAIL` binding, from `hello@parley.im`): a note when someone joins the waitlist (to them and the admins), when they're let in, and invites. Rate limits use the `LIMITS` binding. Secrets: `SESSION_SECRET` (random), `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` (a Google OAuth web client with redirect URI `https://parley.im/auth/google/callback`).
+`relay/` is a Cloudflare Worker (`wrangler.jsonc`) with a Durable Object per linked computer and a D1 database (`migrations/`). Signed out, `/` explains parley in plain words; signed in, it's your dashboard (open sessions, linked computers and whether they're online). `/docs` is the install guide; `/admin` is for admins (`ADMIN_EMAILS`): invites, the waitlist and who's in. Email goes through Cloudflare Email Service (the `EMAIL` binding, from `hello@parley.im`): a note when someone joins the waitlist (to them and the admins), when they're let in, and invites. Rate limits use the `LIMITS` binding. Secrets: `SESSION_SECRET` (random), `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` (a Google OAuth web client with redirect URI `https://parley.im/auth/google/callback`).
 
 ```bash
 cd relay

package/dist/server.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Send someone a link. They talk to a read-only Claude or Codex in your project, on your computer, and you get everything they said.",
   "keywords": [
     "claude",
@@ -40,6 +40,8 @@
     "zod": "^4.6.5"
   },
   "devDependencies": {
+    "@fontsource-variable/atkinson-hyperlegible-next": "^5.3.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.3.0",
     "@types/jsdom": "^30.0.0",
     "@types/node": "^26.6.4",
     "jsdom": "^29.1.1",

package/web/app.css

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

package/web/chat.html

@@ -11,15 +11,17 @@
 <meta property="og:description" content="{{PREVIEW_TEXT}}">
 <meta property="og:site_name" content="parley">
 <title>{{TITLE}}</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <div class="app">
   <header class="topbar">
-    <span class="mark" aria-hidden="true"><svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg></span>
     <nav class="crumbs" id="crumbs">
-      <span class="product">parley</span><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
+      <!-- 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>
+      </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>
     <span class="chip" id="chip" hidden></span>

package/web/chat.js

@@ -1,5 +1,8 @@
 (function () {
   const { base, owner, maxText, relay, sender, project: knownProject } = window.PARLEY;
+  // parley's own homepage: this site on parley.im links, parley.im on local ones.
+  const homeUrl = relay ? "/" : "https://parley.im";
+  document.getElementById("home-link")?.setAttribute("href", homeUrl);
   const $ = (id) => document.getElementById(id);
   const els = {
     project: $("project"), crumbs: $("crumbs"), status: $("status"), statusDot: $("status-dot"), statusText: $("status-text"),
@@ -265,7 +268,8 @@
     els.status.hidden = false;
     let dot = "on";
     let label = owner ? `${agentName()} · live` : speaker();
-    if (offline) (dot = "off"), (label = offlineWhy === "connection" ? "reconnecting" : "offline");
+    if (idle) (dot = ""), (label = "paused");
+    else if (offline) (dot = "off"), (label = offlineWhy === "connection" ? "reconnecting" : "offline");
     // A reply in progress shows as typing dots in the conversation; the
     // header stays put.
     else if (live && owner) (dot = "busy"), (label = `${agentName()} is replying`);
@@ -415,11 +419,15 @@
   }
 
   function showEnded() {
-    showNote("This parley has ended", "Thanks for the feedback. The conversation isn't available here anymore.");
+    // 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" }));
+    showNote("This parley has ended", "Thanks for the feedback. The conversation isn't available here anymore.", own);
   }
 
-  // Replaces the conversation with a note, for good.
-  function showNote(title, text) {
+  // Replaces the conversation with a note, for good. `extra` makes anything
+  // to show under it.
+  function showNote(title, text, extra = () => null) {
     if (ended) return;
     ended = true;
     clearLive();
@@ -427,12 +435,12 @@
     els.status.hidden = true;
     els.chip.hidden = true;
     els.layout.textContent = "";
-    els.layout.append(el("div", { className: "lost inline", style: "flex:1" }, el("div", {}, markEl(), el("h1", { textContent: title }), el("p", { textContent: text }))));
+    els.layout.append(el("div", { className: "lost inline", style: "flex:1" }, el("div", {}, markEl(), el("h1", { textContent: title }), el("p", { textContent: text }), extra())));
   }
 
   function markEl() {
     const span = el("span", { className: "mark" });
-    span.innerHTML = `<svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg>`;
+    span.innerHTML = `<svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg>`;
     return span;
   }
 
@@ -716,6 +724,7 @@
         return body.ok ? p.resolve(body.result) : p.reject(problemError(body.status, body.error, body.message));
       }
       if (m.t === "evt") {
+        stirred = Date.now(); // a reply coming in counts as you being here
         const item = await S.open(key, token, "evt", m.d);
         if (loading) return early.push(item);
         if (item.epoch !== epoch) return load();
@@ -756,7 +765,7 @@
         for (const p of pending.values()) clearTimeout(p.timer), p.reject(connectionError());
         pending.clear();
         if (event.code === 4410) return h.ended();
-        if (ended) return;
+        if (ended || paused) return;
         failures++;
         // This page lost its own connection (a phone switching networks, or
         // waking up); the sender's computer may be fine.
@@ -767,11 +776,42 @@
 
     // Back from the background or back online: reconnect now, not on a timer.
     const wake = () => {
-      if (!ended && document.visibilityState === "visible" && retry) connect();
+      if (!ended && !paused && document.visibilityState === "visible" && retry) connect();
     };
     document.addEventListener("visibilitychange", wake);
     window.addEventListener("online", wake);
 
+    // A page left open and untouched lets its connection go (after 15
+    // minutes, or 5 in a background tab), so a forgotten tab doesn't hold on
+    // forever or show as "here" on the sender's dashboard. Anything you do
+    // brings it back, caught up.
+    const IDLE_MS = 15 * 60_000;
+    const HIDDEN_MS = 5 * 60_000;
+    let stirred = Date.now();
+    let hiddenAt = null;
+    let paused = false;
+    const stir = () => {
+      stirred = Date.now();
+      if (paused && !ended) {
+        paused = false;
+        h.idle(false);
+        connect();
+      }
+    };
+    for (const type of ["pointerdown", "keydown", "touchstart", "wheel", "focusin"]) addEventListener(type, stir, { passive: true, capture: true });
+    document.addEventListener("visibilitychange", () => {
+      hiddenAt = document.hidden ? Date.now() : null;
+      if (!document.hidden) stir();
+    });
+    setInterval(() => {
+      if (paused || ended || ws?.readyState !== WebSocket.OPEN || h.busy()) return;
+      if ((hiddenAt && Date.now() - hiddenAt > HIDDEN_MS) || Date.now() - stirred > IDLE_MS) {
+        paused = true;
+        h.idle(true);
+        ws.close(1000, "idle");
+      }
+    }, 30_000);
+
     return {
       async start(handlers) {
         h = handlers;
@@ -833,6 +873,14 @@
     toEnd();
   }
 
+  // Paused: this page let its connection go while nobody was using it.
+  let idle = false;
+  function setIdle(on) {
+    idle = on;
+    paintStatus();
+    banner(on ? "Paused while you were away. Tap anywhere to pick up where you left off." : "");
+  }
+
   // Offline means one of two things: the sender's computer (asleep, or
   // parley isn't running), or this page's own connection.
   let offlineWhy = null;
@@ -1040,6 +1088,8 @@
     },
     event: apply,
     offline: setOffline,
+    idle: setIdle,
+    busy: () => !!live,
     ended: showEnded,
     missingKey: () =>
       showNote("This link is incomplete", "The part after the # is missing, and it's the key to this conversation. Ask whoever sent it to send the whole link again."),

package/web/ended.html

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

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

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