@songsid/agend 2.3.4-beta.1 → 2.3.4-beta.11

package/dist/ui/chat-thread.js

@@ -31,14 +31,61 @@ export const TEXT_PREVIEW_COLUMNS = 50;
 export const TEXT_CARD_MAX = 1024 * 1024;
 const P = () => globalThis.AgendPreview;
 /** #1672: a status line longer than this (lines, or characters) is folded until it is opened. */
-export const STATUS_FOLD_LINES = 6;
-export const STATUS_FOLD_CHARS = 600;
+/**
+ * #1672 / the user (hmsg-d6ac6dfb): a status line shows two lines — its header ("A → B:") and the first line of the
+ * message, each one row (clipped with an ellipsis). Its "open" control shows when that hides something: more lines than
+ * two, or a row clipped at the width it is drawn at (measured after each draw and resize: fitStatus). Where nothing is
+ * measured (no layout), a line longer than STATUS_LINE_CHARS stands for "clipped".
+ */
+export const STATUS_FOLD_LINES = 2;
+export const STATUS_LINE_CHARS = 100;
 const REPLY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>';
 const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
 /** Escapes & " ' < >: safe for text and inside a quoted attribute. */
 export function escAttr(s) { return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
 export const msgKey = (x) => `${x.boot}-${x.id}`;
+/** How many elements an HTML string would build: its opening tags (escaped text has none). */
+function tagsIn(html) {
+  let n = 0;
+  for (let i = html.indexOf("<"); i !== -1; i = html.indexOf("<", i + 1)) { const c = html.charCodeAt(i + 1); if ((c | 32) >= 97 && (c | 32) <= 122) n++; }
+  return n;
+}
+/**
+ * M-2448: a Markdown file drawn into `el` for the side panel — renderMarkdown, which escapes first (no raw HTML, no
+ * script: the same renderer and the same output as the chat's Markdown card), or the text as plain text when its
+ * formatting would build more than TEXT_PREVIEW_NODES elements. This module is the one that writes rendered Markdown
+ * (web-csp-1268); the panel asks it. Returns "md" or "plain".
+ */
+export function drawMarkdown(el, src) {
+  const doc = el.ownerDocument;
+  el.textContent = "";
+  const html = globalThis.AgendChatRender.renderMarkdown(String(src));
+  // Each code block gains three elements below (its frame, head and label): counted before anything is built.
+  const pres = (html.match(/<pre[\s>]/g) || []).length;
+  if (tagsIn(html) + 3 * pres > TEXT_PREVIEW_NODES) {
+    const pre = doc.createElement("pre"), code = doc.createElement("code");
+    pre.className = "tc-pre"; code.textContent = String(src); pre.append(code); el.append(pre);
+    return "plain";
+  }
+  // Inside the chat's own message container, so the chat's Markdown look applies as it is (lists, links, tables, code)
+  // — also with a stylesheet from before this panel existed.
+  const msg = doc.createElement("div"), md = doc.createElement("div");
+  msg.className = "msg pv-md-msg";
+  md.className = "md";
+  md.innerHTML = html;
+  // Code blocks in the chat's frame, with their language (the thread's Wrap/Copy controls belong to the thread).
+  for (const pre of md.querySelectorAll("pre")) {
+    const box = doc.createElement("div"), head = doc.createElement("div"), lang = doc.createElement("span");
+    box.className = "codeblock"; head.className = "cb-head"; lang.className = "cb-lang";
+    lang.textContent = pre.dataset.lang || "text";
+    head.append(lang);
+    pre.replaceWith(box); box.append(head, pre);
+  }
+  msg.append(md);
+  el.append(msg);
+  return "md";
+}
 /**
  * Board 00ef2430: a thread opens with only its newest messages drawn — enough for a screen — so switching chats paints
  * at once; the older ones are drawn after that, a chunk at a time between frames, the reader's place kept.
@@ -224,15 +271,19 @@ export function createThread(list, scroller, opts) {
    */
   function statusHtml(x, time) {
     const text = String(x.text == null ? "" : x.text);
-    const lines = R().lineCount(text);
+    // Rows split on any line break (a CRLF is one break, never a row and a stray CR); the text itself is not changed.
+    const lines = R().lineCount(text.replace(/\r\n?/g, "\n"));
     const manyLines = lines > STATUS_FOLD_LINES;
-    const more = manyLines || text.length > STATUS_FOLD_CHARS
-      ? `<button data-trust="thread-control" type="button" class="st-more" data-act="toggleFold"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""}>${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}</button>`
-      : "";
+    const overflows = manyLines || text.split(/\r\n?|\n/).some(l => l.length > STATUS_LINE_CHARS);
+    // Its control: a short label at the end of line 2; its full name (and whether it is open) for a screen reader. Shown
+    // only while the line overflows (class `overflows`, kept by fitStatus at the width it is drawn at).
+    const more = `<button data-trust="thread-control" type="button" class="st-more" data-act="toggleFold" aria-expanded="false"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""} aria-label="${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}">${escAttr(manyLines ? trf("chat.showAllShort", lines) : tr("chat.showMoreShort"))}</button>`;
     const tools = `<div data-trust="thread-control" class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
     // #1990: the other instance's name opens its chat (an in-app link the router takes: no target).
-    const body = textLinkSegments(text, x.links).map(sg => sg.href ? `<a data-trust="link" class="st-link" href="${escAttr(sg.href)}">${escAttr(sg.text)}</a>` : escAttr(sg.text)).join("");
-    return `<div class="msg status-line${more ? " folded" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${body}</div>${more}</div>${tools}</div>`;
+    // Each line its own row (folded: the first two, each clipped to one row); the line breaks stay in the text.
+    const body = textLinkSegments(text, x.links).map(sg => sg.href ? `<a data-trust="link" class="st-link" href="${escAttr(sg.href)}">${escAttr(sg.text)}</a>` : escAttr(sg.text)).join("")
+      .split(/\r\n?|\n/).map(l => `<span class="st-ln">${l}</span>`).join("\n");
+    return `<div class="msg status-line folded${overflows ? " overflows" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${body}</div>${more}</div>${tools}</div>`;
   }
   /**
    * #1266: an agent reply's buttons. Labels are text (escaped, never Markdown); the click names the set and the index,
@@ -355,10 +406,10 @@ export function createThread(list, scroller, opts) {
       const att = atts.find(a => a && a.id === ph.dataset.att);
       const type = att ? R().attachmentPreviewType(att) : null;
       if (!att || !type || type !== ph.dataset.type) continue;
-      buildTextCard(ph, att, type);
+      buildTextCard(ph, att, type, x);
     }
   }
-  function buildTextCard(ph, att, type) {
+  function buildTextCard(ph, att, type, x) {
     const doc = list.ownerDocument;
     const el = (tag, cls, text) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
     ph.textContent = "";
@@ -366,7 +417,16 @@ export function createThread(list, scroller, opts) {
     const label = el("span", "tc-label", att.name);
     const show = el("button", "btn btn-sm tc-show", tr("chat.tcShow")); show.type = "button";
     const dl = el("a", "btn btn-sm tc-dl", tr("chat.tcDownload")); dl.href = `/ui/file/${att.id}`; dl.setAttribute("download", att.name);
-    head.append(label, show, dl);
+    head.append(label, show);
+    // M-2448: a Markdown file opens in the side panel too (the panel reads it, or takes what Show already read).
+    const panel = opts.panel || null;
+    if (type === "md" && panel && typeof panel.openMarkdown === "function" && x) {
+      const toPanel = el("button", "btn btn-sm btn-ghost tc-panel", tr("chat.pvOpenPanel")); toPanel.type = "button";
+      toPanel.onclick = () => panel.openMarkdown({ key: `${msgKey(x)}:m${att.id}`, instance: x.instance, msgKey: msgKey(x),
+        att: { id: att.id, name: att.name, size: att.size }, sender: x.sender, ts: x.ts, ...(text !== null ? { text } : {}) });
+      head.append(toPanel);
+    }
+    head.append(dl);
     const note = el("div", "pv-note"); note.setAttribute("data-trust", "thread-control");
     const body = el("div", "tc-body"); body.hidden = true;
     ph.append(head, note, body);
@@ -610,7 +670,25 @@ export function createThread(list, scroller, opts) {
   }
   // Sizes change without a scroll event (layout after the render, the dock under the thread): while pinned, the view
   // stays flush with the bottom; a reader who scrolled up is never moved.
-  const resized = () => { if (pinned && !atBottom()) toBottom(); reportJump(); };
+  const resized = () => { fitStatus(); if (pinned && !atBottom()) toBottom(); reportJump(); };
+  /**
+   * The user (hmsg-d6ac6dfb): a folded status line whose first two rows fit is plain two lines, no control; one with a
+   * row clipped at the width it is drawn at gets its "open" control (`overflows`). Measured after each draw and resize;
+   * a line with more than two rows always overflows (data-lines). Nothing laid out (no width): the guess it was drawn with.
+   */
+  function fitStatus() {
+    for (const m of list.querySelectorAll(".msg.status-line.folded")) {
+      const btn = m.querySelector(".st-more");
+      if (!btn || btn.dataset.lines) continue;
+      let measured = false, over = false;
+      for (const row of [...m.querySelectorAll(".st-ln")].slice(0, STATUS_FOLD_LINES)) {
+        if (!row.clientWidth) continue;
+        measured = true;
+        if (row.scrollWidth > row.clientWidth + 1) over = true;
+      }
+      if (measured && m.classList.contains("overflows") !== over) m.classList.toggle("overflows", over);
+    }
+  }
   let ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
   if (ro) { ro.observe(list); ro.observe(scroller); }
   // #2158: the reader's own hand on the thread — a wheel, a touch, the scrollbar (a pointer held), a scrolling key
@@ -725,6 +803,7 @@ export function createThread(list, scroller, opts) {
     armPolls();
     rove();
     progress();
+    fitStatus();
     return added;
   }
   /**
@@ -802,13 +881,26 @@ export function createThread(list, scroller, opts) {
   function onClick(e) {
     if (onImageClick(e)) return;
     const el = e.target && e.target.closest ? e.target.closest("[data-act]") : null;
-    if (!el || !list.contains(el)) return;
+    if (!el || !list.contains(el)) {
+      // A folded status line opens by a click on its text too (not on a link in it); its button is the keyboard's way.
+      const text = e.target && e.target.closest ? e.target.closest(".msg.status-line.folded.overflows .st-text") : null;
+      const btn = text && !e.target.closest("a") ? text.parentNode.querySelector(".st-more") : null;
+      if (btn && list.contains(btn)) onClick({ target: btn });
+      return;
+    }
     const act = el.dataset.act;
     if (act === "copyMsg") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) copyFrom(el, x.text); }
     else if (act === "copyCode") { const pre = el.closest(".codeblock")?.querySelector("pre"); if (pre) copyFrom(el, pre.textContent); }
     else if (act === "toggleFold") {
       const box = el.closest(".codeblock, .msg.status-line"); if (!box) return;
       const folded = box.classList.toggle("folded");
+      if (box.classList.contains("status-line")) {
+        // A status line's own label: short at the end of line 2 while folded, its full name for a screen reader.
+        el.setAttribute("aria-expanded", folded ? "false" : "true");
+        el.setAttribute("aria-label", !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAll", el.dataset.lines) : tr("chat.showMore"));
+        el.textContent = !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAllShort", el.dataset.lines) : tr("chat.showMoreShort");
+        return;
+      }
       el.textContent = !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAll", el.dataset.lines) : tr("chat.showMore");
     } else if (act === "toggleWrap") opts.toggleWrap();
     else if (act === "replyButton") {

package/dist/ui/fleet-canvas.js

@@ -207,7 +207,8 @@ 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
  * canvas — never over the canvas, so it covers no card (it used to sit in the canvas's bottom-left corner, over the
- * team there at the opening view). Folded until the person opens it; kept per device.
+ * team there at the opening view). Folded until the person opens it; kept per device. The lines' key: the Office has its
+ * own, for the items it carries (fleet-office.js OfficeKey, #2946).
  */
 function readKeyOpen() { try { return localStorage.getItem(KEY_KEY) === "1"; } catch { return false; } }
 function KeyToggle({ open, onToggle }) {
@@ -490,13 +491,13 @@ export function OrgCanvas({ org, app, lease }) {
         ${mode !== "list" ? html`<label class="s-search oc-find"><${Icon} name="search" size=${14} /><span class="sr-only">${tc("find")}</span>
           <input type="search" value=${query} placeholder=${tc("findShort")} autocomplete="off" onInput=${(e) => setQuery(e.target.value)} onKeyDown=${onFind} />
           ${q ? html`<span class="oc-found" role="status">${found ? (found === 1 ? tc("foundOne") : tc("found", found)) : tc("noMatch")}</span>` : null}</label>` : null}
-        ${mode !== "list" && live ? html`<${KeyToggle} open=${keyOpen} onToggle=${toggleKey} />` : null}
+        ${mode === "canvas" && live ? html`<${KeyToggle} open=${keyOpen} onToggle=${toggleKey} />` : null}
         <button type="button" class=${`btn btn-sm oc-live${live ? " on" : ""}`} aria-pressed=${live ? "true" : "false"} title=${live ? tc("liveOn") : tc("liveOff")}
           onClick=${() => setLive((v) => !v)}><span class="oc-live-dot" aria-hidden="true"></span>${tc("live")}</button>
         <div class="seg-inline" role="group" aria-label=${tc("view")}>${modeBtn("canvas")}${modeBtn("list")}${modeBtn("office")}</div>
       </div>
     </div>
-    ${mode !== "list" && live && keyOpen ? html`<${Legend} />` : null}
+    ${mode === "canvas" && live && keyOpen ? html`<${Legend} />` : null}
     ${mode === "list" ? html`<${OrgChart} org=${org} app=${app} bare=${true} sending=${sending} />`
       : mode === "office" ? html`<${Office} view=${view} traffic=${live ? traffic : null} q=${q} lease=${lease} onOpen=${openChat} />`
       : html`<${Canvas} view=${view} folded=${folded} onFold=${onFold} q=${q} jump=${jump} traffic=${live ? traffic : null} />`}

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

@@ -322,47 +322,80 @@ export function along(pts, t) {
 // ── Traffic: an item carried from desk to desk ──
 
 /** px per ms along the path, the shortest and longest trip, the stagger between items that arrive together. */
-export const FLIGHT = { SPEED: 0.35, MIN_MS: 900, MAX_MS: 4000, STAGGER_MS: 150, MAX: 40 };
+/**
+ * The items' flight: SPEED px/ms along the corridors, at least MIN_MS (#2946: under a second read as a glitch) and at
+ * most MAX_MS in the air; a burst's trips start STAGGER_MS apart. At most MAX are in the air or waiting to start: a
+ * burst over that flies its newest and drops the rest (they are on the Traffic view), so the room never lags behind a
+ * backlog of old events, and a trip under way is never cut short to make room.
+ */
+export const FLIGHT = { SPEED: 0.35, MIN_MS: 2500, MAX_MS: 4500, STAGGER_MS: 200, MAX: 12 };
 const MAX_SEEN = 2000;
+/** A trip's time in the air for a path `len` px long. */
+export const flightMs = (len) => Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, len / FLIGHT.SPEED));
+/** How many new items may wait for their first frame (a frame not drawn for a while: the newest kept). */
+const MAX_WAITING = 200;
 /**
- * The items in the air. `sync(items, now, still)` takes fleet-traffic.js's store items: each new one (a message, a
- * delegation's work, its report coming back) starts one trip from its sender's desk to its receiver's; a delegation with
- * no report (stale) and anything seen before start none; `still` (reduced motion) starts none. `frame(now, L)` the
- * trips under way on layout L: { id, hue, kind, from, x, y, t } (from: who sent it — a pack can draw it as theirs),
- * finished ones dropped; a trip whose desks are not drawn goes.
+ * The trips' lifecycle, on whatever `pathOf(on, from, to)` routes them through (`on`: what `frame` is given — a layout,
+ * or All offices' tiles; null: not drawn there). `sync(items, now, still)`: each new item is seen once (`seen`,
+ * bounded: never flown again) and waits for the next frame — none when `still` (reduced motion) or for a stale
+ * delegation. `frame(now, on)`: first the waiting are admitted, #2946 — only those with a path here (all controllers
+ * get the whole fleet's traffic: the rest are not this one's to fly, and never take a place), and of those the newest
+ * that fit in `max` beside the trips still up (landed ones and those with no path any more pruned first), each batch
+ * staggered from when it came, one already past its flight time never flown late; then the trips under way
+ * { id, hue, kind, from, x, y, t }. A trip under way
+ * is never cut short to make room. `size()`: trips up or waiting.
  */
-export function createFlights({ max = FLIGHT.MAX } = {}) {
+export function createTrips(pathOf, { max = FLIGHT.MAX } = {}) {
   const seen = new Set();
-  let trips = [];
+  let trips = [], waiting = [];
+  const route = (f, on) => { f.on = on; f.pts = pathOf(on, f.from, f.to); f.ms = f.pts ? flightMs(pathLength(f.pts)) : 0; };
   return {
     sync(items, now, still = false) {
-      let k = 0, started = 0;
+      let fresh = 0;
       for (const it of items || []) {
         if (seen.has(it.id)) continue;
         seen.add(it.id);
         if (seen.size > MAX_SEEN) seen.delete(seen.values().next().value);
         if (still || it.phase === "stale") continue;
-        trips.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now + k++ * FLIGHT.STAGGER_MS, L: null, pts: null, ms: 0 });
-        started++;
+        waiting.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), at: now });
+        fresh++;
       }
-      if (trips.length > max) trips = trips.slice(trips.length - max);
-      return started;
+      if (waiting.length > MAX_WAITING) waiting = waiting.slice(-MAX_WAITING);
+      return fresh;
     },
-    frame(now, L) {
-      const out = [];
+    frame(now, on) {
+      // First the trips up: routed again on a new layout, the ones with no path or landed dropped — so the room below is
+      // what is really free (#2977 review: after a gap with no frame, a hidden tab, landed trips held every place).
       trips = trips.filter((f) => {
-        if (f.L !== L) { f.L = L; f.pts = walkPath(L, f.from, f.to); f.ms = f.pts ? Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(f.pts) / FLIGHT.SPEED)) : 0; }
-        if (!f.pts) return false;
-        const t = (now - f.start) / f.ms;
-        if (t >= 1) return false;
-        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
-        return true;
+        if (f.on !== on) route(f, on);
+        return !!f.pts && (now - f.start) / f.ms < 1;
       });
+      if (waiting.length) {
+        // Then the waiting with a path here and still due (one whose own flight time has passed since it came is stale:
+        // never flown late), the newest that fit, each batch staggered from when it came.
+        const ok = [];
+        for (const w of waiting) { const f = { ...w, start: w.at }; route(f, on); if (f.pts && now - w.at < f.ms) ok.push(f); }
+        waiting = [];
+        const room = max - trips.length, add = room > 0 ? ok.slice(-room) : [];      // never slice(-0): that is all of them
+        const k = new Map();
+        for (const f of add) { const n = k.get(f.at) || 0; k.set(f.at, n + 1); f.start = f.at + n * FLIGHT.STAGGER_MS; trips.push(f); }
+      }
+      const out = [];
+      for (const f of trips) {
+        const t = (now - f.start) / f.ms;
+        if (t >= 0 && t < 1) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
+      }
       return out;
     },
-    size: () => trips.length,
+    size: () => trips.length + waiting.length,
   };
 }
+/**
+ * The items in the air in one office: each new one (a message, a delegation's work, its report coming back) carried from
+ * its sender's desk to its receiver's along layout L's corridors (createTrips; `frame(now, L)`; `from`: who sent it — a
+ * pack can draw it as theirs). A trip whose desks are not drawn on L is not this office's.
+ */
+export const createFlights = (opts = {}) => createTrips((L, from, to) => (L ? walkPath(L, from, to) : null), opts);
 
 /** How many delegations each instance is working on now (the folders on its desk). */
 export function workOn(items) {

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

@@ -13,8 +13,7 @@
 //   contain); a tie keeps the narrower. The same input always gives the same picture.
 // - Traffic between people in different tiles is a straight flight between their seats in overview coordinates
 //   (createCrossFlights); between two people in the same tile it is that tile's own (createFlights, along its corridors).
-import { FLIGHT, along, desksOf, membersOf, pathLength } from "./fleet-office-model.js";
-import { hue } from "./fleet-traffic.js";
+import { FLIGHT, createTrips, desksOf, membersOf } from "./fleet-office-model.js";
 
 /** The switcher's "All offices" value: '*' is never in a stored office's id (fleet-office-model.js officeOk). */
 export const ALL_ID = "*all";
@@ -127,41 +126,10 @@ export function crossPath(parts, from, to) {
   return a && z ? [a, z] : null;
 }
 
-const MAX_SEEN = 2000;
 /**
- * The items in the air between tiles — fleet-office-model.js createFlights's lifecycle (each new item once; none for a
- * stale delegation or with reduced motion), on crossPath's straight line: `frame(now, parts)` → { id, hue, kind, from, x, y,
- * t } in overview units; a trip with no crossing (both in one tile, or either gone) is dropped.
+ * The items in the air between tiles — fleet-office-model.js createTrips (each new item once; none for a stale delegation
+ * or with reduced motion; at most `max` at once, newest first, of those with a crossing), on crossPath's straight line:
+ * `frame(now, parts)` → { id, hue, kind, from, x, y, t } in overview units; one with no crossing (both in one tile, or
+ * either gone) is not this one's.
  */
-export function createCrossFlights({ max = FLIGHT.MAX } = {}) {
-  const seen = new Set();
-  let trips = [];
-  return {
-    sync(items, now, still = false) {
-      let k = 0, started = 0;
-      for (const it of items || []) {
-        if (seen.has(it.id)) continue;
-        seen.add(it.id);
-        if (seen.size > MAX_SEEN) seen.delete(seen.values().next().value);
-        if (still || it.phase === "stale") continue;
-        trips.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now + k++ * FLIGHT.STAGGER_MS, parts: null, pts: null, ms: 0 });
-        started++;
-      }
-      if (trips.length > max) trips = trips.slice(trips.length - max);
-      return started;
-    },
-    frame(now, parts) {
-      const out = [];
-      trips = trips.filter((f) => {
-        if (f.parts !== parts) { f.parts = parts; f.pts = crossPath(parts, f.from, f.to); f.ms = f.pts ? Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(f.pts) / FLIGHT.SPEED)) : 0; }
-        if (!f.pts) return false;
-        const t = (now - f.start) / f.ms;
-        if (t >= 1) return false;
-        if (t >= 0) { const p = along(f.pts, t); out.push({ id: f.id, hue: f.hue, kind: f.kind, from: f.from, x: p.x, y: p.y, t }); }
-        return true;
-      });
-      return out;
-    },
-    size: () => trips.length,
-  };
-}
+export const createCrossFlights = ({ max = FLIGHT.MAX } = {}) => createTrips((parts, from, to) => (parts ? crossPath(parts, from, to) : null), { max });

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

@@ -154,10 +154,11 @@ const SET_STRIPS = [...POSES, "prop"];
 const WALKS = ["walk", "walkDown", "walkUp", "walkSide"];
 const BUILT_IN = new Set(["pixel", "studio"]);
 /**
- * Ids built in after packs could be uploaded under them (#2631: "cozy"): a new upload is refused, but a pack the host
- * kept under one before (`kept`) is still read back, listed and deletable, and wins the id for the offices that name it.
+ * Ids built in after packs could be uploaded under them (#2631: "cozy"; #2947: "guild", "school"): a new upload is
+ * refused, but a pack the host kept under one before (`kept`) is still read back, listed and deletable, and wins the id
+ * for the offices that name it.
  */
-const RESERVED = new Set(["cozy"]);
+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;

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

@@ -1,9 +1,10 @@
 // The Office view's art (fleet-office.js draws with it on a <canvas>). A skin draws a layout that fleet-office-model.js
-// (desks) or fleet-office-zones.js (zones) made. Three skins are built in. Two draw everything procedurally — little
+// (desks) or fleet-office-zones.js (zones) made. Five skins are built in. Two draw everything procedurally — little
 // pixel people, desks, lamps: "pixel" (the desks layout: a room per team, a desk per instance) and "studio" (the zones
 // layout: work desks, a lounge, an alert corner and a nap corner; people walk to the area for their state). The third,
 // "cozy" (#2631), is the zones layout on one picture shipped with the page (a warm pixel-art office), the same built-in
-// people in it. Every drawing call goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
+// people in it; "guild" and "school" (#2947) are two more such pictures on the cozy's arrangement. Every drawing call
+// goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
 // format v1 in fleet-office-pack.js) can replace any part; a part a pack does not supply falls back to the built-in
 // drawing. An admin uploads a pack (#2513, the host keeps it: src/web-office-skins.ts); loadPackSkin() reads it back —
 // its manifest checked here again (checkSkinPack), its pictures by their content ids — and spriteSkin() draws it.
@@ -243,13 +244,21 @@ function drawDeskFront(ctx, d, look, env) {
   if (look.match) { ctx.save(); ctx.strokeStyle = pal.focus; ctx.lineWidth = 2; ctx.strokeRect(d.x + 2, d.y + 2, d.w - 4, d.h - 6); ctx.restore(); }
 }
 
-const Q = 2;                                             // a prop's art pixel
+const Q = 2;                                             // a prop's art pixel, before PROP_SCALE
+/**
+ * #2946: the built-in props are drawn this much larger than their 16 px art (a pack's own `props` keep their size). In
+ * the scene's units, so they scale with the room as its people do (zoom, a phone, an All offices tile).
+ */
+export const PROP_SCALE = 1.75;
 function drawProp(ctx, it, ms, env) {
-  const c = env.pal.fx[it.hue] || env.pal.fx.send, x0 = it.x - 8, y0 = it.y - 8 - Math.sin(Math.PI * it.t) * 10;
-  const b = (c2, r, w, h, col) => px(ctx, x0 + c2 * Q, y0 + r * Q, w * Q, h * Q, col);
+  const c = env.pal.fx[it.hue] || env.pal.fx.send, lift = Math.sin(Math.PI * it.t) * 10;
+  const b = (c2, r, w, h, col) => px(ctx, -8 + c2 * Q, -8 + r * Q, w * Q, h * Q, col);
   ctx.save();
+  ctx.translate(it.x, it.y);
+  ctx.scale(PROP_SCALE, PROP_SCALE);
   ctx.fillStyle = "rgba(0, 0, 0, 0.18)";
-  ctx.beginPath(); ctx.ellipse(it.x, it.y + 4, 7, 2.5, 0, 0, Math.PI * 2); ctx.fill();
+  ctx.beginPath(); ctx.ellipse(0, 4, 7, 2.5, 0, 0, Math.PI * 2); ctx.fill();
+  ctx.translate(0, -lift);
   if (it.hue === "task") { b(0, 0, 4, 2, c); b(0, 1, 8, 6, c); b(0, 2, 8, 1, "rgba(255, 255, 255, 0.35)"); }
   else if (it.hue === "report") { b(1, 0, 6, 8, "#fbfbfb"); b(1, 0, 6, 1, c); b(2, 4, 1, 1, c); b(3, 5, 1, 1, c); b(4, 4, 1, 1, c); b(5, 3, 1, 1, c); }
   else if (it.hue === "broadcast") { b(0, 3, 2, 2, c); b(2, 2, 2, 4, c); b(4, 1, 2, 6, c); if (frameAt(ms, 2, 6)) { b(7, 1, 1, 2, c); b(7, 5, 1, 2, c); } else b(7, 3, 1, 2, c); }
@@ -645,28 +654,112 @@ export const COZY_PACK = {
   stateZones: { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" },
   characters: {}, byInstance: {}, props: {}, bubbles: {},
 };
-/** Until its picture is in (loadCozySkin): the studio's floors under the cozy's areas. */
-const cozyBare = spriteSkin(COZY_PACK, new Map(), studioSkin);
-let cozyJob = null;
+// The cozy's zones on every picture-backed built-in: work, lounge, the alert corner, the nap corner.
+const PICTURE_ZONES = { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" };
+const wps = (list) => list.map(([id, x, y]) => ({ id, x, y }));
+
+// ── #2947: two more on the cozy's arrangement — work top-left, the lounge top-right, the nap corner bottom-left, the
+// alert corner bottom-right, one straight aisle up the middle from a bottom-centre door ──
+
+/** The guild: a fantasy adventurers' guild hall (src/ui/shared/office/guild.png). */
+export const GUILD_BACKGROUND = "/assets/office-guild.png";
+// Seats: the chairs at the six map desks, the tavern bench, the stools round the table, the bar; the inn beds (a sleeper's
+// middle); in front of the quest board.
+const GUILD_AREAS = {
+  desks: { name: "desks", rect: { x: 130, y: 190, w: 400, h: 160 }, seats: pts([180, 200], [320, 200], [450, 200], [180, 315], [320, 315], [450, 315]) },
+  lounge: { name: "lounge", rect: { x: 780, y: 190, w: 440, h: 150 }, seats: pts([840, 200], [900, 200], [810, 290], [935, 290], [870, 325], [1040, 300]) },
+  alert: { name: "alert", rect: { x: 860, y: 560, w: 260, h: 50 }, seats: pts([900, 590], [1000, 590], [1090, 590]) },
+  nap: { name: "nap", rect: { x: 110, y: 540, w: 380, h: 80 }, seats: pts([160, 560], [285, 560], [405, 560]) },
+};
+const GUILD_WAYPOINTS = wps([
+  ["door", 640, 650], ["low", 640, 615], ["hall", 640, 345], ["top", 640, 130],
+  // the desks: the aisle under the second row (y 345), the one between the rows (y 225), the column beside them (x 540)
+  ["d-east", 540, 345], ["d2-3", 450, 345], ["d2-2", 320, 345], ["d2-1", 180, 345],
+  ["d-up", 540, 225], ["d1-3", 450, 225], ["d1-2", 320, 225], ["d1-1", 180, 225],
+  // the beds and the quest board: the aisle along the bottom (y 615)
+  ["n-x", 500, 615], ["n-3", 405, 615], ["n-2", 285, 615], ["n-1", 160, 615],
+  ["a-1", 900, 615], ["a-2", 1000, 615], ["a-3", 1090, 615],
+  // the tavern: under the round table (y 345), up the bench's west end (x 770) to in front of it (y 215)
+  ["l-hall", 770, 345], ["l-tw", 810, 345], ["l-ts", 870, 345], ["l-te", 935, 345], ["l-bar", 1040, 345],
+  ["l-up", 770, 215], ["l-b1", 840, 215], ["l-b2", 900, 215],
+]);
+const GUILD_EDGES = [
+  ["door", "low"], ["low", "hall"], ["hall", "top"],
+  ["hall", "d-east"], ["d-east", "d2-3"], ["d2-3", "d2-2"], ["d2-2", "d2-1"], ["d-east", "d-up"], ["d-up", "d1-3"], ["d1-3", "d1-2"], ["d1-2", "d1-1"],
+  ["low", "n-x"], ["n-x", "n-3"], ["n-3", "n-2"], ["n-2", "n-1"], ["low", "a-1"], ["a-1", "a-2"], ["a-2", "a-3"],
+  ["hall", "l-hall"], ["l-hall", "l-tw"], ["l-tw", "l-ts"], ["l-ts", "l-te"], ["l-te", "l-bar"], ["l-hall", "l-up"], ["l-up", "l-b1"], ["l-b1", "l-b2"],
+];
+export const GUILD_PACK = {
+  format: 1, id: "guild", scale: 1, background: GUILD_BACKGROUND, areas: GUILD_AREAS, door: { x: 640, y: 690 },
+  waypoints: GUILD_WAYPOINTS, edges: GUILD_EDGES, straight: true, furniture: [], stateZones: PICTURE_ZONES,
+  characters: {}, byInstance: {}, props: {}, bubbles: {},
+};
+
+/** The school: a classroom (src/ui/shared/office/school.png). */
+export const SCHOOL_BACKGROUND = "/assets/office-school.png";
+// Seats: the chairs at the six student desks; the sofa, the two stools, the vending machine; the nurse's beds; in front
+// of the chalkboard.
+const SCHOOL_AREAS = {
+  desks: { name: "desks", rect: { x: 130, y: 205, w: 400, h: 140 }, seats: pts([190, 215], [325, 215], [455, 215], [170, 320], [315, 320], [450, 320]) },
+  lounge: { name: "lounge", rect: { x: 770, y: 125, w: 420, h: 110 }, seats: pts([850, 135], [925, 135], [1000, 135], [810, 225], [1035, 225], [1145, 185]) },
+  alert: { name: "alert", rect: { x: 840, y: 560, w: 260, h: 50 }, seats: pts([880, 590], [965, 590], [1050, 590]) },
+  nap: { name: "nap", rect: { x: 110, y: 540, w: 380, h: 80 }, seats: pts([160, 555], [295, 555], [400, 555]) },
+};
+const SCHOOL_WAYPOINTS = wps([
+  ["door", 640, 660], ["low", 640, 625], ["hall", 640, 335], ["mid", 640, 280], ["top", 640, 100],
+  // the desks: the aisle under the second row (y 335), the one between the rows (y 232), the column beside them (x 540)
+  ["d-east", 540, 335], ["d2-3", 450, 335], ["d2-2", 315, 335], ["d2-1", 170, 335],
+  ["d-up", 540, 232], ["d1-3", 455, 232], ["d1-2", 325, 232], ["d1-1", 190, 232],
+  // the beds and the chalkboard: the aisle along the bottom (y 625)
+  ["n-x", 520, 625], ["n-3", 400, 625], ["n-2", 295, 625], ["n-1", 160, 625],
+  ["a-1", 880, 625], ["a-2", 965, 625], ["a-3", 1050, 625],
+  // the lounge: under the rug (y 280) to the stools and the machine, up its west edge (x 760) to in front of the sofa (y 150)
+  ["l-hall", 760, 280], ["l-w", 810, 280], ["l-e", 1035, 280], ["l-vend", 1145, 280],
+  ["l-up", 760, 150], ["l-s1", 850, 150], ["l-s2", 925, 150], ["l-s3", 1000, 150],
+]);
+const SCHOOL_EDGES = [
+  ["door", "low"], ["low", "hall"], ["hall", "mid"], ["mid", "top"],
+  ["hall", "d-east"], ["d-east", "d2-3"], ["d2-3", "d2-2"], ["d2-2", "d2-1"], ["d-east", "d-up"], ["d-up", "d1-3"], ["d1-3", "d1-2"], ["d1-2", "d1-1"],
+  ["low", "n-x"], ["n-x", "n-3"], ["n-3", "n-2"], ["n-2", "n-1"], ["low", "a-1"], ["a-1", "a-2"], ["a-2", "a-3"],
+  ["mid", "l-hall"], ["l-hall", "l-w"], ["l-w", "l-e"], ["l-e", "l-vend"], ["l-hall", "l-up"], ["l-up", "l-s1"], ["l-s1", "l-s2"], ["l-s2", "l-s3"],
+];
+export const SCHOOL_PACK = {
+  format: 1, id: "school", scale: 1, background: SCHOOL_BACKGROUND, areas: SCHOOL_AREAS, door: { x: 640, y: 700 },
+  waypoints: SCHOOL_WAYPOINTS, edges: SCHOOL_EDGES, straight: true, furniture: [], stateZones: PICTURE_ZONES,
+  characters: {}, byInstance: {}, props: {}, bubbles: {},
+};
+
+/**
+ * The built-ins drawn from one picture shipped with the page (#2631 cozy, #2947 guild and school): each one's pack, and
+ * until its picture is in, the studio's floors under its areas (the bare skin); `job` is the picture's load in flight.
+ */
+const PICTURES = new Map([COZY_PACK, GUILD_PACK, SCHOOL_PACK].map((pack) => [pack.id, { pack, bare: spriteSkin(pack, new Map(), studioSkin), job: null }]));
+/** Their ids: a style naming one loads its picture (loadBuiltInSkin). */
+export const PICTURE_SKINS = [...PICTURES.keys()];
 
 /** The skins built into this page; an uploaded pack is loaded by loadPackSkin. */
-export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin], ["cozy", cozyBare]]);
-export const BUILT_IN_SKINS = ["pixel", "studio", "cozy"];
+export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin], ...[...PICTURES].map(([id, p]) => [id, p.bare])]);
+export const BUILT_IN_SKINS = ["pixel", "studio", ...PICTURE_SKINS];
 /**
- * #2631: the cozy's picture, loaded once; the skin drawn from it then takes the cozy's place in SKINS (skinFor). The
- * skin, or null while it cannot load (the bare one stays; tried again next time).
+ * #2631/#2947: a picture-backed built-in's picture, loaded once; the skin drawn from it then takes the bare one's place
+ * in SKINS (skinFor). The skin, or null while it cannot load (the bare one stays; tried again next time); null for an id
+ * that is not one of them.
  */
-export function loadCozySkin({ image = defaultImage } = {}) {
-  if (SKINS.get("cozy") !== cozyBare) return Promise.resolve(SKINS.get("cozy"));
-  cozyJob ??= image(COZY_BACKGROUND).then((im) => {
-    cozyJob = null;
+export function loadBuiltInSkin(id, { image = defaultImage } = {}) {
+  const p = PICTURES.get(id);
+  if (!p) return Promise.resolve(null);
+  if (SKINS.get(id) !== p.bare) return Promise.resolve(SKINS.get(id));
+  p.job ??= image(p.pack.background).then((im) => {
+    p.job = null;
     if (!im) return null;
-    const sk = spriteSkin(COZY_PACK, new Map([[COZY_BACKGROUND, im]]), studioSkin);
-    SKINS.set("cozy", sk);
+    const sk = spriteSkin(p.pack, new Map([[p.pack.background, im]]), studioSkin);
+    SKINS.set(id, sk);
     return sk;
-  }, () => { cozyJob = null; return null; });
-  return cozyJob;
+  }, () => { p.job = null; return null; });
+  return p.job;
 }
+/** #2631: the cozy's picture (loadBuiltInSkin for "cozy"). */
+export const loadCozySkin = (opts = {}) => loadBuiltInSkin("cozy", opts);
 /** A skin by id: a built-in one, else a pack loaded here (`packs`: id → skin), else the default (pixel). */
 export const skinFor = (id, packs = null) => SKINS.get(id) || (packs && packs.get(id)) || pixelSkin;
 

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

@@ -19,6 +19,8 @@ import { levelsOk } from "./fleet-office-levels.js";
 const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep", NIGHT_KEY = "agend_org_office_night";
 /** #2554: "0" when All offices leaves the lobby tile out (default: shown). */
 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";
 /** #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. */
@@ -195,6 +197,9 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
     saveNightOn: (v) => write(NIGHT_KEY, v ? "1" : "0"),
     /** #2554: whether All offices shows the lobby tile (the instances in no stored office) here (default: shown). */
     lobbyTile: () => read(LOBBY_KEY) !== "0",
+    /** #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"),
     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-zones.js

@@ -3,7 +3,7 @@
 // changes it walks (along the pack's waypoints) to the new area. Pure — fleet-office.js draws it. Also here: what a
 // character says in its speech bubble, and which furniture is active.
 import { LOGICAL, own } from "./fleet-office-pack.js";
-import { FLIGHT, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { flightMs, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
 import { hue } from "./fleet-traffic.js";
 
 /** The area for a state: the pack's own, else its "default", else its first area. */
@@ -281,7 +281,7 @@ export function createMail({ max = MAIL.MAX } = {}) {
         if (!drop) continue;                                          // nowhere off the seats: not delivered here
         const pts = [{ x: L.door.x, y: L.door.y }, drop];
         letters.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now, drop, pts,
-          ms: Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(pts) / FLIGHT.SPEED)) });
+          ms: flightMs(pathLength(pts)) });
         started++;
       }
       if (letters.length > max) letters = letters.slice(letters.length - max);