@parley-im/parley 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Send someone a link. They talk to a read-only Claude or Codex in your project, on your computer, and you get everything they said.",
   "keywords": [
     "claude",

package/web/app.css

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

package/web/chat.html

@@ -10,7 +10,7 @@
 <meta property="og:description" content="{{PREVIEW_TEXT}}">
 <meta property="og:site_name" content="parley">
 <title>{{TITLE}}</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
@@ -19,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="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>
+        <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64" aria-hidden="true"><path class="r1" d="M32 7L39.2 11.2L32 15.3Z"/><path class="r2" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path class="r1" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path class="r2" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path class="r1" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path class="r2" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path class="r1" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path class="r2" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path class="r1" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path class="r2" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path class="r1" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path class="r2" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path class="r1" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path class="r2" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path class="r1" d="M32 48.7L39.2 52.8L32 57Z"/><path class="r2" d="M32 48.7L32 57L24.8 52.8Z"/><path class="r1" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path class="r2" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path class="r1" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path class="r2" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path class="r1" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path class="r2" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path class="r1" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path class="r2" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path class="r1" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path class="r2" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path class="r1" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path class="r2" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path class="r1" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path class="r2" d="M32 7L32 15.3L24.8 11.2Z"/><path class="c1" d="M32 23.7L39.2 27.8L32 32Z"/><path class="c2" d="M39.2 27.8L39.2 36.2L32 32Z"/><path class="c1" d="M32 32L39.2 36.2L32 40.3Z"/><path class="c2" d="M32 32L32 40.3L24.8 36.2Z"/><path class="c1" d="M24.8 27.8L32 32L24.8 36.2Z"/><path class="c2" d="M32 23.7L32 32L24.8 27.8Z"/></svg></span><span class="product">parley</span>
       </a><span class="slash">/</span><span class="here" id="project">&nbsp;</span>
     </nav>
     <span class="status" id="status" hidden><span class="dot" id="status-dot"></span><span id="status-text"></span></span>
@@ -84,6 +84,7 @@
 <script>window.PARLEY = {{CONFIG}};</script>
 <script src="/static/markdown.js"></script>
 <script src="/static/seal.js"></script>
+<script src="/static/mark.js"></script>
 <script src="/static/chat.js"></script>
 </body>
 </html>

package/web/chat.js

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

package/web/ended.html

@@ -6,13 +6,13 @@
 <meta name="theme-color" content="#0c0c0d">
 <meta name="robots" content="noindex, nofollow">
 <title>This parley has ended</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <div class="lost">
   <div>
-    <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+    <span class="mark dim" aria-hidden="true"><svg viewBox="0 0 64 64" aria-hidden="true"><path class="r1" d="M32 7L39.2 11.2L32 15.3Z"/><path class="r2" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path class="r1" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path class="r2" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path class="r1" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path class="r2" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path class="r1" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path class="r2" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path class="r1" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path class="r2" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path class="r1" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path class="r2" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path class="r1" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path class="r2" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path class="r1" d="M32 48.7L39.2 52.8L32 57Z"/><path class="r2" d="M32 48.7L32 57L24.8 52.8Z"/><path class="r1" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path class="r2" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path class="r1" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path class="r2" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path class="r1" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path class="r2" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path class="r1" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path class="r2" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path class="r1" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path class="r2" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path class="r1" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path class="r2" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path class="r1" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path class="r2" d="M32 7L32 15.3L24.8 11.2Z"/><path class="c1" d="M32 23.7L39.2 27.8L32 32Z"/><path class="c2" d="M39.2 27.8L39.2 36.2L32 32Z"/><path class="c1" d="M32 32L39.2 36.2L32 40.3Z"/><path class="c2" d="M32 32L32 40.3L24.8 36.2Z"/><path class="c1" d="M24.8 27.8L32 32L24.8 36.2Z"/><path class="c2" d="M32 23.7L32 32L24.8 27.8Z"/></svg></span>
     <h1>This parley has ended</h1>
     <p>Thanks for the feedback. The conversation isn't available here anymore.</p>
   </div>

package/web/home.js

@@ -1,5 +1,5 @@
 // parley's front page: plays the demo, three short parleys in turn, the way
-// a guest sees one. The first is already in the page, so without script (or
+// a guest sees one (mark.js draws the working mark). The first is already in the page, so without script (or
 // for anyone who prefers less motion) it just sits there, and the tabs swap
 // scenes without playing them.
 (() => {
@@ -32,6 +32,16 @@
   };
   const wait = (ms, id) => new Promise((resolve, reject) => setTimeout(() => (id === run ? resolve() : reject(new Error("stopped"))), ms));
 
+  // Each parley opens the way a guest's does: the mark builds itself.
+  const mark = root.querySelector(".demo-top .mark");
+  mark?.querySelectorAll(".r1, .r2").forEach((path, k) => (path.style.animationDelay = `${k * 30}ms`));
+  function opening() {
+    if (!mark) return;
+    mark.classList.remove("opening");
+    void mark.getBoundingClientRect();
+    mark.classList.add("opening");
+  }
+
   function pick(i) {
     tabs.forEach((tab, j) => {
       tab.classList.toggle("on", i === j);
@@ -49,18 +59,19 @@
     const scene = scenes[i];
     pick(i);
     list.replaceChildren();
+    opening();
     await wait(500, id);
     list.append(guest(scene.asks));
     await wait(900, id);
-    // Working: the agent looks something up in the project, then writes.
+    // Working: the mark reads (its core flickers), then writes (light runs
+    // around it), then the reply streams in.
     const node = el("li", "msg agent");
     const body = el("div", "body");
-    body.innerHTML = `<span class="thinking" role="img" aria-label="Writing"><span></span><span></span><span></span></span>`;
-    const steps = el("ul", "steps");
-    node.append(body, steps);
+    body.innerHTML = `<span class="thinking reading" role="img" aria-label="Working">${window.parleyMark({ moving: true })}</span>`;
+    node.append(body);
     list.append(node);
-    await wait(700, id);
-    steps.append(el("li", "now", scene.step));
+    await wait(1600, id);
+    body.firstElementChild.classList.remove("reading");
     await wait(1400, id);
     const p = el("p", "cursor");
     body.replaceChildren(p);
@@ -70,7 +81,6 @@
       await wait(55, id);
     }
     p.classList.remove("cursor");
-    steps.remove();
     await wait(1500, id);
     list.append(guest(scene.then));
     await wait(4500, id);

package/web/icon.svg

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

package/web/mark.js

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

package/web/missing.html

@@ -6,13 +6,13 @@
 <meta name="theme-color" content="#0c0c0d">
 <meta name="robots" content="noindex, nofollow">
 <title>Link not found</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body>
 <div class="lost">
   <div>
-    <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+    <span class="mark dim" aria-hidden="true"><svg viewBox="0 0 64 64" aria-hidden="true"><path class="r1" d="M32 7L39.2 11.2L32 15.3Z"/><path class="r2" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path class="r1" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path class="r2" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path class="r1" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path class="r2" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path class="r1" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path class="r2" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path class="r1" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path class="r2" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path class="r1" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path class="r2" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path class="r1" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path class="r2" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path class="r1" d="M32 48.7L39.2 52.8L32 57Z"/><path class="r2" d="M32 48.7L32 57L24.8 52.8Z"/><path class="r1" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path class="r2" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path class="r1" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path class="r2" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path class="r1" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path class="r2" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path class="r1" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path class="r2" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path class="r1" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path class="r2" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path class="r1" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path class="r2" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path class="r1" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path class="r2" d="M32 7L32 15.3L24.8 11.2Z"/><path class="c1" d="M32 23.7L39.2 27.8L32 32Z"/><path class="c2" d="M39.2 27.8L39.2 36.2L32 32Z"/><path class="c1" d="M32 32L39.2 36.2L32 40.3Z"/><path class="c2" d="M32 32L32 40.3L24.8 36.2Z"/><path class="c1" d="M24.8 27.8L32 32L24.8 36.2Z"/><path class="c2" d="M32 23.7L32 32L24.8 27.8Z"/></svg></span>
     <h1>This link doesn't lead anywhere</h1>
     <p>Check that you have the whole link, or ask whoever sent it for a fresh one.</p>
   </div>

package/web/panel.html

@@ -5,12 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="theme-color" content="#0c0c0d">
 <title>Control panel · parley</title>
-<link rel="icon" href="/static/icon.svg?v=5" type="image/svg+xml">
+<link rel="icon" href="/static/icon.svg?v=6" type="image/svg+xml">
 <link rel="stylesheet" href="/static/app.css">
 </head>
 <body class="panel">
 <header class="topbar">
-  <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64"><rect class="tile" width="64" height="64" rx="14"/><rect class="glyph" x="19.5" y="16" width="7" height="32" rx="1.5"/><path class="glyph" fill-rule="evenodd" d="M44.5 25.5A10 10 0 1 1 24.5 25.5A10 10 0 1 1 44.5 25.5ZM38.5 25.5A4 4 0 1 0 30.5 25.5A4 4 0 1 0 38.5 25.5Z"/></svg></span>
+  <span class="mark" aria-hidden="true"><svg viewBox="0 0 64 64" aria-hidden="true"><path class="r1" d="M32 7L39.2 11.2L32 15.3Z"/><path class="r2" d="M39.2 11.2L39.2 19.5L32 15.3Z"/><path class="r1" d="M39.2 11.2L46.4 15.3L39.2 19.5Z"/><path class="r2" d="M46.4 15.3L46.4 23.7L39.2 19.5Z"/><path class="r1" d="M46.4 15.3L53.7 19.5L46.4 23.7Z"/><path class="r2" d="M53.7 19.5L53.7 27.8L46.4 23.7Z"/><path class="r1" d="M46.4 23.7L53.7 27.8L46.4 32Z"/><path class="r2" d="M53.7 27.8L53.7 36.2L46.4 32Z"/><path class="r1" d="M46.4 32L53.7 36.2L46.4 40.3Z"/><path class="r2" d="M53.7 36.2L53.7 44.5L46.4 40.3Z"/><path class="r1" d="M46.4 40.3L53.7 44.5L46.4 48.7Z"/><path class="r2" d="M46.4 40.3L46.4 48.7L39.2 44.5Z"/><path class="r1" d="M39.2 44.5L46.4 48.7L39.2 52.8Z"/><path class="r2" d="M39.2 44.5L39.2 52.8L32 48.7Z"/><path class="r1" d="M32 48.7L39.2 52.8L32 57Z"/><path class="r2" d="M32 48.7L32 57L24.8 52.8Z"/><path class="r1" d="M24.8 44.5L32 48.7L24.8 52.8Z"/><path class="r2" d="M24.8 44.5L24.8 52.8L17.6 48.7Z"/><path class="r1" d="M17.6 40.3L24.8 44.5L17.6 48.7Z"/><path class="r2" d="M17.6 40.3L17.6 48.7L10.3 44.5Z"/><path class="r1" d="M10.3 36.2L17.6 40.3L10.3 44.5Z"/><path class="r2" d="M17.6 32L17.6 40.3L10.3 36.2Z"/><path class="r1" d="M10.3 27.8L17.6 32L10.3 36.2Z"/><path class="r2" d="M17.6 23.7L17.6 32L10.3 27.8Z"/><path class="r1" d="M10.3 19.5L17.6 23.7L10.3 27.8Z"/><path class="r2" d="M17.6 15.3L17.6 23.7L10.3 19.5Z"/><path class="r1" d="M17.6 15.3L24.8 19.5L17.6 23.7Z"/><path class="r2" d="M24.8 11.2L24.8 19.5L17.6 15.3Z"/><path class="r1" d="M24.8 11.2L32 15.3L24.8 19.5Z"/><path class="r2" d="M32 7L32 15.3L24.8 11.2Z"/><path class="c1" d="M32 23.7L39.2 27.8L32 32Z"/><path class="c2" d="M39.2 27.8L39.2 36.2L32 32Z"/><path class="c1" d="M32 32L39.2 36.2L32 40.3Z"/><path class="c2" d="M32 32L32 40.3L24.8 36.2Z"/><path class="c1" d="M24.8 27.8L32 32L24.8 36.2Z"/><path class="c2" d="M32 23.7L32 32L24.8 27.8Z"/></svg></span>
   <nav class="crumbs"><span class="product">parley</span><span class="slash">/</span><span class="here">Control panel</span></nav>
   <span class="status" id="server"><span class="dot" id="server-dot"></span><span id="server-text">Checking…</span></span>
 </header>