npm - @parley-im/parley - Versions diffs - 0.2.8 → 0.2.10 - Mend

@parley-im/parley 0.2.8 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.8",
+  "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 CHANGED Viewed

@@ -1,9 +1,11 @@
 /* parley: one stylesheet for the guest chat, your session view, your
-   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
+   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 while it
-   writes, P goes by in Morse. 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; }
@@ -11,25 +13,24 @@
 @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: #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;
-  --tile: #1f5c50; /* the mark's tile */
-  --guest: #12302a; /* your own messages */
-  --guest-ink: #d5e7e0;
-  --ok: #4fb88a;
-  --warn: #d9a24a;
-  --danger: #f2615d;
+  --bg: #0c0c0d;
+  --panel: #131315;
+  --subtle: #19191c;
+  --hover: #212125;
+  --line: #26262b;
+  --line-strong: #36363c;
+  --text: #ececef;
+  --muted: #9b9ba4;
+  --faint: #66666f;
+  --accent: #9d92ff; /* lilac */
+  --accent-fill: #9d92ff; /* buttons, with dark text */
+  --accent-soft: #221f3d;
+  --accent-ink: #0c0c0d;
+  --guest: #221f3d; /* your own messages */
+  --guest-ink: #e6e2ff;
+  --ok: #3ccf7a;
+  --warn: #e3a948;
+  --danger: #ff6b63;
   --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);
@@ -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: #ffffff; }
+/* 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,17 +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: 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; } }
+/* 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)); }
@@ -389,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; }
@@ -468,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 CHANGED Viewed

@@ -5,12 +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="#070a09">
+<meta name="theme-color" content="#0c0c0d">
 <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=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 CHANGED Viewed

@@ -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></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 CHANGED Viewed

@@ -3,16 +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="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 CHANGED Viewed

@@ -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></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-180.png CHANGED Viewed

Binary file

package/web/icon.png CHANGED Viewed

Binary file

package/web/icon.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <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>
1	+ <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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -3,16 +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="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 CHANGED Viewed

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