@songsid/agend 2.3.0-beta.8 → 2.3.0-beta.9

package/dist/ui/fleet-canvas.js

@@ -37,6 +37,7 @@ register("orgc", {
     openChat: "Open chat", minimap: "Overview: click to move there",
     live: "Live", liveOn: "Hide live traffic", liveOff: "Show live traffic", lgTask: "delegate_task", lgSend: "send_to_instance",
     lgReport: "report_result", lgBroadcast: "broadcast", lgQueued: "queued", lgFading: "delivered", lgTeam: "between teams", legend: "Key",
+    lgWork: "in progress (until its report)", lgReturn: "done (report back)", lgStale: "no report yet",
   },
   "zh-TW": {
     view: "檢視", canvas: "畫布", list: "清單", find: "尋找 instance", findShort: "尋找", found: "找到 {0} 個", foundOne: "找到 1 個", noMatch: "沒有符合的",
@@ -46,6 +47,7 @@ register("orgc", {
     openChat: "開啟聊天", minimap: "總覽：點一下移到那裡",
     live: "即時", liveOn: "隱藏即時往來", liveOff: "顯示即時往來", lgTask: "delegate_task", lgSend: "send_to_instance",
     lgReport: "report_result", lgBroadcast: "broadcast", lgQueued: "排隊中", lgFading: "已送達", lgTeam: "team 之間", legend: "圖例",
+    lgWork: "進行中（直到回報）", lgReturn: "完成（回報送回）", lgStale: "尚未回報",
   },
 });
 const tc = (k, ...v) => t(`orgc.${k}`, ...v);
@@ -148,14 +150,31 @@ function Card({ c, lead, cls, onOpen }) {
   </g>`;
 }
 
-function TeamBox({ b, q, onFold }) {
-  const name = b.name === null ? t("org.unteamed") : b.name;
-  const found = q ? b.nodes.filter((n) => hits(n, q)).length : 0;
-  const count = b.nodes.length === 1 ? tc("member") : tc("members", b.nodes.length);
-  const toggle = (e) => { if (e.type === "click" || e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); onFold(b.key); } };
+function teamName(b) { return b.name === null ? t("org.unteamed") : b.name; }
+const foundIn = (b, q) => (q ? b.nodes.filter((n) => hits(n, q)).length : 0);
+
+/** A team's box: its frame, header band and (folded) summary — under the traffic lines. */
+function TeamBox({ b, q }) {
+  const found = foundIn(b, q);
   return html`<g class=${`oc-team${b.loose ? " loose" : ""}${q && !found ? " dim" : ""}`} data-team=${b.key}>
     <rect class=${`oc-box${b.folded && found ? " match" : ""}`} x=${b.x} y=${b.y} width=${b.w} height=${b.h} rx="12" />
     <rect class="oc-head" x=${b.x + 1} y=${b.y + 1} width=${b.w - 2} height=${OC.HEAD - 2} rx="11" />
+    ${!b.nodes.length ? html`<text class="oc-team-sum" x=${b.x + 14} y=${b.y + OC.HEAD + 18}>${tc("noMembers")}</text>` : null}
+    ${b.folded ? b.summary.flatMap((row, i) => row.map((it) => html`<g key=${it.s}>
+      <circle class=${`oc-dot st-${it.s}`} cx=${b.x + it.dx + 5} cy=${b.y + OC.HEAD + 14 + i * SUM_LINE} r="5" />
+      <text class="oc-team-sum" x=${b.x + it.dx + 14} y=${b.y + OC.HEAD + 18 + i * SUM_LINE}>${it.label}</text></g>`)) : null}
+  </g>`;
+}
+
+/**
+ * A team's header: the fold control, its name and count — above the traffic lines (#1918 review: a line leaving the box
+ * through its header ran over the count), so it stays readable and clickable.
+ */
+function TeamHead({ b, q, onFold }) {
+  const name = teamName(b), found = foundIn(b, q);
+  const count = b.nodes.length === 1 ? tc("member") : tc("members", b.nodes.length);
+  const toggle = (e) => { if (e.type === "click" || e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); onFold(b.key); } };
+  return html`<g class=${`oc-team-head${q && !found ? " dim" : ""}`} data-team=${b.key}>
     <g class=${`oc-toggle${b.nodes.length ? "" : " empty"}`} tabindex=${b.nodes.length ? "0" : undefined} role=${b.nodes.length ? "button" : undefined}
       aria-expanded=${b.nodes.length ? String(!b.folded) : undefined} aria-label=${`${name}, ${count}.${b.nodes.length ? ` ${b.folded ? tc("expand") : tc("collapse")}.` : ""}`}
       onClick=${b.nodes.length ? toggle : undefined} onKeyDown=${b.nodes.length ? toggle : undefined}>
@@ -164,10 +183,6 @@ function TeamBox({ b, q, onFold }) {
       <text class="oc-team-name" x=${b.x + (b.nodes.length ? 28 : 14)} y=${b.y + 22}>${clip(name, Math.max(8, Math.floor((b.w - 90) / 7.5)))}</text>
       <text class="oc-team-meta" x=${b.x + b.w - 12} y=${b.y + 22} text-anchor="end">${b.folded && found ? tc("inFolded", found) : String(b.nodes.length)}</text>
     </g>
-    ${!b.nodes.length ? html`<text class="oc-team-sum" x=${b.x + 14} y=${b.y + OC.HEAD + 18}>${tc("noMembers")}</text>` : null}
-    ${b.folded ? b.summary.flatMap((row, i) => row.map((it) => html`<g key=${it.s}>
-      <circle class=${`oc-dot st-${it.s}`} cx=${b.x + it.dx + 5} cy=${b.y + OC.HEAD + 14 + i * SUM_LINE} r="5" />
-      <text class="oc-team-sum" x=${b.x + it.dx + 14} y=${b.y + OC.HEAD + 18 + i * SUM_LINE}>${it.label}</text></g>`)) : null}
   </g>`;
 }
 
@@ -176,28 +191,42 @@ const cardsOf = (L) => [...L.tops, ...L.boxes.flatMap((b) => b.cells)];
 
 const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 
-/** The traffic lines: dotted while queued, a dash and a pulse while delivering, fading once delivered; ×N on shared lines. */
+/**
+ * The traffic lines: dotted while queued, a dash and a pulse while delivering, fading once delivered; a delegation's
+ * slow moving dash while its work is in progress, one pulse back when its report comes, a faint dash when none came;
+ * ×N on shared lines.
+ */
+const MARKER = (e) => (e.phase === "fading" || e.phase === "stale" ? "fading" : e.hue);
 function TrafficLayer({ edges, q }) {
   const still = reducedMotion();
   return html`<g class="oc-flows" aria-hidden="true">${edges.map((e) => {
     const dim = q && !e.names.some((n) => n.toLowerCase().includes(q));
     return html`<g key=${e.key} class=${`oc-fl${dim ? " dim" : ""}`}>
       <path class="oc-flow-halo" d=${e.d} />
-      <path class=${`oc-flow h-${e.hue} ph-${e.phase}`} d=${e.d} marker-start=${`url(#oc-src-${e.phase === "fading" ? "fading" : e.hue})`} marker-end=${`url(#oc-ah-${e.phase === "fading" ? "fading" : e.hue})`} />
+      <path class=${`oc-flow h-${e.hue} ph-${e.phase}`} d=${e.d} marker-start=${`url(#oc-src-${MARKER(e)})`} marker-end=${`url(#oc-ah-${MARKER(e)})`} />
       ${e.phase === "live" && !still ? html`<circle class=${`oc-pulse h-${e.hue}`} r="4"><animateMotion dur=${`${Math.max(1.6, e.pts.length * 0.3)}s`} repeatCount="indefinite" path=${e.d} /></circle>` : null}
+      ${e.phase === "return" && !still ? html`<circle class=${`oc-pulse h-${e.hue}`} r="5"><animateMotion dur="1.6s" repeatCount="1" fill="freeze" path=${e.d} /></circle>` : null}
       ${e.badge ? html`<g class="oc-badge" transform=${`translate(${e.badge.x - 14} ${e.badge.y - 10})`}><rect width="28" height="20" rx="10" /><text x="14" y="14" text-anchor="middle">${`×${e.n}`}</text></g>` : null}
     </g>`;
   })}</g>`;
 }
 const ARROWS = ["task", "send", "report", "broadcast", "team", "fading"];
 
-/** The key to the lines: folded until the person opens it (open, it covers a corner of the canvas); kept per device. */
+/**
+ * The key to the lines (#2052): a **Key** toggle in the toolbar; open, its rows are a strip between the toolbar and the
+ * canvas — never over the canvas, so it covers no card (it used to sit in the canvas's bottom-left corner, over the
+ * team there at the opening view). Folded until the person opens it; kept per device.
+ */
+function readKeyOpen() { try { return localStorage.getItem(KEY_KEY) === "1"; } catch { return false; } }
+function KeyToggle({ open, onToggle }) {
+  return html`<button type="button" class=${`btn btn-sm oc-key${open ? " on" : ""}`} aria-expanded=${open ? "true" : "false"} aria-controls="oc-legend"
+    onClick=${onToggle}>${tc("legend")}</button>`;
+}
 function Legend() {
-  const [open] = useState(() => { try { return localStorage.getItem(KEY_KEY) === "1"; } catch { return false; } });
   const row = (cls, k) => html`<span class="oc-lg"><i class=${`oc-sw ${cls}`} aria-hidden="true"></i>${tc(k)}</span>`;
-  return html`<details class="oc-legend" open=${open} onToggle=${(e) => save(KEY_KEY, e.currentTarget.open ? "1" : "0")}><summary>${tc("legend")}</summary>
+  return html`<div id="oc-legend" class="oc-legend" role="region" aria-label=${tc("legend")}>
     <div class="oc-lg-rows">${row("h-task", "lgTask")}${row("h-send", "lgSend")}${row("h-report", "lgReport")}${row("h-broadcast", "lgBroadcast")}
-    ${row("ph-queued", "lgQueued")}${row("ph-fading", "lgFading")}</div></details>`;
+    ${row("ph-queued", "lgQueued")}${row("ph-fading", "lgFading")}${row("h-task ph-work", "lgWork")}${row("h-report ph-return", "lgReturn")}${row("ph-stale", "lgStale")}</div></div>`;
 }
 
 /**
@@ -212,11 +241,13 @@ function useTraffic(lease, on) {
     if (!on || !lease) return undefined;
     const bump = () => setRev((n) => n + 1);
     const read = async () => {
+      // What the stream had said when this was asked for: a stream event after it makes the answer possibly older.
+      const since = store.streamRev();
       try {
         const r = await lease.fetch("/ui/traffic", { method: "GET", headers: { "Content-Type": "application/json" } });
         if (!lease.current() || !r.ok) return;
         const d = await r.json();
-        if (lease.current() && store.load(d)) bump();
+        if (lease.current() && store.load(d, undefined, since)) bump();
       } catch { /* the next poll, or the stream, brings it */ }
     };
     void read();
@@ -226,6 +257,7 @@ function useTraffic(lease, on) {
     const offs = [];
     if (sub) {
       offs.push(lease.hold(sub("traffic", (item) => { if (store.apply(item)) bump(); })));
+      offs.push(lease.hold(sub("delegation", (d) => { if (store.delegation(d)) bump(); })));
       offs.push(lease.hold(sub("connection", (c) => { if (c === "live") void read(); })));
     }
     const hs = [
@@ -383,15 +415,15 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
           <circle cx="5" cy="5" r="4" class=${`oc-ah h-${a}`} /></marker>`)}</defs>
       <g ref=${worldRef} class="oc-world">
         <g class="oc-tree">${L.tree.map((d, i) => html`<path key=${i} d=${d} />`)}</g>
-        <g class="oc-teams">${L.boxes.map((b) => html`<${TeamBox} key=${b.key} b=${b} q=${q} onFold=${onFold} />`)}</g>
+        <g class="oc-teams">${L.boxes.map((b) => html`<${TeamBox} key=${b.key} b=${b} q=${q} />`)}</g>
         <${TrafficLayer} edges=${edges} q=${q} />
+        <g class="oc-heads">${L.boxes.map((b) => html`<${TeamHead} key=${b.key} b=${b} q=${q} onFold=${onFold} />`)}</g>
         <g class="oc-cards">
           ${L.tops.map((c) => html`<${Card} key=${c.key} c=${c} lead=${true} cls=${q ? (hits(c.node, q) ? "match" : "dim") : ""} onOpen=${open} />`)}
           ${L.boxes.flatMap((b) => b.cells.map((c) => html`<${Card} key=${c.key} c=${c} lead=${false} cls=${q ? (hits(c.node, q) ? "match" : "dim") : ""} onOpen=${open} />`))}
         </g>
       </g>
     </svg>
-    ${traffic ? html`<${Legend} />` : null}
     <div class="oc-zoom" role="group" aria-label=${tc("view")}>
       <button type="button" class="icon-btn" aria-label=${tc("zoomIn")} title=${tc("zoomIn")} onClick=${() => zoomBy(1.25)}><${Icon} name="plus" size=${16} /></button>
       <button type="button" class="icon-btn" aria-label=${tc("zoomOut")} title=${tc("zoomOut")} onClick=${() => zoomBy(0.8)}><span aria-hidden="true">−</span></button>
@@ -469,6 +501,8 @@ export function OrgCanvas({ org, app, lease }) {
     if (holder && folded.has(holder[0])) onFold(holder[0]);
     setJump({ name: first.name, at: Date.now() });
   };
+  const [keyOpen, setKeyOpen] = useState(readKeyOpen);
+  const toggleKey = () => setKeyOpen((v) => { save(KEY_KEY, v ? "0" : "1"); return !v; });
   const modeBtn = (m) => html`<button type="button" class=${`btn btn-sm${mode === m ? " btn-primary" : ""}`} aria-pressed=${mode === m ? "true" : "false"}
     onClick=${() => setMode(m)}>${tc(m)}</button>`;
   return html`<div class=${`org oc oc-${mode}`}>
@@ -478,11 +512,13 @@ export function OrgCanvas({ org, app, lease }) {
         ${mode === "canvas" ? html`<label class="s-search oc-find"><${Icon} name="search" size=${14} /><span class="sr-only">${tc("find")}</span>
           <input type="search" value=${query} placeholder=${tc("findShort")} autocomplete="off" onInput=${(e) => setQuery(e.target.value)} onKeyDown=${onFind} />
           ${q ? html`<span class="oc-found" role="status">${found ? (found === 1 ? tc("foundOne") : tc("found", found)) : tc("noMatch")}</span>` : null}</label>` : null}
+        ${mode === "canvas" && live ? html`<${KeyToggle} open=${keyOpen} onToggle=${toggleKey} />` : null}
         <button type="button" class=${`btn btn-sm oc-live${live ? " on" : ""}`} aria-pressed=${live ? "true" : "false"} title=${live ? tc("liveOn") : tc("liveOff")}
           onClick=${() => setLive((v) => !v)}><span class="oc-live-dot" aria-hidden="true"></span>${tc("live")}</button>
         <div class="seg-inline" role="group" aria-label=${tc("view")}>${modeBtn("canvas")}${modeBtn("list")}</div>
       </div>
     </div>
+    ${mode === "canvas" && live && keyOpen ? html`<${Legend} />` : null}
     ${mode === "list" ? html`<${OrgChart} org=${org} app=${app} bare=${true} sending=${sending} />`
       : html`<${Canvas} view=${view} folded=${folded} onFold=${onFold} q=${q} jump=${jump} traffic=${live ? traffic : null} />`}
   </div>`;

package/dist/ui/fleet-org.js

@@ -20,7 +20,7 @@ register("org", {
     missing: "Not in the fleet", thread_discord: "Discord thread", thread_telegram: "Telegram topic", openChat: "Open chat",
     classic: "ClassicBot room", empty: "No instances yet", emptyHint: "Instances and teams show here once the fleet has them.",
     noTeams: "No teams yet — define them in Fleet → Teams to group the chart.", newTab: "(opens in a new tab)",
-    sending: "Sending:", queuedNote: "(queued)",
+    sending: "Sending:", queuedNote: "(queued)", workingNote: "(in progress)",
   },
   "zh-TW": {
     title: "組織圖", general: "General", unteamed: "未加入 team", members: "{0} 名成員", member: "1 名成員", instances: "{0} 個 instance", instance: "1 個 instance",
@@ -28,7 +28,7 @@ register("org", {
     missing: "不在 fleet 中", thread_discord: "Discord 討論串", thread_telegram: "Telegram topic", openChat: "開啟聊天",
     classic: "ClassicBot 頻道", empty: "還沒有 instance", emptyHint: "fleet 有 instance 和 team 後會顯示在這裡。",
     noTeams: "還沒有 team——到 Fleet → Teams 定義後，組織圖會依 team 分組。", newTab: "（在新分頁開啟）",
-    sending: "傳送中：", queuedNote: "（排隊中）",
+    sending: "傳送中：", queuedNote: "（排隊中）", workingNote: "（進行中）",
   },
 });
 const to = (k, ...v) => t(`org.${k}`, ...v);
@@ -95,7 +95,7 @@ export function OrgSummary({ counts }) {
 /** #1918: what an instance is sending now, in words — the canvas's live traffic for the list (and a screen reader). */
 const KIND_WORD = { task: "delegate_task", report: "report_result", query: "request_information", update: "send_to_instance", send: "send_to_instance", broadcast: "broadcast" };
 function Sending({ list }) {
-  return html`<p class="org-sending"><span class="muted">${to("sending")}</span> ${list.map((s, i) => html`<span key=${s.key} class=${`org-send k-${s.kind}`}>${i ? ", " : ""}${KIND_WORD[s.kind] || s.kind} → ${s.to}${s.queued ? ` ${to("queuedNote")}` : ""}</span>`)}</p>`;
+  return html`<p class="org-sending"><span class="muted">${to("sending")}</span> ${list.map((s, i) => html`<span key=${s.key} class=${`org-send k-${s.kind}`}>${i ? ", " : ""}${KIND_WORD[s.kind] || s.kind} → ${s.to}${s.working ? ` ${to("workingNote")}` : s.queued ? ` ${to("queuedNote")}` : ""}</span>`)}</p>`;
 }
 
 function Node({ n, sending }) {

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,9 @@ 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. */
+const laneOffset = (o) => Math.max(-OC.PAD / 2 + 6, Math.min(OC.PAD / 2 - 6, o * 0.5));
+
 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) {
@@ -118,7 +196,7 @@ function outward(L, end, o) {
   }
   const { PAD, GAP, NW, NH } = OC;
   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 io = laneOffset(o);
   const leftLane = b.x + PAD / 2 + io, rightLane = b.x + b.w - PAD / 2 + io;
   let pts;
   if (col === 0 || col === b.cols - 1) {
@@ -134,8 +212,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 { PAD, GAP, NW, NH } = OC;
+  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);
+  const left = lane < b.x + b.w / 2;
+  if ((left && col === 0) || (!left && col === b.cols - 1)) {
+    const cy = card.y + NH / 2 + io;
+    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 } = OC;
+  const io = laneOffset(o);
+  const mid = ((a.i % b.cols) + (z.i % b.cols)) / 2;
+  const lane = mid <= (b.cols - 1) / 2 ? b.x + PAD / 2 + io : b.x + b.w - PAD / 2 + io;
+  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];
@@ -169,8 +282,10 @@ export function badgeAt(pts) {
 
 /** 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:
@@ -178,6 +293,7 @@ const RANK = { live: 0, queued: 1, fading: 2 };
  */
 export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
   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 +311,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);
@@ -214,10 +332,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;