@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

package/dist/ui/fleet-office-pack.js

@@ -91,6 +91,11 @@
 //                                                     ≤ 40 characters each), in place of the page's own
 //     "room": { "floor": "floor.png", "wall": "wall.png" }, "desk": { "back": …, "front": …, "lit": … }
 //                                                     optional: for the desks layout (a pack without stateZones)
+//     "portraits": { "default": FACE, "byInstance": { "atlas": FACE }, "byUser": { "discord:1": FACE }, "npc": { "<item id>": FACE } }
+//                                                     optional (#2861): the dialogue box's faces — FACE is a file, or
+//                                                     { "idle", "working", "needs" } files; PNGs up to 1024×1536 (host)
+//     "dialogBox": { "frame": "box.png", "slice": 8, "background": "#rrggbb", "border", "text", "name" }
+//                                                     optional (#2861): the box's 9-slice frame (≤ 512×512) and colours
 //     "levels": {                                     optional (#2661): the Office levels' words
 //       "titles": [{ "from": 1, "name": "Intern" }, …],   the title from each level up (≤ 32, `from` 0–100000
 //                                                     rising, a name 1–24 characters), in place of the page's own
@@ -162,7 +167,12 @@ const RESERVED = new Set(["cozy", "guild", "school"]);
 const ID = /^[A-Za-z0-9_-]{1,40}$/;
 const SRC = /^[A-Za-z0-9._/-]{1,200}$/;
 const HEX = /^#[0-9a-f]{6}$/i;
-const LIMIT = { areas: 32, seats: 64, furniture: 128, waypoints: 512, edges: 2048, sets: 64, byInstance: 500, lines: 12, line: 40, seatFor: 16, titles: 32, title: 24, fixed: 500 };
+const LIMIT = { areas: 32, seats: 64, furniture: 128, waypoints: 512, edges: 2048, sets: 64, byInstance: 500, lines: 12, line: 40, seatFor: 16, titles: 32, title: 24, fixed: 500,
+  portraitInstances: 500, portraitUsers: 200, portraitNpcs: 128, slice: 128 };
+/** #2861: a portrait's expressions, by the state it is shown in (a missing one: idle, then any given). */
+export const PORTRAIT_STATES = ["idle", "working", "needs"];
+/** #2861: a person's account as the chat records it (`adapter:id`, web-chat-history.ts FROM). */
+const ACCOUNT = /^[^\s:]{1,64}:[^\s:]{1,128}$/;
 
 class Refused extends Error { constructor(at, why) { super(`${at}: ${why}`); } }
 /** `o[k]` when it is o's own property, else undefined: a name from a pack or a page never reaches Object.prototype. */
@@ -288,6 +298,59 @@ function levelsOf(v) {
   return out;
 }
 
+/** #2861: one portrait — a file, or { idle, working, needs } files (at least one): always the expressions' object. */
+function portraitOf(v, at) {
+  if (typeof v === "string") return { idle: src(v, at) };
+  obj(v, at); keys(v, PORTRAIT_STATES, at);
+  const out = {};
+  for (const k of PORTRAIT_STATES) if (v[k] !== undefined) out[k] = src(v[k], `${at}.${k}`);
+  if (!Object.keys(out).length) throw new Refused(at, `a file, or at least one of ${PORTRAIT_STATES.join(", ")}`);
+  return out;
+}
+/** #2861: a table of portraits by key (`keyOk` says which keys it takes), at most `max`. */
+function portraitTable(v, at, max, keyOk, what) {
+  if (v === undefined) return {};
+  obj(v, at);
+  if (Object.keys(v).length > max) throw new Refused(at, `at most ${max}`);
+  const out = {};
+  for (const [k, p] of Object.entries(v)) {
+    if (inherited(k) || !keyOk(k)) throw new Refused(`${at}.${k}`, what);
+    out[k] = portraitOf(p, `${at}.${k}`);
+  }
+  return out;
+}
+/**
+ * #2861: a pack's `portraits` — `default` (agents), `byInstance`, `byUser` (a person's `adapter:id`) and `npc` (a
+ * furniture item the pack defines: `fids`); null when it has none.
+ */
+function portraitsOf(v, fids) {
+  if (v === undefined) return null;
+  obj(v, "portraits");
+  keys(v, ["default", "byInstance", "byUser", "npc"], "portraits");
+  const instanceOk = (k) => !!k && k.length <= 200 && !/[\u0000-\u001f\u007f]/.test(k);
+  return {
+    ...(v.default !== undefined ? { default: portraitOf(v.default, "portraits.default") } : {}),
+    byInstance: portraitTable(v.byInstance, "portraits.byInstance", LIMIT.portraitInstances, instanceOk, "an instance's name"),
+    byUser: portraitTable(v.byUser, "portraits.byUser", LIMIT.portraitUsers, (k) => ACCOUNT.test(k), 'an account as "adapter:id"'),
+    npc: portraitTable(v.npc, "portraits.npc", LIMIT.portraitNpcs, (k) => fids.has(k), "a furniture item the pack defines"),
+  };
+}
+/** #2861: a pack's `dialogBox` — a 9-slice `frame` (`slice` image px a side) and colours; null when it has none. */
+function dialogBoxOf(v) {
+  if (v === undefined) return null;
+  obj(v, "dialogBox");
+  keys(v, ["frame", "slice", "background", "border", "text", "name"], "dialogBox");
+  if (v.slice !== undefined && v.frame === undefined) throw new Refused("dialogBox.slice", "only with frame");
+  const out = {};
+  if (v.frame !== undefined) { out.frame = src(v.frame, "dialogBox.frame"); out.slice = v.slice === undefined ? 8 : int(v.slice, 1, LIMIT.slice, "dialogBox.slice"); }
+  for (const k of ["background", "border", "text", "name"]) {
+    if (v[k] === undefined) continue;
+    if (!matteOk(v[k])) throw new Refused(`dialogBox.${k}`, "a colour as #rrggbb");
+    out[k] = v[k].toLowerCase();
+  }
+  return out;
+}
+
 /**
  * A pack's manifest, strictly: { ok: true, pack } or { ok: false, error: "<where>: <why>" }. `kept`: a pack the host
  * keeps already (read back, not uploaded), which may hold a RESERVED id.
@@ -295,7 +358,7 @@ function levelsOf(v) {
 export function checkSkinPack(x, { kept = false } = {}) {
   try {
     obj(x, "pack");
-    keys(x, ["format", "id", "scale", "background", "foreground", "matte", "areas", "stateZones", "door", "mailDrop", "waypoints", "edges", "straight", "furniture", "characters", "byInstance", "props", "bubbles", "room", "desk", "levels"], "pack");
+    keys(x, ["format", "id", "scale", "background", "foreground", "matte", "areas", "stateZones", "door", "mailDrop", "waypoints", "edges", "straight", "furniture", "characters", "byInstance", "props", "bubbles", "room", "desk", "levels", "portraits", "dialogBox"], "pack");
     if (x.format !== 1) throw new Refused("format", "1");
     if (typeof x.id !== "string" || !ID.test(x.id)) throw new Refused("id", "1–40 letters, digits, _ or -");
     if (BUILT_IN.has(x.id) || (!kept && RESERVED.has(x.id))) throw new Refused("id", "a built-in skin's id");
@@ -394,6 +457,7 @@ export function checkSkinPack(x, { kept = false } = {}) {
       }
     }
     const levels = levelsOf(x.levels);
+    const portraits = portraitsOf(x.portraits, fids), dialogBox = dialogBoxOf(x.dialogBox);
     const room = x.room === undefined ? {} : obj(x.room, "room"), desk = x.desk === undefined ? {} : obj(x.desk, "desk");
     keys(room, ["floor", "wall"], "room"); keys(desk, ["back", "front", "lit"], "desk");
     const opt = (v, at) => (v === undefined ? undefined : src(v, at));
@@ -404,6 +468,7 @@ export function checkSkinPack(x, { kept = false } = {}) {
       props: x.props === undefined ? {} : strips(x.props, PROPS, "props", scale), bubbles,
       room: { floor: opt(room.floor, "room.floor"), wall: opt(room.wall, "room.wall") }, desk: { back: opt(desk.back, "desk.back"), front: opt(desk.front, "desk.front"), lit: opt(desk.lit, "desk.lit") },
       ...(levels ? { levels } : {}),
+      ...(portraits ? { portraits } : {}), ...(dialogBox ? { dialogBox } : {}),
     } };
   } catch (err) {
     if (err instanceof Refused) return { ok: false, error: err.message };
@@ -412,10 +477,17 @@ export function checkSkinPack(x, { kept = false } = {}) {
 }
 /** The checked pack, or null. */
 export const skinPackOk = (x) => { const r = checkSkinPack(x); return r.ok ? r.pack : null; };
-/** Every image a pack names (what a loader fetches before spriteSkin draws). */
-export const packImages = (pack) => [...new Set([pack.background, pack.foreground, pack.room.floor, pack.room.wall, pack.desk.back, pack.desk.front, pack.desk.lit,
+/** #2861: the pictures only the dialogue box uses — every portrait and the box's frame (loaded when it first needs one). */
+export const packPortraitImages = (pack) => {
+  const p = pack.portraits, all = p ? [p.default, ...Object.values(p.byInstance), ...Object.values(p.byUser), ...Object.values(p.npc)] : [];
+  return [...new Set([...all.flatMap((e) => (e ? Object.values(e) : [])), pack.dialogBox && pack.dialogBox.frame].filter(Boolean))];
+};
+/** The pictures the scene draws (what a loader fetches before spriteSkin draws). */
+export const packSceneImages = (pack) => [...new Set([pack.background, pack.foreground, pack.room.floor, pack.room.wall, pack.desk.back, pack.desk.front, pack.desk.lit,
   ...pack.furniture.flatMap((f) => [f.sprite.src, f.activeSprite && f.activeSprite.src, f.night && f.night.sprite.src, ...Object.values(f.walk || {}).map((st) => st.src)]),
   ...Object.values(pack.characters).flatMap((s) => Object.values(s).map((st) => st.src)), ...Object.values(pack.props).map((st) => st.src)].filter(Boolean))];
+/** Every image a pack names: the scene's and (#2861) the dialogue box's — what an upload must send, and nothing else. */
+export const packImages = (pack) => [...new Set([...packSceneImages(pack), ...packPortraitImages(pack)])];
 
 /** Every frame strip a checked pack names, with where (the host checks each image is frames·w × h). */
 export function packStrips(pack) {

package/dist/ui/fleet-office-skin.js

@@ -45,7 +45,7 @@
 // among them by base y), then the foreground, then the crowd counts, tags and bubbles.
 import { t } from "/assets/app-i18n.js";
 import { frameAt, nameHash } from "./fleet-office-model.js";
-import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packImages, poseStrip, stripBox, walkStrip } from "./fleet-office-pack.js";
+import { CHAR_DEPTH, LOGICAL, checkSkinPack, own, packPortraitImages, packSceneImages, poseStrip, stripBox, walkStrip } from "./fleet-office-pack.js";
 import { tierColours } from "./fleet-office-levels.js";
 
 export { nameHash };
@@ -792,13 +792,31 @@ export function loadPackSkin(id, sha, { fetch: get = globalThis.fetch, image = d
       if (!c.ok || c.pack.id !== id) return null;
       const files = d.files && typeof d.files === "object" ? d.files : {};
       const images = new Map();
-      await Promise.all(packImages(c.pack).map(async (src) => {
-        const fid = own(files, src);
-        if (typeof fid !== "string" || !/^[0-9a-f]{32}$/.test(fid)) return;
+      const fidOf = (src) => { const fid = own(files, src); return typeof fid === "string" && /^[0-9a-f]{32}$/.test(fid) ? fid : null; };
+      await Promise.all(packSceneImages(c.pack).map(async (src) => {
+        const fid = fidOf(src);
+        if (!fid) return;
         const im = await image(url(`${base}/img/${fid}.png`));
         if (im) images.set(src, im);
       }));
-      return spriteSkin(c.pack, images);
+      // #2861: the dialogue box's pictures (portraits, its frame) are read the first time it asks for one — never by an
+      // Office that does not show the box. `picture(src, done)`: the picture, or null (not read yet: `done` is called
+      // once it is in; never there: null for good).
+      const portraits = new Set(packPortraitImages(c.pack)), late = new Map();
+      const picture = (src, done) => {
+        if (!src || !portraits.has(src)) return null;
+        const had = late.get(src);
+        if (had) { if (had.im === undefined && done) had.waiting.add(done); return had.im || null; }
+        const fid = fidOf(src), entry = { im: fid ? undefined : null, waiting: new Set(done ? [done] : []) };
+        late.set(src, entry);
+        if (fid) Promise.resolve(image(url(`${base}/img/${fid}.png`))).catch(() => null).then((im) => {
+          entry.im = im || null;
+          for (const fn of entry.waiting) { try { fn(); } catch { /* the page's own */ } }
+          entry.waiting.clear();
+        });
+        return null;
+      };
+      return { ...spriteSkin(c.pack, images), picture };
     } catch { return null; }
   })();
   loaded.set(key, job);

package/dist/ui/fleet-office-store.js

@@ -21,6 +21,8 @@ const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", S
 const LOBBY_KEY = "agend_org_office_lobby";
 /** #2946: whether the key to the items in the air is open here (default: folded). */
 const KEY_OPEN_KEY = "agend_org_office_key";
+/** #2861: whether the dialogue box shows here (default: off — nothing changes until a person ticks it). */
+const DIALOGUE_KEY = "agend_org_office_dialogue";
 /** #2540: { "<office>@<style>": [k, cx, cy] (and a 1 after them: a fit) } — the last VIEWS_MAX views, the most recent last. */
 const VIEW_KEY = "agend_org_office_view", VIEWS_MAX = 32;
 /** #2540: { "<office>@<style>": "cover" } — the offices whose fit fills the panel (the rest: "contain"), the last VIEWS_MAX. */
@@ -200,6 +202,9 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
     /** #2946: whether the key to the items carried between desks is open here (default: folded). */
     keyOpen: () => read(KEY_OPEN_KEY) === "1",
     saveKeyOpen: (v) => write(KEY_OPEN_KEY, v ? "1" : "0"),
+    /** #2861: whether the dialogue box shows here (default: off). */
+    dialogueOn: () => read(DIALOGUE_KEY) === "1",
+    saveDialogueOn: (v) => write(DIALOGUE_KEY, v ? "1" : "0"),
     saveLobbyTile: (v) => write(LOBBY_KEY, v ? "1" : "0"),
     /** The view kept for `key` (an office and its style): { k, cx, cy } (fleet-office-view.js savedOf), or null. */
     view: (key) => {

package/dist/ui/fleet-office.js

@@ -59,6 +59,7 @@ import { html, useEffect, useLayoutEffect, useMemo, useRef, useState } from "/as
 import { appStore } from "/assets/app-store.js";
 import { t, lang, register } from "/assets/app-i18n.js";
 import { identityOf } from "/assets/identity-color.js";
+import { avatarOf, firstCharacter } from "/assets/instance-nav.js";
 import { Icon } from "/assets/ui-icons.js";
 import { nodeText, stateWords } from "./fleet-org.js";
 import { hits, needle } from "./fleet-canvas-layout.js";
@@ -73,6 +74,7 @@ import { POLL_MS } from "./fleet-traffic.js";
 import { OfficeEditor, officeForSave } from "./fleet-office-editor.js";
 import { LayoutEditor, handlesOf } from "./fleet-office-layout.js";
 import { ShareButton } from "./office-share-dialog.js";
+import { DLG, boxColours, boxLayout, createDialogue, createFaces, drawBox, fitBox, messageOf, onBox, pickFront, portraitSrc, stageOf, talkOf, wrap } from "./fleet-office-dialogue.js";
 import { applyOverrides, fitNight, fitSeatFor, stripBox } from "./fleet-office-pack.js";
 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";
@@ -99,6 +101,9 @@ register("orgo", {
     key: "Key", keyTitle: "What the items carried between desks are", keyLabel: "Carried between desks",
     keyTask: "Folder: a task", keySend: "Envelope: a message", keyReport: "Paper: a report", keyBroadcast: "Horn: a broadcast",
     tileLabel: "{0} ({1})", openOffice: "Open the office {0}", lobbyTile: "Lobby tile (in no office)", lobbyEveryone: "Everyone is in an office", overviewNoEdit: "Pick one office to edit offices or a layout",
+    dialogue: "Dialogue", dialogueTitle: "When a person messages someone here, show their words and the reply in a box at the bottom (this browser only)",
+    dlgWorking: "Working…", dlgSomeone: "Someone", dlgHeardShare: "Sent {0} a message.", dlgAnsweredShare: "Replied.", dlgFile: "(sent a file)", dlgSays: "{0}: {1}",
+    dlgBox: "Dialogue: {0}. Click for their card, double-click for their chat.",
   },
   "zh-TW": {
     label: "辦公室：每個 team 是一間房間，每個 instance 一張桌子；General 和未加入 team 的 instance 在大廳。拖曳平移；滾輪、雙指、+ 和 − 縮放，0 顯示整個場景，F 切換全螢幕。",
@@ -119,6 +124,9 @@ register("orgo", {
     key: "圖例", keyTitle: "桌子之間傳遞的物品代表什麼", keyLabel: "桌子之間傳遞的物品",
     keyTask: "資料夾：任務", keySend: "信封：訊息", keyReport: "紙張：回報", keyBroadcast: "喇叭：廣播",
     tileLabel: "{0}（{1}）", openOffice: "開啟辦公室「{0}」", lobbyTile: "大廳格（不在任何辦公室）", lobbyEveryone: "每個成員都已在某間辦公室", overviewNoEdit: "請先選一間辦公室，再編輯辦公室或配置",
+    dialogue: "對話框", dialogueTitle: "有人傳訊息給這裡的成員時，在下方的對話框顯示訊息與回覆（只限這個瀏覽器）",
+    dlgWorking: "處理中…", dlgSomeone: "有人", dlgHeardShare: "傳了一則訊息給 {0}。", dlgAnsweredShare: "已回覆。", dlgFile: "（傳了一個檔案）", dlgSays: "{0}：{1}",
+    dlgBox: "對話框：{0}。點一下看資料卡，點兩下開啟聊天。",
   },
 });
 const to = (k, ...v) => t(`orgo.${k}`, ...v);
@@ -615,9 +623,10 @@ export function OfficeKey({ pal }) {
  * `lease` the tab's (its reads); `onOpen(name)` what a desk opens (the canvas's: the chat; none: a desk opens nothing,
  * as on a share link's page, #2636); `assetUrl(path)` where a skin pack's picture is read (the share's address), and
  * `assetImage(url)` how (the share's, which waits out a 429, #2662; none: the loader's own);
- * `opening` the office it opens on (the share's), instead of the one this browser chose last.
+ * `opening` the office it opens on (the share's), instead of the one this browser chose last; #2861: `talk` the share's
+ * conversations (its /state's: who heard or answered a person, when — never what was said), instead of the stream's.
  */
-export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetImage, opening }) {
+export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetImage, opening, talk }) {
   const store = useMemo(() => createOfficeStore(lease ? { fetch: (path, o) => lease.fetch(path, o) } : {}), [lease]);
   const [stored, setStored] = useState([]);
   const [storedRev, setStoredRev] = useState(null);                  // the rev the list was read at (a save sends it)
@@ -636,6 +645,15 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   // 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());
   const [keyOpen, setKeyOpen] = useState(() => store.keyOpen());
+  // #2861: the dialogue box, when it is on here (off by default: until then nothing below listens or draws). The
+  // conversations; the avatars read for it; what it last said for a screen reader. `dlgRef`: what draw() reads (it runs
+  // from the loop, outside a render); `dlgShown`: the box as last drawn (its clicks).
+  const [dialogueOn, setDialogueOn] = useState(() => store.dialogueOn());
+  const dlg = useMemo(createDialogue, []);
+  const faces = useMemo(() => createFaces(), []);
+  const [dlgSay, setDlgSay] = useState("");
+  const [dlgHot, setDlgHot] = useState(false);
+  const dlgRef = useRef(null), dlgShown = useRef(null), dlgLines = useRef(new Map()), talkSeen = useRef(new Set());
   const [nightNow, setNightNow] = useState(() => isNight());
   useEffect(() => { if (!nightOn) return undefined; setNightNow(isNight()); const h = setInterval(() => setNightNow(isNight()), NIGHT.TICK); return () => clearInterval(h); }, [nightOn]);
   const night = nightOn && nightNow;
@@ -752,6 +770,68 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     const h = lease.interval(() => { if (polled() && !globalThis.document?.hidden) void read(); }, POLL_MS);
     return () => { for (const off of offs) off(); lease.clear(h); };
   }, [lease, store]);
+  // #2861: the dialogue box's news. On the dashboard: the stream's `message` events (SSE, or the public link's poll) —
+  // the same ones the chat gets, so only words this viewer can already read; a person's (role "user") opens a
+  // conversation, the agent's reply (role "agent") answers it; a replay or a catch-up is not news (messageOf: FRESH_MS
+  // on the server's clock, which the stream's `clock` events give). On a share: its `talk` (no words, no one named).
+  const dlgWake = () => {
+    const sc = scene.current;
+    if (sc) sc.dirty = true;
+    if (still) { if (sc && !globalThis.document?.hidden) draw(0); } else loop.current?.wake();
+  };
+  const sayFor = (instance, words) => {
+    const who = dlgRef.current && dlgRef.current.who.get(instance);
+    if (who) setDlgSay(to("dlgSays", ...words(who)));
+  };
+  useEffect(() => {
+    if (!dialogueOn || talk !== undefined) return undefined;
+    const sub = appStore.get().streamOn;
+    if (!sub) return undefined;
+    let skew = 0;
+    const seen = new Set();
+    const take = (m) => {
+      const x = messageOf(m, Date.now() + skew);
+      if (!x) return;
+      const k = `${x.instance}|${x.kind}|${m.ts}|${String(m.text ?? "").slice(0, 80)}`;
+      if (seen.has(k)) return;
+      seen.add(k);
+      if (seen.size > 400) seen.delete(seen.values().next().value);
+      const words = x.files ? to("dlgFile") : x.text;
+      if (x.kind === "heard") { const c = dlg.heard(x.instance, x.person, words, now()); if (c) sayFor(x.instance, () => [x.person.name || to("dlgSomeone"), c.text]); }
+      else { const c = dlg.answered(x.instance, words, now()); if (c) sayFor(x.instance, (who) => [nodeText(who.node).primary, c.reply]); }
+      dlgWake();
+    };
+    const hold = (off) => (lease ? lease.hold(off) : off);
+    const offs = [hold(sub("clock", (d) => { if (d && typeof d.now === "number") skew = d.now - Date.now(); })), hold(sub("message", take))];
+    return () => { for (const off of offs) if (typeof off === "function") off(); };
+  }, [dialogueOn, lease, talk === undefined]);
+  useEffect(() => {
+    if (!dialogueOn || !talk) return;
+    let changed = false;
+    for (const x of talkOf(talk)) {
+      const k = `${x.instance}|${x.kind}|${x.at}`;
+      if (talkSeen.current.has(k)) continue;
+      talkSeen.current.add(k);
+      if (talkSeen.current.size > 400) talkSeen.current.delete(talkSeen.current.values().next().value);
+      const c = x.kind === "heard" ? dlg.heard(x.instance, null, null, now()) : dlg.answered(x.instance, null, now());
+      if (!c) continue;
+      changed = true;
+      sayFor(x.instance, (who) => (x.kind === "heard" ? [to("dlgSomeone"), to("dlgHeardShare", nodeText(who.node).primary)] : [nodeText(who.node).primary, to("dlgAnsweredShare")]));
+    }
+    if (changed) dlgWake();
+  }, [dialogueOn, talk]);
+  // What is over goes (an answer after its fade, a conversation never answered); the box is drawn again meanwhile.
+  useEffect(() => {
+    if (!dialogueOn) return undefined;
+    const h = setInterval(() => { if (dlg.sweep(now(), still) || dlg.size()) dlgWake(); }, 1000);
+    return () => clearInterval(h);
+  }, [dialogueOn]);
+  const toggleDialogue = () => {
+    const v = !dialogueOn;
+    store.saveDialogueOn(v); setDialogueOn(v);
+    if (!v) { dlg.clear(); setDlgSay(""); setDlgHot(false); }
+    dlgWake();
+  };
   // The skin packs: on opening, and again whenever the stream says one was uploaded or deleted.
   useEffect(() => {
     if (!lease) return undefined;
@@ -1200,7 +1280,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     ctx.clearRect(0, 0, BW, BH);
     ctx.fillStyle = s.matte; ctx.fillRect(0, 0, BW, BH);
     ctx.imageSmoothingEnabled = false;
-    if (!s.overview) return drawPart(ctx, s.part, a, ox, oy, ms, still, tipNow.current, env);
+    if (!s.overview) { const moved = drawPart(ctx, s.part, a, ox, oy, ms, still, tipNow.current, env); return drawDialogue(ctx, s, ms) || moved; }
     // All offices: each tile on screen drawn as its own view, scaled into it and clipped to it; one off screen is not
     // drawn (its flights still land). Then a frame round each tile, and the items flying between tiles.
     const hot = tipNow.current, on = new Set(visibleTiles(s.lay, v, sizeRef.current).map((tt) => tt.key)), said = [];
@@ -1227,7 +1307,64 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
       if (from) { ctx.setTransform(a * from.tile.s, 0, 0, a * from.tile.s, ox, oy); from.skin.drawProp(ctx, { ...it, x: it.x / from.tile.s, y: it.y / from.tile.s }, ms, env); }
       else { ctx.setTransform(a, 0, 0, a, ox, oy); skinFor("pixel").drawProp(ctx, it, ms, env); }
     }
-    return moving || up.length > 0 || cross.size() > 0;
+    return drawDialogue(ctx, s, ms) || moving || up.length > 0 || cross.size() > 0;
+  }
+  /**
+   * #2861: the dialogue box over the scene, in the stage's CSS px — its newest conversation whose agent is drawn here and
+   * awake (pickFront), with their faces (the pack's portraits; else the agent's avatar, else initials), the speaker's
+   * words typed out, the agent's line while it works and "+N". Nothing at all while it is off. Whether it moves.
+   */
+  function drawDialogue(ctx, s, ms) {
+    const d = dlgRef.current;
+    if (!d) { dlgShown.current = null; return false; }
+    const t = ms > 0 ? ms : now();
+    const { front, more } = pickFront(dlg.list(), (n) => d.who.has(n), (n) => d.who.get(n).look?.pose === "paused");
+    if (!front) { dlgShown.current = null; return false; }
+    const who = d.who.get(front.instance), node = who.node, sz = sizeRef.current, L0 = boxLayout(sz.w, sz.h);
+    const stage = stageOf(front, t, node.state === "working", still);
+    if (stage.done) { dlgShown.current = null; return false; }
+    const skinOf = who.skin, pack = skinOf && skinOf.pack;
+    const pic = (src) => (src && skinOf && typeof skinOf.picture === "function" ? skinOf.picture(src, dlgWake) : null);
+    const agentName = nodeText(node).primary;
+    const idColour = (it) => { try { const id = identityOf(it); return id.off ? null : s.env.mode === "light" ? id.light : id.dark; } catch { return null; } };
+    const agentFace = () => {
+      const im = pic(portraitSrc(pack, { agent: front.instance, state: node.state }));
+      if (im) return { kind: "portrait", im };
+      if (!d.share && node.i) {
+        const av = avatarOf(node.i);
+        if (av.src) { const fim = faces(av.src, dlgWake); if (fim) return { kind: "image", im: fim }; }
+        if (av.kind === "emoji" && av.text) return { kind: "emoji", text: av.text };
+        if (av.kind === "initial" && av.text) return { kind: "initial", text: av.text, color: idColour(node.i) };
+      }
+      return { kind: "initial", text: firstCharacter(agentName), color: node.i ? idColour(node.i) : null };
+    };
+    const personFace = () => {
+      if (!front.person) return { kind: "initial", text: "?" };
+      const im = pic(portraitSrc(pack, { account: front.person.account }));
+      return im ? { kind: "portrait", im } : { kind: "initial", text: firstCharacter(front.person.name || to("dlgSomeone")) };
+    };
+    const answered = stage.phase === "answered";
+    const words = answered ? front.reply ?? to("dlgAnsweredShare") : front.person ? front.text ?? "" : to("dlgHeardShare", agentName);
+    ctx.setTransform(s.ratio, 0, 0, s.ratio, 0, 0);
+    ctx.font = `400 ${L0.font}px system-ui, sans-serif`;
+    const lk = `${front.id}|${answered ? 1 : 0}|${L0.text.w}|${L0.font}`;
+    let lines = dlgLines.current.get(lk);
+    if (!lines) {
+      lines = wrap((x) => ctx.measureText(x).width, words, L0.text.w, L0.text.lines);
+      if (dlgLines.current.size > 32) dlgLines.current.clear();
+      dlgLines.current.set(lk, lines);
+    }
+    const act = d.acts && d.acts.get(front.instance);
+    const status = stage.phase === "working" ? (actLive(act, node.state, Date.now(), null) && act.say ? act.say : to("dlgWorking")) : null;
+    const L = fitBox(L0, lines.length, !!status);
+    dlgShown.current = { L, stage, key: who.key, name: front.instance };
+    const frameSrc = pack && pack.dialogBox && pack.dialogBox.frame, frameIm = frameSrc ? pic(frameSrc) : null;
+    return drawBox(ctx, {
+      L, stage, left: personFace(), right: stage.phase === "heard" ? null : agentFace(),
+      name: answered ? agentName : front.person ? front.person.name || to("dlgSomeone") : to("dlgSomeone"),
+      lines, status: status ? `${agentName} · ${status}` : null, more,
+      colours: boxColours(pack && pack.dialogBox, s.env.pal), frame: frameIm ? { im: frameIm, slice: pack.dialogBox.slice || 8, k: pack.scale || 2 } : null,
+    }, t, { ...s.env, still });
   }
   // The loop: drawing only when the frame (FPS) changed or something is in the air; stopped while the tab is hidden,
   // gone with the view. Office review: while something walks or flies, one requestAnimationFrame per display frame (the
@@ -1281,6 +1418,12 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
         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) }));
+  // #2861: who the dialogue box may speak for — everyone drawn here (All offices: the first tile they are in), with what
+  // draws them; null while it is off (draw() then draws nothing of it).
+  dlgRef.current = dialogueOn ? {
+    who: new Map(people.filter((d) => d.node && d.node.name).reverse().map((d) => [d.node.name, { key: d.key, node: d.node, look: d.look, skin: d.skin || skin }])),
+    acts: actsHere, share: talk !== undefined,
+  } : null;
   // 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;
@@ -1342,10 +1485,30 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     const d = key ? people.find((x) => x.key === key) : null;
     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); };
+  /** #2861: the dialogue box under a pointer event ({ key, name }: its agent), or null. */
+  const dlgAt = (e) => {
+    const b = dlgShown.current, r = canvasRef.current ? canvasRef.current.getBoundingClientRect() : null;
+    return b && r && onBox(b.L, b.stage, e.clientX - r.left, e.clientY - r.top) ? b : null;
+  };
+  const onMove = (e) => {
+    if (e.pointerType === "touch" || g.busy()) return;
+    const onDlg = !!dlgAt(e);
+    if (onDlg !== dlgHot) setDlgHot(onDlg);
+    const d = onDlg ? null : deskOf(e); const key = d ? d.key : null; if (key !== tip) setTip(key);
+  };
+  /** #2861: the box clicked is its agent clicked — their card, and the view brought to them. */
+  const focusPerson = (key) => {
+    const d = people.find((x) => x.key === key);
+    if (!d) return;
+    cardFrom.current = null; setTip(null); setCard(key);
+    const w = zones && !overview ? walkers.at(d.node.name, now()) : null;
+    show(w ? { x: w.x - 24, y: w.y - 64, w: 48, h: 64 } : d.box);
+  };
   // #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 box = dlgAt(e);
+    if (box) { focusPerson(box.key); return; }
     const d = deskOf(e);
     if (!d || !d.node.i) { setTip(null); setCard(null); return; }
     if (lastType.current === "touch") setTip(null);
@@ -1354,6 +1517,8 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   };
   // All offices: a double-click on a tile (off its people) opens that office; the lobby is no office.
   const onDblClick = (e) => {
+    const box = dlgAt(e);
+    if (box) { setCard(null); open(box.name); 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;
@@ -1479,6 +1644,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
         <${People} nodes=${everyone} pinned=${f.pinned} onChange=${(pinned) => setF({ ...f, pinned })} />` : null}
       <label class="check oo-hide-asleep"><input type="checkbox" checked=${hideAsleep} onChange=${() => { const v = !hideAsleep; store.saveHideAsleep(v); setHideAsleep(v); setTip(null); }} /><span>${to("hideAsleep")}</span></label>
       ${zones || overview ? html`<label class="check oo-night"><input type="checkbox" checked=${nightOn} onChange=${() => { const v = !nightOn; store.saveNightOn(v); setNightOn(v); }} /><span>${to("nightOn")}</span></label>` : null}
+      <label class="check oo-dialogue" title=${to("dialogueTitle")}><input type="checkbox" checked=${dialogueOn} onChange=${toggleDialogue} /><span>${to("dialogue")}</span></label>
       ${overview ? html`<label class="check oo-lobby-tile" title=${lobbyAll.length ? undefined : to("lobbyEveryone")}><input type="checkbox" checked=${lobbyOn && lobbyAll.length > 0}
         disabled=${!lobbyAll.length} onChange=${() => { const v = !lobbyOn; store.saveLobbyTile(v); setLobbyOn(v); setTip(null); }} /><span>${to("lobbyTile")}</span></label>
         ${lobbyAll.length ? null : html`<span class="muted oo-note oo-lobby-none">${to("lobbyEveryone")}</span>`}` : null}
@@ -1500,7 +1666,8 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
     ${overview || people.length || L.rooms.length ? null : html`<p class="note oo-empty">${to("nobody")} ${auto && (f.team || f.pinned.length) ? html`<button type="button" class="btn btn-sm" onClick=${() => setF({ team: "", pinned: [] })}>${to("everyone")}</button>` : null}</p>`}
     <div class=${`oo-stage${layout ? " editing" : ""}`} ref=${stageRef} onPointerDown=${onDown} onPointerMove=${g.move} onPointerUp=${g.up} onPointerCancel=${g.up}
       onWheel=${onWheel} onKeyDown=${onKeyDown} onFocusIn=${onFocusIn} onClickCapture=${g.clickCapture}>
-      <canvas ref=${canvasRef} class=${`oo-canvas${tipDesk && tipDesk.node.i ? " hot" : ""}`} role="application" tabindex="0" aria-label=${to(overview ? "labelAll" : "label")}
+      ${dialogueOn ? html`<div class="sr-only oo-dialogue-live" aria-live="polite">${dlgSay}</div>` : null}
+      <canvas ref=${canvasRef} class=${`oo-canvas${(tipDesk && tipDesk.node.i) || dlgHot ? " hot" : ""}`} role="application" tabindex="0" aria-label=${to(overview ? "labelAll" : "label")}
         onPointerMove=${onMove} onPointerLeave=${() => setTip(null)} onClick=${onClick} ondblclick=${onDblClick}></canvas>
       ${overview ? tiles.map((tl) => {
         const text = to("tileLabel", tl.name, tl.count), at = (el) => { if (el) labelEls.current.set(tl.key, el); else labelEls.current.delete(tl.key); };

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

@@ -8,7 +8,8 @@ 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, Who, answerBlocked, askText, boardApi, currentWork, errorText, followsSubs, moveCard, notesForPeople, relTime, wrapUpText } from "./fleet-task-common.js";
+import { AssigneeOption, StatusPill, Who, answerBlocked, askText, boardApi, currentWork, errorText, followsSubs, moveCard, notesForPeople, relTime, wrapUpText } from "./fleet-task-common.js";
+import { StepButtons } from "./fleet-task-menu.js";
 
 register("taskcard", {
   en: {
@@ -83,9 +84,10 @@ const fieldName = (k) => { const key = `taskcard.f${k[0].toUpperCase()}${k.slice
 
 /**
  * `writable`: false over the public link (the card is shown, nothing on it changes). `place`: up and down in its column,
- * for touch and keyboard (null when it cannot move).
+ * for touch and keyboard (null when it cannot move). `steps`: the previous and next card the page showed, and where
+ * this one is among them (null: nowhere to step).
  */
-export function CardDialog({ id, tick, projects, writable = true, place = null, onClose, onOpen, reloadBoard }) {
+export function CardDialog({ id, tick, projects, boardOff = [], writable = true, place = null, steps = null, onClose, onOpen, reloadBoard }) {
   const { instances } = useStore(appStore);
   const [detail, setDetail] = useState(null);
   const [missing, setMissing] = useState(false);
@@ -131,8 +133,10 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
     finally { moving.current = false; setBusy(false); }
   }
 
+  // Previous / Next: the page's cards (fleet-task-menu.js), in the header from the first frame (no jump once it loads).
+  const tools = steps ? html`<${StepButtons} steps=${steps} onOpen=${onOpen} />` : null;
   if (missing || !detail) {
-    return html`<${Dialog} title=${id} onClose=${onClose} wide drawer><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
+    return html`<${Dialog} title=${id} onClose=${onClose} wide drawer tools=${tools}><p class="muted">${missing ? t("taskcard.missing", id) : t("taskcard.loading")}</p></${Dialog}>`;
   }
 
   const { card, parent, children } = detail;
@@ -166,7 +170,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 drawer label=${`${card.id} ${card.title}`}>
+  return html`<${Dialog} title=${`${card.id} · ${t(`tasks.${card.kind}`)}`} onClose=${onClose} wide drawer label=${`${card.id} ${card.title}`} tools=${tools}>
     <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>`}
@@ -199,7 +203,7 @@ export function CardDialog({ id, tick, projects, writable = true, place = null,
           ${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}
-            ${names.filter((n) => n !== card.assignee).map((n) => html`<option key=${n} value=${n}>${n}</option>`)}
+            ${names.filter((n) => n !== card.assignee).map((n) => html`<${AssigneeOption} key=${n} name=${n} boardOff=${boardOff} />`)}
             <option value="\u0000other">${t("taskcard.other")}</option>
           </select>` : null}</dd>
         ${isMain && children.length ? html`<dt>${t("taskcard.now")}</dt><dd>${(() => {

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

@@ -23,7 +23,7 @@ register("tasks", {
     mainCount: "{0} main tasks", mainOne: "1 main task", waiting: "{0} waiting for you", blockedN: "{0} blocked", lastActivity: "Last change {0}",
     percentTitle: "Done: finished sub tasks out of all of them; a main task without sub tasks counts once you confirm it",
     allProjects: "All projects", back: "Projects",
-    everyone: "Everyone", nobody: "Unassigned", filterLabel: "Filter by assignee",
+    nobody: "Unassigned",
     recent: "Last 7 days", all: "All", toggleDone: "Show the last 7 days / everything",
     emptyBoard: "No main tasks here yet", emptyFiltered: "No main tasks match the filter",
     emptyBoardHint: "A main task is an outcome you want. Assign it to an instance: it does a small one directly and splits a big one into sub tasks.",
@@ -42,6 +42,7 @@ register("tasks", {
     definitionHint: "One per line: conditions anyone can check", acceptanceHint: "One per line",
     context: "Context", contextHint: "Paths, related cards, decisions already made (pointers only)",
     assignee: "Assignee", assigneeHint: "Which instance", project: "Project", size: "Size", priority: "Priority",
+    boardOff: "{0} (task board off)", boardOffHint: "Instances with the task board switched off cannot be handed cards: they have no task tool to read them with.",
     reviewBox: "Stop at review for my confirmation", created: "Opened {0}", titleRequired: "A title is required",
     search: "Search cards", searchHint: "Search titles, fields, checklists and comments", searchEmpty: "No cards match", inField: "in {0}",
     fieldgoal: "goal", fieldscope: "scope", fieldcontext: "context", fieldstate: "state", fieldresult: "result", fieldblockedReason: "blocked reason",
@@ -71,6 +72,7 @@ register("tasks", {
     "err.dep_own_main": "A sub task cannot depend on its own main task {0}", "err.dep_own_sub": "A main task cannot depend on its own sub task {0}",
     "err.dep_cycle": "These dependencies would wait on each other forever: {0}", "err.conflict": "{0} was changed meanwhile (last by {1})",
     "err.signed_in_only": "The task board takes changes from a signed-in dashboard", "err.unavailable": "The task board is not available right now", "err.not_over_public_link": "The public link can only read the board",
+    "err.assignee_board_off": "{0} has the task board switched off: it cannot read or move cards. Switch it on for {0} (Settings → the agent → Dashboard access), or hand it the work in the chat",
     "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",
@@ -96,7 +98,7 @@ register("tasks", {
     mainCount: "{0} 個主任務", mainOne: "1 個主任務", waiting: "等你確認 {0}", blockedN: "卡住 {0}", lastActivity: "最後動態 {0}",
     percentTitle: "完成度：已完成的子任務佔全部的比例；沒有子任務的主任務算一份，你確認後才算完成",
     allProjects: "所有專案", back: "專案",
-    everyone: "全部負責人", nobody: "沒人負責", filterLabel: "依負責人篩選",
+    nobody: "沒人負責",
     recent: "近 7 天", all: "全部", toggleDone: "切換：只看近 7 天／全部",
     emptyBoard: "這個專案還沒有主任務", emptyFiltered: "沒有符合篩選的主任務",
     emptyBoardHint: "主任務是你要的成果，可大可小。指派給 instance，它會自己決定直接做，或先拆成子任務。",
@@ -115,6 +117,7 @@ register("tasks", {
     definitionHint: "一行一項：能客觀判斷是否達成的條件", acceptanceHint: "一行一項",
     context: "背景", contextHint: "檔案路徑、相關卡號、已經做的決定（只放指引）",
     assignee: "負責人", assigneeHint: "交給哪個 instance", project: "專案", size: "大小", priority: "優先度",
+    boardOff: "{0}（看板已關閉）", boardOffHint: "關閉任務看板的 instance 不能被派卡：它沒有 task 工具，讀不到卡片。",
     reviewBox: "做完要停在待確認，等我確認", created: "已開 {0}", titleRequired: "標題必填",
     search: "搜尋卡片", searchHint: "搜尋標題、各欄位、驗收條件和留言", searchEmpty: "沒有符合的卡片", inField: "在{0}",
     fieldgoal: "目標", fieldscope: "範圍", fieldcontext: "背景", fieldstate: "目前狀態", fieldresult: "產出", fieldblockedReason: "卡住原因",
@@ -144,6 +147,7 @@ register("tasks", {
     "err.dep_own_main": "子任務不能相依自己的主任務 {0}", "err.dep_own_sub": "主任務不能相依自己的子任務 {0}",
     "err.dep_cycle": "相依會形成循環，大家會互相等待：{0}", "err.conflict": "{0} 已經被改過（最後由 {1} 修改）",
     "err.signed_in_only": "看板只接受已登入網頁的修改", "err.unavailable": "看板目前無法使用", "err.not_over_public_link": "公開連結只能看看板，不能修改",
+    "err.assignee_board_off": "{0} 關閉了任務看板，讀不到也動不了卡片。請先替 {0} 開啟（Settings → 該 agent → Dashboard access），或改在聊天中交辦",
     "note.review_waiting": "{0}「{1}」的子任務都完成了，等你確認",
     "note.back_to": "{0} 又有沒完成的子任務，已回到{1}", "note.deps_done": "{0} 的相依都完成了，可以開始",
     "note.deps_unmet": "提醒：{0} 還沒完成",
@@ -322,6 +326,12 @@ function word(key, arg, i) {
   return arg;
 }
 
+/** An assignee picker's choice: an instance with the task board switched off is shown, greyed out — the board refuses it. */
+export function AssigneeOption({ name, boardOff = [] }) {
+  const off = boardOff.includes(name);
+  return html`<option value=${name} disabled=${off} title=${off ? t("tasks.boardOffHint") : undefined}>${off ? t("tasks.boardOff", name) : name}</option>`;
+}
+
 /** A refusal in the page's language when the board named it (tasks.err.<key>), else the board's own sentence. */
 export function errorText(err) {
   if (err && err.key) {