@parley-im/parley 0.2.15 → 0.2.17

package/README.md

@@ -33,7 +33,7 @@ parley show <id> --new   # what came in since you last read it
 parley limit <id> 150    # let a session give 150 replies in total
 parley end <id>          # kill the link; keep the transcript
 parley delete <id>       # erase it
-parley panel             # open your control panel
+parley panel             # open your local control panel
 parley whoami | logout
 ```
 
@@ -55,7 +55,7 @@ guest's browser ──wss──▶ parley.im (Cloudflare Worker) ◀──wss─
 
 Each session has a random 256-bit key, kept in your parley database and in the link after the `#`, which browsers never send to a server. Every request, reply, live update and screenshot is sealed with AES-256-GCM (fresh IV each time) and bound to its session and direction, so parley.im can't read or alter anything, or move it between sessions. Your computer refuses requests older than five minutes or seen before, so replays go nowhere. `src/seal.ts` and `web/seal.js` are the two halves; the tests check they read each other.
 
-What it doesn't hide, said plainly on the guest's info sheet: parley.im knows who sent a link, the project name, which agent is answering and how many replies it has given, and when messages pass; the page's code comes from parley.im, so the promise relies on parley.im serving it honestly (a strict Content-Security-Policy means the key can only ever go back to parley.im); and Claude or Codex reads the conversation to reply. Anyone with the whole link can read and join the chat.
+What it doesn't hide, said plainly on the guest's info sheet: parley.im knows who sent a link and the name they gave the guest, the project name, which agent is answering and how many replies it has given, and when messages pass; the page's code comes from parley.im, so the promise relies on parley.im serving it honestly (a strict Content-Security-Policy means the key can only ever go back to parley.im); and Claude or Codex reads the conversation to reply. Anyone with the whole link can read and join the chat.
 
 ## What the guest gets
 
@@ -74,7 +74,7 @@ Before a session is made, Parley checks the agent is installed and new enough fo
 
 Each reply records which model answered, on which login (`auth: "none"` means your subscription, not an API key), and what it would cost at API prices.
 
-## Your control panel
+## Your local control panel
 
 `http://localhost:4748`, only reachable from your computer: your parley.im connection, totals (open sessions, new messages, replies, spend), every session with its replies against its limit, and buttons to copy a link, add replies, end or delete. Opening a session shows the conversation with what each reply looked at, plus the brief and controls. A **New session** form makes one without an agent.
 
@@ -89,7 +89,7 @@ Each reply records which model answered, on which login (`auth: "none"` means yo
 
 | | |
 |---|---|
-| `src/server.ts` | Your control panel (4748) and local development links (4747) |
+| `src/server.ts` | Your local control panel (4748) and local development links (4747) |
 | `src/relay.ts` | The connection to parley.im: answers sealed requests, pushes sealed updates |
 | `src/api.ts` | What a viewer can do with a session, shared by both |
 | `src/seal.ts`, `web/seal.js` | The encryption, Node and browser halves |
@@ -97,7 +97,7 @@ Each reply records which model answered, on which login (`auth: "none"` means yo
 | `src/runner.ts`, `src/agents/` | One reply at a time per session; Claude and Codex adapters |
 | `src/mcp.ts` | `create_session`, `list_sessions`, `get_transcript`, `set_reply_limit`, `end_session` |
 | `src/db.ts` | Each project's `.parley/parley.db` (sessions with keys, messages, turns), a folder per session with screenshots and `transcript.md`, and `~/.parley/projects.json` listing the projects |
-| `web/` | Chat page, session view, control panel; parley.im serves the guest page's files from here too |
+| `web/` | Chat page, session view, local control panel; parley.im serves the guest page's files from here too |
 | `relay/` | parley.im: Worker, a Durable Object per linked computer, D1 |
 
 ## Setup

package/dist/api.js

@@ -46,7 +46,7 @@ export class Conversations {
     state(scope) {
         const session = this.store.session(scope.session.id);
         const page = this.store.page(session.id, PAGE);
-        // Opening a session on your control panel counts as reading it.
+        // Opening a session on your local control panel counts as reading it.
         if (scope.owner && page.messages.length)
             this.store.markRead(session.id, page.messages.at(-1).id);
         // Read together, so following from `seq` can't miss or repeat anything.

package/dist/autostart.js

@@ -6,7 +6,7 @@ import { paths } from "./config.js";
 // parley's server starts when you log in, so links you've sent keep working
 // after a restart: a launch agent on macOS, a systemd user service on Linux.
 // It's the same server `parley start` runs; a second copy exits right away.
-const LABEL = "im.parley.server";
+export const LABEL = "im.parley.server";
 const plist = join(homedir(), "Library/LaunchAgents", `${LABEL}.plist`);
 const unit = join(homedir(), ".config/systemd/user/parley.service");
 const quiet = (bin, args) => {

package/dist/cli.js

@@ -39,7 +39,7 @@ Commands
   parley delete ID                             Erase it, screenshots included
   parley login | logout | whoami               Link this computer to your Parley account
   parley start | stop | status                 The background server (holds the connection to Parley)
-  parley panel                                 Open the control panel (localhost)
+  parley panel                                 Open the local control panel (localhost)
   parley install                               Add Parley's MCP tools to Claude Code and Codex; start at login
   parley uninstall                             Undo install (your conversations stay)
   parley serve | mcp                           Run the server in the foreground | MCP over stdio
@@ -64,7 +64,7 @@ async function main() {
             const state = await ensureServer(config);
             if (!state)
                 fail(`The server didn't come up. See ${paths.log}`);
-            console.log(`Running. Control panel: ${dashboardUrl(config)}`);
+            console.log(`Running. Local control panel: ${dashboardUrl(config)}`);
             await printRelay(config);
             return;
         }
@@ -106,7 +106,7 @@ async function main() {
             if (!up)
                 return console.log("Not running. `parley start` brings it up.");
             console.log(`Running (pid ${state?.pid}) since ${state?.startedAt}`);
-            console.log(`Control panel: ${dashboardUrl(config)}`);
+            console.log(`Local control panel: ${dashboardUrl(config)}`);
             await printRelay(config);
             return;
         }

package/dist/control.js

@@ -4,7 +4,7 @@ import { isServerUp } from "./state.js";
 import { readCredentials, relay as registry } from "./account.js";
 import { ensureServer } from "./daemon.js";
 import { agentProblem, checkProjectFolder, defaultAgent } from "./access.js";
-// The one way sessions get made, from the CLI, MCP tools or your control panel.
+// The one way sessions get made, from the CLI, MCP tools or your local control panel.
 export function createSession(store, config, input) {
     if (!isAbsolute(input.projectDir))
         throw new Error(`Use the full path of the project folder, not ${input.projectDir}.`);

package/dist/daemon.js

@@ -24,16 +24,8 @@ export async function ensureServer(config, waitMs = 20_000) {
         await stopServer(config);
         await waitUntilDown(config);
     }
-    if (!(await serverHealth(config))) {
-        const log = openSync(paths.log, "a");
-        const child = spawn(process.execPath, ["--no-warnings", CLI, "serve"], {
-            detached: true,
-            stdio: ["ignore", log, log],
-            env: cleanEnv(),
-            cwd: paths.home,
-        });
-        child.unref();
-    }
+    if (!(await serverHealth(config)))
+        startDetached();
     const deadline = Date.now() + waitMs;
     while (Date.now() < deadline) {
         const state = readState();
@@ -43,6 +35,17 @@ export async function ensureServer(config, waitMs = 20_000) {
     }
     return (await serverHealth(config)) ? readState() : null;
 }
+// A server of its own, outliving whatever started it, logging to server.log.
+export function startDetached() {
+    const log = openSync(paths.log, "a");
+    const child = spawn(process.execPath, ["--no-warnings", CLI, "serve"], {
+        detached: true,
+        stdio: ["ignore", log, log],
+        env: cleanEnv(),
+        cwd: paths.home,
+    });
+    child.unref();
+}
 async function waitUntilDown(config, waitMs = 10_000) {
     const deadline = Date.now() + waitMs;
     while (Date.now() < deadline && (await serverHealth(config)))
@@ -58,9 +61,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/mcp.js

@@ -69,7 +69,7 @@ export async function runMcp() {
             `Created session ${session.id} for ${session.guest} (${session.agent}, read-only in ${session.project_dir}, up to ${session.reply_limit} replies).`,
             "",
             `Link for ${session.guest}: ${linkFor(session, config)}`,
-            `Watch it live on the control panel: ${dashboardUrl(config, session)}`,
+            `Watch it live on the local control panel: ${dashboardUrl(config, session)}`,
             "",
         ];
         if (!readCredentials(config)) {

package/dist/relay.js

@@ -306,9 +306,10 @@ export class RelayLink {
             this.send({ t: "piece", r: frame.r, d: Buffer.from(sealed.subarray(at, at + PIECE)).toString("base64url") });
         answer({});
     }
-    // For your dashboard on parley.im: which agent runs each open session and
-    // how many of its replies it has used, and the port this computer's control
-    // panel listens on. Never the guest's name, the brief or anything said.
+    // For your dashboard on parley.im: who each open session is for (the name
+    // you gave them), which agent runs it and how many of its replies it has
+    // used, and the port this computer's local control panel listens on.
+    // Never the brief or anything said.
     told = "";
     telling = null;
     tellDashboard() {
@@ -320,7 +321,7 @@ export class RelayLink {
                 return;
             const sessions = {};
             for (const s of this.store.sessions({ status: "open" })) {
-                sessions[s.token] = { agent: s.agent, model: modelLabel(this.store.latestModel(s.id) ?? s.model), used: this.store.repliesUsed(s.id), limit: s.reply_limit };
+                sessions[s.token] = { guest: s.guest, agent: s.agent, model: modelLabel(this.store.latestModel(s.id) ?? s.model), used: this.store.repliesUsed(s.id), limit: s.reply_limit };
             }
             const frame = JSON.stringify({ t: "meta", panel: this.config.dashboardPort, sessions });
             if (frame === this.told)

package/dist/server.js

@@ -1,10 +1,12 @@
 import { createServer } from "node:http";
-import { readFileSync, writeFileSync, existsSync, mkdirSync, createReadStream } from "node:fs";
+import { readFileSync, writeFileSync, existsSync, mkdirSync, createReadStream, statSync } from "node:fs";
 import { join, extname, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 import { randomBytes } from "node:crypto";
 import { loadConfig } from "./config.js";
-import { VERSION } from "./version.js";
+import { VERSION, PACKAGE_JSON, compareVersions } from "./version.js";
+import { startDetached } from "./daemon.js";
+import { LABEL } from "./autostart.js";
 import { Store, sessionDir } from "./db.js";
 import { Runner, mediaTypeFor } from "./runner.js";
 import { Conversations, Problem, MAX_TEXT, ownsUpload } from "./api.js";
@@ -12,6 +14,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 local 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.
@@ -23,7 +27,7 @@ const STATIC_TYPES = {
     ".html": "text/html; charset=utf-8",
     ".woff2": "font/woff2",
 };
-// Two local servers: your control panel (and your view of each session), and
+// Two local servers: your local control panel (and your view of each session), and
 // local guest links for development or when you're not signed in. Shared
 // links go through parley.im instead, over the connection in relay.ts.
 export async function serve() {
@@ -80,6 +84,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`.
@@ -264,7 +269,7 @@ export async function serve() {
         server.once("error", reject);
     })));
     writeState(state);
-    console.log(`Parley: control panel http://localhost:${config.dashboardPort}, local links on ${config.port}`);
+    console.log(`Parley: local control panel http://localhost:${config.dashboardPort}, local links on ${config.port}`);
     link.start();
     runner.resume();
     // Says goodbye to parley.im before exiting, so guests see this computer go
@@ -277,6 +282,38 @@ export async function serve() {
     };
     process.on("SIGINT", shutdown);
     process.on("SIGTERM", shutdown);
+    // After an update (npm install -g @parley-im/parley), the newer Parley
+    // takes over by itself once no reply is running: this server says goodbye
+    // and lets go of its ports, then the login service starts the new one (it
+    // restarts a server that exits unsuccessfully) or, if something else
+    // started this one, it starts the new one on its way out.
+    let installed = null;
+    let changed = 0;
+    setInterval(() => {
+        try {
+            const at = statSync(PACKAGE_JSON).mtimeMs;
+            if (at !== changed) {
+                changed = at;
+                const version = JSON.parse(readFileSync(PACKAGE_JSON, "utf8")).version;
+                installed = compareVersions(version, VERSION) > 0 ? version : null;
+            }
+        }
+        catch {
+            return; // partway through being installed
+        }
+        if (!installed || runner.live.size)
+            return;
+        console.log(`Parley: ${installed} is installed; restarting on it.`);
+        const supervised = process.env.XPC_SERVICE_NAME === LABEL || Boolean(process.env.INVOCATION_ID);
+        link.stop();
+        runner.stopAll();
+        clearState(process.pid);
+        guest.close();
+        dashboard.close();
+        if (!supervised)
+            startDetached();
+        setTimeout(() => process.exit(supervised ? 75 : 0), 300);
+    }, 30_000).unref();
     // One bad turn (say, a session deleted mid-reply) or one broken request
     // shouldn't take every other guest's link down with it.
     process.on("unhandledRejection", (error) => console.error("unhandled:", error));

package/dist/version.js

@@ -1,7 +1,8 @@
 import { readFileSync } from "node:fs";
 // This copy of parley's version, from package.json (one folder up from both
-// src/ and dist/).
-export const VERSION = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version;
+// src/ and dist/). An update rewrites that file under a running server.
+export const PACKAGE_JSON = new URL("../package.json", import.meta.url);
+export const VERSION = JSON.parse(readFileSync(PACKAGE_JSON, "utf8")).version;
 // Negative, zero or positive, like a sort comparator: "0.1.10" is newer than "0.1.9".
 export function compareVersions(a, b) {
     const pa = a.split(".").map(Number);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parley-im/parley",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "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,6 +1,7 @@
 /* parley: one stylesheet for the guest chat, your session view, your
-   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
+   local control panel and parley's site. Dark, with lilac for Parley itself
+   and lake blue for people and what they do, 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 mark (mark.js) is equilateral triangles gathered into hexagons, and
    its triangles do the motion: they say when a page opens, when the agent
@@ -22,12 +23,17 @@
   --text: #ececef;
   --muted: #9b9ba4;
   --faint: #66666f;
-  --accent: #9d92ff; /* lilac */
+  --accent: #9d92ff; /* lilac: Parley itself */
   --accent-fill: #9d92ff; /* buttons, with dark text */
   --accent-soft: #221f3d;
   --accent-ink: #0c0c0d;
-  --guest: #221f3d; /* your own messages */
-  --guest-ink: #e6e2ff;
+  /* Lake: people and what they do (guests' messages, avatars, charts).
+     The lilac's lightness with the hue moved toward blue, so the two read
+     as one family and stay apart for colorblind eyes too. */
+  --lake: #49bfd9;
+  --lake-soft: #0f2a33;
+  --guest: var(--lake-soft); /* a guest's messages */
+  --guest-ink: #d9f1f8;
   --ok: #3ccf7a;
   --warn: #e3a948;
   --danger: #ff6b63;
@@ -356,6 +362,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(--lake); opacity: 0.65; transition: opacity 0.12s; }
+.spark .bar.today { opacity: 0.9; }
+.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 +461,12 @@ 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; }
+.face { display: inline-flex; flex: none; }
+.side h2 { display: flex; align-items: center; gap: 8px; }
 .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;
@@ -536,7 +563,12 @@ table.views tfoot td { font-weight: 600; border-bottom: 0; }
 .dash .stat .value { white-space: nowrap; }
 .dash .row-actions { align-items: center; }
 .dash .row-actions .live { margin-right: 6px; }
-.dash .update-note { font-size: 12.5px; color: var(--warn); margin-top: 4px; }
+.dash .update-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--warn); margin-top: 8px; }
+/* A command to paste: one click selects all of it, or Copy. */
+.cmd { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); padding: 3px 3px 3px 9px; }
+.cmd code { user-select: all; font-family: var(--mono); font-size: 12px; color: var(--text); background: none; border: 0; padding: 0; white-space: nowrap; overflow-x: auto; }
+.cmd .btn { flex: none; height: 24px; padding: 0 9px; font-size: 12px; }
+.dash .update-note .fine { color: var(--muted); }
 .dash .empty q { color: var(--text); }
 .dash .setup { margin-top: 24px; }
 /* Long details shorten instead of pushing the buttons off a phone screen. */

package/web/avatar.js

@@ -0,0 +1,70 @@
+// Everyone's avatar: a hexagon of 24 equilateral triangles on the same grid
+// as Parley's mark. The person's email (or, for a guest, their name) seeds
+// it, so the same person always gets the same one, here, on parley.im and in
+// the local control panel. The pattern turns three times around the middle, which
+// keeps it a shape rather than noise. parley.im's server runs this same file.
+(() => {
+  const H = Math.sqrt(3) / 2;
+  const fmt = (n) => +n.toFixed(2);
+
+  // The 24 triangles of a hexagon two triangles across, centered in a
+  // 32-unit box, each with the class of triangles it shares a tone with: the
+  // ones it lands on when turned by a third of a circle.
+  const S = 7.75;
+  const at = (i, j) => [16 + i * S * H, 16 + j * S + (i * S) / 2];
+  const far = (i, j) => Math.max(Math.abs(i), Math.abs(j), Math.abs(i + j));
+  const triangles = [];
+  for (let i = -3; i <= 2; i++) {
+    for (let j = -3; j <= 2; j++) {
+      for (const corners of [[[i, j], [i + 1, j], [i, j + 1]], [[i + 1, j], [i + 1, j + 1], [i, j + 1]]]) {
+        if (Math.max(...corners.map(([a, b]) => far(a, b))) > 2) continue;
+        const pts = corners.map(([a, b]) => at(a, b));
+        const cx = (pts[0][0] + pts[1][0] + pts[2][0]) / 3 - 16;
+        const cy = (pts[0][1] + pts[1][1] + pts[2][1]) / 3 - 16;
+        // Turned back into the first third, its position names its class.
+        const turn = ((Math.atan2(cx, -cy) * 180) / Math.PI + 360) % 360;
+        const back = (-Math.floor(turn / 120) * 120 * Math.PI) / 180;
+        const orbit = `${Math.round(cx * Math.cos(back) - cy * Math.sin(back))},${Math.round(cx * Math.sin(back) + cy * Math.cos(back))}`;
+        triangles.push({ d: "M" + pts.map((p) => `${fmt(p[0])} ${fmt(p[1])}`).join("L") + "Z", orbit });
+      }
+    }
+  }
+  const orbits = [...new Set(triangles.map((t) => t.orbit))];
+
+  // A small, steady random stream from the seed (FNV-1a, then mulberry32).
+  function stream(seed) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < seed.length; i++) h = Math.imul(h ^ seed.charCodeAt(i), 0x01000193);
+    let a = h >>> 0;
+    return () => {
+      a = (a + 0x6d2b79f5) | 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // People's colors are lake blues (Parley's own lilac is for Parley): a hue
+  // from a narrow range, and five tones of it, the first almost the panel,
+  // the last almost white.
+  const HUES = [186, 206];
+  const toneOf = (hue, tone) => [`hsl(${hue} 20% 19%)`, `hsl(${hue} 42% 44%)`, `hsl(${hue} 72% 63%)`, `hsl(${hue} 100% 79%)`, `hsl(${hue} 100% 90%)`][tone];
+
+  globalThis.parleyAvatar = (seed, size = 32) => {
+    const next = stream(String(seed).trim().toLowerCase());
+    const hue = Math.round(HUES[0] + next() * (HUES[1] - HUES[0]));
+    // Some classes stay dark; at least three light up, in at least two tones.
+    let tones;
+    do tones = orbits.map(() => Math.min(4, Math.floor(next() * 5.4)));
+    while (tones.filter((t) => t > 0).length < 3 || new Set(tones.filter((t) => t > 0)).size < 2);
+    const tone = new Map(orbits.map((o, i) => [o, tones[i]]));
+    // Each triangle's edge in its own color closes the hairline seams.
+    const paths = triangles
+      .map((t) => {
+        const color = toneOf(hue, tone.get(t.orbit));
+        return `<path fill="${color}" stroke="${color}" stroke-width="0.3" stroke-linejoin="round" d="${t.d}"/>`;
+      })
+      .join("");
+    return `<svg class="hex-avatar" viewBox="0 0 32 32" width="${size}" height="${size}" aria-hidden="true">${paths}</svg>`;
+  };
+})();

package/web/chat.html

@@ -85,6 +85,7 @@
 <script src="/static/markdown.js"></script>
 <script src="/static/seal.js"></script>
 <script src="/static/mark.js"></script>
+<script src="/static/avatar.js"></script>
 <script src="/static/chat.js"></script>
 </body>
 </html>

package/web/chat.js

@@ -367,7 +367,7 @@
         ? el(
             "p",
             {},
-            `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. Parley passes them along but can't read them; it knows who sent this link, the project's name, which agent is answering and how many replies it has given, and when messages go by, and counts how many times pages are opened each day. The key is the part of your link after the #, so anyone with the whole link can read this chat: keep it to yourself. (This page's code comes from Parley's servers, so that promise relies on Parley serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
+            `Messages and screenshots are end-to-end encrypted between this page and ${theirs} computer. Parley passes them along but can't read them; it knows who sent this link and the name they gave you, the project's name, which agent is answering and how many replies it has given, and when messages go by, and counts how many times pages are opened each day. The key is the part of your link after the #, so anyone with the whole link can read this chat: keep it to yourself. (This page's code comes from Parley's servers, so that promise relies on Parley serving it honestly. And ${agentName()} reads the conversation to reply, as with any ${agentName()} chat.)`,
           )
         : null,
         el("p", {}, `When the replies run out, the chat pauses until ${whom} adds more. Replies come from ${theirs} computer, so it needs to be on, and the link stops working for good once the chat ends.`),
@@ -561,33 +561,35 @@
     els.crumbs.replaceChildren(
       el("a", { className: "product", href: "/", textContent: "parley" }),
       el("span", { className: "slash", textContent: "/" }),
-      el("a", { className: "product", href: "/", textContent: "Control panel" }),
+      el("a", { className: "product", href: "/", textContent: "Local control panel" }),
       el("span", { className: "slash", textContent: "/" }),
       side.here,
     );
     els.side.replaceChildren(
-      el("h2", { textContent: session.guest }),
-      side.sub,
-      el(
-        "section",
-        {},
-        el("div", { className: "label", textContent: "Replies" }),
-        side.meter,
-        side.replies,
-        open
-          ? el(
-              "div",
-              { className: "actions" },
-              Object.assign(el("button", { className: "btn", type: "button", textContent: "+50 replies" }), { onclick: () => setLimit(session.replyLimit + 50) }),
-              limit,
-              Object.assign(el("button", { className: "btn ghost", type: "button", textContent: "Set" }), { onclick: () => setLimit(Number(limit.value)) }),
-            )
-          : null,
-      ),
-      el("section", {}, details),
-      open ? el("section", {}, el("div", { className: "label", textContent: "Guest link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, link, copy)) : null,
-      el("section", {}, el("div", { className: "label", textContent: "Brief" }), side.brief),
-      el("section", {}, el("div", { className: "actions", style: "margin-top:0" }, kill), el("div", { className: "cell-muted", style: "margin-top:8px", textContent: open ? "Ending kills the link for good. You keep the transcript." : "Deleting erases the transcript and screenshots." })),
+      ...[
+        el("h2", {}, Object.assign(el("span", { className: "face" }), { innerHTML: window.parleyAvatar(session.guest, 22) }), session.guest),
+        side.sub,
+        el(
+          "section",
+          {},
+          el("div", { className: "label", textContent: "Replies" }),
+          side.meter,
+          side.replies,
+          open
+            ? el(
+                "div",
+                { className: "actions" },
+                Object.assign(el("button", { className: "btn", type: "button", textContent: "+50 replies" }), { onclick: () => setLimit(session.replyLimit + 50) }),
+                limit,
+                Object.assign(el("button", { className: "btn ghost", type: "button", textContent: "Set" }), { onclick: () => setLimit(Number(limit.value)) }),
+              )
+            : null,
+        ),
+        el("section", {}, details),
+        open ? el("section", {}, el("div", { className: "label", textContent: "Guest link" }), el("div", { className: "linkbox", style: "margin-top:8px" }, link, copy)) : null,
+        el("section", {}, el("div", { className: "label", textContent: "Brief" }), side.brief),
+        el("section", {}, el("div", { className: "actions", style: "margin-top:0" }, kill), el("div", { className: "cell-muted", style: "margin-top:8px", textContent: open ? "Ending kills the link for good. You keep the transcript." : "Deleting erases the transcript and screenshots." })),
+      ].filter(Boolean),
     );
   }
 

package/web/dashboard.js

@@ -77,6 +77,15 @@
       row.querySelector(".live")?.replaceChildren(...liveNodes(s));
       const text = about(s);
       if (text) row.querySelector(".about").textContent = text;
+      // Who it's for, once the computer has said.
+      if (s.guest && row.dataset.guest !== s.guest && window.parleyAvatar) {
+        row.dataset.guest = s.guest;
+        const face = document.createElement("span");
+        face.className = "face";
+        face.innerHTML = window.parleyAvatar(s.guest, 20);
+        row.querySelector(".name").replaceChildren(face, document.createTextNode(s.guest));
+        row.querySelector(".project").textContent = `${row.dataset.title} · `;
+      }
     }
     paintStats();
   }
@@ -94,6 +103,7 @@
         here: s.here ?? 0,
         active: s.active ? s.active + shift : null,
         replying: s.replying ? s.replying + shift : null,
+        guest: s.guest ?? null,
         agent: s.agent ?? null,
         model: s.model ?? null,
         used: s.used ?? null,
@@ -129,13 +139,13 @@
     };
   }
 
-  // "Copy" for the line people paste into their agent, before any computer
-  // is linked.
-  document.querySelectorAll("[data-copy]").forEach((button) => {
+  // "Copy" for the line people paste into their agent before any computer is
+  // linked, and for the update command.
+  document.querySelectorAll("[data-copy], [data-copy-text]").forEach((button) => {
     if (!navigator.clipboard) return;
     button.hidden = false;
     button.addEventListener("click", async () => {
-      await navigator.clipboard.writeText(document.getElementById(button.dataset.copy).textContent);
+      await navigator.clipboard.writeText(button.dataset.copyText ?? document.getElementById(button.dataset.copy).textContent);
       button.textContent = "Copied";
       setTimeout(() => (button.textContent = "Copy"), 1500);
     });

package/web/panel.html

@@ -4,19 +4,20 @@
 <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>
+<title>Local control panel · Parley</title>
 <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" 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>
+  <nav class="crumbs"><span class="product">parley</span><span class="slash">/</span><span class="here">Local control panel</span></nav>
+  <span class="status" id="server"><span class="dot" id="server-dot"></span><span class="face" id="me"></span><span id="server-text">Checking…</span></span>
 </header>
 
 <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">
@@ -72,6 +73,7 @@
   </form>
 </aside>
 
+<script src="/static/avatar.js"></script>
 <script src="/static/panel.js"></script>
 </body>
 </html>

package/web/panel.js

@@ -21,6 +21,9 @@
     return new Date(iso).toLocaleDateString([], { month: "short", day: "numeric" });
   };
   const money = (usd) => `$${usd.toFixed(2)}`;
+  // Someone's hexagon (avatar.js): from their email, or a guest's name.
+  const face = (seed, size) => Object.assign(el("span", { className: "face" }), { innerHTML: window.parleyAvatar(seed, size) });
+  let me = "";
   const today = (iso) => iso && new Date(iso).toDateString() === new Date().toDateString();
 
   async function post(path, body) {
@@ -35,7 +38,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 +53,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.
@@ -65,22 +182,25 @@
     const [dot, label] = RELAY[relay.state] ?? ["warn", relay.state];
     $("server-dot").className = `dot ${dot}`;
     $("server-text").textContent = label;
+    if ((relay.email ?? "") !== me) {
+      me = relay.email ?? "";
+      $("me").innerHTML = me ? window.parleyAvatar(me, 18) : "";
+    }
     $("server").title = relay.error ?? `Server up since ${new Date(server.startedAt).toLocaleString()}`;
     $("signed-out").hidden = relay.state !== "signed-out" && relay.state !== "unlinked";
 
     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]];
@@ -122,7 +242,7 @@
   function row(s) {
     const open = s.status === "open";
     const used = s.replyLimit - s.repliesLeft;
-    const name = el("div", { className: "name" }, el("span", { className: `dot ${!open ? "" : s.busy ? "busy" : s.repliesLeft === 0 ? "warn" : "on"}` }), s.guest);
+    const name = el("div", { className: "name" }, face(s.guest, 20), s.guest, el("span", { className: `dot ${!open ? "" : s.busy ? "busy" : s.repliesLeft === 0 ? "warn" : "on"}` }));
     if (s.stats.unread) name.append(el("span", { className: "badge", textContent: `${s.stats.unread} new` }));
     const who = el("a", { className: "who-cell", href: `/o/${s.id}`, style: "text-decoration:none" }, name, el("div", { className: "where", textContent: `${s.project} · ${s.model ?? (s.agent === "codex" ? "Codex" : "Claude")} · ${s.id}`, title: s.projectDir }));