@songsid/agend 2.3.3-beta.4 → 2.3.3-beta.6

package/dist/ui/chat-thread.js

@@ -8,8 +8,7 @@
 // Unrelated updates (a new message, another message's tick) stop nothing (#1306 §6.2, #1408 §4).
 import "./chat-render.js";
 import "./preview.js";
-import { canvasWorkerEnabled, onCanvasWorkerChange, onCanvasMetadataChange, readCanvasTrialMessage } from "/assets/feature-flags.js";
-import { loadHtmlAttachment } from "./html-attachment.js";
+import { HTML_PREVIEW_MAX, loadHtmlAttachment, sizeLabel } from "./html-attachment.js";
 import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
 import { textLinkSegments } from "/assets/app-route.js";
 
@@ -24,6 +23,12 @@ export const TEXT_PREVIEW_LINES = 200;
 export const TEXT_PREVIEW_NODES = 4000;
 /** A csv/tsv wider than this is shown as text, as Markdown tables are capped at 20 columns. */
 export const TEXT_PREVIEW_COLUMNS = 50;
+/**
+ * #2863: the most a text card reads (bytes). It stays 1 MiB while an HTML preview goes to 8 MiB (and 50 MiB on
+ * "Preview anyway"): a text card reads, parses and formats the file on this page's own thread (Markdown, highlighting,
+ * a CSV table; Show all draws every line), where an HTML preview runs in its own frame. A bigger file is a download.
+ */
+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;
@@ -120,7 +125,7 @@ export function createThread(list, scroller, opts) {
     if (el.textContent !== v) el.textContent = v;
   }
   // #1770: "today" ends at the fleet's midnight; the labels are rewritten then (and on every render), while there are any.
-  let offDay = null, trialTimer = null;
+  let offDay = null;
   function armDay() {
     if (nodes.size && !offDay) offDay = onDayChange(() => { for (const v of nodes.values()) timeLabel(v.node); });
     else if (!nodes.size && offDay) { offDay(); offDay = null; }
@@ -133,8 +138,6 @@ export function createThread(list, scroller, opts) {
     // is kept by: it is written into the node (timeLabels) — crossing midnight relabels in place and reloads no preview.
     const time = x.ts ? `<span class="time" data-ts="${escAttr(x.ts)}" title="${escAttr(chatTimeFull(x.ts))}"></span>` : `<span class="time"></span>`;
     if (x.outgoing) return outgoingHtml(x);
-    const trial = readCanvasTrialMessage(x);
-    if (trial) return canvasWorkerEnabled() ? trialHtml(trial, time, x) : "";
     if (x.role === "status") return statusHtml(x, time);
     const u = opts.isUser(x);
     // renderMarkdown escapes the whole text before it adds any tag of its own (chat-render.js).
@@ -213,26 +216,7 @@ export function createThread(list, scroller, opts) {
       ? `<button type="button" class="click-link" data-act="showButtons" data-arg="${escAttr(of)}" title="${escAttr(tr("chat.clickShow"))}">${inner}</button>`
       : `<span class="click-text">${inner}</span>`}</div>`;
   }
-  function trialNow() { try { const t = opts.serverNow ? opts.serverNow() : Date.now(); return Number.isFinite(t) ? t : Infinity; } catch { return Infinity; } }
-  const trialReasons = new Set(["checking", "localAdmin", "chatChanged", "busy", "safe", "effectsOff", "reducedMotion", "saveData", "unsupported", "transport", "inactive", "dialog", "expired"]);
-  function trialStatus(message) {
-    const reason = opts.effectTrialStatus?.(message);
-    return reason === "ready" || trialReasons.has(reason) ? reason : opts.canTryEffect?.(message) === true ? "ready" : "localAdmin";
-  }
-  function trialHtml(offer, time, message) {
-    const reason = trialNow() >= offer.expiresAt ? "expired" : PUBLIC_LINK() ? "localAdmin" : trialStatus(message);
-    const rawFailure = opts.effectTrialFailure?.(message), failure = typeof rawFailure === "string" ? rawFailure.replace(/[\u0000-\u001f\u007f]/g, "").slice(0, 80) : null;
-    const available = reason === "ready", fix = !PUBLIC_LINK() && !available && reason !== "expired" && reason !== "checking" && typeof opts.fixEffectTrial === "function";
-    const label = available ? "chat.effectTrialStart" : reason === "busy" ? "chat.effectTrialStopOther" : reason === "localAdmin" ? "chat.effectTrialSignIn" : reason === "reducedMotion" ? "chat.effectTrialPlayMotion" : "chat.effectTrialSettings";
-    const button = available || fix ? `<button type="button" class="btn btn-sm effect-trial-start" data-act="effectTrial" data-arg="${escAttr(msgKey(message))}">${escAttr(tr(label))}</button>` : "";
-    return `<div class="msg status-line"><div class="meta">${time}</div><div class="body"><div class="effect-trial-offer" data-trust="thread-control"><strong>${escAttr(tr("chat.effectTrial"))}: ${escAttr(offer.title)}</strong><div>${escAttr(tr(available ? "chat.effectTrialLocal" : "chat.effectTrialReason_" + reason))}</div>${failure ? `<div class="effect-trial-failure" role="status">${escAttr(tr("chat.effectTrialStopped"))}: ${escAttr(failure)}</div>` : ""}${button}</div></div></div>`;
-  }
-  function armTrials() {
-    if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
-    if (!canvasWorkerEnabled()) return;
-    const now = trialNow(), next = msgs.map(x => readCanvasTrialMessage(x)).filter(x => x && x.expiresAt > now).reduce((n, x) => Math.min(n, x.expiresAt), Infinity);
-    if (Number.isFinite(next)) trialTimer = setTimeout(() => { trialTimer = null; render(msgs); }, Math.max(1, Math.min(2147483647, next - now)));
-  }
+
   /**
    * #1672: a status line (another instance's message, a daemon notice) is muted, read-only plain text — never Markdown,
    * a preview card, a button or a person's bubble. Checked before isUser, which reads the sender: a fleet name need not
@@ -428,7 +412,7 @@ export function createThread(list, scroller, opts) {
       if (reading) return;
       if (text !== null) { body.hidden = !body.hidden; show.textContent = tr(body.hidden ? "chat.tcShow" : "chat.tcHide"); return; }
       const mine = reading = ++reads; note.textContent = tr("chat.pvLoading");
-      const r = await loadHtmlAttachment({ id: att.id, name: att.name, size: att.size });
+      const r = await loadHtmlAttachment({ id: att.id, name: att.name, size: att.size }, undefined, { ask: TEXT_CARD_MAX, max: TEXT_CARD_MAX });
       if (reading !== mine) return;                      // dropped (its chat left meanwhile): a new click reads again
       reading = 0;
       if (!ph.isConnected) return;                       // the card left the page while it was read: nothing to draw
@@ -484,6 +468,8 @@ export function createThread(list, scroller, opts) {
     const head = el("div", "pv-head"); head.setAttribute("data-trust", "thread-control");
     const label = el("span", "pv-label", att ? `${tr("chat.pvHtml")} · ${att.name}` : tr("chat.pvHtml"));
     const run = el("button", "btn btn-sm pv-run", tr("chat.pvPreview")); run.type = "button";
+    // #2863: a large file (over 8 MB) is previewed only on this second click, in the card or the panel as first asked.
+    const anywayB = el("button", "btn btn-sm pv-anyway", tr("chat.pvAnyway")); anywayB.type = "button"; anywayB.hidden = true;
     const stopB = el("button", "btn btn-sm pv-stop", tr("chat.pvStop")); stopB.type = "button"; stopB.hidden = true;
     // An attachment already has its download link (the file itself) right above the card.
     const dl = att ? null : el("button", "btn btn-sm btn-ghost pv-dl", tr("chat.pvDownload"));
@@ -496,7 +482,7 @@ export function createThread(list, scroller, opts) {
     const optB = el("button", "chip-btn pv-opt"); optB.type = "button";
     const neverB = el("button", "chip-btn pv-never"); neverB.type = "button";
     menu.append(sum, optB, neverB);
-    head.append(label, run, stopB, ...(toPanel ? [toPanel] : []), ...(dl ? [dl] : []), menu);
+    head.append(label, run, anywayB, stopB, ...(toPanel ? [toPanel] : []), ...(dl ? [dl] : []), menu);
     const note = el("div", "pv-note"); note.setAttribute("data-trust", "thread-control");
     // #1568: the banner, with its "I understand" (hidden until the next sign-in; the frame's border stays).
     const banner = el("div", "pv-banner"); banner.setAttribute("data-trust", "thread-control"); banner.hidden = true;
@@ -508,45 +494,64 @@ export function createThread(list, scroller, opts) {
     // Reading an attachment: one read per card at a time (a second click while it reads does nothing), and a read
     // whose card was stopped, replaced or left meanwhile is dropped (`reading` moved on, or the card left the page).
     let reading = 0, reads = 0;
+    // #2863: where "Preview anyway" runs it ("card" | "panel") and what the card says meanwhile; null: not asked.
+    // `tooBig`: over the 50 MB ceiling (listed, or read) — the card says so and offers only the file's download.
+    let large = null, largeNote = "", tooBig = !!att && typeof att.size === "number" && att.size > HTML_PREVIEW_MAX;
     const refresh = (reason) => {
       const a = P().availability();
       const going = state === "starting" || state === "running";
       const inPanel = !!panel && panel.shown() === key;   // #1481: the panel shows this block; the card points there
-      run.hidden = !a.ok || going || inPanel || !!reading;
-      if (toPanel) toPanel.hidden = inPanel || !!reading;
+      if (going || reading) large = null;
+      if (reason == null && large) reason = largeNote;
+      if (reason == null && tooBig) reason = tr("chat.pvAttOver");
+      run.hidden = !a.ok || going || inPanel || !!reading || !!large || tooBig;
+      anywayB.hidden = !a.ok || !large;
+      if (toPanel) toPanel.hidden = inPanel || !!reading || tooBig;
       stopB.hidden = !going && !reading;
       banner.hidden = !going || P().bannerAcked();
       note.textContent = reason != null ? reason : reading ? tr("chat.pvLoading") : going ? (state === "starting" ? tr("chat.pvStarting") : "") : inPanel ? tr("chat.pvInPanel") : a.ok ? "" : a.reason;
       optB.textContent = P().optedIn() ? tr("chat.pvDisallow") : tr("chat.pvAllow");
       neverB.textContent = P().never() ? tr("chat.pvNeverUndo") : tr("chat.pvNever");
     };
-    /** The HTML, then `then(code)`: at once for a fence or an attachment already read; otherwise read it first. */
-    const withCode = async (then) => {
+    /** Over 8 MB: the card asks, and "Preview anyway" runs it where `target` ("card" | "panel") says. */
+    const askLarge = (target, reason) => { large = target; largeNote = reason; refresh(reason); };
+    /**
+     * The HTML, then `then(code)`: at once for a fence or an attachment already read; otherwise read it first — a large
+     * one only once `anyway` (its listed size asks before anything is fetched).
+     */
+    const withCode = async (then, target = "card", anyway = false) => {
       if (code != null) { then(code); return; }
       if (reading) return;
       const mine = reading = ++reads;
       refresh();
-      const r = await loadHtmlAttachment(att);
+      const r = await loadHtmlAttachment(att, undefined, { anyway });
       if (reading !== mine || !ph.isConnected) return;
       reading = 0;
+      if (!r.ok && r.reason === "large") { askLarge(target, trf("chat.pvLarge", sizeLabel(r.size))); return; }
+      if (!r.ok && r.reason === "over") { tooBig = true; refresh(); return; }
       if (!r.ok) { refresh(attReason(r.reason)); return; }
       code = r.code;
       refresh();
       then(code);
     };
-    const ui = { state: (name, reason) => { state = name === "starting" || name === "running" ? name : "idle"; refresh(reason || null); } };
+    const ui = { state: (name, reason) => {
+      state = name === "starting" || name === "running" ? name : "idle";
+      if (name === "large") { askLarge("card", reason || ""); return; }
+      large = null; refresh(reason || null);
+    } };
     // Nothing is read for Preview on a device that does not allow previews: the button is not even shown there.
     // A Preview click is newer than any Open in panel still reading (#1704): it claims the panel's turn too — and, its
     // own HTML read, starts only if no newer click claimed meanwhile and no preview was started since (the panel's own
     // Preview): a late read never undoes a newer choice. A close is neither, so it does not drop this click.
-    run.onclick = () => {
+    const preview = (anyway) => {
       if (!P().availability().ok || reading) return;     // this card already reading: that click stays the one
       const mine = panel ? (panel.claim(), panel.claims()) : 0, started = P().startCount();
       withCode((c) => {
         if ((panel && panel.claims() !== mine) || P().startCount() !== started) { refresh(); return; }
-        P().start(key, holder, c, ui);
-      });
+        if (anyway) P().start(key, holder, c, ui, { anyway: true }); else P().start(key, holder, c, ui);
+      }, "card", anyway);
     };
+    run.onclick = () => preview(false);
     stopB.onclick = () => { if (reading) { reading = 0; refresh(); } else P().stop(key, "stopped", ""); };
     // #1704: this click runs it in the panel, as Preview there would — a running preview moves (it stops here and
     // starts there), an idle one starts there. Whether it can run is the panel's to say: a device that has not allowed
@@ -554,15 +559,18 @@ export function createThread(list, scroller, opts) {
     // An attachment's HTML is read first. The click claims the panel at once, so a newer click (even one still reading)
     // wins: if the panel changed (another click, block, close) or any preview started meanwhile, this one is dropped —
     // a late read never undoes a newer click.
-    if (toPanel) toPanel.onclick = () => {
+    const openInPanel = (anyway) => {
       if (reading) return;                               // this card already reading: that click stays the one
       if (P().running(key)) P().stop(key, "stopped", "");
       const at = panel.claim(), started = P().startCount();
       withCode((c) => {
         if (panel.version() !== at || P().startCount() !== started) { refresh(); return; }
-        panel.open({ key, instance: x.instance, msgKey: msgKey(x), ...(att ? { att } : { n: source.n }), code: c, sender: x.sender, ts: x.ts }, { run: true });
-      });
+        large = null; refresh();
+        panel.open({ key, instance: x.instance, msgKey: msgKey(x), ...(att ? { att } : { n: source.n }), code: c, sender: x.sender, ts: x.ts, ...(anyway ? { anyway: true } : {}) }, { run: true });
+      }, "panel", anyway);
     };
+    if (toPanel) toPanel.onclick = () => openInPanel(false);
+    anywayB.onclick = () => { const where = large; large = null; if (where === "panel" && toPanel) openInPanel(true); else preview(true); };
     if (dl) dl.onclick = () => opts.download(code);
     ack.onclick = () => P().ackBanner();      // every card and the panel hear it (onChange)
     optB.onclick = () => { menu.open = false; opts.setPreviewOptIn(!P().optedIn()); };
@@ -668,7 +676,6 @@ export function createThread(list, scroller, opts) {
   function render(next, renderOpts = {}) {
     const stick = pinned || nearBottom();
     msgs = next || [];
-    armTrials();
     if (!msgs.length) {
       for (const v of nodes.values()) stopIn(v.node);
       nodes.clear();
@@ -693,11 +700,7 @@ export function createThread(list, scroller, opts) {
   }
   /** Put the messages from startIndex() on in the list (nodes reused when unchanged). Returns how many are new. */
   function draw(drawOpts) {
-    const shown = msgs.slice(startIndex()).filter(message => {
-      // Volatile host offer records are hidden off and while their on-only parser is loading.
-      const hostOffer = message?.role === "status" && message.sender === "agend" && Object.hasOwn(message, "effectTrial") && message.effectTrial != null;
-      return !hostOffer || canvasWorkerEnabled() && readCanvasTrialMessage(message) !== undefined;
-    });
+    const shown = msgs.slice(startIndex());
     const keep = new Set(shown.map(msgKey));
     for (const [k, v] of nodes) if (!keep.has(k)) { stopIn(v.node); v.node.remove(); nodes.delete(k); }
     let prev = null, added = 0;
@@ -711,7 +714,7 @@ export function createThread(list, scroller, opts) {
         const stopped = have ? stopIn(have.node) : [];
         const node = msgNode(html, x, stopped);
         if (have) have.node.replaceWith(node); else added++;
-        have = { html, node, x, trialButton: node.querySelector(".effect-trial-offer > button.effect-trial-start") }; nodes.set(key, have);
+        have = { html, node, x }; nodes.set(key, have);
       } else { have.x = x; timeLabel(have.node); }
       const want = prev ? prev.nextSibling : list.firstChild;
       // A node already in the list is being moved: its preview stops first. A new node (still in its template) has none.
@@ -811,13 +814,6 @@ export function createThread(list, scroller, opts) {
     else if (act === "replyButton") {
       const m = /^([0-9a-f]{32}):(\d{1,2})$/.exec(el.dataset.arg || "");
       if (m && opts.clickReplyButton) opts.clickReplyButton(m[1], Number(m[2]));
-    } else if (act === "effectTrial") {
-      // Only the current host-produced keyed card and a real local click can request admission. No token is read from DOM.
-      const key = el.dataset.arg, row = msgs.find(x => msgKey(x) === key), owner = nodes.get(key), node = owner?.node, offer = readCanvasTrialMessage(row);
-      if (PUBLIC_LINK() || e.defaultPrevented || e.isTrusted !== true || owner?.trialButton !== el || el.className !== "btn btn-sm effect-trial-start" || !node?.contains(el) || el.closest(".effect-trial-offer")?.getAttribute("data-trust") !== "thread-control"
-        || !offer || trialNow() >= offer.expiresAt) return;
-      if (trialStatus(row) === "ready" && opts.canTryEffect?.(row) === true) opts.startEffectTrial?.(row);
-      else opts.fixEffectTrial?.(row, trialStatus(row));
     } else if (act === "showButtons") { const x = msgs.find(y => y.buttons && y.buttons.id === el.dataset.arg); if (x) reveal(msgKey(x)); }
     else if (act === "reply") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) opts.startReply?.(x); }
     else if (act === "jumpQuote") void jumpTo(el.dataset.arg);
@@ -841,7 +837,7 @@ export function createThread(list, scroller, opts) {
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
   /**
    * #2053: kept for a later visit — the chat left as it always did (every preview stops: "leave"), but its drawn nodes
-   * stay. Nothing of it runs meanwhile: no timer (day labels, polls, effect trials, filling in), no size observer; the
+   * stay. Nothing of it runs meanwhile: no timer (day labels, polls, filling in), no size observer; the
    * caller drops its subscriptions. Shown again: attach, then render — only what changed is drawn.
    */
   function park() {
@@ -850,7 +846,6 @@ export function createThread(list, scroller, opts) {
     if (P()) P().stopAll("leave");
     for (const node of list.querySelectorAll(".html-card[data-att], .text-card[data-att]")) { const f = cardDrop.get(node); if (f) f(); }
     if (ro) { ro.disconnect(); ro = null; }
-    if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
     if (growFrame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(growFrame);
     if (growTimer !== null) clearTimeout(growTimer);
     growTimer = growFrame = null;
@@ -868,12 +863,9 @@ export function createThread(list, scroller, opts) {
     if (ro) { ro.observe(list); ro.observe(sc); }
   }
   /** `own`: only this thread's previews stop (a thread let go while another chat is in view); else every one, as leaving. */
-  const redrawFeature = () => { if (!disposed && !parked) render(msgs); };
-  const featureOff = onCanvasWorkerChange(redrawFeature), metadataOff = onCanvasMetadataChange(redrawFeature);
   function dispose(own = false) {
-    disposed = true; featureOff(); metadataOff();
+    disposed = true;
     if (!parked) watchReader(scroller, false);
-    if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
     if (ro) ro.disconnect();
     if (P()) { if (own) P().stopIn(list); else P().stopAll("leave"); }
     nodes.clear();

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

@@ -27,7 +27,7 @@
 // @property {(ctx, item, active, ms, env) => void} [drawFurniture]   zones: one furniture item (active: activeWhen holds)
 // @property {(ctx, L, env) => void} [drawForeground]     zones: a pack's foreground over the whole 1280×720 scene, above
 //   the people, furniture and items in the air, below the crowd counts, name tags and bubbles
-// @property {(ctx, x, y, look, env) => void} [drawTag]   zones: a name tag under feet at (x, y)
+// @property {(ctx, x, y, look, env, compact?) => void} [drawTag]   zones: a name tag under feet at (x, y) (compact: #2860)
 // @property {(ctx, area, n, env) => void} [drawCrowd]    zones: an area's "+n" (who found no spot in it)
 // @property {(ctx, desk, look, ms, env) => void} drawCharacter   the occupant in its pose at time `ms` (0: still); in
 //   zones `desk` is the character's box at its current position (its feet at desk.seat); walking, `look.heading` is
@@ -293,21 +293,44 @@ function drawBubble(ctx, x, y, text, env, lift = 0) {
 /** A zones name tag's widest text (logical units): longer names are cut with an ellipsis. */
 export const TAG_TEXT_W = 84;
 const TAG_FONT = "600 10px system-ui, sans-serif";
+/**
+ * #2860: the compact tag a crowded area keeps on (it used to show tags on hover only, #2513): a smaller font, a smaller
+ * plate, a shorter cut, the same level badge.
+ */
+const COMPACT = { font: "500 9px system-ui, sans-serif", textW: 48, pad: 6, top: 2, h: 11 };
+const NORMAL = { font: TAG_FONT, textW: TAG_TEXT_W, pad: 10, top: 3, h: 14 };
 /** The box a name tag under feet at (x, y) takes (what drawTag draws; bubbles keep clear of it, #2513). */
-export function tagBox(ctx, x, y, label) {
+export function tagBox(ctx, x, y, label, compact = false) {
+  const k = compact ? COMPACT : NORMAL;
+  ctx.save();
+  ctx.font = k.font;
+  const t = fitText(ctx, label, k.textW), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + k.pad);
+  ctx.restore();
+  return { x: Math.round(x - w / 2), y: y + k.top, w, h: k.h, text: t };
+}
+/** #2860: what a tag covers with its level badge: on a full tag's top-left corner (half outside); left of a compact one. */
+export function tagFootprint(ctx, box, badge, compact = false) {
+  if (!badge) return box;
+  if (compact) { const w = badgeWidth(ctx, badge) + 1; return { x: box.x - w, y: box.y, w: box.w + w, h: box.h }; }
+  return { x: box.x - 10, y: box.y - 7, w: box.w + 10, h: box.h + 7 };
+}
+function badgeWidth(ctx, badge) {
+  if (badge.mark) return 8;
   ctx.save();
-  ctx.font = TAG_FONT;
-  const t = fitText(ctx, label, TAG_TEXT_W), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + 10);
+  ctx.font = BADGE_FONT;
+  const w = Math.max(12, Math.ceil((ctx.measureText ? ctx.measureText(badge.text).width : badge.text.length * 5) + 6));
   ctx.restore();
-  return { x: Math.round(x - w / 2), y: y + 3, w, h: 14, text: t };
+  return w;
 }
 /**
  * #2661: a level badge on a name tag's top-left corner (x, y: the tag's corner), overlapping its edge like an app's
  * badge — it takes none of the tag's width. `badge`: { text, tier } (fleet-office-levels.js badgeOf), or { mark } for a
  * pinned title that hides the number: a small diamond.
  */
-export function drawBadge(ctx, x, y, badge, pal) {
+export function drawBadge(ctx, x, y, badge, pal, inline = false) {
   if (!badge) return;
+  // #2860 inline (a compact tag): (x, y) is the tag's left edge and middle; the badge sits just left of it, whole.
+  if (inline) { const w = badgeWidth(ctx, badge); x = x - 1 - w + (badge.mark ? w / 2 : w / 2 - 3); y = y + (badge.mark ? 0 : 1); }
   const c = tierColours(badge.tier, pal);
   ctx.save();
   ctx.globalAlpha = 1;
@@ -331,18 +354,18 @@ export function drawBadge(ctx, x, y, badge, pal) {
 }
 const BADGE_FONT = "700 8px system-ui, sans-serif";
 
-/** Zones: a name tag under someone's feet at (x, y). */
-function drawTag(ctx, x, y, look, env) {
+/** Zones: a name tag under someone's feet at (x, y); `compact` (#2860): the smaller one a crowded area keeps on. */
+function drawTag(ctx, x, y, look, env, compact = false) {
   const { pal } = env;
+  const b = tagBox(ctx, x, y, look.label, compact);
   ctx.save();
   if (look.dim) ctx.globalAlpha = 0.35;
-  ctx.font = TAG_FONT;
-  const t = fitText(ctx, look.label, TAG_TEXT_W), w = Math.ceil((ctx.measureText ? ctx.measureText(t).width : t.length * 6) + 10);
-  ctx.fillStyle = pal.surface; ctx.fillRect(Math.round(x - w / 2), y + 3, w, 14);
-  ctx.strokeStyle = look.match ? pal.focus : pal.border; ctx.lineWidth = look.match ? 2 : 1; ctx.strokeRect(Math.round(x - w / 2) + 0.5, y + 3.5, w - 1, 13);
-  ctx.fillStyle = pal.text; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(t, x, y + 10.5);
+  ctx.font = compact ? COMPACT.font : TAG_FONT;
+  ctx.fillStyle = pal.surface; ctx.fillRect(b.x, b.y, b.w, b.h);
+  ctx.strokeStyle = look.match ? pal.focus : pal.border; ctx.lineWidth = look.match ? 2 : 1; ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);
+  ctx.fillStyle = pal.text; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(b.text, x, b.y + b.h / 2 + 0.5);
   ctx.restore();
-  if (look.badge) drawBadge(ctx, Math.round(x - w / 2), y + 3, look.badge, pal);
+  if (look.badge) compact ? drawBadge(ctx, b.x, b.y + b.h / 2, look.badge, pal, true) : drawBadge(ctx, b.x, b.y, look.badge, pal);
 }
 
 /**

package/dist/ui/fleet-office.js

@@ -33,8 +33,8 @@
 //   any part — an office names it as its style; one this page cannot load is drawn as Desks, and says so.
 // - Crowds (#2513): an area with more people than seats packs the rest into a tighter grid, then counts who is left
 //   ("+N", in its corner, never over its name); there idle and asleep people say nothing, at most a few speak (calls
-//   first, then work), no bubble covers a name tag, and the tags show on hover or focus only. "Hide paused and stopped"
-//   (per browser) leaves the sleepers out.
+//   first, then work), no bubble covers a name tag, and the tags are compact (#2860; one that would touch another shows
+//   on hover or focus only). "Hide paused and stopped" (per browser) leaves the sleepers out.
 // - Share… (#2636; an admin, on the dashboard reached directly or over the public link): a link anyone can open to watch an office live, read-only,
 //   until it ends (office-share-dialog.js; the page it opens is office-share-page.js).
 // - Edit layout (an admin, a stored office on a zones skin): fleet-office-layout.js, saved as the office's overrides.
@@ -64,7 +64,7 @@ import { nodeText, stateWords } from "./fleet-org.js";
 import { hits, needle } from "./fleet-canvas-layout.js";
 import { AUTO_ID, LOBBY, autoLayout, backingScale, coatOf, createFlights, customLayout, deskAt, desksOf, filterOk, lampOf, layoutOk, lightOf, membersOf,
   officePose, officeRooms, signOf, workOn } from "./fleet-office-model.js";
-import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, bubbleBox, loadCozySkin, loadPackSkin, modeOf, skinFor, tagBox } from "./fleet-office-skin.js";
+import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, bubbleBox, loadCozySkin, loadPackSkin, modeOf, skinFor, tagBox, tagFootprint } from "./fleet-office-skin.js";
 import { CALLING, activeFurniture, bubbleAt, hiddenBy, bubbleRank, NIGHT, WANDER, createMail, createWalkers, isNight, linesFor, npcKey, personAt, placeBubbles, thinBubbles, walkTargets, zonesLayout } from "./fleet-office-zones.js";
 import { actsOk, createOfficeStore } from "./fleet-office-store.js";
 import { badgeOf, fixedOf } from "./fleet-office-levels.js";
@@ -131,6 +131,8 @@ const deviceRatio = () => Math.max(0.5, Math.min(4, Number(globalThis.devicePixe
 const SIZE0 = { w: 960, h: 600 };
 /** #2554: All offices' Fit keeps this many CSS px clear round the tiles (the zoom controls' column and a margin). */
 const FIT_PAD = 60;
+/** #2860: how far below its place a crowded area's compact tag drops when a neighbour's is in the way (a tag's height + 1). */
+const COMPACT_ROW = 12;
 /** #2554: in All offices a tile's name tags show (always) from this many CSS px a unit up; below it on hover only. */
 export const TAG_MIN_K = 0.75;
 const PAN_KEYS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
@@ -418,13 +420,19 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
     if (sk.drawForeground) sk.drawForeground(ctx, p.L, env);
     // Who found no spot in an area: a count in its corner (never over its name).
     for (const [ar, n] of p.L.crowd || []) if (p.L.areas[ar] && sk.drawCrowd) sk.drawCrowd(ctx, p.L.areas[ar], n, env);
-    // In an area over capacity the name tags show on hover or focus only (#2513: a crowd's tags covered each other).
+    // In an area over capacity (#2513: a crowd's full tags covered each other) everyone keeps a compact tag (#2860:
+    // in Cozy, the default, most of a fleet is in a crowd, and hover-only hid names and levels); one that would touch
+    // a tag already drawn, its badge included, is left to hover or focus. The full tags go first.
     const over = p.L.over || new Set();
+    const crowded = (q) => over.has(q.d.area) && q.d.key !== hot && !q.look.match;
     const tagged = (q) => !((tagsOff || over.has(q.d.area)) && q.d.key !== hot && !q.look.match);
+    const taken = [];
+    const touches = (b) => taken.some((o) => b.x < o.x + o.w && o.x < b.x + b.w && b.y < o.y + o.h && o.y < b.y + b.h);
     for (const q of people) {
       if (live.hidden.has(q.look.name) || !tagged(q)) continue;
       sk.drawTag(ctx, q.at.x, q.at.y, q.look, env);
-      tags.push(tagBox(ctx, q.at.x, q.at.y, q.look.label));
+      const box = tagBox(ctx, q.at.x, q.at.y, q.look.label);
+      tags.push(box); taken.push(tagFootprint(ctx, box, q.look.badge));
     }
     // A furniture item's own name (#2574: an NPC drawn as furniture), tagged like a person; none on a tile too small to read.
     // #2698: an item hiding its people carries their tags too, in one row at its tag point (its own first; each keeps
@@ -434,7 +442,10 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
     for (const f of furniture) {
       const on = people.filter((q) => live.hidden.get(q.look.name) === f.id);
       if (!on.length) {
-        if (!tagsOff && f.label) { const nl = npcLook(p, f); sk.drawTag(ctx, f.x, f.y, nl, env); tags.push(tagBox(ctx, f.x, f.y, nl.label)); }
+        if (!tagsOff && f.label) {
+          const nl = npcLook(p, f), box = tagBox(ctx, f.x, f.y, nl.label);
+          sk.drawTag(ctx, f.x, f.y, nl, env); tags.push(box); taken.push(tagFootprint(ctx, box, nl.badge));
+        }
         continue;
       }
       const order = new Map((f.activeFor || []).map((n, i) => [n, i]));
@@ -447,11 +458,24 @@ export function drawPart(ctx, p, a, ox, oy, ms, still, hot, env, tagsOff = false
         if (q ? !tagged(q) : tagsOff) continue;
         sk.drawTag(ctx, r.x, f.y, r.look, env);
         const box = tagBox(ctx, r.x, f.y, r.look.label);
-        tags.push(box);
+        tags.push(box); taken.push(tagFootprint(ctx, box, r.look.badge));
         if (q) held.push({ name: q.look.name, id: f.id, box });
       }
     }
     p.heldTags = held;
+    // The crowd's compact tags go last, clear of every full tag above: people's, an item's own name and the row it
+    // carries (#2862 review). A crowd's grid is tighter than a compact tag is wide (OVERFLOW.STEPS down to 32): a
+    // neighbour's tag goes a row lower (COMPACT_ROW) rather than out, so a row of people reads as two staggered rows.
+    if (!tagsOff) for (const q of people) {
+      if (live.hidden.has(q.look.name) || !crowded(q)) continue;
+      for (const dy of [0, COMPACT_ROW]) {
+        const box = tagBox(ctx, q.at.x, q.at.y + dy, q.look.label, true), foot = tagFootprint(ctx, box, q.look.badge, true);
+        if (touches(foot)) continue;
+        sk.drawTag(ctx, q.at.x, q.at.y + dy, q.look, env, true);
+        tags.push(box); taken.push(foot);
+        break;
+      }
+    }
   } else {
     for (const d of p.desks) { const look = p.looks.get(d.key); sk.drawCharacter(ctx, d, actPosed(p, look), ms, env); speakers.push({ look, x: d.x + 58, y: d.y + 12, area: p.roomOf.get(d.key) ?? null }); }
     blit(p.layers.front);

package/dist/ui/html-attachment.js

@@ -3,24 +3,38 @@
 // card. What runs is then handed to the preview frame exactly like a block's (AgendPreview.start): the file URL itself
 // is never opened or framed on the dashboard's origin.
 
-/** The same cap as a block's (preview.js LIMITS.maxBytes): UTF-8 bytes of the HTML. */
-export const HTML_ATTACHMENT_MAX = 1024 * 1024;
+/**
+ * #2863: the sizes a preview takes (UTF-8 bytes of the HTML), the same as a block's (preview.js LIMITS): up to ASK it
+ * runs at once; above it the person is asked first ("Preview anyway?"); above MAX there is no preview, only the
+ * download. MAX is the frame's own ceiling (web-preview.ts PREVIEW_HTML_MAX_BYTES).
+ */
+export const HTML_PREVIEW_ASK = 8 * 1024 * 1024;
+export const HTML_PREVIEW_MAX = 50 * 1024 * 1024;
 
 /**
- * Read an attachment's HTML: { ok: true, code } or { ok: false, reason } with reason "over" (the file is over the
- * cap: its listed size is checked before anything is fetched, the bytes again after), "gone" (the fleet no longer
- * serves that id — the file changed, or the fleet restarted), or "failed".
+ * Read an attachment's HTML: { ok: true, code } or { ok: false, reason } with reason "large" (above `ask` and not
+ * `anyway`: nothing is fetched when its listed size says so; `size` is what it is), "over" (above `max`: its listed size
+ * is checked before anything is fetched, the bytes again after), "gone" (the fleet no longer serves that id — the file
+ * changed, or the fleet restarted), or "failed". The text card reads with its own, single cap (ask = max).
  */
-export async function loadHtmlAttachment(att, fetchImpl = globalThis.fetch) {
+export async function loadHtmlAttachment(att, fetchImpl = globalThis.fetch, { ask = HTML_PREVIEW_ASK, max = HTML_PREVIEW_MAX, anyway = false } = {}) {
   if (!att || typeof att.id !== "string" || !/^[0-9a-f]{32}$/.test(att.id)) return { ok: false, reason: "failed" };
-  if (typeof att.size === "number" && att.size > HTML_ATTACHMENT_MAX) return { ok: false, reason: "over" };
+  if (typeof att.size === "number" && att.size > max) return { ok: false, reason: "over" };
+  if (typeof att.size === "number" && att.size > ask && !anyway) return { ok: false, reason: "large", size: att.size };
   let res;
   try { res = await fetchImpl(`/ui/file/${att.id}`, { credentials: "same-origin", cache: "no-store" }); }
   catch { return { ok: false, reason: "failed" }; }
   if (!res || !res.ok) return { ok: false, reason: res && res.status === 404 ? "gone" : "failed" };
   let bytes;
   try { bytes = await res.arrayBuffer(); } catch { return { ok: false, reason: "failed" }; }
-  if (bytes.byteLength > HTML_ATTACHMENT_MAX) return { ok: false, reason: "over" };
+  if (bytes.byteLength > max) return { ok: false, reason: "over" };
+  if (bytes.byteLength > ask && !anyway) return { ok: false, reason: "large", size: bytes.byteLength };
   // UTF-8, as a block's text is; a BOM is dropped.
   return { ok: true, code: new TextDecoder("utf-8").decode(bytes) };
 }
+
+/** #2863: a size as the person reads it: "12.3 MB" (1 MB = 1024 × 1024 bytes, as the caps are). */
+export function sizeLabel(bytes) {
+  const mb = bytes / (1024 * 1024);
+  return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
+}