@parley-im/parley 0.2.7 → 0.2.9

package/package.json

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

@@ -1,9 +1,9 @@
 /* parley: one stylesheet for the guest chat, your session view, your
-   control panel and parley's site. Deep, murky ocean green on paper, for the
+   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 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
    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,55 +11,30 @@
 @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: #f2f4f1; /* paper, a little sea-washed */
-  --panel: #ffffff;
-  --subtle: #eaeeea;
-  --hover: #e1e7e3;
-  --line: #dde4e0;
-  --line-strong: #c6d0cb;
-  --text: #0f1d1a; /* abyss */
-  --muted: #55645e;
-  --faint: #8c9893;
-  --accent: #22574c; /* deep murky green, for links and marks */
-  --accent-fill: #22574c; /* buttons */
-  --accent-soft: #e1eae5;
-  --accent-ink: #ffffff;
-  --tile: #22574c; /* the mark's tile */
-  --guest: #e1eae5; /* your own messages */
-  --guest-ink: #183a32;
-  --ok: #2f7d5b;
-  --warn: #a8741c;
-  --danger: #c4383a;
-  --shadow: 0 1px 2px rgba(15, 29, 26, 0.05), 0 12px 32px -16px rgba(15, 29, 26, 0.24);
+  --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;
+  --tile: #9d92ff; /* the mark's tile */
+  --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);
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
-  color-scheme: light;
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --bg: #0b1513; /* the deep */
-    --panel: #111c19;
-    --subtle: #16231f;
-    --hover: #1d2b27;
-    --line: #1f2d29;
-    --line-strong: #30423c;
-    --text: #e3ebe7;
-    --muted: #9baea6;
-    --faint: #62726b;
-    --accent: #86c2ae; /* sea glass, through murky water */
-    --accent-fill: #2e6c5f;
-    --accent-soft: #19302a;
-    --accent-ink: #ffffff;
-    --tile: #2e6c5f;
-    --guest: #1b2e28;
-    --guest-ink: #dbe9e3;
-    --ok: #5fc296;
-    --warn: #dba54a;
-    --danger: #ff6f6b;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
-    color-scheme: dark;
-  }
+  color-scheme: dark;
 }
 
 * { box-sizing: border-box; }
@@ -86,7 +61,7 @@ code, kbd, pre { font-family: var(--mono); }
 .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; }
+.mark .glyph { fill: var(--accent-ink); }
 .wordmark { font-family: var(--mono); font-weight: 700; letter-spacing: -0.04em; }
 
 .topbar {
@@ -123,7 +98,7 @@ code, kbd, pre { font-family: var(--mono); }
 .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); }
@@ -247,14 +222,12 @@ 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; }
+/* 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; }
-.thinking span:nth-child(4) { animation-delay: 0.48s; }
-@keyframes morse { 0%, 70%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
+@keyframes pulse-dot { 0%, 70%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
 @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; } }
@@ -291,7 +264,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; }

package/web/chat.html

@@ -5,8 +5,7 @@
 <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="#0b1513" media="(prefers-color-scheme: dark)">
-<meta name="theme-color" content="#f2f4f1" media="(prefers-color-scheme: light)">
+<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">

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" role="img" aria-label="Writing"><span></span><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>`;
     // 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 })));

package/web/ended.html

@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<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">

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" role="img" aria-label="Writing"><span></span><span></span><span></span><span></span></span>`;
+    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);
     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="#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>
+<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>

package/web/missing.html

@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<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">

package/web/panel.html

@@ -3,6 +3,7 @@
 <head>
 <meta charset="utf-8">
 <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="stylesheet" href="/static/app.css">