@songsid/agend 2.3.3-beta.5 → 2.3.3-beta.7

package/dist/ui/chat-strings.js

@@ -44,7 +44,8 @@ register("chat", {
     pvConfirm: "Allow HTML previews?\n\nThis applies on every device where you are signed in. A preview runs the agent's HTML in an isolated frame. It cannot use your login, but it may be able to send data out, and it can slow or freeze this tab. You still click Preview each time.",
     pvNever: "Never preview HTML on this device", pvNeverUndo: "Let this device preview HTML again", pvStarting: "Starting the preview…",
     pvChanged: "Preview stopped — the message changed. Preview again.", pvTruncated: "Truncated — ask the agent to send it as a .html file.",
-    pvLoading: "Reading the file…", pvAttOver: "This file is over 1 MiB; it is not previewed.",
+    pvLoading: "Reading the file…", pvAttOver: "This file is over 50 MB; it is not previewed. Download it to open it.",
+    pvLarge: "This file is large ({0}). Preview anyway?", pvAnyway: "Preview anyway",
     pvAttGone: "This file is no longer available here (it changed, or the fleet restarted). Ask the agent to send it again.",
     pvAttFailed: "Could not read this file. Try again.",
     pvBannerAck: "I understand", pvBannerAckTitle: "Hide this notice until you sign in again",
@@ -64,7 +65,7 @@ register("chat", {
     pvWhyNever: "Previews are switched off on this device for this session.",
     pvWhyOrigin: "Previews are off: this page is at {0}, but the fleet believes it is at {1} (a proxy that rewrites Host). Pass the external Host through, or set web.preview_origin.",
     pvUnknownAddress: "an unknown address", pvWhyServer: "Previews are not available here.",
-    pvHtmlOver: "This HTML is over 1 MiB; it is not previewed.",
+    pvHtmlOver: "This HTML is over 50 MB; it is not previewed. Download it to open it.",
     pvNoAnswer: "Preview unavailable: the preview did not answer within 3 s. If an earlier preview froze, it may still be running — open the dashboard in a new tab. Over SSH, forward the preview port too.",
     pvStoppedAnswering: "The preview stopped answering, so it was closed.", pvSwitchedOff: "Previews were switched off on this device.",
     pvAnother: "Another preview started.", pvWrongBoot: "Preview unavailable: something else answered on the preview port.",
@@ -167,7 +168,8 @@ register("chat", {
     pvConfirm: "要允許預覽 HTML 嗎？\n\n這會套用到你登入的每一台裝置。預覽會在隔離的框架裡執行 agent 的 HTML。它無法使用你的登入，但可能把資料傳出去，也可能讓這個分頁變慢或卡住。每次仍需要你按「預覽」。",
     pvNever: "這台裝置永不預覽 HTML", pvNeverUndo: "讓這台裝置再次可以預覽 HTML", pvStarting: "正在啟動預覽…",
     pvChanged: "預覽已停止——訊息內容變了。請再預覽一次。", pvTruncated: "內容被截斷——請 agent 改用 .html 檔案傳送。",
-    pvLoading: "正在讀取檔案…", pvAttOver: "這個檔案超過 1 MiB，不提供預覽。",
+    pvLoading: "正在讀取檔案…", pvAttOver: "這個檔案超過 50 MB，不提供預覽，請下載後開啟。",
+    pvLarge: "這個檔案比較大（{0}），仍要預覽嗎？", pvAnyway: "仍要預覽",
     pvAttGone: "這裡已無法取得這個檔案（檔案已變更，或艦隊已重新啟動）。請 agent 再傳一次。",
     pvAttFailed: "無法讀取這個檔案，請再試一次。",
     pvBannerAck: "我知道了", pvBannerAckTitle: "隱藏這則提醒，直到下次登入",
@@ -185,7 +187,7 @@ register("chat", {
     pvWhyNever: "這台裝置在這個工作階段已關閉預覽。",
     pvWhyOrigin: "預覽已關閉：這個頁面位於 {0}，但艦隊認為它位於 {1}（有會改寫 Host 的代理）。請讓外部 Host 原樣傳入，或設定 web.preview_origin。",
     pvUnknownAddress: "未知的網址", pvWhyServer: "這裡無法使用預覽。",
-    pvHtmlOver: "這段 HTML 超過 1 MiB，不提供預覽。",
+    pvHtmlOver: "這段 HTML 超過 50 MB，不提供預覽，請下載後開啟。",
     pvNoAnswer: "無法預覽：預覽在 3 秒內沒有回應。如果先前的預覽卡住了，它可能還在執行——請在新分頁開啟儀表板。透過 SSH 使用時，也要轉送預覽的連接埠。",
     pvStoppedAnswering: "預覽沒有回應，已將它關閉。", pvSwitchedOff: "這台裝置已關閉預覽。",
     pvAnother: "另一個預覽已開始。", pvWrongBoot: "無法預覽：預覽連接埠上回應的不是這個艦隊。",

package/dist/ui/chat-thread.js

@@ -8,7 +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 { 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";
 
@@ -23,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;
@@ -406,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
@@ -462,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"));
@@ -474,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;
@@ -486,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
@@ -532,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()); };

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`;
+}

package/dist/ui/preview-panel.js

@@ -152,11 +152,12 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const [, dayTick] = useState(0);
   useEffect(() => (open ? onDayChange(() => dayTick(n => n + 1)) : undefined), [!!open]);
 
-  const ui = { state: (s, reason) => setRun({ state: s === "starting" || s === "running" ? s : "idle", reason: reason || "" }) };
-  const start = () => {
+  // #2863: "large" — over 8 MB, nothing runs until "Preview anyway" (or the card's, which opened it with `anyway`).
+  const ui = { state: (s, reason) => setRun({ state: s === "starting" || s === "running" || s === "large" ? s : "idle", reason: reason || "" }) };
+  const start = (anyway) => {
     if (!open || !holder.current) return;
     setView("preview");
-    P().start(frameKey(open.key), holder.current, open.code, ui, { fill: true });
+    P().start(frameKey(open.key), holder.current, open.code, ui, anyway === true || open.anyway ? { fill: true, anyway: true } : { fill: true });
   };
   const stop = () => { if (open) P().stop(frameKey(open.key), "stopped", ""); };
   // A new block in the panel: what ran before is gone (openPanel stopped it); the card's click starts it here — or,
@@ -224,7 +225,8 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
     if (newer.code != null) { openPanel(newer); return; }
     const was = open && open.key, mine = reading.current = newer;
     setNewerNote(t("chat.pvLoading"));
-    const r = await loadHtmlAttachment(newer.att);
+    // A click on the newer version reads it whatever its size (up to the 50 MB ceiling); over 8 MB the panel then asks.
+    const r = await loadHtmlAttachment(newer.att, undefined, { anyway: true });
     if (reading.current !== mine) return;
     reading.current = null;
     const now = panelStore.get().open;
@@ -270,9 +272,10 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
           <button type="button" class=${`btn btn-sm${view === "code" ? " on" : ""}`} aria-pressed=${view === "code" ? "true" : "false"} onClick=${() => setView("code")}><${Icon} name="code" size=${14} />${t("chat.pvCode")}</button>
         </div>
         <span class="grow"></span>
-        ${going ? html`<button type="button" class="btn btn-sm pv-panel-reload" title=${t("chat.pvReload")} onClick=${() => { stop(); start(); }}><${Icon} name="restart" size=${14} /><span class="lbl">${t("chat.pvReload")}</span></button>
+        ${going ? html`<button type="button" class="btn btn-sm pv-panel-reload" title=${t("chat.pvReload")} onClick=${() => { stop(); start(true); }}><${Icon} name="restart" size=${14} /><span class="lbl">${t("chat.pvReload")}</span></button>
           <button type="button" class="btn btn-sm pv-panel-stop" title=${t("chat.pvStop")} onClick=${stop}><${Icon} name="stop" size=${14} /><span class="lbl">${t("chat.pvStop")}</span></button>`
-          : html`<button type="button" class="btn btn-sm btn-primary pv-panel-run" title=${t("chat.pvPreview")} disabled=${!a.ok} onClick=${start}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvPreview")}</span></button>`}
+          : run.state === "large" ? html`<button type="button" class="btn btn-sm btn-primary pv-panel-anyway" title=${t("chat.pvAnyway")} disabled=${!a.ok} onClick=${() => start(true)}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvAnyway")}</span></button>`
+          : html`<button type="button" class="btn btn-sm btn-primary pv-panel-run" title=${t("chat.pvPreview")} disabled=${!a.ok} onClick=${() => start()}><${Icon} name="play" size=${14} /><span class="lbl">${t("chat.pvPreview")}</span></button>`}
         <button type="button" class="btn btn-sm pv-panel-dl" title=${t("chat.pvDownload")} onClick=${() => download(open.code, fileName)}><${Icon} name="download" size=${14} /><span class="lbl">${t("chat.pvDownload")}</span></button>
       </div>
       ${newer && newer.key !== open.key ? html`<div class="pv-newer" role="status"><span>${t("chat.pvNewer", timeOf(newer.ts))}</span>

package/dist/ui/preview.js

@@ -20,7 +20,9 @@
 })(typeof globalThis !== "undefined" ? globalThis : this, function (root) {
   "use strict";
 
-  var LIMITS = { maxBytes: 1024 * 1024, minHeight: 40, maxHeight: 4000, readyMs: 3000, watchdogMs: 10000, resizePerSec: 10, minDelta: 2, growthFreeze: 5, growthWindowMs: 2000 };
+  // #2863: askBytes — above it the person is asked first ("Preview anyway?"); maxBytes — above it only a download (the
+  // frame's own ceiling, web-preview.ts PREVIEW_HTML_MAX_BYTES; html-attachment.js reads with the same two).
+  var LIMITS = { askBytes: 8 * 1024 * 1024, maxBytes: 50 * 1024 * 1024, minHeight: 40, maxHeight: 4000, readyMs: 3000, watchdogMs: 10000, resizePerSec: 10, minDelta: 2, growthFreeze: 5, growthWindowMs: 2000 };
   var OPT_IN_KEY = "agend_html_preview";        // localStorage: "on" — this device allows previews
   var NEVER_KEY = "agend_html_preview_never";   // sessionStorage: "1" — never preview on this device (this session)
   // #1568: the banner was acknowledged ("I understand"). localStorage: the sign-in's session handle — hidden while the
@@ -54,6 +56,8 @@
   function now() { return root.performance && typeof root.performance.now === "function" ? root.performance.now() : Date.now(); }
   function store(kind) { try { return root[kind] || null; } catch (e) { return null; } }
   function utf8Bytes(s) { try { return new root.TextEncoder().encode(s).length; } catch (e) { return String(s).length * 3; } }
+  /** #2863: "12 MB" / "8.4 MB" (1 MB = 1024 × 1024 bytes, as the caps are; html-attachment.js sizeLabel). */
+  function sizeLabel(bytes) { var mb = bytes / (1024 * 1024); return (mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10) + " MB"; }
   function randomCh() {
     var b = new Uint8Array(16);
     root.crypto.getRandomValues(b);
@@ -229,7 +233,8 @@
 
   /**
    * Run `html` in `holder` (a node of the card) for `key`. `ui` is told what happened: ui.state(name, reason) with
-   * "starting" | "running" | "stopped" | "unavailable". One preview at a time: any other running one stops first.
+   * "starting" | "running" | "stopped" | "unavailable" | "large" (#2863: over LIMITS.askBytes — nothing runs until it is
+   * asked again with opts.anyway, the person's "Preview anyway"). One preview at a time: any other running one stops first.
    * opts.fill (#1481, the side panel): the frame fills its holder — the same frame from mountPreview, only sized by the
    * panel instead of by the frame's height messages, which it then ignores.
    */
@@ -239,7 +244,9 @@
   function start(key, holder, html, ui, opts) {
     var a = availability();
     if (!a.ok) { ui.state("unavailable", a.reason); return false; }
-    if (typeof html !== "string" || utf8Bytes(html) > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 1 MiB; it is not previewed.")); return false; }
+    var bytes = typeof html === "string" ? utf8Bytes(html) : Infinity;
+    if (bytes > LIMITS.maxBytes) { ui.state("unavailable", say("pvHtmlOver", "This HTML is over 50 MB; it is not previewed. Download it to open it.")); return false; }
+    if (bytes > LIMITS.askBytes && !(opts && opts.anyway)) { ui.state("large", say("pvLarge", "This file is large ({0}). Preview anyway?", sizeLabel(bytes))); return false; }
     stopAll("another");
     starts++;
     var doc = holder.ownerDocument;

package/dist/ui/settings-confirm.js

@@ -65,6 +65,8 @@ function publish() {
       // Monotonic: when the server's countdown reaches zero on this page's clock.
       deadline: at + Math.max(0, Number(view.remaining_ms) || 0),
       withdraw: view.can_withdraw && view.state === "pending" ? () => withdraw(view.id) : null,
+      // #2868: this browser may confirm it itself now (the server's read says so; it checks again on the click).
+      applyNow: view.can_self_confirm && view.state === "pending" ? () => applyNow(view.id) : null,
       dismiss: TERMINAL.has(view.state) ? () => forget(view.id) : null,
     })),
   });
@@ -150,6 +152,22 @@ export async function withdraw(id) {
   return false;
 }
 
+/**
+ * #2868: "Apply now" — confirm this session's own pending request from this browser (#2170's rule, asked again by the
+ * server). Its answer is followed like any other; a refusal (no longer allowed here) leaves it waiting and is { ok: false }.
+ */
+export async function applyNow(id) {
+  const e = tracked.get(id);
+  if (!e) return { ok: false };
+  const token = ticket(e);
+  let res;
+  try { res = await api(`/api/settings/pending/${encodeURIComponent(id)}/confirm`, { method: "POST", body: "{}" }); } catch { return { ok: false }; }
+  if (isPendingResponse(res) && res.body.pending_change.id === id) { update(res.body.pending_change, token); schedule(); return { ok: true }; }
+  // Refused (403: not allowed here any more): read it again, so "Apply now" goes until the server offers it again.
+  if (e.view.can_self_confirm) update({ ...e.view, can_self_confirm: false }, token);
+  return { ok: false, status: res.status };
+}
+
 /** This session's requests still open on the server (after a reload): followed like new ones. */
 export async function attach() {
   let res;

package/dist/ui/shared/app-i18n.js

@@ -89,7 +89,13 @@ register("app", {
     pendingWeb: "Confirmed by your account (this browser is web-verified). General is told.",
     pending_applied: "Confirmed and applied", pending_rejected: "Not applied", pending_expired: "Expired — nothing was changed",
     pending_stale: "Not applied — settings changed meanwhile", pending_failed: "Confirmed, but applying it failed",
-    pendingChat: "A fleet admin confirms this in chat (General topic).", pendingHost: "Confirm it on the host: {0}", pendingLeft: "{0} left", withdraw: "Withdraw",
+    pendingLeft: "{0} left", withdraw: "Withdraw",
+    // #2868: where to confirm it, said plainly; the host's command folded away unless it is the only way.
+    pendingPosting: "Sending the confirm card to General…", pendingChatWhere: "To apply it, press Confirm on the card in General on {0}.",
+    pendingHostOnly: "No General can take the confirm card. Confirm it on the host: {0}", pendingAdvanced: "Advanced: confirm on the host",
+    pendingSelf: "This browser is verified, so you can also apply it here.", pendingApplyNow: "Apply now",
+    pendingApplyRefused: "This browser can't apply it here now — confirm it in General.",
+    pendingAuthorize: "Authorize this browser to apply changes like this here next time, without General.",
     opWriting: "Applying settings… {0}/{1}", opWaiting: "Settings: waiting for confirmation in chat", opApplying: "Applying settings…",
     opDone: "Settings applied", opRestart: "Settings saved — AgEnD needs a restart to use them", opPartial: "Some settings were not applied",
     opFailed: "Settings were not applied", openSettings: "Open Settings",
@@ -131,7 +137,12 @@ register("app", {
     pendingWeb: "由你的帳號確認（這個瀏覽器已通過網頁驗證），也會通知 General。",
     pending_applied: "已確認並套用", pending_rejected: "未套用", pending_expired: "已逾時——沒有任何變更",
     pending_stale: "未套用——設定在這期間已變動", pending_failed: "已確認，但套用失敗",
-    pendingChat: "由 fleet 管理員在聊天（General topic）中確認。", pendingHost: "請在主機上確認：{0}", pendingLeft: "剩 {0}", withdraw: "撤回",
+    pendingLeft: "剩 {0}", withdraw: "撤回",
+    pendingPosting: "正在把確認卡送到 General…", pendingChatWhere: "要套用，請到 {0} 的 General，在確認卡上按「確認」。",
+    pendingHostOnly: "沒有可以接收確認卡的 General。請在主機上確認：{0}", pendingAdvanced: "進階：在主機上確認",
+    pendingSelf: "這個瀏覽器已通過驗證，也可以直接在這裡套用。", pendingApplyNow: "直接套用",
+    pendingApplyRefused: "這個瀏覽器現在無法直接套用，請到 General 確認。",
+    pendingAuthorize: "授權這個瀏覽器，之後這類變更可以直接套用，不必到 General。",
     opWriting: "正在套用設定… {0}/{1}", opWaiting: "設定：等待在聊天中確認", opApplying: "正在套用設定…",
     opDone: "設定已套用", opRestart: "設定已儲存——需要重新啟動 AgEnD 才會生效", opPartial: "部分設定沒有套用",
     opFailed: "設定沒有套用", openSettings: "開啟設定",