@parley-im/parley 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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,66 +1,40 @@
 /* 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. Near black, with deep, murky ocean green
+   for accents, for the people who use Claude Code and Codex: Instrument Sans for everything
+   people read, JetBrains Mono for the wordmark, labels, files and numbers.
+   The agent's words are marked with a dot, as in Claude Code, and 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 */
-  --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;
+  --bg: #070a09; /* near black, the deep */
+  --panel: #0d1311;
+  --subtle: #121a17;
+  --hover: #18221e;
+  --line: #1a2420;
+  --line-strong: #2a3833;
+  --text: #e6ece9;
+  --muted: #95a39d;
+  --faint: #5d6b65;
+  --accent: #6db39c; /* sea glass, for links and small marks */
+  --accent-fill: #1f5c50; /* deep ocean green, for buttons and fills */
+  --accent-soft: #11241f;
   --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;
-  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;
-    --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 12px 32px -16px rgba(0, 0, 0, 0.7);
-    color-scheme: dark;
-  }
+  --tile: #1f5c50; /* the mark's tile */
+  --guest: #12302a; /* your own messages */
+  --guest-ink: #d5e7e0;
+  --ok: #4fb88a;
+  --warn: #d9a24a;
+  --danger: #f2615d;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.8);
+  --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: dark;
 }
 
 * { box-sizing: border-box; }
@@ -79,51 +53,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;
@@ -134,7 +98,7 @@ h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }
 .btn:hover { background: var(--subtle); }
 .btn:disabled { opacity: 0.5; cursor: default; }
 .btn.primary { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
-.btn.primary:hover { opacity: 0.88; }
+.btn.primary:hover { filter: brightness(1.18); }
 .btn.danger { color: var(--danger); }
 .btn.confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
 .btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
@@ -143,7 +107,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 +137,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 +166,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 +222,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)); }
@@ -299,7 +266,7 @@ 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-fill); color: var(--accent-ink); border-radius: 11px; }
-.send:hover { background: var(--accent-fill); color: var(--accent-ink); opacity: 0.9; }
+.send:hover { background: var(--accent-fill); color: var(--accent-ink); filter: brightness(1.18); }
 .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; }
@@ -422,8 +389,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; }
 
@@ -496,12 +462,13 @@ span.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px
 .demo-chat { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
 .demo-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
 .demo-top .mark { width: 20px; height: 20px; }
-.demo-top .product { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }
+.demo-top .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; }
@@ -511,7 +478,7 @@ span.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px
 @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,12 @@
 <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="#070a09">
 <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 +19,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 })));
@@ -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

@@ -3,15 +3,16 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#070a09">
 <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

@@ -55,7 +55,7 @@
     // Working: the agent looks something up in the project, then writes.
     const node = el("li", "msg agent");
     const body = el("div", "body");
-    body.innerHTML = `<span class="thinking"><span></span><span></span><span></span></span>`;
+    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);

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

@@ -3,15 +3,16 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#070a09">
 <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

@@ -3,13 +3,14 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#070a09">
 <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>