@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/fleet-traffic.js

@@ -3,8 +3,14 @@
 // stream, every POLL_MS while the page is shown — the user's decision 1). Ids are opaque; there is never any text.
 //
 // - The store keeps each message's latest state: queued (a dotted line), delivering (a dash and a pulse), delivered
-//   (the line stays FADE_MS while it fades, then goes); consumed, failed, uncertain or cancelled ends it at once (a
-//   failed or uncertain delivery is Needs you's to show, #1386). A finished message never comes back.
+//   or consumed (the line stays FADE_MS while it fades, then goes — long enough to see: an MCP send is delivered and
+//   read almost at once); failed, uncertain or cancelled ends it at once (a failed or uncertain delivery is Needs you's
+//   to show, #1386). A finished message never comes back.
+// - And the work (the server's Delegations, stream event `delegation`, the snapshot's `delegations`): a task's
+//   delegator → worker line stays, "in progress" (a moving dash), until its report comes back; then a short return
+//   pulse worker → delegator (RETURN_MS), and it goes. One that waits past DELEGATION_TTL_MS fades as "no report yet".
+// - Every line ends on something drawn: a card, or a folded team's box (a name not on the canvas draws nothing), and
+//   runs through lanes that touch the boxes it joins — two cards in one box are joined inside it.
 // - Edges are routed metro-style through the lanes the layout keeps empty (beside the columns and between card rows
 //   inside a box; the bus above each row of teams; the trunk at the left), so a line never crosses a card.
 // - Near: one edge per (from, to, kind, phase), ×N when several share it. Far (zoomed out): one edge per team pair.
@@ -12,14 +18,20 @@
 //   recipients, or far, it is one edge per recipient team, ×N (the user's decision 3). At most MAX_EDGES are drawn.
 import { OC } from "./fleet-canvas-layout.js";
 
-export const FADE_MS = 3000;
+export const FADE_MS = 12000;
+export const RETURN_MS = 2400;
+/** As the server's (src/fleet-traffic.ts): how long a delegation waits for its report. */
+export const DELEGATION_TTL_MS = 4 * 3_600_000;
 export const POLL_MS = 5000;
 export const MAX_EDGES = 60;
 export const BUNDLE_AT = 8;
 export const FAR_K = 0.55;
-const MAX_ITEMS = 400, MAX_DONE = 2000;
+const MAX_ITEMS = 400, MAX_DONE = 2000, MAX_WORK = 200;
+const DSTATES = new Set(["open", "done", "expired", "cancelled"]);
 const LIVE = new Set(["queued", "delivering"]);
-const ENDS = new Set(["consumed", "failed", "uncertain", "cancelled"]);
+const ENDS = new Set(["failed", "uncertain", "cancelled"]);
+/** Delivered, or read: the line fades out (FADE_MS). */
+const SETTLED = new Set(["delivered", "consumed"]);
 const KINDS = new Set(["task", "report", "query", "update", "send", "broadcast"]);
 const mono = () => (typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now());
 
@@ -28,55 +40,118 @@ export function itemOk(x) {
   if (!x || typeof x !== "object") return null;
   const { id, from, to, kind, state, op } = x;
   if (typeof id !== "string" || !/^[0-9a-f]{16}$/.test(id) || typeof from !== "string" || !from || typeof to !== "string" || !to) return null;
-  if (!KINDS.has(kind) || !(LIVE.has(state) || state === "delivered" || ENDS.has(state))) return null;
+  if (!KINDS.has(kind) || !(LIVE.has(state) || SETTLED.has(state) || ENDS.has(state))) return null;
   return { id, from, to, kind, state, ...(typeof op === "string" && /^[0-9a-f]{16}$/.test(op) ? { op } : {}) };
 }
 
+/** A delegation as the server sends it, checked; null for anything else. */
+export function delegationOk(x) {
+  if (!x || typeof x !== "object") return null;
+  const { id, from, to, state, age_ms } = x;
+  if (typeof id !== "string" || !/^[0-9a-f]{16}$/.test(id) || typeof from !== "string" || !from || typeof to !== "string" || !to || from === to) return null;
+  if (!DSTATES.has(state) || typeof age_ms !== "number" || !Number.isFinite(age_ms) || age_ms < 0) return null;
+  return { id, from, to, state, age: age_ms };
+}
+
 /**
- * The page's traffic: `apply(item, nowMs)` one stream item, `load(snapshot, nowMs)` a snapshot, `sweep(nowMs)` drops
- * faded lines; each returns whether anything shown changed. `items()` what to draw: { …item, fading }.
+ * The page's traffic: `apply(item, nowMs)` one stream item, `delegation(d, nowMs)` one delegation event,
+ * `load(snapshot, nowMs, since)` a snapshot, `sweep(nowMs)` drops faded lines; each returns whether anything shown
+ * changed. `items()` what to draw: { …item, fading }. `streamRev()` counts the stream's events: a snapshot asked for
+ * before the latest one (`since` older than it) may be older than what the stream already said, so it adds only what
+ * is new and ends or rewinds nothing (#2135 review).
+ * Ended work is remembered (bounded): a late snapshot never draws a delegation that is done, expired or taken back.
  */
 export function createTrafficStore() {
   const items = new Map();          // id → { item, fadeAt }
-  const done = new Set();           // ids that ended: a late item for one is ignored
+  const work = new Map();           // delegation id → { d, phase: "work" | "return" | "stale", until }
+  const done = new Set();           // message ids that ended: a late item for one is ignored
+  const ended = new Set();          // delegation ids that ended: never drawn in progress again
+  let rev = 0;
   const finish = (id) => {
     items.delete(id);
     done.add(id);
     if (done.size > MAX_DONE) done.delete(done.values().next().value);
   };
-  const store = {
-    apply(raw, now = mono()) {
-      const it = itemOk(raw);
-      if (!it || done.has(it.id)) return false;
-      const prev = items.get(it.id);
-      if (ENDS.has(it.state)) { const had = !!prev; finish(it.id); return had; }
-      if (prev && prev.item.state === "delivered") return false;                 // delivered never goes back
-      if (prev && prev.item.state === it.state) return false;
-      items.delete(it.id);
-      items.set(it.id, { item: it, fadeAt: it.state === "delivered" ? now + FADE_MS : null });
-      while (items.size > MAX_ITEMS) items.delete(items.keys().next().value);
+  const end = (id) => {
+    ended.add(id);
+    if (ended.size > MAX_DONE) ended.delete(ended.values().next().value);
+  };
+  const applyItem = (raw, now) => {
+    const it = itemOk(raw);
+    if (!it || done.has(it.id)) return false;
+    const prev = items.get(it.id);
+    if (ENDS.has(it.state)) { const had = !!prev; finish(it.id); return had; }
+    if (prev && prev.fadeAt !== null) return false;                            // fading: never goes back, nor starts again
+    if (prev && prev.item.state === it.state) return false;
+    if (it.state === "consumed" && !prev) { finish(it.id); return false; }      // read before this page drew it
+    items.delete(it.id);
+    // A message keeps what it was (from, to, kind) through its states; only the state moves.
+    items.set(it.id, { item: prev ? { ...prev.item, state: it.state } : it, fadeAt: SETTLED.has(it.state) ? now + FADE_MS : null });
+    while (items.size > MAX_ITEMS) items.delete(items.keys().next().value);
+    return true;
+  };
+  const applyDelegation = (raw, now) => {
+    const d = delegationOk(raw);
+    if (!d || ended.has(d.id)) return false;
+    const prev = work.get(d.id);
+    if (d.state === "open") {
+      if (prev) return false;
+      work.set(d.id, { d, phase: "work", until: now + Math.max(0, DELEGATION_TTL_MS - d.age) });
+      while (work.size > MAX_WORK) { const oldest = work.keys().next().value; work.delete(oldest); end(oldest); }
       return true;
-    },
-    /** A snapshot is the truth for what is in flight: anything live it no longer lists has ended (missed while away). */
-    load(snap, now = mono()) {
+    }
+    end(d.id);
+    if (d.state === "cancelled") return work.delete(d.id);
+    if (d.state === "done") { work.set(d.id, { d, phase: "return", until: now + RETURN_MS }); return true; }
+    if (!prev || prev.phase !== "work") return false;                              // expired: only one this page shows
+    work.set(d.id, { d, phase: "stale", until: now + FADE_MS });
+    return true;
+  };
+  const store = {
+    apply(raw, now = mono()) { rev++; return applyItem(raw, now); },
+    delegation(raw, now = mono()) { rev++; return applyDelegation(raw, now); },
+    streamRev: () => rev,
+    /**
+     * A snapshot is the truth for what is in flight: anything live it no longer lists has ended (missed while away) —
+     * unless the stream has spoken since it was asked for (`since`): then it may be older than what is drawn, and only
+     * what is new to this page is taken from it.
+     */
+    load(snap, now = mono(), since = rev) {
+      const fresh = since === rev;
       const list = snap && Array.isArray(snap.items) ? snap.items.map(itemOk).filter(Boolean) : [];
       const listed = new Set(list.map((i) => i.id));
       let changed = false;
-      for (const [id, e] of items) if (!listed.has(id) && LIVE.has(e.item.state)) { finish(id); changed = true; }
-      // Delivered, for a line drawn here: it fades now (with no stream, the snapshot is the only news of it). Any other
-      // finished message is not drawn (it finished up to two minutes ago), and an ended one goes.
+      if (fresh) for (const [id, e] of items) if (!listed.has(id) && LIVE.has(e.item.state)) { finish(id); changed = true; }
+      // Delivered or read, for a line drawn here: it fades now (with no stream, the snapshot is the only news of it). Any
+      // other finished message is not drawn (it finished up to two minutes ago), and an ended one goes.
       for (const it of list) {
-        if (LIVE.has(it.state) || (it.state === "delivered" && items.has(it.id))) changed = store.apply(it, now) || changed;
-        else { const had = items.has(it.id); finish(it.id); changed = changed || had; }
+        if (!fresh && items.has(it.id)) continue;                                    // the stream knows it better
+        if (LIVE.has(it.state) || (SETTLED.has(it.state) && items.has(it.id))) changed = applyItem(it, now) || changed;
+        else if (fresh) { const had = items.has(it.id); finish(it.id); changed = changed || had; }
       }
+      // The open delegations: the snapshot's list is the truth (one it no longer lists ended while this page was away).
+      const open = snap && Array.isArray(snap.delegations) ? snap.delegations.filter((d) => delegationOk(d)?.state === "open") : [];
+      const ids = new Set(open.map((d) => d.id));
+      if (fresh) for (const [id, e] of work) if (e.phase === "work" && !ids.has(id)) { work.delete(id); end(id); changed = true; }
+      for (const d of open) changed = applyDelegation(d, now) || changed;
       return changed;
     },
     sweep(now = mono()) {
       let changed = false;
       for (const [id, e] of items) if (e.fadeAt !== null && now >= e.fadeAt) { finish(id); changed = true; }
+      for (const [id, e] of work) {
+        if (now < e.until) continue;
+        if (e.phase === "work") { end(id); work.set(id, { ...e, phase: "stale", until: now + FADE_MS }); }    // its wait ran out here
+        else work.delete(id);
+        changed = true;
+      }
       return changed;
     },
-    items: () => [...items.values()].map((e) => ({ ...e.item, fading: e.fadeAt !== null })),
+    /** What to draw: the messages, then the work (a done one is its return, worker → delegator). */
+    items: () => [...[...items.values()].map((e) => ({ ...e.item, fading: e.fadeAt !== null })),
+      ...[...work.values()].map(({ d, phase }) => phase === "return"
+        ? { id: `r${d.id}`, from: d.to, to: d.from, kind: "report", state: "delivering", phase, fading: false }
+        : { id: `w${d.id}`, from: d.from, to: d.to, kind: "task", state: "delivering", phase, fading: false })],
     fadingCount: () => [...items.values()].filter((e) => e.fadeAt !== null).length,
   };
   return store;
@@ -103,6 +178,18 @@ function endOf(L, name) {
 
 // ── Routing: lanes the layout keeps empty ──
 
+/**
+ * A side lane's offset from the middle of the box's padding: at least 6 px from the box's border and from its cards.
+ * Negative: toward the border, on either side (#2329) — the first lines (o < 0) leave the cards a long last run for a head.
+ */
+const laneOffset = (o, PAD = OC.PAD) => Math.max(-PAD / 2 + 6, Math.min(PAD / 2 - 6, o * 0.5));
+const leftLaneOf = (b, io, PAD) => b.x + PAD / 2 + io;
+const rightLaneOf = (b, io, PAD) => b.x + b.w - PAD / 2 - io;
+/** Where a line meets a card's side, from the side's middle (#2329): its full offset, a head's width from its neighbours. */
+const sideOffset = (o) => Math.max(-OC.NH / 2 + 7, Math.min(OC.NH / 2 - 7, o));
+/** The layout's own box padding and gutter (a phone's are narrower). */
+const spacing = (L) => ({ PAD: L.pad ?? OC.PAD, GAP: L.gap ?? OC.GAP });
+
 const firstBusOf = (L) => Math.min(...L.boxes.map((b) => b.busY));
 /** From an end up to its row's bus lane: the points, and the lane's y. `o` spreads lines sharing a lane. */
 function outward(L, end, o) {
@@ -116,17 +203,17 @@ function outward(L, end, o) {
     const x = b.x + b.w / 2 + o * 1.5;
     return { pts: [{ x, y: b.y }, { x, y: b.busY + o }], bus: b.busY + o };
   }
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = Math.max(-PAD / 2 + 3, Math.min(PAD / 2 - 3, o * 0.5));
-  const leftLane = b.x + PAD / 2 + io, rightLane = b.x + b.w - PAD / 2 + io;
+  const io = laneOffset(o, PAD);
+  const leftLane = leftLaneOf(b, io, PAD), rightLane = rightLaneOf(b, io, PAD);
   let pts;
   if (col === 0 || col === b.cols - 1) {
-    const left = col === 0, lane = left ? leftLane : rightLane, cy = card.y + NH / 2 + io;
+    const left = col === 0, lane = left ? leftLane : rightLane, cy = card.y + NH / 2 + sideOffset(o);
     pts = [{ x: left ? card.x : card.x + NW, y: cy }, { x: lane, y: cy }, { x: lane, y: b.y }];
   } else {
     // A middle column: down into the gutter below its row, across to the nearer side lane.
-    const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 + io / 2, cx = card.x + NW / 2 + o;
+    const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 - io / 2, cx = card.x + NW / 2 + o;
     const lane = cx - b.x < b.w / 2 ? leftLane : rightLane;
     pts = [{ x: cx, y: card.y + NH }, { x: cx, y: gy }, { x: lane, y: gy }, { x: lane, y: b.y }];
   }
@@ -134,8 +221,43 @@ function outward(L, end, o) {
   pts.push({ x: top.x, y: b.busY + o });
   return { pts, bus: b.busY + o };
 }
-/** The points of a line from one end to the other: up to the bus, along it (and the trunk, between rows), down. */
+/**
+ * Inside a box, from a card to one of its side lanes (x `lane`): straight out when the card is in that lane's column,
+ * else down into the gutter under its row (no card is there) and across. The last point is on the lane.
+ */
+function toLane(L, end, lane, o) {
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
+  const b = end.b, card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
+  const io = laneOffset(o, PAD);
+  const left = lane < b.x + b.w / 2;
+  if ((left && col === 0) || (!left && col === b.cols - 1)) {
+    const cy = card.y + NH / 2 + sideOffset(o);
+    return [{ x: left ? card.x : card.x + NW, y: cy }, { x: lane, y: cy }];
+  }
+  const gy = card.y + NH + (rowI === lines - 1 ? PAD : GAP) / 2 - io / 2, cx = card.x + NW / 2 + o;
+  return [{ x: cx, y: card.y + NH }, { x: cx, y: gy }, { x: lane, y: gy }];
+}
+/** Two cards in one open box: joined inside it, through the side lane nearer to them both (never out to the bus). */
+function inBox(L, a, z, o) {
+  const b = a.b, { PAD } = spacing(L);
+  const io = laneOffset(o, PAD);
+  const mid = ((a.i % b.cols) + (z.i % b.cols)) / 2;
+  const lane = mid <= (b.cols - 1) / 2 ? leftLaneOf(b, io, PAD) : rightLaneOf(b, io, PAD);
+  return [...toLane(L, a, lane, o), ...toLane(L, z, lane, o).reverse()];
+}
+/** Two of General's cards: under them, through the gap above the first row (or the canvas's empty space below). */
+function betweenTops(a, z, o) {
+  const y = a.c.y + a.c.h + 30 + o * 0.6;
+  const ax = a.c.x + a.c.w / 2 + o, zx = z.c.x + z.c.w / 2 + o;
+  return [{ x: ax, y: a.c.y + a.c.h }, { x: ax, y }, { x: zx, y }, { x: zx, y: z.c.y + z.c.h }];
+}
+/**
+ * The points of a line from one end to the other: up to the bus, along it (and the trunk, between rows), down — or,
+ * for two cards in one box, inside the box; for two of General's cards, just under them.
+ */
 export function route(L, a, z, o) {
+  if (a.kind === "cell" && z.kind === "cell" && a.b === z.b) return inBox(L, a, z, o);
+  if (a.kind === "top" && z.kind === "top") return betweenTops(a, z, o);
   const p = outward(L, a, o), q = outward(L, z, o);
   const back = [...q.pts].reverse();
   if (Math.abs(p.bus - q.bus) < 1) return [...p.pts, ...back];
@@ -165,19 +287,63 @@ export function badgeAt(pts) {
   return best;
 }
 
+// ── Arrowheads (#2329) ──
+
+/** A line's stroke width (px) by its kind and phase: the work's and its report's are heavier, a team pair's the most. */
+export const strokeOf = (hue, phase) => (phase === "work" || phase === "return" ? 3 : hue === "team" ? 3.5 : 2.5);
+/**
+ * The arrowhead and the ends. In stroke widths (the markers' units, fleet-canvas.js): a head LEN long and WIDE across,
+ * the line's own stroke ending BACK inside it (its round cap under the head, never out past the tip); the source dot
+ * DOT across. In px: the tip GAP short of the card, the dot's centre START off its card; a head only on a last straight
+ * run that holds it and ROOM of line before it — else the line ends GAP short with none (its dot and pulse show the way).
+ */
+export const HEAD = { LEN: 2.8, WIDE: 2.3, BACK: 1.4, DOT: 2, GAP: 3.5, START: 5, ROOM: 1 };
+/** Whether a line of stroke `w` px whose last straight run is `run` px long gets a head. */
+export const headFits = (run, w) => run >= HEAD.GAP + HEAD.LEN * w + HEAD.ROOM;
+/** An orthogonal polyline without repeated points or points in the middle of a straight run. */
+function corners(pts) {
+  const q = pts.filter((pt, i) => !i || pt.x !== pts[i - 1].x || pt.y !== pts[i - 1].y).map((pt) => ({ x: pt.x, y: pt.y }));
+  return q.filter((pt, i) => i === 0 || i === q.length - 1 || !((q[i - 1].x === pt.x && pt.x === q[i + 1].x) || (q[i - 1].y === pt.y && pt.y === q[i + 1].y)));
+}
+/** Route `pts` as drawn: its start moved `a` px along its first run, its end `b` px back along its last (each keeps 1 px). */
+export function trimEnds(pts, a, b) {
+  const q = corners(pts);
+  if (q.length < 2) return q;
+  const pull = (i, j, by) => {
+    const l = Math.hypot(q[j].x - q[i].x, q[j].y - q[i].y), t = Math.max(0, Math.min(by, l - 1)) / l;
+    q[i] = { x: q[i].x + (q[j].x - q[i].x) * t, y: q[i].y + (q[j].y - q[i].y) * t };
+  };
+  pull(0, 1, a);
+  pull(q.length - 1, q.length - 2, b);
+  return q;
+}
+/** The length of a route's last straight run. */
+export function lastRun(pts) {
+  const q = corners(pts);
+  return q.length < 2 ? 0 : Math.hypot(q[q.length - 1].x - q[q.length - 2].x, q[q.length - 1].y - q[q.length - 2].y);
+}
+
 // ── Edges ──
 
 /** The colour family of a kind: task, report, broadcast, and the rest (send, query, update). */
 export const hue = (kind) => (kind === "task" || kind === "report" || kind === "broadcast" ? kind : "send");
-const phaseOf = (it) => (it.fading ? "fading" : it.state === "queued" ? "queued" : "live");
-const RANK = { live: 0, queued: 1, fading: 2 };
+// A message: queued, live, fading. The work: in progress (work), its report coming back (return), or no report (stale).
+const phaseOf = (it) => it.phase || (it.fading ? "fading" : it.state === "queued" ? "queued" : "live");
+const RANK = { live: 0, return: 0, work: 1, queued: 2, fading: 3, stale: 3 };
+const settled = (phase) => (phase === "fading" || phase === "stale" ? "fading" : phase);
 
 /**
  * The lines to draw from the store's items on layout `L`. `far`: zoomed out (one line per team pair). Each edge:
- * { key, hue, phase, n, from, to, d, pts, badge } — `from`/`to` the instance (or team) names it joins, for search.
+ * { key, hue, phase, n, from, to, d, pts, w, head, badge, a, z, routed } — `from`/`to` the instance (or team) names it
+ * joins, for search; `pts` its route, end to end (on the cards); `d` the path drawn, its ends trimmed off the cards for
+ * the dot and the head (#2329); `w` its stroke width; `head` whether it has a head (headFits);
+ * `a`/`z` its two ends (fleet-route-scene.js routes the ones on cards). `routed` (#2182): the router's points by
+ * line key (fleet-route.js); a line it has none for keeps its lane route — or, while a new answer is on its way, the
+ * points the same two ends and kind had in the last one (a line changing phase keeps its place).
  */
-export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
+export function trafficEdges(items, L, { far = false, max = MAX_EDGES, routed = null } = {}) {
   if (!L.boxes.length && L.tops.length < 2) return [];
+  // A top's way out is the first row's bus: with no box there is none, so only top ↔ top lines (betweenTops) are drawn.
   const groups = new Map();
   const add = (key, g) => { const cur = groups.get(key); if (cur) { cur.n += g.n; cur.names.push(...g.names); } else groups.set(key, g); };
   const teamKey = (name) => { const t = teamOf(L, name); return t === null ? "\u0000general" : t ? t.key : undefined; };
@@ -195,7 +361,9 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
       const k = far ? "team" : "broadcast";
       const a = far ? teamEnd(it.from) : endOf(L, it.from), z = teamEnd(it.to);
       if (!a || !z) continue;
-      add(`${k}|${a.key}>${z.key}|${phase === "fading" ? "fading" : "live"}`, { a, z, hue: k === "team" ? "team" : "broadcast", phase: phase === "fading" ? "fading" : phase, n: 1, names });
+      // Queued and live messages share a line far away (as before); the work keeps its own.
+      const ph = settled(phase), lane = ph === "queued" ? "live" : ph;
+      add(`${k}|${a.key}>${z.key}|${lane}`, { a, z, hue: k === "team" ? "team" : "broadcast", phase: ph, n: 1, names });
       continue;
     }
     const a = endOf(L, it.from), z = endOf(L, it.to);
@@ -203,10 +371,23 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
     add(`${a.key}>${z.key}|${hue(it.kind)}|${phase}`, { a, z, hue: hue(it.kind), phase, n: 1, names });
   }
   const list = [...groups.entries()].sort((x, y) => RANK[x[1].phase] - RANK[y[1].phase]).slice(0, max);
+  const lent = new Set();
+  const routedBy = (key) => {
+    if (!routed || far) return null;
+    const exact = routed.get(key);
+    if (exact) return exact;
+    const kin = key.slice(0, key.lastIndexOf("|") + 1);
+    for (const [k, pts] of routed) if (k.startsWith(kin) && !groups.has(k) && !lent.has(k)) { lent.add(k); return pts; }
+    return null;
+  };
   return list.map(([key, g], i) => {
     const o = ((i % 7) - 3) * 7;                                                    // neighbours 7 px apart (within the ±22 px bus lane)
-    const pts = route(L, g.a, g.z, o);
-    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null };
+    const viaRouter = routedBy(key);
+    const pts = viaRouter ?? route(L, g.a, g.z, o);
+    const w = strokeOf(g.hue, g.phase), head = headFits(lastRun(pts), w);
+    const d = pathOf(trimEnds(pts, HEAD.START, HEAD.GAP + (head ? HEAD.BACK * w : 0)));
+    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d, pts, w, head, badge: g.n > 1 ? badgeAt(pts) : null,
+      a: g.a, z: g.z, routed: !!viaRouter };
   });
 }
 
@@ -214,10 +395,11 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
 export function sendingBy(items) {
   const out = new Map();
   for (const it of items) {
-    if (it.fading) continue;
+    if (it.fading || it.phase === "stale" || it.phase === "return") continue;
     const l = out.get(it.from) || [];
-    const key = `${it.kind}>${it.to}>${it.state}`;
-    if (!l.some((x) => x.key === key)) l.push({ key, kind: it.kind, to: it.to, queued: it.state === "queued" });
+    const working = it.phase === "work";
+    const key = `${it.kind}>${it.to}>${working ? "work" : it.state}`;
+    if (!l.some((x) => x.key === key)) l.push({ key, kind: it.kind, to: it.to, queued: it.state === "queued", working });
     out.set(it.from, l);
   }
   return out;

package/dist/ui/fleet-usage.js

@@ -183,6 +183,38 @@ export function zonesChanged(report) {
   return zones.length > 1 || (zones.length === 1 && zones[0] !== report.zone) ? zones : null;
 }
 
+/** Estimated pixel width of one character in the 9 px `.us-axis` label. */
+const LABEL_CHAR_W = 5.5;
+
+/**
+ * The 0-based indices of dates that should receive an x-axis label.
+ * Keeps the first (0) and last (n-1) when they are far enough apart not to
+ * overlap. When first and last are too close (n-1 < step), only the last
+ * (most recent) is shown — overlap-free takes precedence over keeping both
+ * ends. Intermediate labels are thinned so that no two consecutive shown
+ * labels are closer than `labelWidthPx` pixels apart.
+ *
+ * @param {number} n            Number of data points (dates).
+ * @param {number} slotPx       Pixels per slot (bar + gap).
+ * @param {number} labelWidthPx Estimated rendered width of one label.
+ * @returns {Set<number>}
+ */
+export function thinXLabels(n, slotPx, labelWidthPx) {
+  if (n <= 0) return new Set();
+  if (n === 1) return new Set([0]);
+  // Minimum slot steps between label centres (+ 2 px breathing room).
+  const step = Math.max(1, Math.ceil((labelWidthPx + 2) / slotPx));
+  // If first and last are too close to both be shown without overlap, keep
+  // only the last (most recent). The caller's "always first+last" contract
+  // is relaxed here: overlap-free takes precedence.
+  if (n - 1 < step) return new Set([n - 1]);
+  const idx = [0];
+  // Add intermediates that are at least `step` slots away from n-1.
+  for (let i = step; i < n - step; i += step) idx.push(i);
+  idx.push(n - 1); // always include last
+  return new Set(idx);
+}
+
 /** The trend's series: the top `TOP` agents by the measure over the range, then "others"; one value per date. */
 export function trendSeries(report, dates) {
   const priced = report.totals && report.totals.amount !== null && report.totals.amount > 0;
@@ -230,6 +262,8 @@ function Trend({ report, dates }) {
   const max = Math.max(...sums, 0) || 1;
   const what = s.priced ? tu("amount") : tu("trendTokens"), others = s.names.length > TOP;
   const label = others ? tu("trendLabel", what, TOP, dates[0], dates[dates.length - 1]) : tu("trendLabelAll", what, s.names.length, dates[0], dates[dates.length - 1]);
+  // Thin x-axis labels: "MM-DD" (5 chars) × LABEL_CHAR_W ≈ 27.5 px at 9 px sans-serif.
+  const shownLabels = thinXLabels(dates.length, slot, 5 * LABEL_CHAR_W);
   return html`<section class="us-trend card" aria-labelledby="us-trend-h">
     <h3 id="us-trend-h">${tu("trend")} <span class="note">· ${s.priced ? tu("amount") : tu("trendTokens")}</span></h3>
     <p class="note us-scale">${tu("scale", fmtMeasure(s.priced, max))}</p>
@@ -243,7 +277,7 @@ function Trend({ report, dates }) {
           const h = v[i] > 0 ? Math.max(1, ((base - top) * v[i]) / max) : 0;
           y -= h;
           return h ? html`<rect key=${k} class=${`us-s${k}`} x=${left + i * slot + 2} y=${y} width=${slot - 4} height=${h}><title>${`${date} · ${s.names[k]}: ${fmtMeasure(s.priced, v[i])}`}</title></rect>` : null;
-        })}${(dates.length - 1 - i) % 7 === 0 || dates.length <= 8 ? html`<text class="us-axis" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
+        })}${shownLabels.has(i) ? html`<text class="us-axis us-xlabel" x=${left + i * slot + slot / 2} y=${H - 6} text-anchor="middle">${date.slice(5)}</text>` : null}</g>`;
       })}
     </svg></div>
     <${EarlierHint} wide=${wide} />
@@ -287,7 +321,7 @@ function Row({ r, group, max, measure }) {
   const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.join(", ")].filter(Boolean).join(" · ");
   return html`<tr class="us-row">
     <th scope="row" class="us-name"><span class="mono">${keyText(group, r.key)}</span>
-      <svg class="us-bar" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true"><rect class="us-bar-bg" width="100" height="6" rx="3" /><rect class="us-bar-fg" width=${Math.round(share * 100)} height="6" rx="3" /></svg>
+      <svg class="us-bar" aria-hidden="true"><rect class="us-bar-bg" width="100%" height="6" rx="3" /><rect class="us-bar-fg" width=${`${Math.round(share * 100)}%`} height="6" rx="3" /></svg>
       ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}
       ${r.flags.length ? html`<span class="us-flags">${r.flags.map((f) => html`<span key=${f} class="ch-tag">${flagText(f, r)}</span>`)}</span>` : null}</th>
     <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>

package/dist/ui/guest-refused.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<meta name="robots" content="noindex">
+<title>AgEnD</title>
+<!--app-icon-->
+<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 64x64">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
+<!--/app-icon-->
+<script src="/assets/theme.js"></script>
+<link rel="stylesheet" href="/assets/tokens.css">
+<style>
+  /* What a guest's browser gets for a page it cannot open (#2399 smoke: it was the gate's bare JSON). The sign-in
+     page's look: the app's tokens, light and dark (theme.js before paint). */
+  * { box-sizing: border-box; }
+  body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
+         background: var(--bg); color: var(--text); font: var(--fw-regular) var(--fs-md)/var(--lh-md) var(--font-ui); -webkit-font-smoothing: antialiased; }
+  main { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; }
+  .brand { margin: 0 0 18px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
+  h1 { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
+  p { margin: 0 0 18px; color: var(--text-2); }
+  a.go { display: block; width: 100%; padding: 12px; text-align: center; text-decoration: none; font: var(--fw-semibold) var(--fs-md) var(--font-ui);
+         color: var(--on-accent); background: var(--accent-fill); border-radius: var(--r-full); }
+  a.go:hover { opacity: .88; }
+  a.go:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
+</style>
+</head>
+<body>
+<main id="refused" data-why="__WHY__">
+  <div class="brand">AgEnD</div>
+  <h1 id="title">This page is not open to guests</h1>
+  <p id="lead">This page is for the fleet's members. As a guest you can use the chats shared with you.</p>
+  <a id="go" class="go" href="/ui">Open your chats</a>
+</main>
+<script src="/assets/guest-refused.js"></script>
+</body>
+</html>

package/dist/ui/image-lightbox.js

@@ -5,10 +5,14 @@
 //
 // The native <dialog> opened with showModal(): the browser traps focus and makes the rest inert. No style attribute
 // (#1300): classes only. Only a file URL the chat itself rendered (/ui/file/<32 hex>) is ever shown.
+//
+// #2333: zoom and pan (image-zoom.js). The toolbar has −, the level (it toggles fit ↔ 100%), + and Fit width; the keys
+// + / − / 0 (fit) / 1 (100%) / W (fit width). Each image opens fitted; stepping to another fits it again.
 import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { t } from "/assets/app-i18n.js";
 import { createStore, useStore } from "/assets/app-store.js";
 import { Icon } from "/assets/ui-icons.js";
+import { createZoom, STEP } from "./image-zoom.js";
 
 const FILE_URL = /^\/ui\/file\/[0-9a-f]{32}$/;
 /** What is shown: { items: [{ src, name }], index, opener } or null. One per page; the chat that shows it owns it. */
@@ -54,6 +58,10 @@ function ImageLightbox({ items, index, opener, onClose }) {
   const [at, setAt] = useState(index);
   const ref = useRef(null);
   const close = useRef(null);
+  const stage = useRef(null);
+  const img = useRef(null);
+  const zoom = useRef(null);
+  const [level, setLevel] = useState(null);   // { scale, fit, mode } once the picture has loaded
   const item = items[at] || items[0];
   const many = items.length > 1;
   const step = (d) => setAt((n) => (n + d + items.length) % items.length);
@@ -69,6 +77,25 @@ function ImageLightbox({ items, index, opener, onClose }) {
       if (opener && typeof opener.focus === "function" && document.contains?.(opener)) opener.focus();
     };
   }, []);
+  useEffect(() => {
+    if (!stage.current || !img.current) return undefined;
+    const z = createZoom({ stage: stage.current, img: img.current, onChange: setLevel });
+    zoom.current = z;
+    return () => { z.destroy(); zoom.current = null; };
+  }, []);
+  // Another image: hidden until it has loaded and been fitted (its load resets the zoom). A layout effect — in the same
+  // commit that set the new src, before any load can arrive: a picture already in the cache (every thumbnail above it
+  // has loaded) fires its load before a passive effect would run, and such an effect then hid it for good with the
+  // level at "…" (the report on beta.24: Next "flashes once, then the next image is not visible"). A picture that is
+  // already complete here (the same file again: no load comes) is fitted at once.
+  const first = useRef(true);
+  useLayoutEffect(() => {
+    if (first.current) { first.current = false; return; }
+    const el = img.current;
+    if (el) el.classList.remove("lb-ready");
+    setLevel(null);
+    if (el && el.complete && el.naturalWidth > 0 && zoom.current) zoom.current.reset();
+  }, [at]);
   useEffect(() => {
     const d = ref.current;
     if (!d) return undefined;
@@ -80,6 +107,12 @@ function ImageLightbox({ items, index, opener, onClose }) {
     // The dark area (the dialog itself, or the stage around the image) closes it; the image and the controls do not.
     const onClick = (e) => { if (e.target === d || (e.target && e.target.classList && e.target.classList.contains("lb-stage"))) onClose(); };
     const onKey = (e) => {
+      const z = zoom.current;
+      if (z && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        const act = { "+": () => z.zoomBy(STEP), "=": () => z.zoomBy(STEP), "-": () => z.zoomBy(1 / STEP), "_": () => z.zoomBy(1 / STEP),
+          "0": () => z.fit(), "1": () => z.actual(), w: () => z.fitWidth(), W: () => z.fitWidth() }[e.key];
+        if (act) { e.preventDefault(); act(); return; }
+      }
       if (!many) return;
       if (e.key === "ArrowRight") { e.preventDefault(); step(1); } else if (e.key === "ArrowLeft") { e.preventDefault(); step(-1); }
     };
@@ -90,14 +123,25 @@ function ImageLightbox({ items, index, opener, onClose }) {
     return () => { d.removeEventListener("cancel", onCancel); d.removeEventListener("close", onNativeClose); d.removeEventListener("click", onClick); d.removeEventListener("keydown", onKey); };
   }, [onClose, many, items.length]);
   const label = item.name ? t("chat.lbLabel", item.name) : t("chat.lbLabelNoName");
+  const pct = level ? Math.round(level.scale * 100) : null;
   return html`<dialog data-trust="lightbox" ref=${ref} class="lb" role="dialog" aria-modal="true" aria-label=${label}>
     <div class="lb-bar">
       <span class="lb-name" title=${item.name}>${item.name}</span>
       ${many ? html`<span class="lb-count">${t("chat.lbCount", at + 1, items.length)}</span>` : null}
+      <span class="lb-zoom" role="group">
+        <button type="button" class="icon-btn lb-zoom-out" disabled=${!level} aria-label=${t("chat.lbZoomOut")} title=${t("chat.lbZoomOut")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(1 / STEP)}><${Icon} name="minus" /></button>
+        <button type="button" class="btn btn-sm lb-level" disabled=${!level} aria-label=${t("chat.lbZoomLevel", pct ?? "")} title=${t("chat.lbZoomLevel", pct ?? "")}
+          onClick=${() => zoom.current && zoom.current.toggle()}>${pct === null ? "…" : `${pct}%`}</button>
+        <button type="button" class="icon-btn lb-zoom-in" disabled=${!level} aria-label=${t("chat.lbZoomIn")} title=${t("chat.lbZoomIn")}
+          onClick=${() => zoom.current && zoom.current.zoomBy(STEP)}><${Icon} name="plus" /></button>
+        <button type="button" class=${`icon-btn lb-fit-width${level && level.mode === "width" ? " on" : ""}`} disabled=${!level} aria-pressed=${level && level.mode === "width" ? "true" : "false"}
+          aria-label=${t("chat.lbFitWidth")} title=${t("chat.lbFitWidth")} onClick=${() => zoom.current && zoom.current.fitWidth()}><${Icon} name="fitwidth" /></button>
+      </span>
       <a class="btn btn-sm lb-orig" href=${item.src} target="_blank" rel="noopener noreferrer"><${Icon} name="external" size=${14} /><span class="lbl">${t("chat.lbOpenOriginal")}</span></a>
       <button type="button" class="icon-btn lb-close" ref=${close} aria-label=${t("chat.lbClose")} title=${t("chat.lbClose")} onClick=${onClose}><${Icon} name="close" /></button>
     </div>
-    <div class="lb-stage"><img class="lb-img" src=${item.src} alt=${item.name} /></div>
+    <div class="lb-stage" ref=${stage}><img class="lb-img" ref=${img} src=${item.src} alt=${item.name} draggable=${false} /></div>
     ${many ? html`<button type="button" class="icon-btn lb-nav lb-prev" aria-label=${t("chat.lbPrev")} title=${t("chat.lbPrev")} onClick=${() => step(-1)}><${Icon} name="back" /></button>
       <button type="button" class="icon-btn lb-nav lb-next" aria-label=${t("chat.lbNext")} title=${t("chat.lbNext")} onClick=${() => step(1)}><${Icon} name="forward" /></button>` : null}
   </dialog>`;