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

package/dist/ui/chat-store.js

@@ -9,6 +9,8 @@
 // navigation — it counts as use, as the old click did). Coming back to it reads nothing; the stream keeps it current.
 import "./chat-render.js";
 import { createLiveAgentReplies } from "./chat-live-replies.js";
+/** A message's identity on this page (ids restart with each fleet process; the boot makes them unique). */
+const msgKeyOf = (m) => `${m.boot}-${m.id}`;
 
 const R = () => globalThis.AgendChatRender;
 
@@ -43,7 +45,7 @@ const COMPACT_PAGE_LIMIT_MS = 11 * 60_000;
 export function createChatStore(deps) {
   const s = {
     msgs: {}, drafts: {}, replies: {}, pendingFiles: {}, sending: {}, outgoing: {}, instanceStatus: {}, waking: {},
-    prompts: {}, workingSince: {}, stopping: {}, cancelling: {}, scrollMemo: {}, historyRead: new Set(), allHidden: new Set(), rbBusy: new Set(),
+    prompts: {}, workingSince: {}, stopping: {}, cancelling: {}, scrollMemo: {}, historyRead: new Set(), gapped: new Set(), allHidden: new Set(), rbBusy: new Set(),
     pollMine: readPollMine(),
     // #1823 (#1828 review): the server's clock minus this device's. A poll's deadline is the server's; a page whose clock
     // is a few seconds off would count a 10 s poll wrong. Only the server's explicit `clock` sets it (#1830 review): a
@@ -161,6 +163,9 @@ export function createChatStore(deps) {
   async function openHistory(name, lease, signal) {
     if (s.historyRead.has(name) || signal?.aborted) return false;
     s.historyRead.add(name);
+    // M-2260: after a gap, what this chat held when the read began may sit across a hole: the answer replaces it, and
+    // only what arrived while the read was out (the live stream) is kept beside it — exactly what a reload would show.
+    const stale = s.gapped.has(name) ? new Set((s.msgs[name] || []).map(msgKeyOf)) : null;
     try {
       const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=200`, undefined, signal);
       if (signal?.aborted) { s.historyRead.delete(name); return false; }
@@ -169,7 +174,10 @@ export function createChatStore(deps) {
       // #2848: a guest's chat whose every message is hidden from it (between agents): its empty chat says so.
       if (r.allHidden === true) s.allHidden.add(name); else s.allHidden.delete(name);
       for (const m of r.messages) liveReplies.message(m);
-      s.msgs[name] = R().mergeMessages(s.msgs[name], r.messages, 500);
+      if (stale && s.gapped.has(name)) {
+        s.gapped.delete(name);
+        s.msgs[name] = R().mergeMessages((s.msgs[name] || []).filter((m) => !stale.has(msgKeyOf(m))), r.messages, 500);
+      } else s.msgs[name] = R().mergeMessages(s.msgs[name], r.messages, 500);
       settleOutgoing(name);
       changed(name, "msgs");
     } catch { s.historyRead.delete(name); /* the live stream still works; the next visit tries again */ }
@@ -557,8 +565,17 @@ export function createChatStore(deps) {
   /** Whether a command can start for `target` now (none is out): checked before a typed command line is consumed. */
   const commandFree = (target) => !(s.commands[target] && s.commands[target].busy);
 
+  /**
+   * M-2260: the catch-up after a long absence brought only the newest messages ("gap"): every chat this page holds may
+   * have a hole. Each reads its newest history again — the one on screen now, the others when they are next opened.
+   */
+  function onGap() {
+    for (const name of new Set([...Object.keys(s.msgs), ...s.historyRead])) { s.historyRead.delete(name); s.gapped.add(name); }
+    if (s.current) void openHistory(s.current);
+  }
   /** Wire the store to the app's stream, for the life of the page. */
   function attach(stream) {
+    stream.on("gap", onGap);
     stream.on("status", applyStatus);
     stream.on("activity", applyActivity);
     stream.on("message", ingest);
@@ -578,7 +595,7 @@ export function createChatStore(deps) {
     subscribe(fn) { subs.add(fn); return () => subs.delete(fn); },
     setCurrent(name) { s.current = name; },
     onAgentReply: liveReplies.subscribe,
-    attach, applyStatus, applyActivity, ingest, applyDeliveries, openHistory,
+    attach, applyStatus, applyActivity, ingest, applyDeliveries, openHistory, onGap,
     onPrompt, applyPrompts, resolvePrompt, answerPrompt, answerByNonce, holdPrompt, releasePrompt, promptsFor,
     applyReplyButtons, clickReplyButton,
     uploadFile, send, retryOutgoing, deleteOutgoing, putBackOutgoing, threadRows, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, setDraft,

package/dist/ui/chat-strings.js

@@ -110,7 +110,7 @@ register("chat", {
     pvServer_notListening: "Previews are not available on this fleet right now.",
     previews: "Allow HTML previews",
     clicked: "Clicked:", clickShow: "Show the message these buttons were on",
-    copy: "Copy", copyMessage: "Copy this reply", copied: "Copied", copyFailed: "Copy failed", wrap: "Wrap", showAll: "Show all {0} lines", showMore: "Show more", showLess: "Show less", jumpLatest: "Latest", newBelow: "{0} new",
+    copy: "Copy", copyMessage: "Copy this reply", copied: "Copied", copyFailed: "Copy failed", wrap: "Wrap", showAll: "Show all {0} lines", showMore: "Show more", showLess: "Show less", showAllShort: "All {0} lines", showMoreShort: "More", jumpLatest: "Latest", newBelow: "{0} new",
     disconnected: "disconnected", tick_queued: "Waiting behind another message", tick_processing: "Handed to the agent", tick_delivered: "The agent has it", tick_failed: "Not delivered", tick_cancelled: "Dropped by Stop", reactedBy: "{0} reacted",
     promptAnswering: "Answering…", promptGone: "This prompt is no longer open", promptTextPlaceholder: "Your answer", promptTextSend: "Send answer", promptFor: "{0}: {1}",
     working: "{0} is working…", stuck: "{0} looks stuck", stopReply: "Stop reply", stopReplyTitle: "Stop the current reply (like Esc) and drop the messages still waiting. The instance keeps running.", stopSent: "Stopped",
@@ -120,7 +120,7 @@ register("chat", {
     pick: "Choose an agent to start chatting.", noAgents: "Create an agent to start chatting.", newAgent: "New agent", notFound: "No instance called “{0}”", notFoundHint: "It may have been deleted or renamed.", backToList: "Choose an agent",
     details: "Instance details", fullWidth: "Full width", start: "Start instance", stopInstance: "Stop instance", restart: "Restart instance", delete: "Delete instance…",
     started: "{0} started", stoppedInst: "{0} stopped", restarted: "{0} restarted", instanceDeleted: "{0} was deleted",
-    deleteTitle: "Delete {0}?", deleteHelp: "This removes the instance from the fleet and stops it. Its working directory is kept. Type “delete {0}” to confirm.", deleteGo: "Delete", cancel: "Cancel",
+    deleteTitle: "Delete {0}?", deleteHelp: "This removes the instance from the fleet and stops it, and deletes its chat topic (on Discord, its channel and history). Its working directory is kept. Type “delete {0}” to confirm.", deleteGo: "Delete", cancel: "Cancel",
     loadFailed: "Failed to load", tour: "Chat tour", tourBtnTitle: "Show the chat tour on an agent's chat", tourNoAgent: "Choose an agent before opening the chat tour.",
     dName: "Name", dStatus: "Status", dDisplay: "Display name", dDescription: "Description", dDirectory: "Directory", dBackend: "Backend", dModel: "Model", dEffort: "Effort",
     dCost: "Cost", dCostNote: "(session accumulated)", dContext: "Context", dRate5: "Rate 5h", dRate7: "Rate 7d", dActivity: "Recent activity", dInstance: "Instance", dRuntime: "Runtime",
@@ -249,7 +249,7 @@ register("chat", {
     pvServer_notListening: "這個 fleet 目前無法預覽。",
     previews: "允許預覽 HTML",
     clicked: "點選了：", clickShow: "顯示這些按鈕所在的訊息",
-    copy: "複製", copyMessage: "複製這則回覆", copied: "已複製", copyFailed: "複製失敗", wrap: "換行", showAll: "展開全部 {0} 行", showMore: "顯示更多", showLess: "收合", jumpLatest: "最新", newBelow: "{0} 則新訊息",
+    copy: "複製", copyMessage: "複製這則回覆", copied: "已複製", copyFailed: "複製失敗", wrap: "換行", showAll: "展開全部 {0} 行", showMore: "顯示更多", showLess: "收合", showAllShort: "全部 {0} 行", showMoreShort: "更多", jumpLatest: "最新", newBelow: "{0} 則新訊息",
     disconnected: "已斷線", tick_queued: "排在前一則訊息之後", tick_processing: "已交給 agent", tick_delivered: "agent 已收到", tick_failed: "未送達", tick_cancelled: "已被中止取消", reactedBy: "{0} 的回應",
     promptAnswering: "回覆中…", promptGone: "這個提示已經結束", promptTextPlaceholder: "你的回答", promptTextSend: "送出回答", promptFor: "{0}：{1}",
     working: "{0} 處理中…", stuck: "{0} 似乎卡住了", stopReply: "中止回覆", stopReplyTitle: "中止目前的回覆（同 Esc），並取消還在排隊的訊息。instance 會繼續運行。", stopSent: "已中止",
@@ -259,7 +259,7 @@ register("chat", {
     pick: "選一個 Agent 開始聊天。", noAgents: "先建立一個 Agent，再開始聊天。", newAgent: "新增 Agent", notFound: "沒有叫「{0}」的 instance", notFoundHint: "它可能已被刪除或改名。", backToList: "選擇 Agent",
     details: "Instance 詳細資料", fullWidth: "全寬", start: "啟動 instance", stopInstance: "停止 instance", restart: "重新啟動 instance", delete: "刪除 instance…",
     started: "{0} 已啟動", stoppedInst: "{0} 已停止", restarted: "{0} 已重新啟動", instanceDeleted: "{0} 已刪除",
-    deleteTitle: "要刪除 {0} 嗎？", deleteHelp: "這會把 instance 從 fleet 移除並停止它，工作目錄會保留。請輸入「delete {0}」確認。", deleteGo: "刪除", cancel: "取消",
+    deleteTitle: "要刪除 {0} 嗎？", deleteHelp: "這會把 instance 從 fleet 移除並停止它，並刪除它的聊天 topic（在 Discord 上是它的頻道與訊息記錄）。工作目錄會保留。請輸入「delete {0}」確認。", deleteGo: "刪除", cancel: "取消",
     loadFailed: "載入失敗", tour: "聊天導覽", tourBtnTitle: "在 Agent 的聊天上開啟聊天導覽", tourNoAgent: "請先選一個 Agent，再開啟聊天導覽。",
     dName: "名稱", dStatus: "狀態", dDisplay: "顯示名稱", dDescription: "說明", dDirectory: "目錄", dBackend: "Backend", dModel: "模型", dEffort: "Effort",
     dCost: "花費", dCostNote: "（本次 session 累計）", dContext: "Context", dRate5: "5 小時額度", dRate7: "7 天額度", dActivity: "最近活動", dInstance: "Instance", dRuntime: "執行環境",

package/dist/ui/chat-thread.js

@@ -31,8 +31,14 @@ 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>';
 
@@ -224,15 +230,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,
@@ -610,7 +620,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 +753,7 @@ export function createThread(list, scroller, opts) {
     armPolls();
     rove();
     progress();
+    fitStatus();
     return added;
   }
   /**
@@ -802,13 +831,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;