@songsid/agend 2.3.0-beta.9 → 2.3.0

package/dist/ui/chat-thread.js

@@ -8,7 +8,7 @@
 // Unrelated updates (a new message, another message's tick) stop nothing (#1306 §6.2, #1408 §4).
 import "./chat-render.js";
 import "./preview.js";
-import { effectTrialMessage } from "./effect-trial-offer.js";
+import { canvasWorkerEnabled, onCanvasWorkerChange, onCanvasMetadataChange, readCanvasTrialMessage } from "/assets/feature-flags.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
 import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
 import { textLinkSegments } from "/assets/app-route.js";
@@ -28,6 +28,7 @@ const P = () => globalThis.AgendPreview;
 /** #1672: a status line longer than this (lines, or characters) is folded until it is opened. */
 export const STATUS_FOLD_LINES = 6;
 export const STATUS_FOLD_CHARS = 600;
+const REPLY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>';
 const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
 /** Escapes & " ' < >: safe for text and inside a quoted attribute. */
@@ -131,8 +132,9 @@ export function createThread(list, scroller, opts) {
     // #1770: the label ("17:38", "Yesterday 17:38", "10/11 17:38") depends on today, so it is not part of the html a node
     // is kept by: it is written into the node (timeLabels) — crossing midnight relabels in place and reloads no preview.
     const time = x.ts ? `<span class="time" data-ts="${escAttr(x.ts)}" title="${escAttr(chatTimeFull(x.ts))}"></span>` : `<span class="time"></span>`;
-    const trial = effectTrialMessage(x);
-    if (trial) return trialHtml(trial, time, x);
+    if (x.outgoing) return outgoingHtml(x);
+    const trial = readCanvasTrialMessage(x);
+    if (trial) return canvasWorkerEnabled() ? trialHtml(trial, time, x) : "";
     if (x.role === "status") return statusHtml(x, time);
     const u = opts.isUser(x);
     // renderMarkdown escapes the whole text before it adds any tag of its own (chat-render.js).
@@ -141,7 +143,64 @@ export function createThread(list, scroller, opts) {
     const buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
     // A person's click on a reply button shows as the button's label, never the line the agent was given (its value).
     const clicked = x.role === "user" && x.click && typeof x.click.label === "string";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
+    // #2272: reply to it — a hover strip at its top right (phones: swipe left or long-press; R on a focused message).
+    const key = msgKey(x);
+    const act = opts.canReply?.() === false ? "" : `<div data-trust="thread-control" class="msg-actions"><button type="button" class="chip-btn icon-only" data-act="reply" data-arg="${escAttr(key)}" title="${escAttr(tr("chat.reply"))}" aria-label="${escAttr(tr("chat.reply"))}">${REPLY}</button></div>`;
+    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${R().reactionsHtml(x.reactions, tr("chat.reactedBy", x.instance || ""))}${tools}</div>`;
+  }
+  /**
+   * A message this page is sending (chat-store.js): its own bubble at once, dimmed with "Sending…" until the server
+   * takes it, then as sent until the server's copy replaces it; failed: marked, with Retry and Delete. Each file shows
+   * its upload — a picture as itself (a local preview), anything else by name — with its own bar, moved in place by
+   * progress() (the html does not hold the numbers, so a moving bar never redraws the bubble). No data-key: it is no
+   * message yet (nothing replies to it, links to it or copies it).
+   */
+  function outgoingHtml(x) {
+    const st = x.outgoing.state, going = st === "queued" || st === "sending";
+    const files = (x.files || []).map((f, i) => {
+      const pic = f.url ? `<img class="out-pic" src="${escAttr(f.url)}" alt="${escAttr(f.name)}">` : `<span class="out-doc" aria-hidden="true"></span>`;
+      return `<div class="out-file" data-i="${escAttr(i)}">${pic}<div class="out-file-info"><span class="out-name">${escAttr(f.name)}</span>`
+        + `<span class="out-bar" role="progressbar" aria-label="${escAttr(trf("chat.uploadingFile", f.name))}" aria-valuemin="0" aria-valuemax="100"><span class="out-fill"></span></span>`
+        + `<span class="out-pct"></span></div></div>`;
+    }).join("");
+    const failed = st === "failed" ? `<div data-trust="thread-control" class="out-note lbar" role="alert"><span class="out-error">${escAttr(trf("chat.notSentBecause", x.outgoing.error || ""))}</span>`
+      + `<span class="out-actions"><button type="button" class="btn btn-sm btn-primary" data-act="retryOut" data-arg="${escAttr(x.clientId)}">${escAttr(tr("chat.retrySend"))}</button>`
+      + `<button type="button" class="btn btn-sm" data-act="putBackOut" data-arg="${escAttr(x.clientId)}">${escAttr(tr("chat.putBack"))}</button>`
+      + `<button type="button" class="btn btn-sm" data-act="deleteOut" data-arg="${escAttr(x.clientId)}">${escAttr(tr("chat.deleteUnsent"))}</button></span></div>` : "";
+    const state = going ? `<span class="out-state" role="status"><span class="out-spin" aria-hidden="true"></span>${escAttr(tr("chat.sending"))}</span>` : "";
+    return `<div class="msg user out out-${st}" data-out="${escAttr(x.clientId)}"${going ? ' aria-busy="true"' : ""} tabindex="-1"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${state}</div>`
+      + `${quoteHtml(x.replyTo)}<div class="body">${x.text ? `<div class="md">${renderedMarkdown(x.text, false, opts.emojis, opts.mentions)}</div>` : ""}`
+      + `${files ? `<div class="out-files">${files}</div>` : ""}</div>${failed}</div>`;
+  }
+  /** The pending bubbles' upload bars and percentages, as their files stand now (in place: CSSOM, no redraw). */
+  function progress() {
+    for (const v of nodes.values()) {
+      const x = v.x;
+      if (!x || !x.outgoing || !x.files || !x.files.length) continue;
+      for (const el of v.node.querySelectorAll(".out-file[data-i]")) {
+        const f = x.files[Number(el.dataset.i)];
+        if (!f) continue;
+        const pct = f.state === "done" ? 100 : f.total > 0 ? Math.min(100, Math.floor((f.loaded / f.total) * 100)) : 0;
+        el.dataset.state = f.state;
+        const bar = el.querySelector(".out-bar"), fill = el.querySelector(".out-fill"), label = el.querySelector(".out-pct");
+        if (bar) bar.setAttribute("aria-valuenow", String(pct));
+        if (fill) fill.style.transform = `scaleX(${pct / 100})`;
+        if (label) { const text = f.state === "failed" ? tr("chat.uploadFailed") : f.state === "waiting" ? tr("chat.uploadWaiting") : `${pct}%`; if (label.textContent !== text) label.textContent = text; }
+      }
+    }
+  }
+
+  /**
+   * #2272: what a reply quotes, above its body — the quoted sender and first words (or that it had files), as the server
+   * read them when it was sent; a button that shows that message. A guest that may not see it gets only "an earlier
+   * message". Text only: everything is escaped.
+   */
+  function quoteHtml(q) {
+    if (!q || typeof q !== "object" || typeof q.boot !== "string" || typeof q.id !== "number") return "";
+    const words = q.hidden ? tr("chat.replyHidden")
+      : (typeof q.text === "string" && q.text) || (q.media === "photo" ? tr("chat.replyPhoto") : q.media === "document" ? tr("chat.replyFile") : "");
+    const who = !q.hidden && typeof q.sender === "string" && q.sender ? `<span class="quote-sender">${escAttr(q.sender)}</span> ` : "";
+    return `<button type="button" data-trust="thread-control" class="msg-quote" data-act="jumpQuote" data-arg="${escAttr(`${q.boot}-${q.id}`)}" title="${escAttr(tr("chat.replyJump"))}"><span class="quote-mark">${REPLY}</span> ${who}<span class="quote-text">${escAttr(words)}</span></button>`;
   }
   /**
    * A button click as a chip: 🔘 and the label (escaped: the label is the agent's text). With `of` (live, while its
@@ -170,7 +229,8 @@ export function createThread(list, scroller, opts) {
   }
   function armTrials() {
     if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
-    const now = trialNow(), next = msgs.map(x => effectTrialMessage(x)).filter(x => x && x.expiresAt > now).reduce((n, x) => Math.min(n, x.expiresAt), Infinity);
+    if (!canvasWorkerEnabled()) return;
+    const now = trialNow(), next = msgs.map(x => readCanvasTrialMessage(x)).filter(x => x && x.expiresAt > now).reduce((n, x) => Math.min(n, x.expiresAt), Infinity);
     if (Number.isFinite(next)) trialTimer = setTimeout(() => { trialTimer = null; render(msgs); }, Math.max(1, Math.min(2147483647, next - now)));
   }
   /**
@@ -526,7 +586,20 @@ export function createThread(list, scroller, opts) {
   // newest bubble clipped behind it, and the next growth past 48 px put the pill over it.
   const atBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight, 1);
   function reportJump() { opts.onJump({ show: !nearBottom(), unseen }); }
-  function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; mark(); }
+  function toBottom() { snap(); scroller.scrollTop = scroller.scrollHeight; pinned = true; mark(); }
+  /**
+   * #2184: a thread's height is rarely a whole number of pixels, and a pinned view's offset is: so each time older messages
+   * were drawn above, the whole view moved by the change in that fraction (0.6–0.7 px — the faint jitter of a chat
+   * opened cold). A sub-pixel margin above the list keeps the thread's height whole, so the bottom never moves.
+   */
+  // #2188: one read (the list's box excludes its own margin, so nothing is reset first) and a write only on a change —
+  // a reset-then-measure laid a 200-message thread out twice on every pinned draw (2.3 s at 4× CPU on a kept chat).
+  let snapped = null;
+  function snap() {
+    const h = list.getBoundingClientRect().height, f = h - Math.floor(h);
+    const want = f > 0.001 && f < 0.999 ? (1 - f) + "px" : "0px";
+    if (want !== snapped) { snapped = want; list.style.setProperty("--thread-snap", want); }
+  }
   // Sizes change without a scroll event (layout after the render, the dock under the thread): while pinned, the view
   // stays flush with the bottom; a reader who scrolled up is never moved.
   const resized = () => { if (pinned && !atBottom()) toBottom(); reportJump(); };
@@ -620,7 +693,11 @@ export function createThread(list, scroller, opts) {
   }
   /** Put the messages from startIndex() on in the list (nodes reused when unchanged). Returns how many are new. */
   function draw(drawOpts) {
-    const shown = msgs.slice(startIndex());
+    const shown = msgs.slice(startIndex()).filter(message => {
+      // Volatile host offer records are hidden off and while their on-only parser is loading.
+      const hostOffer = message?.role === "status" && message.sender === "agend" && Object.hasOwn(message, "effectTrial") && message.effectTrial != null;
+      return !hostOffer || canvasWorkerEnabled() && readCanvasTrialMessage(message) !== undefined;
+    });
     const keep = new Set(shown.map(msgKey));
     for (const [k, v] of nodes) if (!keep.has(k)) { stopIn(v.node); v.node.remove(); nodes.delete(k); }
     let prev = null, added = 0;
@@ -643,8 +720,21 @@ export function createThread(list, scroller, opts) {
     }
     armDay();
     armPolls();
+    rove();
+    progress();
     return added;
   }
+  /**
+   * #2272 (review): one message in the thread is in the Tab order — the last one focused while it is still drawn, else
+   * the newest; ↑/↓ move between messages (chat-msg-actions.js). The rest are -1, so Tab passes the thread in one step.
+   */
+  let roving = null;
+  function rove(key) {
+    if (key !== undefined) roving = key;
+    const at = (roving && nodes.has(roving) ? nodes.get(roving).node : null) || [...list.querySelectorAll(".msg[data-key]")].at(-1) || null;
+    for (const el of list.querySelectorAll('.msg[data-key][tabindex="0"]')) if (el !== at) el.setAttribute("tabindex", "-1");
+    if (at) at.setAttribute("tabindex", "0");
+  }
 
   function onScroll() {
     // #2158: the thread got shorter under a pinned view (text settling on a cold load, a card) and the browser clamped
@@ -723,13 +813,30 @@ export function createThread(list, scroller, opts) {
       if (m && opts.clickReplyButton) opts.clickReplyButton(m[1], Number(m[2]));
     } else if (act === "effectTrial") {
       // Only the current host-produced keyed card and a real local click can request admission. No token is read from DOM.
-      const key = el.dataset.arg, row = msgs.find(x => msgKey(x) === key), owner = nodes.get(key), node = owner?.node, offer = effectTrialMessage(row);
+      const key = el.dataset.arg, row = msgs.find(x => msgKey(x) === key), owner = nodes.get(key), node = owner?.node, offer = readCanvasTrialMessage(row);
       if (PUBLIC_LINK() || e.defaultPrevented || e.isTrusted !== true || owner?.trialButton !== el || el.className !== "btn btn-sm effect-trial-start" || !node?.contains(el) || el.closest(".effect-trial-offer")?.getAttribute("data-trust") !== "thread-control"
         || !offer || trialNow() >= offer.expiresAt) return;
       if (trialStatus(row) === "ready" && opts.canTryEffect?.(row) === true) opts.startEffectTrial?.(row);
       else opts.fixEffectTrial?.(row, trialStatus(row));
     } else if (act === "showButtons") { const x = msgs.find(y => y.buttons && y.buttons.id === el.dataset.arg); if (x) reveal(msgKey(x)); }
+    else if (act === "reply") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) opts.startReply?.(x); }
+    else if (act === "jumpQuote") void jumpTo(el.dataset.arg);
+    else if (act === "retryOut") opts.retryOutgoing?.(el.dataset.arg);                 // a failed send, again
+    else if (act === "putBackOut") opts.putBackOutgoing?.(el.dataset.arg);              // back in the composer, to change it
+    else if (act === "deleteOut") opts.deleteOutgoing?.(el.dataset.arg);
   }
+  /**
+   * #2272: show the message a reply quotes, flashed — drawn now, or after the chat reads back the longest history the
+   * server keeps; otherwise it says it is no longer there.
+   */
+  async function jumpTo(key) {
+    if (typeof key !== "string" || !key) return;
+    if (reveal(key)) return;
+    const found = opts.findQuoted ? await opts.findQuoted(key) : false;
+    if (!found || !reveal(key)) opts.notice?.(tr("chat.replyGone"));
+  }
+  /** #2272: a drawn message's row (for the message menu and gestures), or undefined. */
+  function messageOf(key) { return msgs.find(y => msgKey(y) === key); }
 
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
   /**
@@ -761,8 +868,10 @@ export function createThread(list, scroller, opts) {
     if (ro) { ro.observe(list); ro.observe(sc); }
   }
   /** `own`: only this thread's previews stop (a thread let go while another chat is in view); else every one, as leaving. */
+  const redrawFeature = () => { if (!disposed && !parked) render(msgs); };
+  const featureOff = onCanvasWorkerChange(redrawFeature), metadataOff = onCanvasMetadataChange(redrawFeature);
   function dispose(own = false) {
-    disposed = true;
+    disposed = true; featureOff(); metadataOff();
     if (!parked) watchReader(scroller, false);
     if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
     if (ro) ro.disconnect();
@@ -772,5 +881,5 @@ export function createThread(list, scroller, opts) {
     armPolls();
   }
 
-  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
+  return { render, progress, onScroll, onClick, jumpLatest, reveal, jumpTo, messageOf, rove, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
 }

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,15 +25,18 @@ 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",
@@ -40,7 +46,7 @@ register("orgc", {
     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: "沒有成員",
@@ -86,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(); }
@@ -114,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) };
@@ -132,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"}
@@ -145,7 +148,7 @@ 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>`;
 }
@@ -186,6 +189,9 @@ function TeamHead({ b, q, onFold }) {
   </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)];
 
@@ -201,9 +207,10 @@ 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-${MARKER(e)})`} marker-end=${`url(#oc-ah-${MARKER(e)})`} />
+      <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}
@@ -211,6 +218,13 @@ function TrafficLayer({ edges, q }) {
   })}</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 (#2052): a **Key** toggle in the toolbar; open, its rows are a strip between the toolbar and the
@@ -269,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);
@@ -308,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
@@ -323,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) => {
@@ -409,10 +449,10 @@ 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} />`)}</g>
@@ -509,17 +549,18 @@ export function OrgCanvas({ org, app, lease }) {
     <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 === "canvas" && live ? html`<${KeyToggle} open=${keyOpen} onToggle=${toggleKey} />` : 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 === "canvas" && live && keyOpen ? html`<${Legend} />` : null}
+    ${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>`;
 }