@songsid/agend 2.3.0-beta.12 → 2.3.0-beta.14

package/dist/ui/effects-waker.js

@@ -0,0 +1,70 @@
+// #2193: the web effects runtime stays unloaded until there is something it could play for this viewer. Before that,
+// this module is all there is: a few store subscriptions comparing fields the page already has (no observer, listener,
+// timer, layer or request). The runtime itself (app-effects.js and everything it imports) is the reviewed code,
+// unchanged; it is imported and started here, once, the first time one of these holds:
+//   - the open chat has Canvas Worker placements: its status row's effect_chat_v (the hash of its placements, taken
+//     before the server's region filtering — so it can only wake for nothing, never miss something) is not the hash of
+//     an empty list;
+//   - the signed-in person has a personal effect slot chosen (fx.page/header/sidebar/box/cursor — app-prefs);
+//   - an agent's "Try" offer is shown (wakeEffects() from the chat), or Settings saved a personal effect.
+// Once started it stays for the page: the runtime is one episode per window (a disposed one cannot start again).
+// Owner CSS is not the runtime's: owner-css.js is installed by the app shell and works with the runtime never loaded.
+import { appStore } from "/assets/app-store.js";
+import { navStore } from "/assets/app-nav.js";
+import { ownerEffectsChosen, onOwnerEffectsChanged } from "/assets/app-prefs.js";
+
+/** effect_chat_v of a chat with no placements: sha256(JSON.stringify([])), first 32 hex (fleet-manager's status row). */
+export const EMPTY_CHAT_EFFECTS = "4f53cda18c2baa0c0354bb5f9a3ecbe5";
+
+let mod = null, waking = null, chatStore = null, started = false;
+const awakeListeners = new Set();
+
+/** Whether `name`'s chat has Canvas Worker placements (as the status rows say). */
+export function chatHasEffects(name, app = appStore.get()) {
+  const v = name ? app.instances?.find(i => i.name === name)?.effect_chat_v : undefined;
+  return typeof v === "string" && /^[a-f0-9]{32}$/.test(v) && v !== EMPTY_CHAT_EFFECTS;
+}
+
+/** The running effects owner, or null while dormant (or when it could not start: as getAppEffects always was). */
+export function getAppEffects(host) { return mod ? mod.getAppEffects(host) : null; }
+
+/** Whether the runtime has been asked to start on this page. */
+export function effectsAwake() { return waking !== null; }
+/** Whether its module has loaded (started, or found it could not: getAppEffects() then says which). */
+export function effectsLoaded() { return mod !== null; }
+
+/** Called once the runtime has started (or immediately when it already has). Returns the unsubscribe. */
+export function onEffectsAwake(fn) {
+  if (typeof fn !== "function") return () => {};
+  if (mod) { try { fn(); } catch { /* a listener's error is its own */ } return () => {}; }
+  awakeListeners.add(fn); return () => awakeListeners.delete(fn);
+}
+
+/** Load and start the runtime (once per page). Resolves to the owner, or null when it could not start. */
+export function wakeEffects() {
+  if (waking) return waking;
+  waking = import("./app-effects.js").then(m => {
+    mod = m;
+    const owner = chatStore ? m.startAppEffects({ store: chatStore }) : null;
+    for (const fn of [...awakeListeners]) { try { fn(); } catch { /* the rest still hear */ } }
+    awakeListeners.clear();
+    return owner;
+  }, () => null);
+  return waking;
+}
+
+/** Wake when the open chat has placements or the person has a personal effect. */
+function check() {
+  if (waking) return;
+  const route = navStore.get().route;
+  if ((route?.panel === "chat" && chatHasEffects(route.instance)) || ownerEffectsChosen()) void wakeEffects();
+}
+
+/** Boot (once per page, with the Chat store the runtime binds to). Starts nothing but the watch. */
+export function startEffectsWaker({ store }) {
+  chatStore = store;
+  if (started) return;
+  started = true;
+  appStore.subscribe(check); navStore.subscribe(check); onOwnerEffectsChanged(check);
+  check();
+}

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

@@ -1,8 +1,14 @@
 // #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);
 /** 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 +19,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 +55,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

@@ -15,6 +15,8 @@
 //   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";
@@ -27,6 +29,8 @@ import { identityClasses, identityOf, paintIdentity, useIdentityColors } from "/
 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 { routeScene } from "./fleet-route-scene.js";
+import { createRouteClient } from "./fleet-route.js";
 
 register("orgc", {
   en: {
@@ -201,7 +205,7 @@ 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)})`} />
       ${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}
@@ -269,6 +273,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 +338,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

package/dist/ui/fleet-route-scene.js

@@ -0,0 +1,207 @@
+// #2182: the org canvas's traffic lines routed around the canvas, not along fixed lanes. libavoid (Adaptagrams, through
+// libavoid-js 0.4.5, LGPL-2.1-or-later, an npm dependency served unmodified from /ui/vendor/) routes each line between
+// fixed obstacles; this module says what the obstacles are (pure: the worker, the page and the tests share it).
+//
+// - Obstacles: every card (General's and the members'), a folded team's box, each open box's header band (its name and
+//   count are drawn over the lines) and its border as wall pieces in front of its cards. The gaps between the pieces —
+//   the box's padding and the gutters between its rows and columns (L.pad, L.gap: wide enough for a few lines each)
+//   — are the only doors, so a line crosses a border at right angles, through a door, and never runs along it.
+// - Ends: pins on each card's sides (several on the long sides, one on the short), facing out; a line ends on a card,
+//   never on a box. A card with more lines than pins gets more, so two lines never start at one point.
+// - Separation: libavoid nudges lines that share a run ROUTE.NUDGE apart; the same two ends and kind are one line (×N)
+//   before they get here (fleet-traffic.js).
+// A route that comes back otherwise (not orthogonal, not ending on its two shapes) is not drawn: that line keeps the
+// lane route (fleet-traffic.js route()).
+import { OC } from "./fleet-canvas-layout.js";
+
+/** Buffer around every obstacle, the distance nudging keeps between lines, the cost of a bend, pins on a long side. */
+export const ROUTE = { BUF: 5, NUDGE: 8, SEG: 60, PINS: 4, MAX_PINS: 64, MAX_POINTS: 64, MAX_SHAPES: 600, MAX_CONNS: 120 };
+/** libavoid's ConnDirFlags: the way a line leaves a pin. */
+const UP = 1, DOWN = 2, LEFT = 4, RIGHT = 8;
+const PINS_PER_CARD = ROUTE.PINS * 2 + 2;
+
+/** The shape a line's end is on: a card (General's or a member's) or a folded team's box. Null: not routed here. */
+function endShape(end) {
+  if (!end) return null;
+  if (end.kind === "top" || end.kind === "cell") return { key: end.key, x: end.c.x, y: end.c.y, w: end.c.w, h: end.c.h };
+  if (end.kind === "box" && end.b.folded) return { key: end.key, x: end.b.x, y: end.b.y, w: end.b.w, h: end.b.h };
+  return null;
+}
+
+/**
+ * The scene for layout `L` and the lines `lines` ([{ key, a, z }], a and z ends as fleet-traffic.js endOf gives them):
+ * { shapes: [{ x, y, w, h, pins }], conns: [{ key, a, z }], boxes: [{ x, y, w, h }] } — `pins` 0 none (an obstacle
+ * only), 1 the usual pins, more: that many on each long side (a busy card); every pin takes one line; `a`/`z` index
+ * shapes; `boxes` the open teams' outlines (separate() keeps lines off them). A line whose end is not a card or a folded box is left out (it keeps its lane).
+ */
+export function routeScene(L, lines) {
+  const shapes = [], boxes = [], at = new Map();
+  const add = (s, pins) => { shapes.push({ x: s.x, y: s.y, w: s.w, h: s.h, pins }); return shapes.length - 1; };
+  for (const c of L.tops) at.set(c.key, add(c, 1));
+  const { NW, NH, HEAD } = OC, PAD = L.pad ?? OC.PAD, GAP = L.gap ?? OC.GAP;
+  for (const b of L.boxes) {
+    if (b.folded) { at.set(`box:${b.key}`, add(b, 1)); continue; }
+    if (!b.cells.length) { add(b, 0); continue; }
+    boxes.push({ x: b.x, y: b.y, w: b.w, h: b.h });
+    for (const c of b.cells) at.set(c.key, add(c, 1));
+    add({ x: b.x - 1, y: b.y - 1, w: b.w + 2, h: HEAD + 1 }, 0);
+    const lines = Math.ceil(b.cells.length / b.cols);
+    for (let col = 0; col < b.cols; col++) add({ x: b.x + PAD + col * (NW + GAP), y: b.y + b.h - 1, w: NW, h: 2 }, 0);
+    for (const x of [b.x - 1, b.x + b.w - 1]) for (let row = 0; row < lines; row++) add({ x, y: b.y + HEAD + PAD + row * (NH + GAP), w: 2, h: NH }, 0);
+  }
+  const conns = [], demand = new Map();
+  for (const ln of lines) {
+    const a = endShape(ln.a), z = endShape(ln.z);
+    if (!a || !z || !at.has(a.key) || !at.has(z.key) || a.key === z.key) continue;
+    const ia = at.get(a.key), iz = at.get(z.key);
+    conns.push({ key: ln.key, a: ia, z: iz });
+    for (const i of [ia, iz]) demand.set(i, (demand.get(i) || 0) + 1);
+  }
+  // A line each: a shape with more lines than pins gets more pins on its long sides (two lines never leave one point:
+  // libavoid cannot nudge apart runs that start at the same point).
+  for (const [i, n] of demand) if (n > PINS_PER_CARD) shapes[i].pins = Math.min(ROUTE.MAX_PINS, Math.ceil((n - 2) / 2));
+  return { shapes, conns, boxes };
+}
+
+/** A scene from anywhere else (the worker's message): only numbers in range, only indexes it has. Null: refused. */
+export function sceneOk(s) {
+  if (!s || !Array.isArray(s.shapes) || !Array.isArray(s.conns) || !Array.isArray(s.boxes) || s.shapes.length > ROUTE.MAX_SHAPES || s.conns.length > ROUTE.MAX_CONNS
+    || s.boxes.length > ROUTE.MAX_SHAPES) return null;
+  const num = (v) => typeof v === "number" && Number.isFinite(v) && Math.abs(v) < 1e6;
+  for (const b of s.boxes) if (!b || ![b.x, b.y, b.w, b.h].every(num) || b.w <= 0 || b.h <= 0) return null;
+  for (const sh of s.shapes) if (!sh || ![sh.x, sh.y, sh.w, sh.h].every(num) || sh.w <= 0 || sh.h <= 0 || !Number.isInteger(sh.pins) || sh.pins < 0 || sh.pins > ROUTE.MAX_PINS) return null;
+  for (const c of s.conns) {
+    if (!c || typeof c.key !== "string" || c.key.length > 2048) return null;
+    for (const i of [c.a, c.z]) if (!Number.isInteger(i) || i < 0 || i >= s.shapes.length || !s.shapes[i].pins) return null;
+  }
+  return s;
+}
+
+const onEdge = (p, s) => (Math.abs(p.x - s.x) < 0.5 || Math.abs(p.x - s.x - s.w) < 0.5) && p.y >= s.y - 0.5 && p.y <= s.y + s.h + 0.5
+  || (Math.abs(p.y - s.y) < 0.5 || Math.abs(p.y - s.y - s.h) < 0.5) && p.x >= s.x - 0.5 && p.x <= s.x + s.w + 0.5;
+/**
+ * A route for connection `c` of `scene`, or null: at most MAX_POINTS finite points, every segment horizontal or
+ * vertical, starting on its first shape's edge and ending on its second's.
+ */
+export function routeOk(pts, scene, c) {
+  if (!Array.isArray(pts) || pts.length < 2 || pts.length > ROUTE.MAX_POINTS) return null;
+  for (const p of pts) if (!p || !Number.isFinite(p.x) || !Number.isFinite(p.y)) return null;
+  for (let i = 1; i < pts.length; i++) if (pts[i].x !== pts[i - 1].x && pts[i].y !== pts[i - 1].y) return null;
+  if (!onEdge(pts[0], scene.shapes[c.a]) || !onEdge(pts[pts.length - 1], scene.shapes[c.z])) return null;
+  return pts.map((p) => ({ x: p.x, y: p.y }));
+}
+
+/** The worker's answer to a route request `m`: its scene checked (sceneOk) before libavoid sees any of it. */
+export function answerRoute(A, m) {
+  const scene = sceneOk(m && m.scene);
+  return { type: "routes", id: m.id, routes: scene ? [...routeWith(A, scene)] : null };
+}
+
+/**
+ * libavoid nudges lines that share a run apart, but not always: in a channel shared by many lines it packs them closer
+ * than ROUTE.NUDGE, and lines fanning out of one card can come back on the very same run. This pass moves the middle
+ * segments of such lines (never a line's first or last, which end on a pin) sideways to the nearest place at least
+ * SEPARATE from every parallel line along them — only where the moved segment and the two it joins stay clear of
+ * every shape's buffer and keep their direction. What cannot move stays as libavoid left it.
+ */
+export const SEPARATE = 6;
+export function separate(routes, scene) {
+  const B = ROUTE.BUF - 0.5, OVER = 8;
+  const segsOf = (r, p) => p.slice(1).map((q, i) => ({ r, i, h: p[i].y === q.y }));
+  const coord = (p, s) => (s.h ? p[s.i].y : p[s.i].x);
+  const span = (p, s) => (s.h ? [Math.min(p[s.i].x, p[s.i + 1].x), Math.max(p[s.i].x, p[s.i + 1].x)] : [Math.min(p[s.i].y, p[s.i + 1].y), Math.max(p[s.i].y, p[s.i + 1].y)]);
+  /**
+   * A segment from a to b clear of every shape's buffer (but `own`, the card a line's first or last run starts on at its
+   * pin), and not along a box's border (through a door, say).
+   */
+  const clear = (a, b, own = -1) => {
+    const x0 = Math.min(a.x, b.x), x1 = Math.max(a.x, b.x), y0 = Math.min(a.y, b.y), y1 = Math.max(a.y, b.y), h = y0 === y1;
+    return scene.shapes.every((sh, k) => k === own || x1 <= sh.x - B || x0 >= sh.x + sh.w + B || y1 <= sh.y - B || y0 >= sh.y + sh.h + B)
+      && (scene.boxes ?? []).every((bx) => (h ? [bx.y, bx.y + bx.h].every((v) => Math.abs(v - y0) >= SEPARATE + 1) || Math.min(x1, bx.x + bx.w) - Math.max(x0, bx.x) <= 12
+        : [bx.x, bx.x + bx.w].every((v) => Math.abs(v - x0) >= SEPARATE + 1) || Math.min(y1, bx.y + bx.h) - Math.max(y0, bx.y) <= 12));
+  };
+  const keys = [...routes.keys()];
+  const connOf = new Map(scene.conns.map((c) => [c.key, c]));
+  const pts = keys.map((k) => routes.get(k).map((p) => ({ x: p.x, y: p.y })));
+  /** The segments of other lines (and this one's) parallel to segment s of line r, overlapping it, closer than SEPARATE. */
+  const near = (r, s, c, lo, hi) => {
+    const out = [];
+    pts.forEach((p, r2) => segsOf(r2, p).forEach((t) => {
+      if (t.h !== s.h || (r2 === r && t.i === s.i)) return;
+      const [l2, h2] = span(p, t);
+      if (Math.min(hi, h2) - Math.max(lo, l2) > OVER) out.push(coord(p, t));
+    }));
+    return out.filter((c2) => Math.abs(c2 - c) < SEPARATE);
+  };
+  for (let pass = 0; pass < 8; pass++) {
+    let moved = false;
+    pts.forEach((p, r) => segsOf(r, p).forEach((s) => {
+      if (s.i === 0 || s.i + 1 >= p.length - 1) return;                 // a first or last segment ends on a pin
+      const c = coord(p, s), [lo, hi] = span(p, s);
+      const close = near(r, s, c, lo, hi);
+      if (!close.length) return;
+      // Try the nearest places SEPARATE from the lines it is close to, both ways.
+      const tries = [...new Set(close.flatMap((c2) => [1, 2, 3, 4, 5, 6].flatMap((m) => [c2 + m * SEPARATE, c2 - m * SEPARATE])))].sort((u, v) => Math.abs(u - c) - Math.abs(v - c));
+      for (const c2 of tries) {
+        const a = { ...p[s.i] }, b = { ...p[s.i + 1] };
+        if (s.h) { a.y = c2; b.y = c2; } else { a.x = c2; b.x = c2; }
+        const prev = p[s.i - 1], next = p[s.i + 2];
+        // The joining segments keep their direction (never shrink through zero).
+        const dir = (u, v) => Math.sign(s.h ? v.y - u.y : v.x - u.x);
+        if (dir(prev, a) !== dir(prev, p[s.i]) || dir(b, next) !== dir(p[s.i + 1], next) || dir(prev, a) === 0 || dir(b, next) === 0) continue;
+        const c0 = connOf.get(keys[r]);
+        if (!clear(a, b) || !clear(prev, a, s.i - 1 === 0 && c0 ? c0.a : -1) || !clear(b, next, s.i + 2 === p.length - 1 && c0 ? c0.z : -1)) continue;
+        const old = [p[s.i], p[s.i + 1]];
+        p[s.i] = a; p[s.i + 1] = b;
+        const ok = !near(r, s, c2, lo, hi).length && [s.i - 1, s.i + 1].every((j) => { const t = { r, i: j, h: !s.h }; const [l3, h3] = span(p, t); return !near(r, t, coord(p, t), l3, h3).length; });
+        if (ok) { moved = true; break; }
+        [p[s.i], p[s.i + 1]] = old;
+      }
+    }));
+    if (!moved) break;
+  }
+  return new Map(keys.map((k, i) => [k, pts[i]]));
+}
+
+/**
+ * Route `scene` with libavoid instance `A` (libavoid-js 0.4.5's: its constants are numbers on `A`). A Map of
+ * connection key → points, for the routes that pass routeOk only.
+ */
+export function routeWith(A, scene) {
+  const r = new A.Router(A.OrthogonalRouting);
+  try {
+    r.setRoutingParameter(A.shapeBufferDistance, ROUTE.BUF);
+    r.setRoutingParameter(A.idealNudgingDistance, ROUTE.NUDGE);
+    r.setRoutingParameter(A.segmentPenalty, ROUTE.SEG);
+    r.setRoutingOption(A.nudgeOrthogonalSegmentsConnectedToShapes, true);
+    r.setRoutingOption(A.nudgeSharedPathsWithCommonEndPoint, true);
+    for (const [k, v] of Object.entries(ROUTE.EXTRA_OPT ?? {})) r.setRoutingOption(A[k], v);
+    for (const [k, v] of Object.entries(ROUTE.EXTRA_PARAM ?? {})) r.setRoutingParameter(A[k], v);
+    // The router owns its shapes, pins and connectors (A.destroy(r) frees them); the points, rectangles and ends it
+    // copies are freed here, or the wasm heap grows with every route.
+    const temp = (o) => { made.push(o); return o; }, made = [];
+    const refs = scene.shapes.map((s) => {
+      const ref = new A.ShapeRef(r, temp(new A.Rectangle(temp(new A.Point(s.x, s.y)), temp(new A.Point(s.x + s.w, s.y + s.h)))));
+      if (s.pins) {
+        const k = s.pins === 1 ? ROUTE.PINS : s.pins;
+        const pin = (x, y, dir) => new A.ShapeConnectionPin(ref, 1, x, y, true, 0, dir).setExclusive(true);
+        for (let i = 1; i <= k; i++) { pin(i / (k + 1), 0, UP); pin(i / (k + 1), 1, DOWN); }
+        pin(0, 0.5, LEFT); pin(1, 0.5, RIGHT);
+      }
+      return ref;
+    });
+    const conns = scene.conns.map((c) => new A.ConnRef(r, temp(new A.ConnEnd(refs[c.a], 1)), temp(new A.ConnEnd(refs[c.z], 1))));
+    for (const o of made.splice(0)) A.destroy(o);
+    r.processTransaction();
+    const out = new Map();
+    scene.conns.forEach((c, i) => {
+      const line = conns[i].displayRoute(), pts = [];
+      for (let k = 0; k < line.size() && k <= ROUTE.MAX_POINTS; k++) { const p = line.get_ps(k); pts.push({ x: p.x, y: p.y }); }
+      const ok = routeOk(pts, scene, c);
+      if (ok) out.set(c.key, ok);
+    });
+    return ROUTE.SEPARATE === false ? out : separate(out, scene);
+  } finally {
+    A.destroy(r);
+  }
+}

package/dist/ui/fleet-route-worker.js

@@ -0,0 +1,21 @@
+// #2182: the worker that routes the org canvas's traffic lines (fleet-route-scene.js says what to route). It is served
+// with a policy of its own (web-host-guard.ts ROUTE_WORKER_CSP): WebAssembly may run here, as it may not on the page,
+// and it may reach nothing — the page fetches libavoid.wasm and hands the bytes over; they are instantiated from a
+// blob: URL. It receives numbers and answers numbers; the page checks both.
+import { AvoidLib } from "/ui/vendor/libavoid-0.4.5/libavoid.js";
+import { answerRoute } from "./fleet-route-scene.js";
+
+let ready = null;
+self.onmessage = (ev) => {
+  const m = ev.data;
+  if (!m || typeof m !== "object") return;
+  if (m.type === "init" && !ready && m.wasm instanceof ArrayBuffer) {
+    const url = URL.createObjectURL(new Blob([m.wasm], { type: "application/wasm" }));
+    ready = AvoidLib.load(url).then(() => AvoidLib.getInstance()).finally(() => URL.revokeObjectURL(url));
+    ready.then(() => self.postMessage({ type: "ready" }), () => self.postMessage({ type: "failed" }));
+    return;
+  }
+  if (m.type === "route" && ready && Number.isInteger(m.id)) {
+    ready.then((A) => self.postMessage(answerRoute(A, m))).catch(() => self.postMessage({ type: "routes", id: m.id, routes: null }));
+  }
+};

package/dist/ui/fleet-route.js

@@ -0,0 +1,88 @@
+// #2182: the page's side of the traffic router — one worker (fleet-route-worker.js), started the first time Live
+// traffic is drawn, fed the libavoid.wasm bytes the page fetched. One scene at a time: a newer one replaces any still
+// waiting (the older one's answer would be stale anyway). A worker that fails, or takes longer than TIMEOUT_MS, is
+// ended; after FAIL_LIMIT failures in a row this page stops asking, and every line keeps its lane route (the caller's
+// fallback for a null answer).
+import { routeOk } from "./fleet-route-scene.js";
+
+export const WORKER_URL = "/ui/js/fleet-route-worker.js";
+export const WASM_URL = "/ui/vendor/libavoid-0.4.5/libavoid.wasm";
+export const TIMEOUT_MS = 4000;
+const FAIL_LIMIT = 2;
+
+/**
+ * A client: route(scene) → a Promise of a Map (connection key → points, checked against the scene) or null (not
+ * routed: superseded, failed, unavailable). `deps` replaces Worker, fetch and the clock in tests.
+ */
+export function createRouteClient(deps = {}) {
+  const W = deps.Worker ?? (typeof Worker === "function" ? Worker : null);
+  const get = deps.fetch ?? ((...a) => fetch(...a));
+  const timers = deps.timers ?? { set: (f, ms) => setTimeout(f, ms), clear: (t) => clearTimeout(t) };
+  let worker = null, wasm = null, fails = 0, nextId = 1;
+  let busy = null, waiting = null;          // { id, scene, resolve, timer }
+  const end = () => { try { worker?.terminate(); } catch { /* gone */ } worker = null; };
+  const fail = () => {
+    fails++;
+    end();
+    if (busy) { timers.clear(busy.timer); busy.resolve(null); busy = null; }
+    if (fails >= FAIL_LIMIT && waiting) { waiting.resolve(null); waiting = null; }
+    pump();
+  };
+  async function start(job) {
+    if (!wasm) {
+      const res = await get(WASM_URL, { credentials: "same-origin" });
+      if (!res.ok) throw new Error(`libavoid.wasm: ${res.status}`);
+      wasm = await res.arrayBuffer();
+    }
+    // #2194 review: closed, timed out or replaced while the .wasm was on its way — start nothing (a worker made now
+    // would be nobody's, and a later start would make another).
+    if (busy !== job || worker) return;
+    const w = new W(WORKER_URL, { type: "module" });
+    w.onmessage = (ev) => {
+      const m = ev.data;
+      if (!m || typeof m !== "object" || w !== worker) return;
+      if (m.type === "failed") { fail(); return; }
+      if (m.type !== "routes" || !busy || m.id !== busy.id) return;
+      const { scene, resolve, timer } = busy;
+      busy = null;
+      timers.clear(timer);
+      if (!Array.isArray(m.routes)) { fail(); resolve(null); return; }
+      fails = 0;
+      const out = new Map();
+      for (const pair of m.routes.slice(0, scene.conns.length)) {
+        if (!Array.isArray(pair) || typeof pair[0] !== "string") continue;
+        const c = scene.conns.find((x) => x.key === pair[0]);
+        const pts = c && routeOk(pair[1], scene, c);
+        if (pts) out.set(c.key, pts);
+      }
+      resolve(out);
+      pump();
+    };
+    w.onerror = (e) => { e?.preventDefault?.(); if (w === worker) fail(); };
+    worker = w;
+    w.postMessage({ type: "init", wasm: wasm.slice(0) });
+  }
+  function pump() {
+    if (busy || !waiting) return;
+    if (fails >= FAIL_LIMIT || !W) { waiting.resolve(null); waiting = null; return; }
+    busy = waiting; waiting = null;
+    const job = busy;
+    job.timer = timers.set(() => { if (busy === job) fail(); }, TIMEOUT_MS);
+    (worker ? Promise.resolve() : start(job)).then(() => {
+      if (busy === job) worker.postMessage({ type: "route", id: job.id, scene: job.scene });
+    }, () => { if (busy === job) fail(); });
+  }
+  return {
+    route(scene) {
+      if (waiting) waiting.resolve(null);
+      return new Promise((resolve) => { waiting = { id: nextId++, scene, resolve, timer: null }; pump(); });
+    },
+    /** Off: the worker ended; what was waiting gets null. */
+    close() {
+      if (waiting) { waiting.resolve(null); waiting = null; }
+      if (busy) { timers.clear(busy.timer); busy.resolve(null); busy = null; }
+      end();
+    },
+    get available() { return !!W && fails < FAIL_LIMIT; },
+  };
+}

package/dist/ui/fleet-traffic.js

@@ -179,7 +179,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 laneOffset = (o, PAD = OC.PAD) => Math.max(-PAD / 2 + 6, Math.min(PAD / 2 - 6, o * 0.5));
+/** The layout's own box padding and gutter (a phone's are narrower). */
+const spacing = (L) => ({ PAD: L.pad ?? OC.PAD, GAP: L.gap ?? OC.GAP });
 
 const firstBusOf = (L) => Math.min(...L.boxes.map((b) => b.busY));
 /** From an end up to its row's bus lane: the points, and the lane's y. `o` spreads lines sharing a lane. */
@@ -194,9 +196,9 @@ function outward(L, end, o) {
     const x = b.x + b.w / 2 + o * 1.5;
     return { pts: [{ x, y: b.y }, { x, y: b.busY + o }], bus: b.busY + o };
   }
-  const { PAD, GAP, NW, NH } = OC;
+  const { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
+  const io = laneOffset(o, PAD);
   const leftLane = b.x + PAD / 2 + io, rightLane = b.x + b.w - PAD / 2 + io;
   let pts;
   if (col === 0 || col === b.cols - 1) {
@@ -217,9 +219,9 @@ function outward(L, end, o) {
  * 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 { NW, NH } = OC, { PAD, GAP } = spacing(L);
   const b = end.b, card = end.c, col = end.i % b.cols, rowI = Math.floor(end.i / b.cols), lines = Math.ceil(b.cells.length / b.cols);
-  const io = laneOffset(o);
+  const io = laneOffset(o, PAD);
   const left = lane < b.x + b.w / 2;
   if ((left && col === 0) || (!left && col === b.cols - 1)) {
     const cy = card.y + NH / 2 + io;
@@ -230,8 +232,8 @@ function toLane(L, end, lane, o) {
 }
 /** 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 b = a.b, { PAD } = spacing(L);
+  const io = laneOffset(o, PAD);
   const mid = ((a.i % b.cols) + (z.i % b.cols)) / 2;
   const lane = mid <= (b.cols - 1) / 2 ? b.x + PAD / 2 + io : b.x + b.w - PAD / 2 + io;
   return [...toLane(L, a, lane, o), ...toLane(L, z, lane, o).reverse()];
@@ -289,9 +291,12 @@ const settled = (phase) => (phase === "fading" || phase === "stale" ? "fading" :
 
 /**
  * The lines to draw from the store's items on layout `L`. `far`: zoomed out (one line per team pair). Each edge:
- * { key, hue, phase, n, from, to, d, pts, badge } — `from`/`to` the instance (or team) names it joins, for search.
+ * { key, hue, phase, n, from, to, d, pts, badge, a, z, routed } — `from`/`to` the instance (or team) names it joins, for
+ * search; `a`/`z` its two ends (fleet-route-scene.js routes the ones on cards). `routed` (#2182): the router's points by
+ * line key (fleet-route.js); a line it has none for keeps its lane route — or, while a new answer is on its way, the
+ * points the same two ends and kind had in the last one (a line changing phase keeps its place).
  */
-export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
+export function trafficEdges(items, L, { far = false, max = MAX_EDGES, routed = null } = {}) {
   if (!L.boxes.length && L.tops.length < 2) return [];
   // A top's way out is the first row's bus: with no box there is none, so only top ↔ top lines (betweenTops) are drawn.
   const groups = new Map();
@@ -321,10 +326,21 @@ export function trafficEdges(items, L, { far = false, max = MAX_EDGES } = {}) {
     add(`${a.key}>${z.key}|${hue(it.kind)}|${phase}`, { a, z, hue: hue(it.kind), phase, n: 1, names });
   }
   const list = [...groups.entries()].sort((x, y) => RANK[x[1].phase] - RANK[y[1].phase]).slice(0, max);
+  const lent = new Set();
+  const routedBy = (key) => {
+    if (!routed || far) return null;
+    const exact = routed.get(key);
+    if (exact) return exact;
+    const kin = key.slice(0, key.lastIndexOf("|") + 1);
+    for (const [k, pts] of routed) if (k.startsWith(kin) && !groups.has(k) && !lent.has(k)) { lent.add(k); return pts; }
+    return null;
+  };
   return list.map(([key, g], i) => {
     const o = ((i % 7) - 3) * 7;                                                    // neighbours 7 px apart (within the ±22 px bus lane)
-    const pts = route(L, g.a, g.z, o);
-    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null };
+    const viaRouter = routedBy(key);
+    const pts = viaRouter ?? route(L, g.a, g.z, o);
+    return { key, hue: g.hue, phase: g.phase, n: g.n, names: [...new Set(g.names)], d: pathOf(pts), pts, badge: g.n > 1 ? badgeAt(pts) : null,
+      a: g.a, z: g.z, routed: !!viaRouter };
   });
 }
 

package/dist/ui/fleet-usage.js

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