@songsid/agend 2.3.2-beta.14 → 2.3.2-beta.16

package/dist/ui/fleet-office.js

@@ -60,13 +60,15 @@ import { appStore } from "/assets/app-store.js";
 import { t, lang, register } from "/assets/app-i18n.js";
 import { identityOf } from "/assets/identity-color.js";
 import { Icon } from "/assets/ui-icons.js";
-import { nodeText } from "./fleet-org.js";
+import { nodeText, stateWords } from "./fleet-org.js";
 import { hits, needle } from "./fleet-canvas-layout.js";
 import { AUTO_ID, LOBBY, autoLayout, backingScale, coatOf, createFlights, customLayout, deskAt, desksOf, filterOk, lampOf, layoutOk, lightOf, membersOf,
   officePose, officeRooms, signOf, workOn } from "./fleet-office-model.js";
 import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, bubbleBox, loadCozySkin, loadPackSkin, modeOf, skinFor, tagBox } from "./fleet-office-skin.js";
 import { CALLING, activeFurniture, bubbleAt, hiddenBy, bubbleRank, NIGHT, WANDER, createMail, createWalkers, isNight, linesFor, npcKey, personAt, placeBubbles, thinBubbles, walkTargets, zonesLayout } from "./fleet-office-zones.js";
 import { actsOk, createOfficeStore } from "./fleet-office-store.js";
+import { badgeOf, fixedOf } from "./fleet-office-levels.js";
+import { OfficeCard, cardModel } from "./fleet-office-card.js";
 import { POLL_MS } from "./fleet-traffic.js";
 import { OfficeEditor, officeForSave } from "./fleet-office-editor.js";
 import { LayoutEditor, handlesOf } from "./fleet-office-layout.js";
@@ -75,7 +77,7 @@ import { applyOverrides, fitNight, fitSeatFor, stripBox } from "./fleet-office-p
 import { ALL_ID, LOBBY_TILE, OV, createCrossFlights, cropToRooms, fromTile, inTile, labelAt, lobbyNodes, overviewOk, tileAt, tileBox, tileLayout, visibleTiles } from "./fleet-office-overview.js";
 import { centreOn, gestureState, gestures, miniPoint, toScreen, toWorld, wheelFactor, zoomKey, zoomTo } from "./fleet-canvas-view.js";
 import { OK_MAX, OK_MIN, clampPan, desksK, edgeMatte, edgeStrips, fitScene, layerScale, miniBox, miniFrame, openingView, pinchOffice, savedOf, stepK, viewFromSaved,
-  zoomLabel, zoomOffice } from "./fleet-office-view.js";
+  wholeInView, zoomLabel, zoomOffice } from "./fleet-office-view.js";
 
 register("orgo", {
   en: {
@@ -89,6 +91,8 @@ register("orgo", {
     b_paused: "Zzz…|Back later", b_stopped: "Off duty|Zzz…", b_needs: "Need you!|A question for you|Over here!",
     b_crashed: "Ouch, crashed|Help!", b_stuck: "Hmm, stuck?|Still thinking…",
     hideAsleep: "Hide paused and stopped", nightOn: "Bedtime 0–6: the idle sleep", layoutIgnored: "Its saved layout does not fit this style: drawn as the style's own.",
+    styleForAll: "The whole fleet's style, for everyone: every device and share link", styleHere: "The whole fleet's style in this browser",
+    styleFailed: "The style was not saved for everyone ({0}).", styleBusy: "Too many changes. Try again in a minute.",
     fit: "Fit the office", overview: "Overview: click to move there", fullscreen: "Fullscreen", exitFullscreen: "Exit fullscreen",
     fill: "Fill", fillTitle: "Fill the panel (the scene's overflow is cropped; drag to see it)", zoomLevel: "Zoom {0}",
     allOffices: "All offices", labelAll: "All offices: each office is a tile, drawn in its own style. Drag to pan; the wheel, a pinch, + and − zoom, 0 fits, F is fullscreen. Double-click a tile to open that office.",
@@ -105,6 +109,8 @@ register("orgo", {
     b_paused: "Zzz…|晚點回來", b_stopped: "下班了|Zzz…", b_needs: "需要你！|有個問題|在這裡！",
     b_crashed: "糟糕，當掉了|救命！", b_stuck: "嗯，卡住了？|還在想…",
     hideAsleep: "隱藏暫停與停止的成員", nightOn: "0–6 點就寢：閒著的人去睡", layoutIgnored: "它儲存的配置不適用這個風格：以風格本身的配置顯示。",
+    styleForAll: "整個 fleet 的風格，所有人共用：每台裝置與分享連結都一樣", styleHere: "這個瀏覽器裡整個 fleet 的風格",
+    styleFailed: "風格沒有替所有人儲存（{0}）。", styleBusy: "變更太頻繁，請一分鐘後再試。",
     fit: "顯示整個辦公室", overview: "總覽：點一下移到那裡", fullscreen: "全螢幕", exitFullscreen: "結束全螢幕",
     fill: "填滿", fillTitle: "填滿整個面板（超出的部分會被裁切，拖曳即可看到）", zoomLevel: "縮放 {0}",
     allOffices: "所有辦公室", labelAll: "所有辦公室：每間辦公室是一格，以它自己的風格顯示。拖曳平移；滾輪、雙指、+ 和 − 縮放，0 顯示全部，F 切換全螢幕。雙擊一格即可開啟那間辦公室。",
@@ -148,6 +154,14 @@ function sampledMatte(img) {
   return m;
 }
 const now = () => (typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now());
+/** #2661: how often the levels are read again while the Office is shown (the host reuses them for a minute). */
+const LEVELS_MS = 60_000;
+/** #2661: how long a level-up's ring shows. */
+const UP_MS = 1800;
+/** #2661: Find in office zooms in to at least this (CSS px a logical unit). */
+const FIND_K = 2;
+/** #2661: below this stage width (CSS px) the card is a bottom sheet. */
+const SHEET_W = 560;
 /** How often the picture can change when nothing is in the air (the poses loop at 4 fps; a bubble types faster). */
 const FPS = 12;
 const STYLES = BUILT_IN_SKINS;
@@ -167,6 +181,7 @@ function readPal(el) {
     bg: v("--bg", D.bg), surface: v("--surface", D.surface), surface2: v("--surface-2", D.surface2), border: v("--border", D.border),
     text: v("--text", D.text), text2: v("--text-2", D.text2), text3: v("--text-3", D.text3), ok: v("--ok", D.ok), warn: v("--warn", D.warn),
     danger: v("--danger", D.danger), focus: v("--focus", D.focus),
+    accent: v("--accent", D.accent), accentDim: v("--accent-dim", D.accentDim), okBg: v("--ok-bg", D.okBg), warnBg: v("--warn-bg", D.warnBg), dangerBg: v("--danger-bg", D.dangerBg),
     fx: { task: v("--fx-task", D.fx.task), send: v("--fx-send", D.fx.send), report: v("--fx-report", D.fx.report), broadcast: v("--fx-broadcast", D.fx.broadcast) },
   };
 }
@@ -179,15 +194,19 @@ function teamOptions(view) {
 
 // ── A scene: one office's layout, looks and skin, drawn by itself (the single view) or as a tile (All offices, #2554) ──
 
-/** What each desk shows: the pose, the light, the coat; dimmed when the Find box matches someone else. */
-function looksOf(L, work, q, mode, zones) {
+/**
+ * What each desk shows: the pose, the light, the coat; dimmed when the Find box matches someone else; #2661: its level
+ * badge (`badge(name)`: fleet-office-levels.js badgeOf, or nothing).
+ */
+function looksOf(L, work, q, mode, zones, badge = () => null) {
   return new Map(L.rooms.flatMap((r) => r.desks).map((d) => {
     const n = d.node;
     if (!n) return [d.key, { name: "", label: "", state: "missing", pose: "away", light: null, lamp: false, sign: null, coat: "", work: 0, dim: !!q, match: false, free: zones }];
     const match = !!q && hits(n, q);
     // At night (#2568) the idle are drawn asleep (their state stays idle: the tooltip and the list say so).
     return [d.key, { name: n.name, label: nodeText(n).primary, state: n.state, pose: officePose(d.night ? "paused" : n.state), night: !!d.night, light: lightOf(n.state), lamp: lampOf(n.state),
-      sign: zones ? null : signOf(n.state), coat: coatOf(n.i, n.i ? identityOf(n.i) : null, mode), work: work.get(n.name) || 0, dim: !!q && !match, match, free: zones }];
+      sign: zones ? null : signOf(n.state), coat: coatOf(n.i, n.i ? identityOf(n.i) : null, mode), work: work.get(n.name) || 0, dim: !!q && !match, match, free: zones,
+      badge: badge(n.name) }];
   }));
 }
 /** A stored office's own layout on a zones style (its overrides); `ignored`: they do not fit this style. */
@@ -207,7 +226,9 @@ function officeScene(office, nodes, skin, zones, deskW, prevSeats, night = false
 export function partOf(L, looks, skin, zones, walkers, flights) {
   const all = L.rooms.flatMap((r) => r.desks);
   const shown = new Set([...looks.values()].map((l) => l.state)), byName = new Map([...looks.values()].filter((l) => l.name).map((l) => [l.name, l.state]));
-  return { L, looks, skin, zones, walkers, flights, all, desks: all.filter((d) => d.node), layers: null,
+  // #2661: each desk's room (Desks: who is in the same area as a level-up, drawPart).
+  const roomOf = new Map(L.rooms.flatMap((r) => r.desks.map((d) => [d.key, r.key])));
+  return { L, looks, skin, zones, walkers, flights, all, desks: all.filter((d) => d.node), layers: null, roomOf,
     active: zones ? activeFurniture(skin.pack, shown, byName) : new Set(), lines: bubbleDefaults(), lang: lang() };
 }
 /**
@@ -413,12 +434,12 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
     for (const f of furniture) {
       const on = people.filter((q) => live.hidden.get(q.look.name) === f.id);
       if (!on.length) {
-        if (!tagsOff && f.label) { sk.drawTag(ctx, f.x, f.y, { label: f.label }, env); tags.push(tagBox(ctx, f.x, f.y, f.label)); }
+        if (!tagsOff && f.label) { const nl = npcLook(p, f); sk.drawTag(ctx, f.x, f.y, nl, env); tags.push(tagBox(ctx, f.x, f.y, nl.label)); }
         continue;
       }
       const order = new Map((f.activeFor || []).map((n, i) => [n, i]));
       on.sort((x, y) => (order.get(x.look.name) ?? 0) - (order.get(y.look.name) ?? 0));
-      const row = tagRow(ctx, f.x, f.y, [...(f.label ? [{ label: f.label }] : []), ...on.map((q) => q.look)]);
+      const row = tagRow(ctx, f.x, f.y, [...(f.label ? [npcLook(p, f)] : []), ...on.map((q) => q.look)]);
       const top = f.sprite ? Math.min(f.y - 50, stripBox(f.activeSprite || f.sprite, f.x, f.y).y + 2) : f.y - 50;
       for (const [i, r] of row.entries()) {
         const q = f.label ? on[i - 1] : on[i];
@@ -432,13 +453,29 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
     }
     p.heldTags = held;
   } else {
-    for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, actPosed(p, look), ms, env); speakers.push({ look, x: d.x + 58, y: d.y + 12 }); }
+    for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, actPosed(p, look), ms, env); speakers.push({ look, x: d.x + 58, y: d.y + 12, area: p.roomOf.get(d.key) ?? null }); }
     blit(p.layers.front);
     // Tags left out of the layer: the hovered desk's front again, with its tag.
     const hd = tagsOff && hot ? p.desks.find((d) => d.key === hot) : null;
     if (hd) sk.drawDeskFront(ctx, hd, p.looks.get(hd.key), env);
     for (const it of up) sk.drawProp(ctx, it, ms, env);
   }
+  // #2661: a level up — a short ring over the head (UP_MS), and the people in the same area (a room's on Desks) glance
+  // over: a small "!" over theirs. Never with reduced motion (no loop: ms 0).
+  const rising = ms && p.ups && p.ups.size ? speakers.filter((sp) => { const t0 = p.ups.get(sp.look.name); return t0 !== undefined && now() - t0 < UP_MS; }) : [];
+  for (const sp of rising) {
+    const f = (now() - p.ups.get(sp.look.name)) / UP_MS;
+    ctx.save();
+    ctx.globalAlpha = 1 - f;
+    ctx.strokeStyle = env.pal.warn; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.arc(sp.x, sp.y - 8, 6 + f * 14, 0, Math.PI * 2); ctx.stroke();
+    ctx.fillStyle = env.pal.text; ctx.font = "700 9px system-ui, sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "bottom";
+    for (const o of speakers) {
+      if (o === sp || o.look.dim || o.look.pose === "away" || (o.area ?? null) !== (sp.area ?? null)) continue;
+      ctx.fillText("!", o.x, o.y - 4);
+    }
+    ctx.restore();
+  }
   // Speech bubbles: a short line for the state, now and then (typed out; whole at once when still), placed so no two
   // overlap (placeBubbles; #2431).
   const bubbles = [];
@@ -456,7 +493,15 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
   const placed = placeBubbles(thinBubbles(bubbles, p.zones ? p.L.over : null), 22, tags);
   const say = () => { T(); for (const { sp, b, dy } of placed) sk.drawBubble(ctx, sp.x, sp.y, [...b.text].slice(0, b.shown).join(""), env, -dy); };
   if (defer) defer.push(say); else say();
-  return walking || up.length > 0 || p.flights.size() > 0 || post.some((it) => it.t > 0);
+  return walking || up.length > 0 || p.flights.size() > 0 || post.some((it) => it.t > 0) || rising.length > 0;
+}
+/**
+ * #2661: an NPC's name tag (a furniture item's label) — with the title a pack pins on it (`levels.fixed` by its id),
+ * while levels are on: "label · title", and a mark for a badge (an NPC has no level).
+ */
+function npcLook(p, f) {
+  const fx = p.levelsOn ? fixedOf(f.id, p.skin.pack && p.skin.pack.levels) : null;
+  return fx ? { label: `${f.label} · ${fx.title}`, badge: { mark: true, tier: 0 } } : { label: f.label };
 }
 /**
  * The person at (x, y) in a scene's units, as it draws them: on zones where they walk, in the box the skin draws them
@@ -531,7 +576,12 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   const [editing, setEditing] = useState(false);
   const [choice, setChoice] = useState(() => opening ?? store.choice());
   const [filter, setFilter] = useState(() => store.filter());
-  const [style, setStyle] = useState(() => store.skin());
+  // #2716: the whole-fleet office's style — the host's (for everyone) and this browser's own pick. An admin sees the
+  // host's (their own pick only while the host keeps none) and picks for everyone; anyone else's own pick, else the host's.
+  const [hostStyle, setHostStyle] = useState(undefined);            // undefined: not read yet; null: none kept
+  const [ownStyle, setOwnStyle] = useState(() => store.skinChosen());
+  const [styleErr, setStyleErr] = useState("");
+  const style = canEdit ? hostStyle ?? ownStyle ?? "cozy" : ownStyle ?? hostStyle ?? "cozy";
   const [hideAsleep, setHideAsleep] = useState(() => store.hideAsleep());
   // Bedtime (#2568), when it is on here: the idle sleep from NIGHT.FROM to NIGHT.TO on this device's clock (read every NIGHT.TICK).
   const [nightOn, setNightOn] = useState(() => store.nightOn());
@@ -553,6 +603,10 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   const [themeRev, setThemeRev] = useState(0);
   const [pal, setPal] = useState(DEFAULT_PAL);                      // the tokens in force (read once the stage is there)
   const [tip, setTip] = useState(null);                               // the desk key the tooltip is for
+  // #2661: the person whose card is open (their key, as `tip`), and the desk-list entry it was opened from (focus goes
+  // back there when it closes); the card's element and where it points (placed every frame: it follows them).
+  const [card, setCard] = useState(null);
+  const cardFrom = useRef(null), cardEl = useRef(null), cardDesk = useRef(null);
   const stageRef = useRef(null), canvasRef = useRef(null), tipRef = useRef(null), lastType = useRef("mouse");
   // Fullscreen: null, "native" (the Fullscreen API) or "immersive" (the CSS cover); per visit, never kept.
   const ooRef = useRef(null), [fs, setFs] = useState(null), fsRef = useRef(null), fsAsked = useRef(false), fsTarget = useRef(null);
@@ -572,15 +626,34 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   // The editor's save and its 409 re-read are stamped when sent (`ask`), never when answered; `adopt` returns the
   // snapshot in force, so a re-read the stream overtook leaves the editor's draft on the newer one.
   const asked = useRef(0), shown = useRef(null);                      // a counter; shown: { rev, offices, arrived }
+  const migrated = useRef(false);                                     // #2716: this page's own style sent up
   const ask = () => ++asked.current;
   const adopt = (d, askedAt) => {
     const cur = shown.current;
     if (!d) return cur;
     if (cur && d.rev < cur.rev && askedAt <= cur.arrived) return cur;
     shown.current = { rev: d.rev, offices: d.offices, arrived: ++asked.current };
-    setStored(d.offices); setStoredRev(d.rev);
+    setStored(d.offices); setStoredRev(d.rev); setHostStyle(d.autoSkin || null);
     return shown.current;
   };
+  // #2716: an admin's own pick from before the host kept one (or since an older host's save dropped it) goes up once.
+  useEffect(() => {
+    if (!canEdit || hostStyle !== null || !ownStyle || migrated.current || !lease) return;
+    migrated.current = true;
+    void store.saveAutoSkin(ownStyle).then((r) => { if (r.ok && lease.current()) setHostStyle(r.autoSkin); });
+  }, [canEdit, hostStyle]);
+  /** #2716: a style picked here — this browser's own; an admin's, for everyone (on failure: said, and read again). */
+  const pickStyle = (id) => {
+    store.saveSkin(id); setOwnStyle(id); setTip(null); setStyleErr("");
+    if (!canEdit || !lease) return;
+    const was = hostStyle;
+    setHostStyle(id);
+    void store.saveAutoSkin(id).then((r) => {
+      if (!lease.current() || r.ok) return;
+      setHostStyle(was);
+      setStyleErr(to(r.status === 429 ? "styleBusy" : "styleFailed", r.error));
+    });
+  };
   useEffect(() => {
     if (!lease) return undefined;
     const read = async () => { const at = ask(); const d = await store.offices(); if (lease.current()) adopt(d, at); };
@@ -593,6 +666,27 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   // A read a newer one or the stream overtook is dropped (it is older: review — an opening read answered after the one
   // the stream's return began brought a cleared act back); read again when the stream comes back, and — with no live
   // stream (the public link, or a stream polling) — every POLL_MS while the page is shown.
+  // #2661: everyone's level (fleet-office-levels.js levelsOk): read on opening and every LEVELS_MS while shown — the
+  // host works them out at most once a minute, so nothing here asks more often.
+  const [lv, setLv] = useState(null);
+  // Who went up a level since the last read (name → when it was seen): a ring over them for UP_MS (drawPart).
+  const ups = useRef(new Map()), lastLevels = useRef(null);
+  useEffect(() => {
+    if (!lease) return undefined;
+    const read = async () => {
+      const d = await store.levels();
+      if (!lease.current() || !d) return;
+      const before = lastLevels.current, t = now();
+      if (before) for (const [name, e] of d.levels) { const b = before.get(name); if (b && e.level > b.level) ups.current.set(name, t); }
+      for (const [name, t0] of ups.current) if (t - t0 >= UP_MS) ups.current.delete(name);
+      lastLevels.current = d.levels;
+      setLv(d);
+      loop.current?.wake();
+    };
+    void read();
+    const h = lease.interval(() => { if (!globalThis.document?.hidden) void read(); }, LEVELS_MS);
+    return () => lease.clear(h);
+  }, [lease, store]);
   const [acts, setActs] = useState([]);
   const actSeen = useRef(new Set());
   useEffect(() => {
@@ -739,10 +833,10 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     });
   }, [overview, stored, view, packs, packSkins, cozyRev, hideAsleep, lobbyOn, lobbyAll, style, night]);
   const arranged = useMemo(() => tileLayout(tiles.map((tl) => ({ key: tl.key, w: tl.L.width, h: tl.L.height })), size), [tiles, size.w, size.h]);
-  const tileLooks = useMemo(() => { const work = workOn(traffic); return tiles.map((tl) => looksOf(tl.L, work, q, mode, tl.zones)); }, [tiles, traffic, q, mode, themeRev]);
+  const tileLooks = useMemo(() => { const work = workOn(traffic); return tiles.map((tl) => looksOf(tl.L, work, q, mode, tl.zones, (n) => badgeOf(n, lv, tl.skin.pack && tl.skin.pack.levels))); }, [tiles, traffic, q, mode, themeRev, lv]);
   // The scene the view pans and zooms: the office's, or the overview of every tile.
   const L = useMemo(() => (overview ? { mode: "overview", rooms: [], width: arranged.width, height: arranged.height } : single), [overview, single, arranged]);
-  const looks = useMemo(() => looksOf(L, workOn(traffic), q, mode, zones), [L, traffic, q, mode, themeRev]);
+  const looks = useMemo(() => looksOf(L, workOn(traffic), q, mode, zones, (n) => badgeOf(n, lv, skin.pack && skin.pack.levels)), [L, traffic, q, mode, themeRev, lv, skin]);
   // #2564: what comes in from other offices — one office's and style's own: a letter's door and drop are that layout's,
   // so another office (or style) starts with none (one shown meanwhile is not carried over to a different room).
   // #2578: the acts of the people in this stored office (by name); none elsewhere. On a desks style (review: accepted
@@ -818,6 +912,23 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     const v = view0(), p = toScreen(v, d.x, d.y), x = Math.max(4, Math.min(p.x, size.w - 244)), above = p.y > 90;
     el.style.setProperty("transform", above ? `translate(${x}px, ${p.y + 6}px) translateY(-100%)` : `translate(${x}px, ${p.y + d.h * v.k}px)`);
   };
+  /**
+   * #2661: the card beside its person — to their right (left where it would not fit), level with their head, inside the
+   * stage — following them as they walk (a walker's position now, else their seat or desk). A bottom sheet is not placed.
+   */
+  const placeCard = () => {
+    const el = cardEl.current, c = cardDesk.current;
+    if (!el || !c || !el.style || el.classList?.contains("sheet")) return;
+    const v = view0(), sz = sizeRef.current;
+    const w = c.walks ? walkers.at(c.name, now()) : null;
+    const pt = w ? { x: w.x, y: w.y - 52, r: 16 } : { x: c.box.x + c.box.w / 2, y: c.box.y, r: (c.box.w / 2) * v.k };
+    const p = toScreen(v, pt.x, pt.y), cw = 320, ch = el.offsetHeight || 260, gap = 12 + (w ? pt.r : pt.r);
+    let x = p.x + gap;
+    if (x + cw > sz.w - 8) x = p.x - gap - cw;
+    x = Math.max(8, Math.min(x, sz.w - cw - 8));
+    const y = Math.max(8, Math.min(p.y - 24, sz.h - ch - 8));
+    el.style.setProperty("transform", `translate(${Math.round(x)}px, ${Math.round(y)}px)`);
+  };
   /**
    * Put the view on everything that shows it beside the canvas: the overview's frame (the part of the scene in view;
    * the whole view on its data-k/x/y), the zoom's percentage, the overlay, the tooltip.
@@ -832,6 +943,9 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     if (mb && mb.style) {                                              // the overview: inside the stage, scaled to it
       const b = miniBox(size, L.width, L.height);
       for (const [a, val] of [["left", b.x], ["top", b.y], ["width", b.w], ["height", b.h]]) mb.style.setProperty(a, `${val}px`);
+      // #2737: hidden while a single office is all in view (it would show what the panel shows); All offices keeps it.
+      if (!overview && wholeInView(v, size, L.width, L.height)) mb.setAttribute("data-whole", "");
+      else mb.removeAttribute("data-whole");
     }
     const pc = pctRef.current;
     if (pc) { const lb = zoomLabel(v.k); if (pc.textContent !== lb) pc.textContent = lb; pc.setAttribute("aria-label", to("zoomLevel", lb)); }
@@ -1013,18 +1127,19 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     const base = { ctx, ratio, BW, BH, matte, env, dirty: true };
     if (overview) {
       // Each tile a scene of its own, where the overview puts it (arranged.tiles, in the same order).
-      const parts = tiles.map((tl, i) => ({ ...partOf(tl.L, tileLooks[i], tl.skin, tl.zones, tl.walkers, tl.flights), night, key: tl.key, prefix: tl.prefix, tile: arranged.tiles[i] }));
+      const parts = tiles.map((tl, i) => ({ ...partOf(tl.L, tileLooks[i], tl.skin, tl.zones, tl.walkers, tl.flights), night, key: tl.key, prefix: tl.prefix, tile: arranged.tiles[i], ups: ups.current, levelsOn: !!(lv && lv.enabled) }));
       scene.current = { ...base, overview: true, parts, lay: arranged };
     } else {
-      scene.current = { ...base, overview: false, part: { ...partOf(L, looks, skin, zones, walkers, flights), ghosts, night, mail, acts: actsHere, actSeen: actSeen.current } };
+      scene.current = { ...base, overview: false, part: { ...partOf(L, looks, skin, zones, walkers, flights), ghosts, night, mail, acts: actsHere, actSeen: actSeen.current, ups: ups.current, levelsOn: !!(lv && lv.enabled) } };
     }
     if (still) draw(0); else loop.current?.wake();
-  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged, ghosts, night, mail, actsHere]);
+  }, [L, looks, skin, pal, size.w, size.h, ratio, matte, overview, tiles, tileLooks, arranged, ghosts, night, mail, actsHere, lv]);
 
   /** One frame at `ms` (0: still); whether anything is moving (in the air, or someone walking). */
   function draw(ms) {
     const s = scene.current;
     if (!s) return false;
+    placeCard();
     const { ctx, BW, BH, env } = s;
     // The view in bitmap px: a logical unit is `a` px (a whole number at a pixel level), the origin on a whole px.
     const v = view0(), a = v.k * s.ratio, ox = Math.round(v.x * s.ratio), oy = Math.round(v.y * s.ratio);
@@ -1103,11 +1218,16 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   // Everyone drawn: { key, node, box (the desk, in the view's units), dot (where the overview marks them), office (All
   // offices: the tile's name) }. In All offices a key is the tile's prefix and the desk's key: one person in two
   // offices is two people here.
+  // #2661: and for the card, where they are (`area`: the zone's or the room's name), the style that draws them, their look.
+  const roomOf = (L0, d) => { const r = L0.rooms.find((rm) => rm.desks.includes(d)); return r ? (r.lobby ? to("lobbyRoom") : r.name) : null; };
+  const areaName = (a) => (a ? ({ desks: to("area_desks"), lounge: to("area_lounge"), alert: to("area_alert"), nap: to("area_nap") })[a] || a : null);
   const people = overview
-    ? tiles.flatMap((tl, i) => { const tt = arranged.tiles[i];
+    ? tiles.flatMap((tl, i) => { const tt = arranged.tiles[i], lk = tileLooks[i];
       return tt ? desksOf(tl.L).map((d) => ({ key: tl.prefix + d.key, node: d.node, box: tileBox(tt, d), office: tl.name,
-        dot: fromTile(tt, tl.zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 }) })) : []; })
-    : desksOf(L).map((d) => ({ key: d.key, node: d.node, box: d, office: null, dot: zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 } }));
+        dot: fromTile(tt, tl.zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 }),
+        area: tl.zones ? areaName(d.area) : roomOf(tl.L, d), skin: tl.skin, look: lk && lk.get(d.key) })) : []; })
+    : desksOf(L).map((d) => ({ key: d.key, node: d.node, box: d, office: null, dot: zones ? d.seat : { x: d.x + d.w / 2, y: d.y + d.h / 2 },
+      area: zones ? areaName(d.area) : roomOf(L, d), skin, look: looks.get(d.key) }));
   // Preact owns the markup, not the view: put it back on the overview, the overlay and the tooltip after every render.
   const tipDesk = tip ? people.find((d) => d.key === tip) || null : null;
   tipDeskRef.current = tipDesk ? tipDesk.box : null;
@@ -1170,16 +1290,20 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     if (d) show(d.box);
   };
   const onMove = (e) => { if (e.pointerType === "touch" || g.busy()) return; const d = deskOf(e); const key = d ? d.key : null; if (key !== tip) setTip(key); };
+  // #2661: a click (or a tap) on a person opens their card; on the same person again, or off everyone, closes it; on
+  // someone else, switches to theirs. A double-click skips the card and opens the chat.
   const onClick = (e) => {
     const d = deskOf(e);
-    if (!d || !d.node.i) { setTip(null); return; }
-    if (lastType.current === "touch" && tip !== d.key) { setTip(d.key); return; }   // a first tap shows; a second opens
-    open(d.node.name);
+    if (!d || !d.node.i) { setTip(null); setCard(null); return; }
+    if (lastType.current === "touch") setTip(null);
+    cardFrom.current = null;
+    setCard((cur) => (cur === d.key ? null : d.key));
   };
   // All offices: a double-click on a tile (off its people) opens that office; the lobby is no office.
   const onDblClick = (e) => {
-    const s = scene.current, w = pointOf(e);
-    if (!overview || !s || !s.overview || !w || deskOf(e)) return;
+    const s = scene.current, w = pointOf(e), hit = deskOf(e);
+    if (hit && hit.node.i) { setCard(null); open(hit.node.name); return; }   // #2661: a person's chat, past the card
+    if (!overview || !s || !s.overview || !w || hit) return;
     const tt = tileAt(s.lay, w.x, w.y) || labelAt(s.lay, w.x, w.y), tl = tt ? tiles.find((x) => x.key === tt.key) : null;
     if (tl && !tl.lobby) pick(tl.key);
   };
@@ -1227,6 +1351,54 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   const pick = (id) => { if (layoutRef.current) return; store.saveChoice(id); setChoice(id); setTip(null); };
   const everyone = useMemo(() => { const m = new Map(); for (const n of [...view.top, ...view.teams.flatMap((tm) => tm.nodes), ...view.rest.nodes]) if (!m.has(n.name)) m.set(n.name, n); return [...m.values()]; }, [view]);
   const tipText = tipDesk ? nodeText(tipDesk.node) : null;
+  // #2661: the card's person (gone from the office, filtered out or the office changed: it closes).
+  const cardOf = card ? people.find((d) => d.key === card && d.node.i) || null : null;
+  cardDesk.current = cardOf ? { name: cardOf.node.name, box: cardOf.box, walks: zones && !overview } : null;
+  useEffect(() => { if (card && !cardOf) setCard(null); }, [card, !!cardOf]);
+  const closeCard = () => {
+    setCard(null);
+    const from = cardFrom.current; cardFrom.current = null;
+    if (from) [...(ooRef.current?.querySelectorAll?.(".oo-desk") || [])].find((el) => el.getAttribute("data-key") === from)?.focus?.();
+  };
+  // Esc, or a press anywhere off the card and the scene (the scene's own click decides there), closes it.
+  useEffect(() => {
+    if (!card) return undefined;
+    const doc = globalThis.document;
+    const key = (e) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); closeCard(); } };
+    // A desk-list entry is the scene's too: its own click decides (the same person again closes, another switches) —
+    // closing here first would let that click open it again (#2761 review).
+    const press = (e) => {
+      const el = e.target;
+      if (cardEl.current?.contains?.(el) || el === canvasRef.current) return;
+      if (typeof el?.closest === "function" && el.closest(".oo-desk") && ooRef.current?.contains?.(el)) return;
+      closeCard();
+    };
+    doc?.addEventListener?.("keydown", key, true); doc?.addEventListener?.("pointerdown", press, true);
+    return () => { doc?.removeEventListener?.("keydown", key, true); doc?.removeEventListener?.("pointerdown", press, true); };
+  }, [card]);
+  /** Find in office: zoomed in (to at least TWO px a unit) and centred on them. */
+  const findCard = () => {
+    const c = cardDesk.current;
+    if (!c) return;
+    const w = c.walks ? walkers.at(c.name, now()) : null, at = w ? { x: w.x, y: w.y - 26 } : { x: c.box.x + c.box.w / 2, y: c.box.y + c.box.h / 2 };
+    const v = view0(), k = Math.min(OK_MAX, Math.max(v.k, FIND_K));
+    touched.current = true; fitted.current = false;
+    setView(centreOn({ ...v, k }, size, at.x, at.y));
+  };
+  /** The card's picture: the person's idle frame in the office's style (pack strip or built-in figure). */
+  const drawAvatar = (cv) => {
+    const s = scene.current, c = cardOf;
+    const g = cv && cv.getContext ? cv.getContext("2d") : null;
+    if (!g || !c || !s || !c.skin || !c.look) return;
+    const r = deviceRatio(), W = 56;
+    if (cv.width !== W * r) { cv.width = W * r; cv.height = W * r; }
+    g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, cv.width, cv.height); g.imageSmoothingEnabled = false;
+    const look = { ...c.look, pose: "idle", dim: false, match: false, badge: null, notag: true, free: true, work: 0, sign: null };
+    const at = { x: 0, y: 0 }, b = c.skin.charBox ? c.skin.charBox(look, at) : null, box = b || { x: -16, y: -48, w: 32, h: 48 };
+    const k = Math.min((W - 8) / box.w, (W - 8) / box.h) * r;
+    g.setTransform(k, 0, 0, k, (W * r) / 2 - (box.x + box.w / 2) * k, (W * r) / 2 - (box.y + box.h / 2) * k);
+    try { c.skin.drawCharacter(g, { x: at.x - 44, y: at.y - 53, w: 88, h: 53, seat: at }, look, 0, s.env); } catch { /* a picture not loaded yet: blank */ }
+  };
   // The overview: the scene's rooms (or areas; All offices: the tiles) and a dot for each person (a call in its colour),
   // the view's frame on it.
   const miniRects = overview ? arranged.tiles.map((tt) => ({ key: tt.key, x: tt.x, y: tt.y, w: tt.w, h: tt.h }))
@@ -1243,7 +1415,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     <div class="oo-bar">
       <label class="oo-pick"><span class="oo-pick-label">${to("office")}</span>${officeSelect("oo-office")}</label>
       ${auto ? html`<label class="oo-pick"><span class="oo-pick-label">${to("styleLabel")}</span>
-        <select class="tb-select" value=${STYLES.includes(style) || packs.some((pk) => pk.id === style) ? style : skin.id} onChange=${(e) => { store.saveSkin(e.target.value); setStyle(e.target.value); setTip(null); }}>
+        <select class="tb-select" value=${STYLES.includes(style) || packs.some((pk) => pk.id === style) ? style : skin.id} title=${to(canEdit ? "styleForAll" : "styleHere")} onChange=${(e) => pickStyle(e.target.value)}>
           ${styles.map((id) => html`<option key=${id} value=${id}>${to(`style_${id}`)}</option>`)}
           ${packs.map((pk) => html`<option key=${`pack:${pk.id}`} value=${pk.id}>${pk.name}</option>`)}
         </select></label>` : null}
@@ -1259,6 +1431,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
         ${lobbyAll.length ? null : html`<span class="muted oo-note oo-lobby-none">${to("lobbyEveryone")}</span>`}` : null}
       ${custom && baseSkin.id !== custom.skin && !loading ? html`<span class="muted oo-note">${to("skinUnknown", styleName(custom.skin))}</span>` : null}
       ${placed.ignored ? html`<span class="muted oo-note">${to("layoutIgnored")}</span>` : null}
+      ${styleErr && auto ? html`<span class="note oo-note oo-style-err" role="status">${styleErr}</span>` : null}
       ${L.unseated ? html`<span class="muted oo-note">${to("unseated", L.unseated)}</span>` : null}
       ${canEdit && storedRev !== null ? html`<button type="button" class="btn btn-sm oo-edit" onClick=${() => { if (!overview) setEditing(true); }} disabled=${!!layout || overview}
         title=${overview ? to("overviewNoEdit") : undefined}>${t("orge.edit")}</button>` : null}
@@ -1281,17 +1454,22 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
       }) : null}
       ${layout ? html`<${LayoutEditor} key=${layout.id} base=${layout.base} start=${layout.start} place=${placeOverlay} dock=${!fs} members=${layoutMembers}
         stale=${layoutStale ? t("orgl.stale") : ""} onChange=${onDraft} onSave=${saveLayout} onClose=${closeLayout} />` : null}
-      ${tipText ? html`<div ref=${tipRef} class="oo-tip" role="tooltip">
+      ${tipText && tip !== card ? html`<div ref=${tipRef} class="oo-tip" role="tooltip">
         <strong>${tipText.primary}</strong>${tipText.secondary ? html` <span class="muted mono">${tipText.secondary}</span>` : null}
         <div>${tipText.sub}</div><div class="muted">${caption(officePose(tipDesk.node.state), tipDesk.node.state)}</div>
         ${tipDesk.office ? html`<div class="muted oo-tip-office">${tipDesk.office}</div>` : null}
-        ${tipDesk.node.i && onOpen && lastType.current === "touch" ? html`<div class="muted">${to("tapAgain")}</div>` : null}
       </div>` : null}
+      ${cardOf ? html`<${OfficeCard} key=${cardOf.key}
+        model=${cardModel({ node: cardOf.node, lv, levels: cardOf.skin && cardOf.skin.pack ? cardOf.skin.pack.levels : null, share: !onOpen,
+          state: stateWords(cardOf.node), now: caption(officePose(cardOf.node.state), cardOf.node.state),
+          where: [cardOf.office || (custom ? custom.name : to("allOffice")), cardOf.area].filter(Boolean).join(" · ") })}
+        avatar=${drawAvatar} sheet=${size.w < SHEET_W} place=${(el) => { cardEl.current = el; placeCard(); }}
+        onChat=${onOpen ? () => { const n = cardOf.node.name; setCard(null); open(n); } : null} onFind=${findCard} onClose=${closeCard} />` : null}
       <ul class="oo-desks" aria-label=${to("desks")}>${people.map((d) => {
         const nt = nodeText(d.node), cap = caption(officePose(d.node.state), d.node.state), where = d.office ? ` · ${d.office}` : "";
         return html`<li key=${d.key}>${d.node.i
-          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}.${onOpen ? ` ${t("orgc.openChat")}` : ""}`}
-              onFocus=${() => setTip(d.key)} onBlur=${() => setTip(null)} onClick=${() => open(d.node.name)}>${nt.primary}</button>`
+          ? html`<button type="button" class="oo-desk" data-name=${d.node.name} data-key=${d.key} aria-label=${`${nt.full}${where} · ${cap}.`} aria-haspopup="dialog"
+              onFocus=${() => setTip(d.key)} onBlur=${() => setTip(null)} onClick=${() => { cardFrom.current = d.key; setCard((cur) => (cur === d.key ? null : d.key)); }}>${nt.primary}</button>`
           : html`<span class="oo-desk" data-name=${d.node.name} data-key=${d.key}>${nt.full}</span>`}</li>`;
       })}</ul>
       <div class="oc-zoom oo-zoom" role="group" aria-label=${t("orgc.view")}>

package/dist/ui/fleet-org.js

@@ -60,6 +60,8 @@ export function orgState(i, exec, awaiting, needs) {
  * What a node's card says (fleet-canvas.js; the Office view's desk too, fleet-office.js): its names, its state and
  * backend (`sub`), and all of it in one line (`full`, the card's title and label).
  */
+/** #2661: a node's state in words (as its card and tooltip say it). */
+export const stateWords = (n) => to(n.state);
 export function nodeText(n) {
   const it = n.i;
   const names = it ? namesOf(it) : { primary: n.name, secondary: "" };

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

@@ -175,7 +175,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
       </div>
 
       <div class="tc-actions">
-        <${StatusPill} status=${card.status} />
+        <${StatusPill} status=${card.status} card=${card} />
         ${writable ? html`
         ${card.status === "review" ? html`
           <button type="button" class="btn btn-primary btn-sm" disabled=${busy} onClick=${() => moved(() => moveCard(card, "done"))}><${Icon} name="check" size=${14} />${isMain ? t("taskcard.confirmMain") : t("tasks.confirm")}</button>
@@ -260,7 +260,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
 
       ${isMain ? html`<${Field} title=${t("taskcard.subs", children.length)}>
         ${children.length ? html`<ul class="tc-children">${children.map((c) => html`<li key=${c.id}><button type="button" onClick=${() => onOpen(c.id)}>
-          <${StatusPill} status=${c.status} /><span class="tb-code">${c.id}</span><span class="tc-child-title">${c.title}</span><span class="tb-who">${c.assignee || ""}</span></button></li>`)}</ul>` : null}
+          <${StatusPill} status=${c.status} card=${c} /><span class="tb-code">${c.id}</span><span class="tc-child-title">${c.title}</span><span class="tb-who">${c.assignee || ""}</span></button></li>`)}</ul>` : null}
         ${finished || !writable ? null : html`<${QuickAdd} placeholder=${t("taskcard.quickAdd")} onAdd=${(title) => run(() => boardApi.create({ parent: card.id, title }))} />`}
       </${Field}>` : null}
 

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

@@ -10,7 +10,8 @@ import { toast } from "/assets/ui-toast.js";
 
 register("tasks", {
   en: {
-    open: "To do", claimed: "In progress", blocked: "Blocked", review: "Waiting for you", done: "Done", cancelled: "Cancelled",
+    open: "To do", claimed: "In progress", blocked: "Blocked", review: "To confirm", done: "Done", cancelled: "Cancelled",
+    reviewYou: "Waiting for you", reviewBy: "Waiting for {0}", reviewByTip: "{0} confirms it, not you",
     main: "Main task", sub: "Sub task", urgent: "Urgent", high: "High", normal: "Normal", low: "Low",
     sizeS: "Small", sizeM: "Medium", sizeL: "Large", sizeNone: "Not sized",
     projects: "Projects", noProject: "No project", noProjectDesc: "Tasks the fleet opened outside any project",
@@ -53,7 +54,6 @@ register("tasks", {
     nowDoing: "Working on", nowBlocked: "Blocked", nowNext: "Next", ownerTip: "Main task owner: {0}", moreCards: "+{0}",
     wrapTag: "To fill in", wrapLine: "Not wrapped up yet: {0}", gapUnchecked: "{0} checklist items unchecked", gapUncheckedOne: "1 checklist item unchecked",
     gapNoResult: "no result", confirmGapTitle: "Confirm {0}?", confirmAnyway: "Confirm anyway",
-    askedFirst: "{0} handed it out and has been asked; you can answer it here too",
     confirmGapLabel: "{0}. You can send it back to have it filled in — or confirm anyway, with a note if you like",
     "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",
@@ -76,7 +76,7 @@ register("tasks", {
     "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",
+    workSentBack: "Sent back", workDoing: "In progress", workBlocked: "Blocked", workReview: "To confirm", 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: ", ",
@@ -84,6 +84,7 @@ register("tasks", {
   },
   "zh-TW": {
     open: "待辦", claimed: "進行中", blocked: "卡住", review: "待確認", done: "完成", cancelled: "取消",
+    reviewYou: "等你確認", reviewBy: "等 {0} 確認", reviewByTip: "由 {0} 確認，不是你",
     main: "主任務", sub: "子任務", urgent: "緊急", high: "高", normal: "一般", low: "低",
     sizeS: "小", sizeM: "中", sizeL: "大", sizeNone: "未定",
     projects: "專案", noProject: "未分類", noProjectDesc: "fleet 在專案以外開的 task",
@@ -126,7 +127,6 @@ register("tasks", {
     nowDoing: "執行中", nowBlocked: "卡住", nowNext: "下一步", ownerTip: "主任務負責人：{0}", moreCards: "+{0}",
     wrapTag: "待補齊", wrapLine: "負責人還沒補齊：{0}", gapUnchecked: "還有 {0} 項沒勾", gapUncheckedOne: "還有 1 項沒勾",
     gapNoResult: "沒有產出總結", confirmGapTitle: "確認 {0}？", confirmAnyway: "還是確認",
-    askedFirst: "已先通知派工者 {0}；你也可以直接在這裡回覆",
     confirmGapLabel: "{0}。可以先退回請負責人補齊；還是要確認的話，可以留一句確認意見",
     "err.too_long": "{0}太長：{1} 字，上限 {2} 字", "err.state_lines": "目前狀態最多 {0} 行（現在 {1} 行）",
     "err.acceptance_empty": "驗收條件不能是空的", "err.acceptance_max": "驗收條件最多 {0} 項",
@@ -190,6 +190,17 @@ export const percentDone = (units) => (units.total ? Math.round((units.done / un
 /** The key a card's project is filed under: its id, or NO_PROJECT. */
 export const projectKey = (card) => (card.projectId === null || card.projectId === undefined ? NO_PROJECT : card.projectId);
 
+/**
+ * #2080: whether a card waits for the person — Waiting for you, and its count: the host's word (`waitsForPerson`, the
+ * same rule as Needs you: a card the person handed out, in review needing their confirmation or blocked on a question,
+ * or one whose dispatcher was deleted); a card read without it, by the person's own hand-out alone. An agent's card in
+ * review is its confirmer's (`confirmer`), never the person's.
+ */
+export function waitsForYou(card) {
+  if (typeof card.waitsForPerson === "boolean") return card.waitsForPerson;
+  return !!card.dispatcher && card.dispatcher.kind === "person" && ((card.status === "review" && card.needsReview) || card.status === "blocked");
+}
+
 /**
  * One project's numbers for its card on Home and its header, from the cards at hand (`key`: a project id or
  * NO_PROJECT). The board's read carries the server's (over every card, finished ones too); this is the fallback.
@@ -201,7 +212,7 @@ export function projectStats(key, cards) {
     if (projectKey(c) !== key) continue;
     if (!lastActivity || c.updatedAt > lastActivity) lastActivity = c.updatedAt;
     if (c.status === "cancelled") continue;
-    if (c.status === "review") waiting++;
+    if (c.status === "review" && waitsForYou(c)) waiting++;
     if (c.status === "blocked") blocked++;
     if (c.kind !== "main") continue;
     mains++;
@@ -454,8 +465,20 @@ export function ProgressBar({ progress, wide = false }) {
     ${barSegments(progress).filter((s) => s.k === "done").map((s) => html`<rect key=${s.k} class=${`tb-seg st-${s.k}`} x=${s.x} width=${s.w} height="6" />`)}</svg>`;
 }
 
-export function StatusPill({ status }) {
-  return html`<span class=${`tb-pill st-${status}`}>${t(`tasks.${status}`)}</span>`;
+/** #2080: whom a card in review waits for, in words: you, the agent that confirms it, or (neither known) "To confirm". */
+export function reviewLabel(card) {
+  if (waitsForYou(card)) return t("tasks.reviewYou");
+  return card.confirmer ? t("tasks.reviewBy", card.confirmer) : t("tasks.review");
+}
+
+/**
+ * A card's status. #2080: with the card, one in review says whom it waits for — the person ("Waiting for you") or the
+ * agent that confirms it ("Waiting for atlas").
+ */
+export function StatusPill({ status, card = null }) {
+  const by = card && status === "review" && !waitsForYou(card) && card.confirmer ? card.confirmer : null;
+  const label = !card || status !== "review" ? t(`tasks.${status}`) : reviewLabel(card);
+  return html`<span class=${`tb-pill st-${status}${by ? " by-agent" : ""}`} title=${by ? t("tasks.reviewByTip", by) : null}>${label}</span>`;
 }
 
 /**

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

@@ -8,7 +8,7 @@ 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";
+import { Who, boardApi, errorText, reviewLabel } 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" };
 
@@ -33,7 +33,7 @@ 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>
+      <span class=${`tw-kind k-${l.kind}`}>${l.kind === "review" ? reviewLabel(l.card) : 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>`;