@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/effect-trial-controller.js

@@ -5,7 +5,7 @@ import { chatEffectIdentity } from "/assets/effect-chat-runtime.js";
 const owners = new WeakSet(), safe = fn => { try { return fn(); } catch { return null; } };
 const LIMIT = 128 * 1024;
 export function createEffectTrialController({ window: host, current, allowed, onStart, onChange = () => {} }) {
-  let dead = false, active = null, physical = null, previous = null, broken = false, clockBusy = false;
+  let dead = false, active = null, physical = null, previous = null, broken = false, clockBusy = false, endedReason = null, endedOffer = null;
   const cleanup = [], releases = [], identity = safe(() => chatEffectIdentity(host));
   const tell = () => { if (!dead) safe(onChange); };
   function clock() {
@@ -26,11 +26,16 @@ export function createEffectTrialController({ window: host, current, allowed, on
   }
   function end(op, reason = "stopped") {
     if (!op || op.dead) return false;
-    op.dead = true; if (active === op) active = null; safe(() => op.resolve?.(false));
+    op.dead = true; if (active === op) active = null;
+    endedReason = typeof reason === "string" && /^[a-z][a-z0-9_]{0,79}$/.test(reason) ? reason : "trial_failed";
+    endedOffer = op.offer.offer;
+    safe(() => op.resolve?.(false));
     safe(() => host.clearTimeout(op.timer)); safe(() => op.controller.abort());
     if (op.reply && !op.stopQueued) { op.stopQueued = true; cleanup.push(op); }
     // Physical paint is removed before callbacks, cleanup I/O or another explicit click.
-    safe(() => op.dispose?.()); op.dispose = null; tell(); drain(); return true;
+    safe(() => op.dispose?.()); op.dispose = null;
+    if (!["stopped", "replaced"].includes(endedReason)) safe(() => host.console?.warn("[AgEnD effects] Try stopped:", endedReason));
+    tell(); drain(); return true;
   }
   function arm(op) {
     safe(() => host.clearTimeout(op.timer));
@@ -67,7 +72,7 @@ export function createEffectTrialController({ window: host, current, allowed, on
     if (dead) return; dead = true; end(active); for (const off of releases.splice(0)) safe(off); tell();
   }
   const api = { ok: false, start: async () => false, stop: () => end(active), sync() { const op = active; if (op && !eligible(op)) end(op, "trial_ended"); },
-    snapshot: () => Object.freeze({ busy: !!physical || cleanup.length > 0, phase: active ? active.reply ? "running" : "starting" : "idle" }), dispose };
+    snapshot: () => Object.freeze({ busy: !!physical || cleanup.length > 0, phase: active ? active.reply ? "running" : "starting" : "idle", reason: active ? null : endedReason, offer: active ? active.offer.offer : endedOffer }), dispose };
   if (!identity || owners.has(host) || typeof current !== "function" || typeof allowed !== "function" || typeof onStart !== "function"
     || typeof host.AgendAuth?.trialSession !== "function" || typeof host.AgendAuth?.onSessionEnd !== "function") return Object.freeze(api);
   owners.add(host);
@@ -75,7 +80,7 @@ export function createEffectTrialController({ window: host, current, allowed, on
     const off = host.AgendAuth.onSessionEnd(dispose);
     if (dead) { safe(off); return Object.freeze(api); }
     releases.push(off);
-    for (const [target, type, fn] of [[host, "blur", () => end(active)], [host, "pagehide", dispose], [host.document, "visibilitychange", () => { if (host.document.visibilityState !== "visible") end(active); }]]) {
+    for (const [target, type, fn] of [[host, "blur", () => end(active, "trial_window_blur")], [host, "pagehide", dispose], [host.document, "visibilitychange", () => { if (host.document.visibilityState !== "visible") end(active, "hidden"); }]]) {
       target.addEventListener(type, fn); releases.push(() => target.removeEventListener(type, fn));
     }
   } catch { dispose(); return Object.freeze(api); }
@@ -86,7 +91,7 @@ export function createEffectTrialController({ window: host, current, allowed, on
     const offer = safe(() => effectTrialMessage(message)), instance = safe(() => message.instance), began = clock();
     if (!offer || began === null || began + 10000 > Number.MAX_SAFE_INTEGER || safe(() => host.Date.now() < offer.expiresAt) !== true) return false;
     const op = { instance, offer, began, until: began + 10000, controller: new host.AbortController(), timer: null, reply: null, dead: false, stopQueued: false, dispose: null };
-    active = op; const token = {}; physical = token;
+    endedReason = null; endedOffer = null; active = op; const token = {}; physical = token;
     const cancelled = new Promise(resolve => { op.resolve = resolve; });
     const work = Promise.resolve().then(async () => {
       if (!eligible(op)) return false;
@@ -105,12 +110,12 @@ export function createEffectTrialController({ window: host, current, allowed, on
       op.until = began + reply.remainingMs;
       if (op.until > Number.MAX_SAFE_INTEGER || !eligible(op)) return false;
       arm(op);
-      const handle = Object.freeze({ reply, startedAt: began, instance, current: () => eligible(op), stop: () => end(op), });
+      const handle = Object.freeze({ reply, startedAt: began, instance, current: () => eligible(op), stop: (reason = "stopped") => end(op, reason), });
       const disposer = onStart(handle);
       if (typeof disposer !== "function") return false;
       if (!eligible(op)) { safe(disposer); return false; }
       op.dispose = disposer; tell(); return eligible(op);
-    }).catch(() => false).then(ok => { if (!ok) end(op); return ok; }).finally(() => { if (physical === token) physical = null; tell(); drain(); });
+    }).catch(() => false).then(ok => { if (!ok) end(op, "trial_start_failed"); return ok; }).finally(() => { if (physical === token) physical = null; tell(); drain(); });
     // The logical caller may stop immediately, while the physical request/cancel still owns the lane.
     tell();
     return Promise.race([work, cancelled]);

package/dist/ui/effect-trial-offer.js

@@ -1,31 +1,2 @@
-/** #1629: closed host display metadata. Neither this object nor its token grants a trial read. */
-const KEYS = ["v", "offer", "id", "title", "expiresAt"], ID = /^[0-9a-f]{32}$/;
-const FORBIDDEN = /(?!\u200d)[\p{Cc}\p{Cf}\p{Zl}\p{Zp}]/u;
-const VISIBLE = /[^\p{M}\p{C}\p{Z}\u115f\u1160\u3164\uffa0\u2800]/u;
-let graphemes = null;
-export function checkEffectTrialOffer(value) {
-  try {
-    if (!value || ![Object.prototype, null].includes(Object.getPrototypeOf(value))) return null;
-    const keys = Reflect.ownKeys(value);
-    if (keys.length !== KEYS.length || keys.some(k => typeof k !== "string" || !KEYS.includes(k))) return null;
-    const x = Object.create(null);
-    for (const key of KEYS) {
-      const d = Object.getOwnPropertyDescriptor(value, key);
-      if (!d || !("value" in d) || !d.enumerable) return null;
-      x[key] = d.value;
-    }
-    if (x.v !== 1 || typeof x.offer !== "string" || !ID.test(x.offer) || typeof x.id !== "string" || !ID.test(x.id)
-      || typeof x.title !== "string" || x.title.length > 400 || x.title.normalize("NFC") !== x.title || x.title.trim() !== x.title
-      || FORBIDDEN.test(x.title) || !VISIBLE.test(x.title) || !Number.isSafeInteger(x.expiresAt) || x.expiresAt < 0) return null;
-    graphemes ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
-    let count = 0; for (const _part of graphemes.segment(x.title)) if (++count > 40) return null;
-    if (count < 1) return null;
-    return Object.freeze({ v: 1, offer: x.offer, id: x.id, title: x.title, expiresAt: x.expiresAt });
-  } catch { return null; }
-}
-/** Role and sender are host fields, never inferred from a message's text. Start must separately authorize. */
-export function effectTrialMessage(message) {
-  if (!message || message.role !== "status" || message.sender !== "agend" || typeof message.instance !== "string"
-    || message.instance.length < 1 || message.instance.length > 128) return null;
-  return checkEffectTrialOffer(message.effectTrial);
-}
+// On-only Canvas Worker display validation; ordinary chat boot imports no parser.
+export { checkEffectTrialOffer, effectTrialMessage } from "/assets/effect-display-metadata.js";

package/dist/ui/effects-waker.js

@@ -0,0 +1,2 @@
+// Compatibility entry for opted-in effect consumers. Product boot uses the neutral feature policy.
+export { EMPTY_CHAT_EFFECTS, chatHasEffects, getAppEffects, effectsAwake, effectsLoaded, onEffectsAwake, wakeEffects, startEffectsWaker } from "/assets/feature-flags.js";

package/dist/ui/fleet-canvas-layout.js

@@ -1,9 +1,18 @@
 // #1918: the org canvas's layout (fleet-canvas.js draws it; fleet-traffic.js routes lines through its empty lanes).
 // Fixed slots, no layout engine: the same structure always gives the same picture.
 
-/** Sizes in canvas units. NW×NH a member card, LW×LH a General card; FOLDED a folded (or empty) team's height. */
-export const OC = { NW: 184, NH: 56, GAP: 18, PAD: 24, HEAD: 34, TEAM_GAP: 56, ROW_GAP: 96, ROW_MAX: 1400, ROW_MAX_NARROW: 460, LW: 232, LH: 68, TOP_Y: 20, BUS: 44, FOLDED: 64, TRUNK: -30 };
+/**
+ * Sizes in canvas units. NW×NH a member card, LW×LH a General card; FOLDED a folded (or empty) team's height. GAP and
+ * PAD (#2182): the gutters between cards and a box's padding are the traffic lines' channels inside a box — wide
+ * enough that the router (fleet-route-scene.js) keeps a few lines apart in each; a phone's narrow packing keeps the
+ * tighter GAP_NARROW and PAD_NARROW, so General and the first team still open at a readable size. A layout says which
+ * it used (L.gap, L.pad).
+ */
+export const OC = { NW: 184, NH: 56, GAP: 28, PAD: 32, GAP_NARROW: 18, PAD_NARROW: 24, HEAD: 34, TEAM_GAP: 72, ROW_GAP: 96, ROW_MAX: 1400, ROW_MAX_NARROW: 460, LW: 232, LH: 68, TOP_Y: 20, BUS: 44, FOLDED: 64, TRUNK: -30 };
 const colsFor = (n, narrow) => (n <= 1 ? 1 : n <= 4 || narrow ? 2 : 3);
+/** A search's needle, and whether a node matches it (its name or nickname): the canvas's Find, the Office view's too. */
+export const needle = (q) => String(q || "").trim().toLowerCase();
+export const hits = (node, q) => !!q && (node.name.toLowerCase().includes(q) || (!!node.i && typeof node.i.display_name === "string" && node.i.display_name.toLowerCase().includes(q)));
 /** The key a team folds by (per device): its name; the instances in no team have one of their own no team name can be. */
 export const REST_KEY = "\u0000rest";
 
@@ -13,7 +22,7 @@ export const REST_KEY = "\u0000rest";
  * size of the whole. `narrow`: a phone's packing.
  */
 export function canvasLayout(view, folded = new Set(), { narrow = false, label = (s, n) => `${n} ${s}` } = {}) {
-  const { NW, NH, GAP, PAD, HEAD } = OC;
+  const { NW, NH, HEAD } = OC, GAP = narrow ? OC.GAP_NARROW : OC.GAP, PAD = narrow ? OC.PAD_NARROW : OC.PAD;
   const groups = [...view.teams.map((tm) => ({ key: tm.name, name: tm.name, loose: false, nodes: tm.nodes, counts: tm.counts })),
     ...(view.rest.nodes.length ? [{ key: REST_KEY, name: null, loose: true, nodes: view.rest.nodes, counts: view.rest.counts }] : [])];
   const rows = [];
@@ -49,7 +58,7 @@ export function canvasLayout(view, folded = new Set(), { narrow = false, label =
   const width = Math.max(rowsW, topW);
   const tops = view.top.map((node, i) => ({ node, key: `\u0000top/${node.name}`, x: width / 2 - topW / 2 + i * (OC.LW + GAP), y: OC.TOP_Y, w: OC.LW, h: OC.LH }));
   const height = boxes.length ? y - OC.ROW_GAP : tops.length ? OC.TOP_Y + OC.LH : 0;
-  return { tops, boxes, width, height, tree: treeLines(tops, boxes) };
+  return { tops, boxes, width, height, tree: treeLines(tops, boxes), gap: GAP, pad: PAD };
 }
 
 /** A folded team's summary line height, and a label's width estimate (canvas units: wide for CJK, narrow otherwise). */

package/dist/ui/fleet-canvas.js

@@ -8,13 +8,16 @@
 //   a team or searching never moves another one. Tree lines: a stem from General, a bus over each row, a trunk at the
 //   left joining the rows, one drop per team — never a line per member (the box says who is in it). A phone packs
 //   narrower (one team a row, at most two columns), so General and the first team open readable.
-// - Per device (localStorage; blocked storage: this page only): Canvas or List, and which teams are folded. The view
-//   itself is not kept: it opens on General and the first row (#1918's user decision 2) — on a desktop as wide as the
-//   panel allows (no larger than life), on a phone no smaller than readable. 0 / Fit shows the whole fleet.
+// - Per device (localStorage; blocked storage: this page only): Canvas, List or Office (fleet-office.js: the same fleet
+//   as a pixel office), and which teams are folded. The view itself is not kept: it opens on General and the first row
+//   (#1918's user decision 2) — on a desktop as wide as the panel allows (no larger than life), on a phone no smaller
+//   than readable. 0 / Fit shows the whole fleet.
 // - Presentation only, like the list: a card opens that instance's chat; nothing is edited here (#1689 is how teams
 //   change). The live state is the app store's (fleet-org.js buildOrgView), so the canvas moves with the stream.
 // - Live traffic (fleet-traffic.js): the messages between instances, drawn between the team boxes and the cards (never
 //   hidden under a box, never across a name). Live on or off per device; the list says it in words ("Sending: …").
+//   #2182: routed around the cards and through the boxes' doors by libavoid in a worker (fleet-route-scene.js), each
+//   line from card to card; the lanes are the fallback.
 import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/assets/app-html.js";
 import { appStore } from "/assets/app-store.js";
 import { t, register } from "/assets/app-i18n.js";
@@ -22,30 +25,35 @@ import { chatPath } from "/assets/app-route.js";
 import { navigate } from "/assets/app-nav.js";
 import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
-import { avatarOf, backendLabel, firstCharacter, namesOf } from "/assets/instance-nav.js";
+import { avatarOf, firstCharacter, namesOf } from "/assets/instance-nav.js";
 import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "/assets/identity-color.js";
-import { buildOrgView, OrgChart, OrgSummary } from "./fleet-org.js";
-import { OC, REST_KEY, SUM_LINE, canvasLayout, openingRegion, summaryRows } from "./fleet-canvas-layout.js";
-import { createTrafficStore, FAR_K, POLL_MS, sendingBy, trafficEdges } from "./fleet-traffic.js";
+import { buildOrgView, nodeText, OrgChart, OrgSummary } from "./fleet-org.js";
+import { Office } from "./fleet-office.js";
+import { OC, REST_KEY, SUM_LINE, canvasLayout, hits, needle, openingRegion, summaryRows } from "./fleet-canvas-layout.js";
+import { createTrafficStore, FAR_K, HEAD, POLL_MS, sendingBy, trafficEdges } from "./fleet-traffic.js";
+import { routeScene } from "./fleet-route-scene.js";
+import { createRouteClient } from "./fleet-route.js";
 
 register("orgc", {
   en: {
-    view: "View", canvas: "Canvas", list: "List", find: "Find an instance", findShort: "Find", found: "{0} found", foundOne: "1 found", noMatch: "No match",
+    view: "View", canvas: "Canvas", list: "List", office: "Office", find: "Find an instance", findShort: "Find", found: "{0} found", foundOne: "1 found", noMatch: "No match",
     zoomIn: "Zoom in", zoomOut: "Zoom out", fit: "Fit to screen",
     label: "Org chart canvas. Tab or the arrow keys move between instances, Enter opens a chat, + and − zoom, 0 fits the fleet.",
     expand: "Expand", collapse: "Collapse", members: "{0} members", member: "1 member", inFolded: "{0} found · expand", noMembers: "No members",
     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: "沒有符合的",
+    view: "檢視", canvas: "畫布", list: "清單", office: "辦公室", find: "尋找 instance", findShort: "尋找", found: "找到 {0} 個", foundOne: "找到 1 個", noMatch: "沒有符合的",
     zoomIn: "放大", zoomOut: "縮小", fit: "符合畫面",
     label: "組織圖畫布。用 Tab 或方向鍵在 instance 之間移動，Enter 開啟聊天，+ 和 − 縮放，0 顯示整個 fleet。",
     expand: "展開", collapse: "收合", members: "{0} 名成員", member: "1 名成員", inFolded: "找到 {0} 個 · 展開", noMembers: "沒有成員",
     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);
@@ -84,7 +92,8 @@ export function zoomAt(v, f, cx, cy) {
 // ── Per device ──
 
 const MODE_KEY = "agend_org_mode", FOLD_KEY = "agend_org_folded", LIVE_KEY = "agend_org_live", KEY_KEY = "agend_org_key";
-function readMode() { try { return localStorage.getItem(MODE_KEY) === "list" ? "list" : "canvas"; } catch { return "canvas"; } }
+const MODES = ["canvas", "list", "office"];
+function readMode() { try { const m = localStorage.getItem(MODE_KEY); return MODES.includes(m) ? m : "canvas"; } catch { return "canvas"; } }
 function readLive() { try { return localStorage.getItem(LIVE_KEY) !== "0"; } catch { return true; } }
 function readFolded() {
   try { const a = JSON.parse(localStorage.getItem(FOLD_KEY) || "[]"); return new Set(Array.isArray(a) ? a.filter((x) => typeof x === "string").slice(0, 500) : []); } catch { return new Set(); }
@@ -112,8 +121,6 @@ export function clipText(s, n) {
   return `${out}…`;
 }
 const clip = clipText;
-const needle = (q) => String(q || "").trim().toLowerCase();
-const hits = (node, q) => !!q && (node.name.toLowerCase().includes(q) || (!!node.i && typeof node.i.display_name === "string" && node.i.display_name.toLowerCase().includes(q)));
 
 function Face({ it, name, cx, cy, r }) {
   const a = it ? avatarOf(it) : { kind: "initial", text: firstCharacter(name) };
@@ -130,10 +137,8 @@ function Face({ it, name, cx, cy, r }) {
 
 function Card({ c, lead, cls, onOpen }) {
   const n = c.node, it = n.i;
-  const names = it ? namesOf(it) : { primary: n.name, secondary: "" };
+  const { primary, sub, full } = nodeText(n);
   const id = it ? identityOf(it) : null;
-  const sub = it ? `${STATE_LABEL(n.state)} · ${backendLabel(it.backend)}` : STATE_LABEL(n.state);
-  const full = `${names.primary}${names.secondary ? ` (${names.secondary})` : ""} — ${sub}`;
   const cy = c.h / 2;
   return html`<g class=${`oc-node st-${n.state}${lead ? " lead" : ""}${cls ? ` ${cls}` : ""} ${identityClasses(id)}`} ref=${(el) => paintIdentity(el, id)}
     transform=${`translate(${c.x} ${c.y})`} data-name=${n.name} data-key=${c.key} tabindex="0" role=${it ? "link" : "img"}
@@ -143,19 +148,36 @@ function Card({ c, lead, cls, onOpen }) {
     <rect class="oc-idbar" x="0" y="8" width="4" height=${c.h - 16} rx="2" />
     <${Face} it=${it} name=${n.name} cx=${26} cy=${cy} r=${16} />
     <circle class=${`oc-dot st-${n.state}`} cx=${38} cy=${cy + 12} r=${5} />
-    <text class="oc-name" x=${50} y=${cy - 4}>${clip(names.primary, lead ? 20 : 15)}</text>
+    <text class="oc-name" x=${50} y=${cy - 4}>${clip(primary, lead ? 20 : 15)}</text>
     <text class="oc-sub" x=${50} y=${cy + 13}><tspan class=${`oc-st st-${n.state}`}>${clip(sub, lead ? 27 : 20)}</tspan></text>
   </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,40 +186,61 @@ 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>`;
 }
 
+/** What a card (or an Office desk) opens: that instance's chat. */
+const openChat = (name) => navigate(chatPath(name));
+
 /** Every card, in the order Tab walks them (General, then each team's members in reading order). */
 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" : ""}`}>
+    return html`<g key=${e.key} class=${`oc-fl${dim ? " dim" : ""}`} data-routed=${e.routed ? "1" : undefined}>
       <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} stroke-width=${e.w} marker-start=${`url(#oc-src-${MARKER(e)})`}
+        marker-end=${e.head ? `url(#oc-ah-${MARKER(e)})` : undefined} />
       ${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 head (#2329), in a 10-unit box that is HEAD.LEN stroke widths each way: a slim swept triangle HEAD.WIDE across,
+ * its tip at x 10; the path ends HEAD.BACK stroke widths before the tip (refX), so the line's stroke ends inside it.
+ */
+const HEAD_HALF = (5 * HEAD.WIDE) / HEAD.LEN;
+const HEAD_D = `M0 ${5 - HEAD_HALF} L10 5 L0 ${5 + HEAD_HALF} L2.5 5 z`;
+const HEAD_REF_X = 10 - (10 * HEAD.BACK) / HEAD.LEN;
 
-/** 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 +255,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 +271,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 = [
@@ -237,6 +283,32 @@ function useTraffic(lease, on) {
   return useMemo(() => (on ? store.items() : []), [rev, on]);
 }
 
+/**
+ * #2182: the traffic lines, routed around the canvas by libavoid in a worker (fleet-route.js) once it answers; until
+ * then, and zoomed out (one line per team pair), along the lanes (fleet-traffic.js route()). An answer is kept while the
+ * layout it was routed on is the one drawn: a line it has not seen yet takes its lane until the next answer.
+ */
+let routeClient = null;
+function useTrafficRoutes(traffic, L, far) {
+  const lanes = useMemo(() => (traffic ? trafficEdges(traffic, L, { far }) : []), [traffic, L, far]);
+  const scene = useMemo(() => (far || !lanes.length ? null : routeScene(L, lanes)), [lanes, L, far]);
+  const [answer, setAnswer] = useState(null);                          // { shapes, map }
+  // The layout as the router sees it: a status frame re-making the same layout keeps the answer (and asks nothing).
+  const shapes = scene ? JSON.stringify(scene.shapes) : null;
+  const ask = scene && scene.conns.length ? JSON.stringify(scene) : null;
+  useEffect(() => {
+    if (!ask) return undefined;
+    routeClient ??= createRouteClient();
+    if (!routeClient.available) return undefined;
+    let live = true;
+    routeClient.route(JSON.parse(ask)).then((map) => { if (live && map) setAnswer({ shapes, map }); });
+    return () => { live = false; };
+  }, [ask]);
+  useEffect(() => () => { routeClient?.close(); routeClient = null; }, []);
+  return useMemo(() => (answer && answer.shapes === shapes && traffic ? trafficEdges(traffic, L, { far, routed: answer.map }) : lanes),
+    [lanes, answer, shapes, L, far, traffic]);
+}
+
 /** The canvas body: `view` buildOrgView's answer; `folded` the folded teams' keys; `q` the search needle; `traffic` the live items (null: Live is off). */
 function Canvas({ view, folded, onFold, q, jump, traffic }) {
   const [narrow] = useState(() => typeof matchMedia === "function" && matchMedia("(max-width: 640px)").matches);
@@ -276,7 +348,7 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
     vp.current = narrow ? fitView(openingRegion(L), size(), { margin: 12, minK: 0.75 }) : fitView(whole(), size(), { widthOnly: true, maxK: 1, minK: 0.6 });
     setFar(vp.current.k < FAR_K);
   }, []);
-  const edges = useMemo(() => (traffic ? trafficEdges(traffic, L, { far }) : []), [traffic, L, far]);
+  const edges = useTrafficRoutes(traffic, L, far);
   // Preact owns the markup, not the transform: put it back after every render.
   useLayoutEffect(apply);
   // A search's Enter: the first match, unfolded (by the panel) and then brought into view — once. It waits for the
@@ -291,7 +363,7 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
     if (!L.boxes.some((b) => b.folded && b.nodes.some((n) => n.name === j.name))) pendingJump.current = null;   // gone: nothing to wait for
   });
 
-  const open = (name) => navigate(chatPath(name));
+  const open = openChat;
   // The click that ends a drag or a pinch opens nothing and folds nothing.
   const onClickCapture = (e) => { if (drag.current.swallow) { e.preventDefault(); e.stopPropagation(); } };
   const onWheel = (e) => {
@@ -377,21 +449,21 @@ function Canvas({ view, folded, onFold, q, jump, traffic }) {
     <svg ref=${svgRef} class="oc-svg" role="application" tabindex="0" aria-label=${tc("label")} onWheel=${onWheel} onPointerDown=${onPointerDown}
       onPointerMove=${onPointerMove} onPointerUp=${onPointerUp} onPointerCancel=${onPointerUp} onKeyDown=${onKeyDown} onFocusIn=${onFocusIn} onClickCapture=${onClickCapture}>
       <defs><clipPath id="oc-clip-av" clipPathUnits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.5" /></clipPath>
-        ${ARROWS.map((a) => html`<marker key=${a} id=${`oc-ah-${a}`} viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
-          <path d="M0 0 L10 5 L0 10 z" class=${`oc-ah h-${a}`} /></marker>`)}
-        ${ARROWS.map((a) => html`<marker key=${`s-${a}`} id=${`oc-src-${a}`} viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
-          <circle cx="5" cy="5" r="4" class=${`oc-ah h-${a}`} /></marker>`)}</defs>
+        ${ARROWS.map((a) => html`<marker key=${a} id=${`oc-ah-${a}`} viewBox="0 0 10 10" refX=${HEAD_REF_X} refY="5" markerWidth=${HEAD.LEN} markerHeight=${HEAD.LEN} orient="auto">
+          <path d=${HEAD_D} class=${`oc-ah h-${a}`} /></marker>`)}
+        ${ARROWS.map((a) => html`<marker key=${`s-${a}`} id=${`oc-src-${a}`} viewBox="0 0 10 10" refX="5" refY="5" markerWidth=${HEAD.DOT} markerHeight=${HEAD.DOT}>
+          <circle cx="5" cy="5" r="5" 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,21 +541,26 @@ 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}`}>
     <div class="list-head org-head oc-bar">
       <span>${view.total === 1 ? t("org.instance") : t("org.instances", view.total)}</span><${OrgSummary} counts=${view.counts} />
       <div class="oc-tools">
-        ${mode === "canvas" ? html`<label class="s-search oc-find"><${Icon} name="search" size=${14} /><span class="sr-only">${tc("find")}</span>
+        ${mode !== "list" ? 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 !== "list" && 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 class="seg-inline" role="group" aria-label=${tc("view")}>${modeBtn("canvas")}${modeBtn("list")}${modeBtn("office")}</div>
       </div>
     </div>
+    ${mode !== "list" && live && keyOpen ? html`<${Legend} />` : null}
     ${mode === "list" ? html`<${OrgChart} org=${org} app=${app} bare=${true} sending=${sending} />`
+      : mode === "office" ? html`<${Office} view=${view} traffic=${live ? traffic : null} q=${q} lease=${lease} onOpen=${openChat} />`
       : html`<${Canvas} view=${view} folded=${folded} onFold=${onFold} q=${q} jump=${jump} traffic=${live ? traffic : null} />`}
   </div>`;
 }