@parley-im/parley 0.2.15 → 0.2.16

package/dist/daemon.js

@@ -58,9 +58,22 @@ export async function stopServer(config) {
     }
     try {
         process.kill(running.pid, "SIGTERM");
-        return true;
     }
     catch {
         return false;
     }
+    // Wait for it to exit and let go of its ports, so `parley stop && parley
+    // start` doesn't find the old one still there.
+    const alive = () => {
+        try {
+            process.kill(running.pid, 0);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    };
+    for (let waited = 0; waited < 5000 && alive(); waited += 100)
+        await new Promise((r) => setTimeout(r, 100));
+    return true;
 }

package/dist/db.js

@@ -64,6 +64,10 @@ const UPGRADES = [
    update messages set role = 'guest' where role = 'tester';`,
 ];
 const now = () => new Date().toISOString();
+// "YYYY-MM-DD", or "YYYY-MM-DD HH" by the hour, on this computer's clock: the
+// way SQLite's 'localtime' names the same stretch.
+const pad = (n) => String(n).padStart(2, "0");
+const bucketOf = (d, hourly) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}${hourly ? ` ${pad(d.getHours())}` : ""}`;
 // A project's own parley folder: its sessions' database, and a folder per
 // session with the screenshots and a readable transcript. Kept out of git,
 // and out of the interviewer's reach (see agents/).
@@ -252,6 +256,39 @@ export class Store {
     stats(sessionId) {
         return this.of(sessionId).stats(sessionId);
     }
+    // Every project's activity over the last day (by hour), week or month (by
+    // day), oldest first: messages from guests, replies and their cost,
+    // sessions made, and sessions open at any point in each stretch. Times are
+    // on this computer's clock.
+    activity(range) {
+        this.refresh();
+        const hourly = range === "day";
+        const count = range === "day" ? 24 : range === "week" ? 7 : 30;
+        const now = new Date();
+        const buckets = new Map();
+        for (let k = count - 1; k >= 0; k--) {
+            const start = hourly ? new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() - k) : new Date(now.getFullYear(), now.getMonth(), now.getDate() - k);
+            const end = hourly ? new Date(start.getFullYear(), start.getMonth(), start.getDate(), start.getHours() + 1) : new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1);
+            buckets.set(bucketOf(start, hourly), { at: start.toISOString(), messages: 0, replies: 0, cost_usd: 0, sessions: 0, open: 0, end: end.getTime() });
+        }
+        const since = [...buckets.values()][0].at;
+        for (const db of this.projects.values()) {
+            for (const row of db.activity(since, hourly)) {
+                const into = buckets.get(row.bucket);
+                if (!into)
+                    continue;
+                into.messages += row.messages;
+                into.replies += row.replies;
+                into.cost_usd += row.cost_usd;
+                into.sessions += row.sessions;
+            }
+        }
+        const all = this.sessions();
+        return [...buckets.values()].map(({ end, ...into }) => ({
+            ...into,
+            open: all.filter((s) => Date.parse(s.created_at) < end && (!s.ended_at || Date.parse(s.ended_at) >= Date.parse(into.at))).length,
+        }));
+    }
     // Keeps <session>/transcript.md in step, for you and your agent to read.
     // Not if the project has moved out from under us: no folders get made at
     // the old path.
@@ -444,6 +481,24 @@ class ProjectDb {
         }
         return [...sessions];
     }
+    // This project's activity since `since`, by local hour or day.
+    activity(since, hourly) {
+        const bucket = hourly ? "strftime('%Y-%m-%d %H', {t}, 'localtime')" : "date({t}, 'localtime')";
+        const by = (column) => bucket.replace("{t}", column);
+        const found = new Map();
+        const of = (key) => found.get(key) ?? found.set(key, { bucket: key, messages: 0, replies: 0, cost_usd: 0, sessions: 0 }).get(key);
+        for (const r of this.db.prepare(`select ${by("created_at")} as b, count(*) as n from messages where role = 'guest' and created_at >= ? group by b`).all(since))
+            of(r.b).messages = Number(r.n);
+        for (const r of this.db
+            .prepare(`select ${by("coalesce(ended_at, started_at)")} as b, count(*) as n, coalesce(sum(json_extract(usage, '$.cost_usd')), 0) as cost from turns where status in ('done', 'failed') and started_at >= ? group by b`)
+            .all(since)) {
+            of(r.b).replies = Number(r.n);
+            of(r.b).cost_usd = Number(r.cost);
+        }
+        for (const r of this.db.prepare(`select ${by("created_at")} as b, count(*) as n from sessions where created_at >= ? group by b`).all(since))
+            of(r.b).sessions = Number(r.n);
+        return [...found.values()];
+    }
     stats(sessionId) {
         const row = this.db
             .prepare(`select

package/dist/server.js

@@ -12,6 +12,8 @@ import { RelayLink } from "./relay.js";
 import { createSession } from "./control.js";
 import { readCredentials, relay as registry, ownerName } from "./account.js";
 import { writeState, clearState, isServerUp } from "./state.js";
+// How far back the control panel's charts can look.
+const RANGES = new Set(["day", "week", "month"]);
 const WEB = join(dirname(fileURLToPath(import.meta.url)), "..", "web");
 const MAX_UPLOAD = 10 * 1024 * 1024;
 // Long polls end well before any proxy's idle timeout.
@@ -80,6 +82,7 @@ export async function serve() {
                 server: { pid: process.pid, startedAt: state.startedAt, ownerName: ownerName(config), replyLimit: config.replyLimit },
                 relay: link.status,
                 sessions: store.sessions().map((s) => api.ownerView(s)),
+                activity: RANGES.has(url.searchParams.get("activity") ?? "") ? store.activity(url.searchParams.get("activity")) : undefined,
             });
         }
         // After `parley login` or `parley logout`.

package/package.json

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

@@ -356,6 +356,22 @@ textarea::placeholder { color: var(--faint); }
 .page { max-width: 1180px; margin: 0 auto; padding: 0 16px 60px; }
 body.panel { overflow: auto; }
 .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
+/* The control panel's tiles: a number, a small chart of the last 30 days
+   (a bar a day) and what it counts. */
+.stats-head { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 -8px; flex-wrap: wrap; }
+.stats-head h2 { font-size: 15px; margin: 0; }
+.stats-head span { font-size: 12.5px; color: var(--muted); }
+.stats-head .tabs { margin-left: auto; }
+.stats-head .tabs button { padding: 3px 10px; font-size: 12px; }
+.spark { position: relative; height: 30px; margin: 10px 0 8px; }
+.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.spark .bar { fill: var(--accent); opacity: 0.5; transition: opacity 0.12s; }
+.spark .bar.today { opacity: 0.85; }
+.spark .bar.on { opacity: 1; }
+.spark .none { fill: var(--line-strong); }
+.spark .hit { fill: transparent; }
+.spark-tip { position: absolute; top: calc(100% + 4px); z-index: 2; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 7px; padding: 4px 8px; font-size: 12px; white-space: nowrap; pointer-events: none; }
+.spark-tip span { color: var(--muted); }
 .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
 .stat .value { font-family: var(--mono); font-size: 22px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }
 .stat .note { font-size: 12px; color: var(--muted); margin-top: 2px; }
@@ -439,7 +455,10 @@ body.panel { overflow: auto; }
 .account-menu summary::-webkit-details-marker { display: none; }
 .account-menu summary:hover, .account-menu[open] summary { background: var(--subtle); }
 .account-menu summary svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; }
+.avatar { display: grid; place-items: center; width: 28px; height: 28px; }
+/* Everyone's hexagon (relay/src/avatar.ts), seeded by their email. */
+.hex-avatar { display: block; flex: none; }
+.who-hero { display: flex; align-items: center; gap: 16px; }
 .menu-panel {
   position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; max-width: calc(100vw - 24px);
   background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;

package/web/panel.html

@@ -17,6 +17,7 @@
 
 <div class="page">
   <p class="notice" id="signed-out" hidden style="margin:18px 0 0">This computer isn't signed in to parley, so links only work on this computer. Run <code>parley login</code> in a terminal to share them.</p>
+  <div class="stats-head"><h2>Activity</h2><span id="range-note"></span><div class="tabs" id="range" role="tablist" aria-label="How far back"></div></div>
   <div class="stats" id="stats"></div>
 
   <div class="toolbar">

package/web/panel.js

@@ -35,7 +35,7 @@
 
   async function refresh() {
     try {
-      const res = await fetch("/api/panel", { cache: "no-store" });
+      const res = await fetch(`/api/panel?activity=${range}`, { cache: "no-store" });
       data = await res.json();
       if (wanted) {
         const found = data.sessions.find((s) => s.token === wanted);
@@ -50,6 +50,120 @@
     }
   }
 
+  // ---------- the numbers at the top ----------
+  //
+  // Four tiles: a number, a small chart of the last 30 days (a bar a day)
+  // and a line saying exactly what it counts. They're built once and updated
+  // in place, and a chart is redrawn only when its numbers or width change,
+  // so the refresh every few seconds never interrupts pointing at a bar.
+
+  // How far back: the last day by the hour, or the last week or month by
+  // the day. The choice is remembered on this computer.
+  const RANGES = {
+    day: { label: "Day", note: "The last 24 hours, a bar per hour.", within: "in 24 hours", hourly: true },
+    week: { label: "Week", note: "The last 7 days, a bar per day.", within: "in 7 days" },
+    month: { label: "Month", note: "The last 30 days, a bar per day.", within: "in 30 days" },
+  };
+  let range = "month";
+  try {
+    if (RANGES[localStorage.getItem("parley.range")]) range = localStorage.getItem("parley.range");
+  } catch {}
+
+  function paintRange() {
+    $("range-note").textContent = `${RANGES[range].note} Point at one for its numbers.`;
+    $("range").replaceChildren(
+      ...Object.entries(RANGES).map(([key, { label }]) => {
+        const b = el("button", { type: "button", className: range === key ? "on" : "", textContent: label, role: "tab" });
+        b.setAttribute("aria-selected", String(range === key));
+        b.onclick = () => {
+          range = key;
+          try {
+            localStorage.setItem("parley.range", key);
+          } catch {}
+          paintRange();
+          refresh();
+        };
+        return b;
+      }),
+    );
+  }
+
+  // When a bar's stretch was: an hour or a day, the last one "now".
+  const when = (d, last) => {
+    const at = new Date(d.at);
+    if (!RANGES[range].hourly) return last ? "Today" : at.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+    if (last) return "This hour";
+    const hour = at.toLocaleTimeString([], { hour: "numeric" });
+    return at.toDateString() === new Date().toDateString() ? hour : `Yesterday ${hour}`;
+  };
+
+  const TILES = [
+    { key: "open", label: "Open sessions", of: (d) => d.open, tip: (n, last) => `${n} open at some point ${last ? (RANGES[range].hourly ? "this hour" : "today") : `that ${RANGES[range].hourly ? "hour" : "day"}`}` },
+    { key: "messages", label: "Messages from guests", of: (d) => d.messages, tip: (n) => `${n} ${n === 1 ? "message" : "messages"}` },
+    { key: "replies", label: "Replies", of: (d) => d.replies, tip: (n) => `${n} ${n === 1 ? "reply" : "replies"}` },
+    { key: "spend", label: "Spend", of: (d) => d.cost_usd, tip: (n) => `${money(n)} at API prices` },
+  ];
+  const tiles = {};
+  const SVG = "http://www.w3.org/2000/svg";
+  const attrs = (node, values) => Object.entries(values).forEach(([k, v]) => node.setAttribute(k, String(v)));
+
+  function buildTiles() {
+    paintRange();
+    $("stats").replaceChildren(
+      ...TILES.map((t) => {
+        const tile = { value: el("div", { className: "value" }), chart: el("div", { className: "spark" }), note: el("div", { className: "note" }), drawn: "" };
+        tiles[t.key] = tile;
+        return el("div", { className: "stat" }, el("div", { className: "label", textContent: t.label }), tile.value, tile.chart, tile.note);
+      }),
+    );
+  }
+
+  function paintTile(t, value, note, days) {
+    const tile = tiles[t.key];
+    tile.value.textContent = value;
+    tile.note.textContent = note;
+    if (!days?.length) return;
+    const values = days.map(t.of);
+    const width = tile.chart.clientWidth;
+    const key = JSON.stringify([range, width, values]);
+    if (key === tile.drawn || !width) return;
+    tile.drawn = key;
+
+    // Bars share the width; the tallest fills the chart, an empty day is a
+    // faint tick, and today is a little brighter.
+    const height = tile.chart.clientHeight;
+    const gap = 2;
+    const bar = (width - gap * (days.length - 1)) / days.length;
+    const top = Math.max(...values) || 1;
+    const svg = document.createElementNS(SVG, "svg");
+    attrs(svg, { viewBox: `0 0 ${width} ${height}`, "aria-hidden": "true" });
+    const tip = el("div", { className: "spark-tip", hidden: true });
+    days.forEach((d, i) => {
+      const v = values[i];
+      const x = i * (bar + gap);
+      const h = v ? Math.max(3, (v / top) * height) : 1.5;
+      const rect = document.createElementNS(SVG, "rect");
+      attrs(rect, { x, y: height - h, width: bar, height: h, rx: Math.min(1.5, bar / 2), class: v ? `bar${i === days.length - 1 ? " today" : ""}` : "none" });
+      const hit = document.createElementNS(SVG, "rect");
+      attrs(hit, { x: x - gap / 2, y: 0, width: bar + gap, height, class: "hit" });
+      hit.addEventListener("mouseenter", () => {
+        rect.classList.add("on");
+        const last = i === days.length - 1;
+        tip.replaceChildren(el("span", { textContent: `${when(d, last)} · ` }), t.tip(v, last));
+        tip.hidden = false;
+        tip.style.left = `${Math.min(Math.max(x + bar / 2, tip.offsetWidth / 2), width - tip.offsetWidth / 2)}px`;
+      });
+      hit.addEventListener("mouseleave", () => {
+        rect.classList.remove("on");
+        tip.hidden = true;
+      });
+      svg.append(rect, hit);
+    });
+    tile.chart.replaceChildren(svg, tip);
+  }
+
+  new ResizeObserver(() => data && render()).observe($("stats"));
+
   function render() {
     const { server, sessions, relay } = data;
     // This computer's connection to parley.im, which shared links depend on.
@@ -71,16 +185,15 @@
     const open = sessions.filter((s) => s.status === "open");
     const paused = open.filter((s) => s.repliesLeft === 0);
     const unread = sessions.reduce((n, s) => n + s.stats.unread, 0);
-    const replies = sessions.reduce((n, s) => n + s.stats.replies, 0);
-    const spend = sessions.reduce((n, s) => n + s.stats.cost_usd, 0);
     const busy = open.filter((s) => s.busy).length;
-    const stat = (label, value, note) => el("div", { className: "stat" }, el("div", { className: "label", textContent: label }), el("div", { className: "value", textContent: value }), el("div", { className: "note", textContent: note }));
-    $("stats").replaceChildren(
-      stat("Open sessions", String(open.length), paused.length ? `${paused.length} paused, out of replies` : busy ? `${busy} replying now` : "links are live"),
-      stat("New messages", String(unread), unread ? `in ${sessions.filter((s) => s.stats.unread).length} session(s)` : "you're caught up"),
-      stat("Replies", String(replies), `${sessions.filter((s) => today(s.stats.last_message_at)).length} session(s) active today`),
-      stat("Spend", money(spend), "at API prices, all sessions"),
-    );
+    if (!tiles.open) buildTiles();
+    const days = data.activity;
+    const total = (key) => (days ?? []).reduce((n, d) => n + d[key], 0);
+    paintTile(TILES[0], String(open.length), !open.length ? "none open right now" : paused.length ? `open now, ${paused.length} out of replies` : busy ? `open now, ${busy} replying` : "open now, links working", days);
+    const within = RANGES[range].within;
+    paintTile(TILES[1], String(total("messages")), `${within}${unread ? `, ${unread} unread` : ", none unread"}`, days);
+    paintTile(TILES[2], String(total("replies")), `${within}, by your agents`, days);
+    paintTile(TILES[3], money(total("cost_usd")), `${within}, at API prices`, days);
 
     const ended = sessions.filter((s) => s.status !== "open");
     const tabs = [["open", "Open", open.length], ["ended", "Ended", ended.length], ["all", "All", sessions.length]];