@songsid/agend 2.3.0-beta.21 → 2.3.0-beta.23

package/dist/ui/fleet-canvas.js

@@ -28,7 +28,7 @@ import { avatarOf, backendLabel, firstCharacter, namesOf } from "/assets/instanc
 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 { 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";
 
@@ -207,7 +207,8 @@ function TrafficLayer({ edges, q }) {
     const dim = q && !e.names.some((n) => n.toLowerCase().includes(q));
     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}
@@ -215,6 +216,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
@@ -439,10 +447,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>

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

@@ -7,7 +7,10 @@
 //   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.
+//   never on a box. A card with more lines than pins gets more, so two lines never start at one point. A short side
+//   facing a neighbour across less than ROUTE.SIDE (a column gutter, a phone's box padding) has no pin (#2329): a line
+//   into it would turn in that narrow gap with no room left for its arrowhead. libavoid turns a line into its pin right
+//   at the card's buffer, which leaves a head no straight run: lengthen() moves that turn out where there is room.
 // - 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
@@ -15,10 +18,13 @@
 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 };
+export const ROUTE = { BUF: 5, NUDGE: 8, SEG: 60, PINS: 4, MAX_PINS: 64, MAX_POINTS: 64, MAX_SHAPES: 600, MAX_CONNS: 120, SIDE: 30, RUN: 16 };
 /** 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;
+/** A shape's `sides`: which short sides have a pin (absent: both). */
+const SIDE_L = 1, SIDE_R = 2;
+const sidesOf = (sh) => sh.sides ?? SIDE_L | SIDE_R;
+const pinsOn = (sh) => ROUTE.PINS * 2 + ((sidesOf(sh) & SIDE_L) ? 1 : 0) + ((sidesOf(sh) & SIDE_R) ? 1 : 0);
 
 /** 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) {
@@ -30,8 +36,9 @@ function endShape(end) {
 
 /**
  * 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: [{ x, y, w, h, pins, sides? }], 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); `sides` the short sides with a pin
+ * (1 left, 2 right; absent: both); 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) {
@@ -57,9 +64,22 @@ export function routeScene(L, lines) {
     conns.push({ key: ln.key, a: ia, z: iz });
     for (const i of [ia, iz]) demand.set(i, (demand.get(i) || 0) + 1);
   }
+  // A short side with a pin only where a line has room to turn into it with its head: ROUTE.SIDE to the nearest shape
+  // beside it (a neighbour card, a box's wall piece).
+  for (const sh of shapes) {
+    if (!sh.pins) continue;
+    let left = Infinity, right = Infinity;
+    for (const o of shapes) {
+      if (o === sh || o.y >= sh.y + sh.h || o.y + o.h <= sh.y) continue;
+      if (o.x + o.w <= sh.x) left = Math.min(left, sh.x - o.x - o.w);
+      if (o.x >= sh.x + sh.w) right = Math.min(right, o.x - sh.x - sh.w);
+    }
+    const sides = (left >= ROUTE.SIDE ? SIDE_L : 0) | (right >= ROUTE.SIDE ? SIDE_R : 0);
+    if (sides !== (SIDE_L | SIDE_R)) sh.sides = sides;
+  }
   // 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));
+  for (const [i, n] of demand) if (n > pinsOn(shapes[i])) shapes[i].pins = Math.min(ROUTE.MAX_PINS, Math.ceil((n - (pinsOn(shapes[i]) - ROUTE.PINS * 2)) / 2));
   return { shapes, conns, boxes };
 }
 
@@ -69,7 +89,8 @@ export function sceneOk(s) {
     || 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 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
+    || (sh.sides !== undefined && (!Number.isInteger(sh.sides) || sh.sides < 0 || sh.sides > (SIDE_L | SIDE_R)))) 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;
@@ -97,15 +118,8 @@ export function answerRoute(A, m) {
   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) {
+/** What separate() and lengthen() share, on `scene` and the routes' points `pts` (which they move in place). */
+function mover(scene, pts) {
   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);
@@ -120,9 +134,7 @@ export function separate(routes, scene) {
       && (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 = [];
@@ -131,8 +143,23 @@ export function separate(routes, scene) {
       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);
+    return out.filter((c2) => Math.abs(c2 - c) < SEPARATE - 1e-6);              // libavoid's points carry float noise
   };
+  return { segsOf, coord, span, clear, near, connOf };
+}
+
+/**
+ * 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 keys = [...routes.keys()];
+  const pts = keys.map((k) => routes.get(k).map((p) => ({ x: p.x, y: p.y })));
+  const { segsOf, coord, span, clear, near, connOf } = mover(scene, pts);
   for (let pass = 0; pass < 8; pass++) {
     let moved = false;
     pts.forEach((p, r) => segsOf(r, p).forEach((s) => {
@@ -163,6 +190,43 @@ export function separate(routes, scene) {
   return new Map(keys.map((k, i) => [k, pts[i]]));
 }
 
+/**
+ * #2329: room for each line's arrowhead. libavoid turns a line into its last pin right at the card's buffer, so the
+ * last run (where the head goes) is a few px long. This pass moves the turn before it out from the card until the last
+ * run is ROUTE.RUN long (or up to 3 × SEPARATE more; where none fits, the longest that does): only where the moved segment and the two it joins stay clear of
+ * every shape's buffer, at least SEPARATE from every parallel line, and the run before the turn keeps its direction and
+ * 4 px. A line whose turn cannot move keeps its short run (fleet-traffic.js draws it with no head).
+ */
+export function lengthen(routes, scene) {
+  const keys = [...routes.keys()];
+  const pts = keys.map((k) => routes.get(k).map((p) => ({ x: p.x, y: p.y })));
+  const { coord, span, clear, near, connOf } = mover(scene, pts);
+  pts.forEach((p, r) => {
+    const n = p.length;
+    if (n < 4) return;                                                  // the turn's other end is the first pin
+    const z = p[n - 1], y = p[n - 2], x = p[n - 3], w = p[n - 4], h = y.y === z.y;
+    const at = (q) => (h ? q.x : q.y);
+    const u = Math.sign(at(y) - at(z));                                 // out from the card
+    if (!u || Math.abs(at(y) - at(z)) >= ROUTE.RUN) return;
+    const c0 = connOf.get(keys[r]);
+    const run = Math.abs(at(y) - at(z)), tries = [];
+    for (let t = ROUTE.RUN; t <= ROUTE.RUN + 3 * SEPARATE; t++) tries.push(t);
+    for (let t = ROUTE.RUN - 1; t > run; t--) tries.push(t);           // short of RUN (a phone's gutter): the longest that fits
+    for (const t of tries) {
+      const c2 = at(z) + u * t;
+      const a = h ? { x: c2, y: x.y } : { x: x.x, y: c2 }, b = h ? { x: c2, y: y.y } : { x: y.x, y: c2 };
+      if (Math.sign(at(a) - at(w)) !== Math.sign(at(x) - at(w)) || Math.abs(at(a) - at(w)) < 4) continue;
+      if (!clear(a, b) || !clear(w, a, n - 4 === 0 && c0 ? c0.a : -1) || !clear(b, z, c0 ? c0.z : -1)) continue;
+      const old = [p[n - 3], p[n - 2]];
+      p[n - 3] = a; p[n - 2] = b;
+      const ok = [n - 4, n - 3, n - 2].every((i) => { const s = { r, i, h: i === n - 3 ? !h : h }; const [lo, hi] = span(p, s); return !near(r, s, coord(p, s), lo, hi).length; });
+      if (ok) return;
+      [p[n - 3], p[n - 2]] = old;
+    }
+  });
+  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.
@@ -186,7 +250,8 @@ export function routeWith(A, scene) {
         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);
+        if (sidesOf(s) & SIDE_L) pin(0, 0.5, LEFT);
+        if (sidesOf(s) & SIDE_R) pin(1, 0.5, RIGHT);
       }
       return ref;
     });
@@ -200,7 +265,7 @@ export function routeWith(A, scene) {
       const ok = routeOk(pts, scene, c);
       if (ok) out.set(c.key, ok);
     });
-    return ROUTE.SEPARATE === false ? out : separate(out, scene);
+    return ROUTE.SEPARATE === false ? out : lengthen(separate(out, scene), scene);
   } finally {
     A.destroy(r);
   }

package/dist/ui/fleet-task-card.js

@@ -8,7 +8,7 @@ import { appStore, useStore } from "/assets/app-store.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
-import { StatusPill, answerBlocked, askText, boardApi, currentWork, errorText, followsSubs, moveCard, notesForPeople, relTime, wrapUpText } from "./fleet-task-common.js";
+import { StatusPill, Who, answerBlocked, askText, boardApi, currentWork, errorText, followsSubs, moveCard, notesForPeople, relTime, wrapUpText } from "./fleet-task-common.js";
 
 register("taskcard", {
   en: {
@@ -132,7 +132,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
   }
 
   if (missing || !detail) {
-    return html`<${Dialog} title=${id} onClose=${onClose} wide><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
+    return html`<${Dialog} title=${id} onClose=${onClose} wide drawer><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
   }
 
   const { card, parent, children } = detail;
@@ -166,7 +166,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
     } catch { /* no clipboard */ }
   }
 
-  return html`<${Dialog} title=${`${card.id} · ${t(`tasks.${card.kind}`)}`} onClose=${onClose} wide label=${`${card.id} ${card.title}`}>
+  return html`<${Dialog} title=${`${card.id} · ${t(`tasks.${card.kind}`)}`} onClose=${onClose} wide drawer label=${`${card.id} ${card.title}`}>
     <div class="tc">
       <div class="tc-head">
         ${writable ? html`<${InlineTitle} value=${card.title} version=${card.version} onSave=${(title, base) => save({ title }, base)} />` : html`<h3 class="tc-title">${card.title}</h3>`}
@@ -195,7 +195,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
 
       <dl class="tc-meta">
         <dt>${t("taskcard.assignee")}</dt>
-        <dd><span class="tb-who">${card.assignee || t("taskcard.nobody")}</span>
+        <dd><${Who} name=${card.assignee} empty=${t("taskcard.nobody")} />
           ${writable ? html`<select class="tb-select" value="\u0000pick" aria-label=${t("taskcard.assignee")} onChange=${(e) => { const v = e.target.value; e.target.value = "\u0000pick"; void chooseAssignee(v); }}>
             <option value="\u0000pick" disabled hidden>${t("taskcard.change")}</option>
             ${card.assignee ? html`<option value="\u0000none">${t("taskcard.unassign")}</option>` : null}
@@ -207,7 +207,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
           if (!now) return html`<span class="muted">${card.status === "review" ? t("tasks.review") : t("taskcard.nowNone")}</span>`;
           return now.cards.map((c) => html`<button key=${c.id} type="button" class="tc-now" onClick=${() => onOpen(c.id)} title=${c.title}>
             <span class=${`tb-now-label st-${now.tone}`}>${t(now.label)}</span><span class="tb-code">${c.id}</span><span class="tc-child-title">${c.title}</span>
-            <span class="tb-who">${c.assignee || t("tasks.nobody")}</span></button>`);
+            <${Who} name=${c.assignee} empty=${t("tasks.nobody")} /></button>`);
         })()}</dd>` : null}
         <dt>${t("taskcard.dispatcher")}</dt>
         <dd><span class="tb-who" title=${t("taskcard.dispatcherHint")}>${!card.dispatcher ? t("taskcard.dispatcherNone")

package/dist/ui/fleet-task-common.js

@@ -1,9 +1,10 @@
 // The task board's shared pieces (Fleet › Tasks): its words, the numbers a project shows, the requests, asking for a
-// reason, moving a card, and the small marks (status pill, progress bar). fleet-tasks.js draws the board and
+// reason, moving a card, and the small marks (status pill, progress bar, who). fleet-tasks.js draws the board and
 // fleet-task-card.js one card; both use these. No style attribute anywhere (the CSP): bars are SVG rects.
 import { html, useEffect, useState } from "/assets/app-html.js";
 import { t, register, lang } from "/assets/app-i18n.js";
-import { createStore, useStore } from "/assets/app-store.js";
+import { appStore, createStore, useStore } from "/assets/app-store.js";
+import { identityOf, paintIdentity, useIdentityColors } from "/assets/identity-color.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { toast } from "/assets/ui-toast.js";
 
@@ -14,7 +15,8 @@ register("tasks", {
     sizeS: "Small", sizeM: "Medium", sizeL: "Large", sizeNone: "Not sized",
     projects: "Projects", noProject: "No project", noProjectDesc: "Tasks the fleet opened outside any project",
     newProject: "New project", newMain: "Main task", archived: "Archived", archive: "Archive", restore: "Restore",
-    rename: "Rename or describe", projectName: "Name", projectDesc: "Description", create: "Create", save: "Save", cancel: "Cancel",
+    rename: "Edit project", projectName: "Name", projectDesc: "Description",
+    projectLead: "Lead instance", projectLeadNone: "None — General", projectLeadHint: "Cards of this project that wait for you (to confirm, or blocked) get their buttons in the lead's channel, unless an instance handed them out (then in its channel).", projectLeadGone: "{0} (no longer in the fleet)", projectLeadChip: "lead: {0}", create: "Create", save: "Save", cancel: "Cancel",
     projectCreated: "Project created", projectSaved: "Project saved",
     noProjects: "No projects yet", noProjectsHint: "A project groups related work — create one, then open main tasks in it.",
     mainCount: "{0} main tasks", mainOne: "1 main task", waiting: "{0} waiting for you", blockedN: "{0} blocked", lastActivity: "Last change {0}",
@@ -56,7 +58,7 @@ register("tasks", {
     "err.too_long": "{0} is too long: {1} characters, at most {2}", "err.state_lines": "State is at most {0} lines (it has {1})",
     "err.acceptance_empty": "An acceptance item cannot be empty", "err.acceptance_max": "At most {0} acceptance items",
     "err.acceptance_no_item": "There is no acceptance item {0} (there are {1})", "err.project_not_found": "There is no project “{0}”",
-    "err.project_name_empty": "A project needs a name", "err.project_name_digits": "A project's name cannot be only digits",
+    "err.project_name_empty": "A project needs a name", "err.project_name_digits": "A project's name cannot be only digits", "err.lead_not_instance": "The lead must be one of the fleet's instances",
     "err.project_name_taken": "There is already a project named “{0}”", "err.project_archived": "Project “{0}” is archived: it takes no new main tasks",
     "err.card_not_found": "There is no card {0}", "err.title_empty": "A card needs a title", "err.scope_main_only": "Scope is for main tasks only",
     "err.blocked_reason_not_blocked": "Only a blocked card has a blocked reason", "err.block_reason": "Blocking needs a reason: who has to answer what",
@@ -72,6 +74,13 @@ register("tasks", {
     "note.review_waiting": "{0} “{1}”: every sub task is done — it waits for your confirmation",
     "note.back_to": "{0} has unfinished sub tasks again: it is back to {1}", "note.deps_done": "{0}'s dependencies are all done: it can start",
     "note.deps_unmet": "Note: {0} not done yet",
+    // #2246 step 3: who works on what (fleet-task-work.js)
+    instances: "Instances", instancesTip: "The fleet's instances and what each works on", instancesHead: "{0} instance(s) · {1} working",
+    workSentBack: "Sent back", workDoing: "In progress", workBlocked: "Blocked", workReview: "Waiting for you", workMain: "Owns",
+    workReady: "Can start", workWaiting: "Waiting on", workSubs: "sub tasks {0}/{1}", workClaimable: "nobody's: can be taken",
+    workWaitsFor: "waits for {0}", workNone: "Nothing on the board", workNewComments: "Comments it has not read yet",
+    workOutside: "Not in the fleet", workFailed: "Could not read who works on what: {0}", workJoin: ", ",
+    detailsBoard: "Task board",
   },
   "zh-TW": {
     open: "待辦", claimed: "進行中", blocked: "卡住", review: "待確認", done: "完成", cancelled: "取消",
@@ -79,7 +88,8 @@ register("tasks", {
     sizeS: "小", sizeM: "中", sizeL: "大", sizeNone: "未定",
     projects: "專案", noProject: "未分類", noProjectDesc: "fleet 在專案以外開的 task",
     newProject: "新增專案", newMain: "主任務", archived: "已封存", archive: "封存", restore: "恢復",
-    rename: "改名或改說明", projectName: "名稱", projectDesc: "說明", create: "建立", save: "儲存", cancel: "取消",
+    rename: "編輯專案", projectName: "名稱", projectDesc: "說明",
+    projectLead: "負責的 instance", projectLeadNone: "無（General）", projectLeadHint: "這個專案裡等你處理的卡片（待確認或卡住）會在負責 instance 的頻道顯示按鈕；若卡片是某個 instance 派出的，則顯示在派出者的頻道。", projectLeadGone: "{0}（已不在 fleet 中）", projectLeadChip: "負責：{0}", create: "建立", save: "儲存", cancel: "取消",
     projectCreated: "專案已建立", projectSaved: "專案已儲存",
     noProjects: "還沒有專案", noProjectsHint: "專案是一組相關的工作：先建立專案，再在裡面開主任務。",
     mainCount: "{0} 個主任務", mainOne: "1 個主任務", waiting: "等你確認 {0}", blockedN: "卡住 {0}", lastActivity: "最後動態 {0}",
@@ -121,7 +131,7 @@ register("tasks", {
     "err.too_long": "{0}太長：{1} 字，上限 {2} 字", "err.state_lines": "目前狀態最多 {0} 行（現在 {1} 行）",
     "err.acceptance_empty": "驗收條件不能是空的", "err.acceptance_max": "驗收條件最多 {0} 項",
     "err.acceptance_no_item": "驗收條件沒有第 {0} 項（共 {1} 項）", "err.project_not_found": "找不到專案「{0}」",
-    "err.project_name_empty": "專案名稱不能是空的", "err.project_name_digits": "專案名稱不能只有數字",
+    "err.project_name_empty": "專案名稱不能是空的", "err.project_name_digits": "專案名稱不能只有數字", "err.lead_not_instance": "負責人必須是 fleet 裡的 instance",
     "err.project_name_taken": "已經有專案叫「{0}」", "err.project_archived": "專案「{0}」已封存，不能再開主任務",
     "err.card_not_found": "找不到 {0}", "err.title_empty": "標題不能是空的", "err.scope_main_only": "範圍只用在主任務",
     "err.blocked_reason_not_blocked": "只有卡住的卡才有卡住原因", "err.block_reason": "卡住要寫原因：需要誰回答什麼",
@@ -137,6 +147,13 @@ register("tasks", {
     "note.review_waiting": "{0}「{1}」的子任務都完成了，等你確認",
     "note.back_to": "{0} 又有沒完成的子任務，已回到{1}", "note.deps_done": "{0} 的相依都完成了，可以開始",
     "note.deps_unmet": "提醒：{0} 還沒完成",
+    // #2246 step 3：誰在做什麼（fleet-task-work.js）
+    instances: "Instance", instancesTip: "fleet 有哪些 instance、各在做什麼", instancesHead: "{0} 個 · 工作中 {1}",
+    workSentBack: "被退回", workDoing: "進行中", workBlocked: "卡住", workReview: "待確認", workMain: "負責",
+    workReady: "可以開始", workWaiting: "等前置", workSubs: "子任務 {0}/{1}", workClaimable: "沒人負責，可領",
+    workWaitsFor: "等 {0}", workNone: "看板上沒有它的卡", workNewComments: "有它還沒看過的留言",
+    workOutside: "不在 fleet 裡", workFailed: "讀不到工作清單：{0}", workJoin: "、",
+    detailsBoard: "任務看板",
   },
 });
 
@@ -312,7 +329,9 @@ export const boardApi = {
   move: (id, to, input = {}) => boardCall("POST", `/ui/tasks/cards/${enc(id)}/move`, { to, ...input }),
   reorder: (id, after, before) => boardCall("POST", `/ui/tasks/cards/${enc(id)}/reorder`, { after, before }),
   search: (q) => boardCall("GET", `/ui/tasks/search?q=${enc(q)}`),
-  createProject: (name, description) => boardCall("POST", "/ui/tasks/projects", { name, description }),
+  /** #2246 step 3: each instance's work (its `task mine`), or one instance's. */
+  work: (instance) => boardCall("GET", `/ui/tasks/work${instance ? `?instance=${enc(instance)}` : ""}`),
+  createProject: (name, description, leadInstance) => boardCall("POST", "/ui/tasks/projects", { name, description, ...(leadInstance ? { leadInstance } : {}) }),
   updateProject: (id, patch) => boardCall("POST", `/ui/tasks/projects/${id}`, patch),
 };
 
@@ -439,6 +458,21 @@ export function StatusPill({ status }) {
   return html`<span class=${`tb-pill st-${status}`}>${t(`tasks.${status}`)}</span>`;
 }
 
+/**
+ * Who a card is with, as taskhall shows it: a round initial, then the name. An instance's initial takes its identity
+ * colour (#1958, the sidebar's), painted through the CSSOM; a person's, or anyone not in the fleet, stays grey.
+ */
+export function Who({ name, title, empty = "—" }) {
+  const { instances } = useStore(appStore);
+  useIdentityColors();
+  if (!name) return html`<span class="tb-person none"><span class="tb-who">${empty}</span></span>`;
+  const it = (instances || []).find((i) => i.name === name);
+  const id = it ? identityOf(it) : null;
+  return html`<span class="tb-person" title=${title || name}>
+    <span class="tb-av idc" aria-hidden="true" ref=${(el) => paintIdentity(el, id)}>${initialOf(name)}</span><span class="tb-who">${name}</span></span>`;
+}
+const initialOf = (name) => (Array.from(name.trim())[0] || "?").toLocaleUpperCase();
+
 /** A per-device preference (localStorage may be unavailable: then nothing is remembered). */
 export function readStored(key, fallback) {
   try { const v = localStorage.getItem(key); return v === null ? fallback : v; } catch { return fallback; }

package/dist/ui/fleet-task-work.js

@@ -0,0 +1,107 @@
+// #2246 step 3: who works on what on the task board — each instance's cards as its `task mine` reads them (GET
+// /ui/tasks/work, the server's myWork): the board's Instance list, a drawer by team as taskhall's, and the block on an
+// instance's Details page. A card opens on the board. No style attribute anywhere (the CSP).
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t } from "/assets/app-i18n.js";
+import { appStore, useStore } from "/assets/app-store.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { Icon } from "/assets/ui-icons.js";
+import { Skeleton } from "/assets/ui-states.js";
+import { GroupMark, InstanceAvatar, dotLabel, dotState, groupKind, groupLabel, groupOf, namesOf, namesStore } from "/assets/instance-nav.js";
+import { Who, boardApi, errorText } from "./fleet-task-common.js";
+
+const LABEL = { back: "tasks.workSentBack", doing: "tasks.workDoing", blocked: "tasks.workBlocked", review: "tasks.workReview", main: "tasks.workMain", ready: "tasks.workReady", waiting: "tasks.workWaiting" };
+
+/**
+ * An instance's work as lines, in taskhall's order: what it works on, is blocked on, waits on the person for, the main
+ * tasks it coordinates, what it can start, what waits for other cards. A card sent back to it says so instead.
+ */
+export function workLines(w) {
+  const back = new Set(w.sentBack || []), unread = new Set(w.newComments || []);
+  const line = (kind, card, note = "") => ({ kind: kind !== "main" && back.has(card.id) ? "back" : kind, card, note, unread: unread.has(card.id) });
+  return [
+    ...(w.doing || []).map((c) => line("doing", c)),
+    ...(w.blocked || []).map((c) => line("blocked", c)),
+    ...(w.review || []).map((c) => line("review", c)),
+    ...(w.mains || []).map((c) => line("main", c, c.progress && c.progress.total ? t("tasks.workSubs", c.progress.done, c.progress.total) : "")),
+    ...(w.ready || []).map((c) => line("ready", c, c.assignee ? "" : t("tasks.workClaimable"))),
+    ...(w.waiting || []).map((c) => line("waiting", c, t("tasks.workWaitsFor", (c.unmetDeps || []).join(t("tasks.workJoin"))))),
+  ];
+}
+
+export function WorkLines({ lines, onOpen }) {
+  if (!lines.length) return html`<p class="muted tw-none">${t("tasks.workNone")}</p>`;
+  return html`<ul class="tw-lines">${lines.map((l) => html`<li key=${`${l.kind}:${l.card.id}`}>
+    <button type="button" class="tw-line" title=${`${l.card.id} ${l.card.title}`} onClick=${() => onOpen(l.card.id)}>
+      <span class=${`tw-kind k-${l.kind}`}>${t(LABEL[l.kind])}</span><span class="tb-code">${l.card.id}</span><span class="tw-title">${l.card.title}</span>
+      ${l.note ? html`<span class="muted tw-note">${l.note}</span>` : null}
+      ${l.unread ? html`<span class="tw-unread" title=${t("tasks.workNewComments")} aria-label=${t("tasks.workNewComments")}><${Icon} name="chat" size=${13} /></span>` : null}
+    </button></li>`)}</ul>`;
+}
+
+const OUTSIDE = "\u0000outside";
+/** Groups as the sidebar orders them: teams, then tags, then the rest; names nobody in the fleet has last. */
+const groupRank = (g) => (g === OUTSIDE ? 3 : groupKind(g) === "team" ? 0 : groupKind(g) === "tag" ? 1 : 2);
+
+/** The board's Instance list: every instance by team, working ones first, each with its cards. Read again on each board change. */
+export function InstancesDrawer({ tick, onClose, onOpen }) {
+  const { instances, exec, awaiting } = useStore(appStore);
+  useStore(namesStore);                                   // the sidebar's Names choice: display name or instance name first
+  const [work, setWork] = useState(null);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let live = true;
+    boardApi.work().then((d) => { if (live) { setWork(d.instances || []); setError(""); } }, (e) => { if (live) setError(errorText(e)); });
+    return () => { live = false; };
+  }, [tick]);
+  const byName = new Map((instances || []).map((i) => [i.name, i]));
+  const rows = (work || []).map((w) => {
+    const it = byName.get(w.name);
+    return { w, it, state: it ? dotState(it, exec[w.name], awaiting[w.name]) : null, lines: workLines(w) };
+  });
+  // Working first, then those with cards, then the running ones; by name.
+  const rank = (r) => (r.state === "working" ? 0 : r.lines.length ? 1 : r.it && r.it.status === "running" ? 2 : 3);
+  rows.sort((a, b) => rank(a) - rank(b) || a.w.name.localeCompare(b.w.name));
+  const groups = new Map();
+  for (const r of rows) {
+    const g = r.it ? groupOf(r.it) : OUTSIDE;
+    if (!groups.has(g)) groups.set(g, []);
+    groups.get(g).push(r);
+  }
+  const ordered = [...groups].sort(([a], [b]) => groupRank(a) - groupRank(b));
+  const working = rows.filter((r) => r.state === "working").length;
+  return html`<${Dialog} title=${t("tasks.instances")} onClose=${onClose} wide drawer>
+    <div class="tw">
+      ${work ? html`<p class="muted tw-head">${t("tasks.instancesHead", rows.length, working)}</p>` : null}
+      ${error ? html`<p class="tw-error" role="alert">${t("tasks.workFailed", error)}</p>` : null}
+      ${!work && !error ? html`<${Skeleton} lines=${4} />` : null}
+      ${ordered.map(([g, list]) => html`<section key=${g} class="tw-group">
+        <h3 class="tw-group-head">${g === OUTSIDE ? t("tasks.workOutside") : html`<${GroupMark} group=${g} />${groupLabel(g)}`}<span class="tb-count">${list.length}</span></h3>
+        ${list.map((r) => html`<div key=${r.w.name} class="tw-inst">
+          <div class="tw-inst-head">
+            ${r.it ? html`<${InstanceAvatar} it=${r.it} state=${r.state} />` : html`<${Who} name=${r.w.name} />`}
+            ${r.it ? (() => { const n = namesOf(r.it); return html`<span class="tw-name" title=${r.w.name}>${n.primary}</span>${n.secondary ? html`<span class="muted tw-alt">${n.secondary}</span>` : null}`; })() : null}
+            ${r.state ? html`<span class="muted tw-state">${dotLabel(r.state)}</span>` : null}
+          </div>
+          ${r.it && r.it.description ? html`<p class="muted tw-desc">${r.it.description}</p>` : null}
+          <${WorkLines} lines=${r.lines} onOpen=${onOpen} />
+        </div>`)}
+      </section>`)}
+    </div>
+  </${Dialog}>`;
+}
+
+/** An instance's Details page: its cards, read once when the page opens (the page reads nothing recurring, #1374). */
+export function InstanceBoardWork({ name, onOpen }) {
+  const [work, setWork] = useState(null);
+  const [error, setError] = useState("");
+  useEffect(() => {
+    let live = true;
+    setWork(null); setError("");
+    boardApi.work(name).then((d) => { if (live) setWork((d.instances || [])[0] || { name }); }, (e) => { if (live) setError(errorText(e)); });
+    return () => { live = false; };
+  }, [name]);
+  return html`<section class="card d-board"><h3>${t("tasks.detailsBoard")}</h3>
+    ${error ? html`<p class="note">${t("tasks.workFailed", error)}</p>` : !work ? html`<${Skeleton} lines=${2} />` : html`<${WorkLines} lines=${workLines(work)} onOpen=${onOpen} />`}
+  </section>`;
+}