@parley-im/parley 0.2.4 → 0.2.5

package/dist/server.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.4",
+  "version": "0.2.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,9 +98,9 @@ button, input, textarea, select { font: inherit; color: inherit; }
   border-bottom: 1px solid var(--line); background: var(--bg);
 }
 .crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
-.crumbs .product { color: var(--muted); font-weight: 500; }
+.crumbs .product { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: 17px; color: var(--text); }
 .crumbs .slash { color: var(--faint); }
-.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: inherit; text-decoration: none !important; }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none !important; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.025em; }
 .brand:hover .mark { filter: brightness(1.1); }
 .lost .own { margin-top: 18px; font-size: 13px; color: var(--faint); }
 .lost .own a { color: var(--accent); }
@@ -89,6 +115,15 @@ button, input, textarea, select { font: inherit; color: inherit; }
 .dot.warn { background: var(--warn); }
 .dot.off { background: var(--danger); }
 @keyframes pulse { 50% { opacity: 0.35; } }
+/* In a chat's header the status is a flag on its staff: flying when the
+   sender's computer is there, at half-mast (and red) when it isn't. */
+.status .dot { position: relative; width: 12px; height: 15px; border-radius: 0; background: none; box-shadow: none; animation: none; }
+.status .dot::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 15px; border-radius: 1px; background: var(--muted); }
+.status .dot::after { content: ""; position: absolute; left: 2px; top: 0; width: 9px; height: 8px; border-radius: 0 2px 2px 0; background: var(--accent-fill); box-shadow: inset 0 0 0 2.5px var(--accent-fill), inset 0 0 0 9px #ffffff; transition: top 0.4s ease; }
+.status .dot.off::after { top: 7px; box-shadow: inset 0 0 0 2.5px var(--danger), inset 0 0 0 9px #ffffff; }
+.status .dot.warn::after { top: 7px; box-shadow: inset 0 0 0 2.5px var(--faint), inset 0 0 0 9px var(--bg); }
+.status .dot.busy::after { animation: flutter 1.2s ease-in-out infinite; }
+@keyframes flutter { 50% { transform: skewY(-8deg); } }
 
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
@@ -98,7 +133,7 @@ button, input, textarea, select { font: inherit; color: inherit; }
 }
 .btn:hover { background: var(--subtle); }
 .btn:disabled { opacity: 0.5; cursor: default; }
-.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
+.btn.primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
 .btn.primary:hover { opacity: 0.88; }
 .btn.danger { color: var(--danger); }
 .btn.confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
@@ -167,17 +202,21 @@ body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
   position: absolute; left: 0; top: 0; width: 14px; text-align: center;
   font-family: var(--mono); font-size: 14px; line-height: 1.55;
 }
-.msg.agent::before { content: "●"; color: var(--accent); font-size: 10px; line-height: 23px; }
-.msg.guest::before { content: "›"; color: var(--muted); font-weight: 600; top: 10px; }
+.msg.agent::before { content: ""; top: 5px; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 3.5px var(--accent-fill), inset 0 0 0 13px #ffffff; }
+/* The interviewer's words are what people read: set for reading. */
+.msg.agent .body { font-size: 16.5px; line-height: 1.6; }
+/* Your own words are compact and plainly yours, on the right. */
+.msg.guest { padding-left: 0; display: flex; flex-direction: column; align-items: flex-end; }
+.msg.guest::before { content: none; }
 .msg.error::before { content: "!"; color: var(--danger); font-weight: 700; }
 .meta { font-size: 12px; color: var(--faint); margin-bottom: 2px; }
 .meta .who { color: var(--muted); font-weight: 600; }
-.msg.guest .bubble { background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
+.msg.guest .bubble { max-width: min(82%, 560px); background: var(--guest); color: var(--guest-ink); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 15px; line-height: 1.45; }
 .msg.guest .meta { display: none; }
 /* Guests get just the conversation: no names or times on every message. */
 .guest-view .msg .meta, .guest-view .msg .stamp { display: none; }
 .guest-view .msg { margin-bottom: 16px; }
-.guest-view .msg.guest::before { top: 9px; }
+
 .msg.guest .stamp { font-size: 12px; color: var(--faint); margin-top: 4px; }
 .msg.error .body { color: var(--danger); font-size: 14px; }
 .msg.error .detail { margin-top: 6px; font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
@@ -218,23 +257,26 @@ body:has(> .app) { overflow: hidden; overscroll-behavior: none; }
 .body th { background: var(--subtle); font-weight: 600; white-space: nowrap; }
 .body tr:last-child td { border-bottom: 0; }
 
-.thinking { display: inline-flex; gap: 4px; padding: 8px 0 4px; }
-.thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite ease-in-out both; }
+/* Writing: three tiny flags hoisting in turn. */
+.thinking { display: inline-flex; align-items: flex-end; gap: 5px; height: 22px; padding-top: 4px; }
+.thinking span { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 2.5px var(--accent-fill), inset 0 0 0 8px #ffffff; animation: hoist 1.2s ease-in-out infinite; }
 .thinking span:nth-child(2) { animation-delay: 0.15s; }
 .thinking span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes hoist { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
+@media (prefers-reduced-motion: reduce) { .thinking span, .status .dot.busy::after { animation: none; } }
 @keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
 .cursor::after { content: ""; display: inline-block; width: 7px; height: 1.05em; background: var(--accent); margin-left: 3px; vertical-align: -3px; animation: blink 1s infinite; }
 
 .dock { border-top: 1px solid var(--line); background: var(--bg); }
 .dock .chat-inner { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
-.composer { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
+.composer { border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
 .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 /* The sender's computer (or this page's connection) is offline: nothing can
    be sent until it's back, and it looks that way. */
 .app.offline .composer, .app.offline .composer:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
 .app.offline .prompt { color: var(--danger); }
 .composer .row { display: flex; align-items: flex-end; gap: 2px; padding: 4px 4px 4px 12px; }
-.prompt { font-family: var(--mono); color: var(--accent); font-weight: 600; padding: 9px 4px 9px 0; line-height: 1.55; }
+.prompt { display: none; }
 textarea {
   flex: 1; resize: none; border: 0; outline: 0; background: transparent;
   padding: 8px 4px; min-height: 40px; line-height: 1.55; font-size: 16px;
@@ -256,8 +298,8 @@ textarea::placeholder { color: var(--faint); }
 }
 .icon-btn:hover { background: var(--subtle); color: var(--text); }
 .icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-.send { background: var(--accent); color: var(--accent-ink); }
-.send:hover { background: var(--accent); color: var(--accent-ink); opacity: 0.9; }
+.send { background: var(--accent-fill); color: var(--accent-ink); border-radius: 11px; }
+.send:hover { background: var(--accent-fill); color: var(--accent-ink); opacity: 0.9; }
 .send:disabled { background: var(--subtle); color: var(--faint); cursor: default; opacity: 1; }
 .attachments { display: flex; gap: 8px; padding: 10px 10px 0; flex-wrap: wrap; }
 .thumb { position: relative; }
@@ -336,7 +378,7 @@ body.panel { overflow: auto; }
 .trow.ended { color: var(--muted); }
 .who-cell .name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
 .who-cell .where { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.badge { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--accent); color: var(--accent-ink); }
+.badge { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--accent-fill); color: var(--accent-ink); }
 .badge.soft { background: var(--subtle); color: var(--muted); border: 1px solid var(--line); }
 .cell-muted { font-size: 13px; color: var(--muted); }
 .num { font-family: var(--mono); font-size: 13px; }
@@ -433,26 +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: what it is, in plain words. */
-.landing { max-width: 980px; }
-.intro { padding: 9vh 0 8px; max-width: 640px; }
-.intro h1 { font-size: clamp(32px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
-.intro .lede { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; }
-.intro .cta { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 10px; }
-.intro .fine { font-size: 13px; color: var(--faint); margin: 0; }
-.how { list-style: none; counter-reset: step; padding: 0; margin: 56px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
-.how li { counter-increment: step; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--panel); }
-.how li::before {
-  content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px;
-  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px;
+/* 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);
 }
-.how h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: -0.01em; }
-.how p { margin: 0; font-size: 14px; color: var(--muted); }
+.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(3, 1fr); gap: 24px; margin: 44px 0 0; padding: 28px 0 40px; border-top: 1px solid var(--line); }
-.promises h3 { font-size: 14px; margin: 0 0 4px; }
-.promises p { font-size: 14px; color: var(--muted); margin: 0; }
+.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin: 40px 0 0; padding: 32px 0 48px; border-top: 1px solid var(--line-strong); }
+.promises h3 { font-family: var(--sans); font-size: 16px; letter-spacing: 0; margin: 0 0 6px; }
+.promises p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
 @media (max-width: 720px) {
-  .how, .promises { grid-template-columns: 1fr; }
-  .intro { padding-top: 6vh; }
+  .front { padding-top: 5vh; gap: 32px; }
 }

package/web/chat.html

@@ -11,7 +11,7 @@
 <meta property="og:description" content="{{PREVIEW_TEXT}}">
 <meta property="og:site_name" content="parley">
 <title>{{TITLE}}</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
@@ -20,7 +20,7 @@
     <nav class="crumbs" id="crumbs">
       <!-- What parley is, in a new tab so the conversation stays put. -->
       <a class="brand" id="home-link" href="https://parley.im" target="_blank" rel="noopener" title="parley: let people talk to your agent">
-        <span class="mark" aria-hidden="true"><svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg></span><span class="product">parley</span>
+        <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span><span class="product">parley</span>
       </a><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
     </nav>
     <span class="status" id="status" hidden><span class="dot" id="status-dot"></span><span id="status-text"></span></span>

package/web/chat.js

@@ -440,7 +440,7 @@
 
   function markEl() {
     const span = el("span", { className: "mark" });
-    span.innerHTML = `<svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg>`;
+    span.innerHTML = `<svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg>`;
     return span;
   }
 

package/web/ended.html

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

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

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

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

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

package/web/icon.svg

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

package/web/missing.html

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

package/web/panel.html

@@ -4,12 +4,12 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Control panel · parley</title>
-<link rel="icon" href="/static/icon.svg?v=2" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=3" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body class="panel">
 <header class="topbar">
-  <span class="mark" aria-hidden="true"><svg viewBox="4 4 24 24"><g fill="currentColor" stroke="none"><circle cx="8" cy="10" r="2.2"/><rect x="12" y="8" width="12" height="4" rx="2"/><rect x="6" y="14" width="20" height="4" rx="2" opacity=".7"/><rect x="6" y="20" width="13" height="4" rx="2" opacity=".7"/></g></svg></span>
+  <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="field" width="64" height="64" rx="14"/><rect class="square" x="20" y="20" width="24" height="24" rx="2"/></svg></span>
   <nav class="crumbs"><span class="product">parley</span><span class="slash">/</span><span class="here">Control panel</span></nav>
   <span class="status" id="server"><span class="dot" id="server-dot"></span><span id="server-text">Checking…</span></span>
 </header>