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

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/panel-chat.js

@@ -6,9 +6,9 @@
 // right, the agent's at full width, and one rounded composer pinned below with attach, Stop reply and Send inside it.
 // The instance's own actions (details, start, stop, restart, delete) are in the header's ⋯ menu, and only the ones
 // that apply to its state are offered (#1408 rough edges 4 and 7).
-import { html, useCallback, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
+import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { lang, t } from "/assets/app-i18n.js";
-import { appStore, createStore, guestPage, useStore } from "/assets/app-store.js";
+import { appStore, createStore, guestPage, guestTrusted, useStore } from "/assets/app-store.js";
 import { ComposerAuth } from "/assets/web-authorize.js";
 import { useLease } from "/assets/app-ctx.js";
 import { modelText, namesOf, namesStore, navStore as instanceNavStore } from "/assets/instance-nav.js";
@@ -80,12 +80,7 @@ import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVers
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
-import { canvasWorkerMenuAvailable, experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
-const ChatEffectPosters = experimentalComponent(() => import("./chat-effect-posters.js"), m => m.ChatEffectPosters);
-const ChatEffects = experimentalComponent(() => import("./chat-effects.js"), m => m.ChatEffects);
-import { setFollowsReducedMotion } from "/assets/fx-motion.js";
 import { AmbientMotionNote, ChatAmbient, ambientMenuItems } from "./chat-ambient.js";
-import { startEffectsWaker, getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake, chatHasEffects } from "/assets/feature-flags.js";
 /** The composer's textarea (#2342: text put back into it is a step Ctrl+Z goes back from). */
 const composerField = () => (typeof document !== "undefined" ? document.getElementById("msgIn") : null);
 
@@ -149,9 +144,6 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   }
   // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
-  // #2118: viewing current in-scope Chat effects needs no management or personal-slot authority. #2193: the runtime
-  // itself loads only when there is something to play (effects-waker.js).
-  startEffectsWaker({ store });
   return store;
 }
 
@@ -261,9 +253,6 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   const themeKey = JSON.stringify(theme);
   const card = useCard(name, inst.card_v);
   const [dialog, setDialog] = useState(null);       // "delete" | null
-  const [canvasPlayback, setCanvasPlayback] = useState(null);
-  const publishCanvasPlayback = useCallback(value => setCanvasPlayback(previous =>
-    !previous && !value.playing || previous?.name === value.name && previous.playing === value.playing ? previous : value), []);
   const [wrap, setWrap] = useState(codeWrap);
   const wide = useStore(chatWide).on;
   const view = useRef(null), split = useRef(null), thread = useRef(null), bg = useRef(null), effectSurface = useRef(null);
@@ -312,9 +301,6 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
-  // #2193: this chat's Canvas Worker placements (its status row's effect_chat_v): none, no effects code runs for it.
-  const cwEnabled = useCanvasWorker();
-  const fxHere = cwEnabled && chatHasEffects(name);
   const items = [
     // #1523 N2: Details is a page now (the Fleet side of this instance), not a dialog.
     { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) },
@@ -328,7 +314,6 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     // #2117: its ambient — why it is not showing here (with the way to change that), and a person's Clear.
     ...ambientMenuItems(name, { publicLink: document.body.dataset.publicLink === "1", clear: clearAmbient }),
     narrowScreen() ? null : { key: "fullWidth", checkbox: true, checked: wide, label: t("chat.fullWidth"), onSelect: () => setChatWide(!wide) },
-    cwEnabled && canvasWorkerMenuAvailable(window) ? { key: "effects", label: t("cwControls.title"), onSelect: () => setDialog("effects") } : null,
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   const cls = statusClass(inst, exec, awaiting);
@@ -341,14 +326,14 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => pick("model")}>${modelText(inst)}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} data-width=${wide ? "full" : undefined} ref=${view}>
-    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} active=${fxHere} />`}>${fxHere ? html`<${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} />` : null}<${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? (guestTrusted() ? html`<${InstanceSwitch} name=${name} current="chat" guest=${true} />` : null) : html`<${InstanceSwitch} name=${name} current="chat" />`}><${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
     <${ChatCard} key=${name} name=${name} card=${card} />
     <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
     <div class="chat-split" ref=${split}>
       <div ref=${effectSurface} class=${`chat-main${theme && theme.background ? " has-th-bg" : ""}`}>
         ${theme && theme.background ? html`<img ref=${bg} class=${`th-bg th-bg-${theme.background.fit}`} src=${themeImageUrl(name, theme.background.image)} alt="" aria-hidden="true" decoding="async" />` : null}
         <${ChatAmbient} name=${name} surface=${effectSurface} part="layer" />
-        <${AmbientMotionNote} name=${name} canvasPlaying=${canvasPlayback?.name === name && canvasPlayback.playing} />
+        <${AmbientMotionNote} name=${name} />
         <${Thread} name=${name} th=${thread} />
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${theme ? theme.workingLabel : undefined} />
         <${ChatAmbient} name=${name} surface=${effectSurface} part="front" />
@@ -423,20 +408,11 @@ function threadEntry(name, doc) {
   list.setAttribute("aria-label", t("chat.conversationWith", name));
   const e = { list, sink: null, lang: lang(), thread: null };
   const thread = createThread(list, doc.createElement("div"), {
-    t, tf: t, isUser: (x) => store.isUser(x, name), onJump: (j) => e.sink?.setJump(j), onEmpty: (v) => e.sink?.setEmpty(v),
+    t, tf: t, isUser: (x) => store.isUser(x, name), onJump: (j) => e.sink?.setJump(j),
+    // #2848: which empty — "hidden" (a guest's chat whose every message is hidden from it) differs from a plain empty
+    // chat, so the explanation shows when the history answer comes after the first (empty) draw.
+    onEmpty: (v) => e.sink?.setEmpty(v && store.allHidden(name) ? "hidden" : v),
     setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
-    // #2193: an offer shown while the effects runtime sleeps wakes it; until it answers, the offer is being checked.
-    effectTrialStatus: x => { const fx = getAppEffects(); if (fx) return fx.trialStatus(x); if (!effectsLoaded()) { void wakeEffects(); return "checking"; } return "localAdmin"; },
-    effectTrialFailure: x => getAppEffects()?.trialFailure(x),
-    fixEffectTrial: (x, reason) => {
-      if (reason === "reducedMotion") setFollowsReducedMotion(false);
-      else if (reason === "busy") getAppEffects()?.stopTrial();
-      else if (reason === "transport") location.reload();
-      else if (reason === "localAdmin") location.href = "/signin?next=" + encodeURIComponent(location.pathname + location.search);
-      else navigate("/settings/look");
-    },
-    canTryEffect: x => getAppEffects()?.canTry(x) === true,
-    startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && e.sink && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
     clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
     retryOutgoing: (clientId) => store.retryOutgoing(name, clientId),              // a failed send's Retry and Delete
     deleteOutgoing: (clientId) => store.deleteOutgoing(name, clientId),
@@ -472,17 +448,6 @@ function follow(name, thread) {
     else if (kind === "sent") thread.jumpLatest();
   }));
   offs.push(P() ? P().onChange(() => thread.refreshCards()) : () => {});
-  // #2193: the runtime may start later (an offer shown wakes it): its trial updates are followed from then.
-  let trialOff = null, trialOwner = null;
-  const watchTrial = () => {
-    const next = getAppEffects();
-    if (next === trialOwner) return;
-    trialOff?.(); trialOff = null; trialOwner = next;
-    trialOff = next?.subscribeTrial(() => thread.render(store.threadRows(name))) ?? null;
-  };
-  watchTrial();
-  offs.push(onEffectsAwake(() => { watchTrial(); thread.render(store.threadRows(name)); }));
-  offs.push(() => { trialOff?.(); trialOff = null; trialOwner = null; });
   offs.push(panelStore.subscribe(() => thread.refreshCards()));   // a card shows whether the panel has its block
   return () => { for (const off of offs) off(); };
 }
@@ -548,7 +513,8 @@ function Thread({ name, th }) {
   }, [name]);
   return html`<div class="scroller" ref=${scroller}>
     <div class="thread-host" ref=${host}></div>
-    ${empty ? html`<${Empty} icon="chat" title=${t("chat.noMessages")} />` : null}
+    ${empty === "hidden" ? html`<${Empty} icon="chat" title=${t("chat.guestAllHidden")} hint=${t("chat.guestAllHiddenHint")} />`
+      : empty ? html`<${Empty} icon="chat" title=${t("chat.noMessages")} />` : null}
     <div class="jump-dock">${jump.show ? html`<button data-trust="thread-control" type="button" class="jump-latest" onClick=${() => th.current && th.current.jumpLatest()}>
       <${Icon} name="down" size=${16} />${jump.unseen > 0 ? t("chat.newBelow", jump.unseen) : t("chat.jumpLatest")}</button>` : null}</div>
   </div>`;
@@ -677,10 +643,12 @@ function Composer({ name, label = name, lease, busy }) {
   const files = s.pendingFiles[name] || [];
   const reply = s.replies[name];                       // #2272: the message this one will reply to
   const content = !!value.trim() || files.length > 0;
-  // A file waiting: what goes is a message with its file, never a command (no palette, no command line). A guest never
-  // runs one (#1920: the server refuses its slash text), so it has no palette either.
+  // A file waiting: what goes is a message with its file, never a command (no palette, no command line). #2855: a guest's
+  // palette offers only what it may run on this agent — the table's "anyone" commands (its status frame's `commands`).
   const guest = guestPage();
-  const palette = guest || files.length || closedFor === value ? null : paletteFor(value);
+  const app = useStore(appStore);
+  const guestAllowed = guest ? (app.instances.find((i) => i.name === name)?.commands ?? []) : null;
+  const palette = files.length || closedFor === value || (guest && !guestAllowed.length) ? null : paletteFor(value, guestAllowed || undefined);
   const pick = palette && palette.length ? palette[Math.min(sel, palette.length - 1)] : null;
   // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300). Empty, it is one line
   // (#2478 — a long name's placeholder made the box two lines tall).
@@ -707,9 +675,12 @@ function Composer({ name, label = name, lease, busy }) {
       else complete(pick);
       return;
     }
-    // #1920: a guest's "/…" would be refused as a command — said here, the draft kept to edit.
-    if (guest && /^\s*\//.test(value)) { toast(t("chat.guestNoCommands"), false); return; }
     const cmd = files.length ? null : parseCommandLine(value);
+    // #1920/#2855: a guest's "/…" that is not one it may run here is refused here, why said, the draft kept to edit — a
+    // known command: only the channel's admins run it; anything else: it would not go as a message either.
+    if (guest && /^\s*\//.test(value) && !(cmd && guestAllowed.includes(cmd.command))) {
+      toast(cmd ? t("chat.guestCommandNotAllowed", `/${cmd.command}`) : t("chat.guestNoCommands"), false); return;
+    }
     if (cmd && needsArgument(cmd.command) && !cmd.args) { recordEdit(input.current); setValue(`/${cmd.command} `); return; }
     if (cmd) { runLine(cmd); return; }
     store.send(name);
@@ -743,7 +714,7 @@ function Composer({ name, label = name, lease, busy }) {
       ${palette.length ? palette.map((c) => html`<li key=${c.name} id=${optId(c)} role="option" aria-selected=${c === pick ? "true" : "false"}
           class=${c === pick ? "on" : ""} onMouseDown=${(e) => { e.preventDefault(); complete(c); }}>
           <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)
-        : html`<li class="cmd-none" role="option" aria-selected="false">${t("chat.cmdNotCommand")}</li>`}
+        : html`<li class="cmd-none" role="option" aria-selected="false">${t(guest ? "chat.cmdNotGuests" : "chat.cmdNotCommand")}</li>`}
     </ul>` : null}
     ${reply ? html`<div class="reply-bar" data-trust="composer" role="status">
       <span class="reply-mark" aria-hidden="true"><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"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg></span><span class="reply-label">${t("chat.replyingTo", reply.sender)}</span>

package/dist/ui/panel-needs.js

@@ -19,7 +19,7 @@ import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { Empty } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
-import { notifyStore, notifySupport, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
+import { notifyStore, notifySupport, configDetail, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
 import { openSignIn, signInOffered } from "./backend-signin.js";
 
 register("needs", {
@@ -95,7 +95,7 @@ const BAD = new Set(["crashed", "delivery_failed", "hang", "exited"]);
  */
 function detailOf(item) {
   const c = item.type === "task" ? item.card : null;
-  if (!c || !c.title) return item.detail;
+  if (!c || !c.title) return configDetail(item);
   const lacks = c.gap ? [c.gap.unchecked ? tn("gapUnchecked", c.gap.unchecked) : "", c.gap.noResult ? tn("gapNoResult") : ""].filter(Boolean).join(tn("gapJoin")) : "";
   const tail = c.question || (lacks ? tn("gap", lacks) : "");
   return `${c.code} ${c.title}${tail ? ` — ${tail}` : ""}`;
@@ -112,13 +112,15 @@ export function age(since, nowMs) {
 
 /** The store's list, grouped by instance, in its order (instances by their oldest item; items oldest first). */
 export function groupNeeds(items) {
-  const groups = [];
+  const groups = new Map();
   for (const item of items) {
-    const last = groups[groups.length - 1];
-    if (last && last.instance === item.instance) last.items.push(item);
-    else groups.push({ instance: item.instance, items: [item] });
+    // Configuration issues belong to Settings, not the unassigned task/sign-in group.
+    const key = JSON.stringify([item.instance, !item.instance && item.type === "config"]);
+    const group = groups.get(key);
+    if (group) group.items.push(item);
+    else groups.set(key, { instance: item.instance, items: [item] });
   }
-  return groups;
+  return [...groups.values()];
 }
 
 export function NeedsPanel({ navKey }) {
@@ -142,8 +144,8 @@ export function NeedsPanel({ navKey }) {
     <${PanelHeader} title=${tn("title")} sub=${items.length ? t("app.needsCount", items.length) : null} />
     <div data-trust="panel-content" class="panel-body"><div class="col">
       ${!items.length ? html`<${Empty} icon="check" title=${tn("empty")} hint=${tn(chatApp ? "emptyHint" : "emptyHintWeb")} />`
-        : groups.map((g) => html`<section key=${g.instance} class="n-group" aria-label=${g.instance}>
-          <h2 class="n-group-head">${g.instance ? html`<a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a>` : tn(g.items.some(i => i.type === "backend") ? "fleetSignIns" : "noAssignee")}</h2>
+        : groups.map((g) => html`<section key=${JSON.stringify([g.instance, g.items[0]?.type === "config"])} class="n-group" aria-label=${g.instance}>
+          <h2 class="n-group-head">${g.instance ? html`<a href=${chatPath(g.instance)} title=${g.instance}>${nameFor(g.instance)}</a>` : g.items[0]?.type === "config" ? t("app.settings") : tn(g.items.some(i => i.type === "backend") ? "fleetSignIns" : "noAssignee")}</h2>
           ${g.items.map((item) => html`<${NeedsItem} key=${item.id} item=${item} nowMs=${nowMs} owner=${owner} />`)}
         </section>`)}
       <${NotifyToggle} />

package/dist/ui/panel-settings.js

@@ -50,6 +50,7 @@ import { GuestsCard } from "./settings-guests.js";
 import { OfficeSharesCard } from "./office-share-dialog.js";
 import { syncStage, useDraft } from "./settings-draft.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
+import { NamedLinkTest, setTypedTunnelToken } from "./settings-named-test.js";
 import { SignInList } from "./backend-signin.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
@@ -1353,6 +1354,7 @@ function WebSection({ ctx, staged, part = "all" }) {
         <div class=${fc("field", "originPort")}><label for="publicWebOriginPort">${tn("namedOriginPort")}</label><input id="publicWebOriginPort" type="number" min="1024" max="65535" value=${f.originPort} class=${errors.originPort ? "invalid" : ""} onInput=${(e) => set("originPort")(e.target.value)} /><${Feedback} error=${errors.originPort} /></div>
       </div>
       <p class="note">${tn("namedTunnelHint")} <a href="https://github.com/songsid/AgEnD/blob/main/docs/named-tunnel.md" target="_blank" rel="noopener noreferrer">${tn("namedTunnelSetup")}</a></p>
+      ${String(f.hostname || "").trim() ? html`<${NamedLinkTest} hostname=${f.hostname} port=${f.originPort} protocol=${f.protocol} />` : null}
       <div class="grid2">
         <div class=${fc("field", "ttl")}><label for="publicWebTtl">${tn(named ? "publicTtlNamed" : "publicTtl")}</label><input id="publicWebTtl" type="number" min=${named ? "0" : "1"} max=${named ? "10080" : "480"} step="1" class=${errors.ttl ? "invalid" : ""} value=${f.ttl} onInput=${(e) => set("ttl")(e.target.value)} /><${Feedback} error=${errors.ttl} /></div>
         <div class=${fc("field", "protocol")}><label for="publicWebProtocol">${tn("publicProtocol")}</label><${Select} id="publicWebProtocol" value=${f.protocol} onChange=${set("protocol")} options=${["http2", "quic", "auto"]} /></div>
@@ -1548,11 +1550,11 @@ function PublicTunnelToken() {
     const result = await api(base);
     if (lease.current() && result.ok) setPresent(result.body?.[0]?.token_present === true);
   };
-  useEffect(() => { refresh().catch(() => {}); }, []);
+  useEffect(() => { refresh().catch(() => {}); return () => setTypedTunnelToken(""); }, []);
   const go = async (clear) => {
     if (inFlight.current || !clear && !secret) return;
     const value = secret;
-    setSecret(""); inFlight.current = true; setBusy(true); setMessage("");
+    setSecret(""); setTypedTunnelToken(""); inFlight.current = true; setBusy(true); setMessage("");
     const key = newKey("tunnel-token");
     try {
       const prepared = await api(`${base}/verify`, { method: "POST", headers: { "Idempotency-Key": key }, body: JSON.stringify(clear ? { clear: true } : { secret: value }) });
@@ -1576,7 +1578,7 @@ function PublicTunnelToken() {
   return html`<section class="card"><h3>${tn("namedToken")}</h3>
     <p class="note">${tn("namedTokenHint")}</p>
     <span class="tag">${present ? tn("keyConfigured") : tn("keyNotConfigured")}</span>
-    <input id="publicTunnelToken" type="password" autocomplete="new-password" aria-label=${tn("namedToken")} value=${secret} onInput=${e => setSecret(e.target.value)} />
+    <input id="publicTunnelToken" type="password" autocomplete="new-password" aria-label=${tn("namedToken")} value=${secret} onInput=${e => { setSecret(e.target.value); setTypedTunnelToken(e.target.value); }} />
     <button type="button" class="btn btn-sm" disabled=${busy || !secret} onClick=${() => go(false)}>${tn("namedTokenSet")}</button>
     <button type="button" class="btn btn-sm" disabled=${busy || !present} onClick=${() => go(true)}>${tn("namedTokenClear")}</button>
     ${message ? html`<p class="note" role="status">${message}</p>` : null}

package/dist/ui/preview-panel.js

@@ -16,8 +16,6 @@ import { Icon } from "/assets/ui-icons.js";
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
-import { experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
-const EffectTrialPanel = experimentalComponent(() => import("./effect-trial-panel.js"), m => m.EffectTrialPanel);
 import { chatTime, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;
@@ -47,19 +45,13 @@ export const frameKey = (key) => `panel:${key}`;
 /** Show `spec` in the panel; `run`: start it there (the card's "Open in panel" click). The block shown before stops. */
 function retire(open) {
   if (!open) return;
-  if (open.kind === "trial") { try { open.handle.stop(); } catch { /* host controller owns cleanup */ } }
-  else if (P()) P().stop(frameKey(open.key), "stopped", "");
+  if (P()) P().stop(frameKey(open.key), "stopped", "");
 }
 export function openPanel(spec, { run = false } = {}) {
   const old = state.open;
   set({ open: { ...spec, kind: "html" }, run: run ? ++runs : 0 });
   retire(old); // State changes first: cleanup reentry cannot close a newer panel.
 }
-/** A checked controller handle enters the existing component slot; no HTML run token is issued. */
-export function openTrialPanel(spec) {
-  const old = state.open;
-  set({ open: { ...spec, kind: "trial" }, run: 0 }); retire(old);
-}
 /** Close publishes the empty slot before old-owner callbacks can reenter. */
 export function closePanel() {
   const old = state.open; if (!old) return;
@@ -80,7 +72,7 @@ export function htmlTitle(code) {
  * without one, the newest block does. `msgs` in order; `keyOf` makes a message's key.
  */
 export function newerVersion(open, msgs, keyOf) {
-  if (!open || open.kind === "trial" || !Array.isArray(msgs)) return null;
+  if (!open || !Array.isArray(msgs)) return null;
   const at = msgs.findIndex(x => keyOf(x) === open.msgKey);
   if (at < 0) return null;
   // An attached file: a later agent reply attaching a file of the same name is its newer version. Its HTML is read
@@ -145,8 +137,7 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   const pending = useRef(0);      // #1704: the card's click, waiting for this device's Allow (the st.run it came with)
   const ownAllow = useRef(0);     // while this panel's own Allow commits its choice: the click it answers (not cancelled by it)
   const holder = useRef(null), divider = useRef(null), panel = useRef(null);
-  const trial = st.open?.kind === "trial" && st.open.instance === name ? st.open : null;
-  const open = st.open?.kind !== "trial" && st.open?.instance === name ? st.open : null;
+  const open = st.open?.instance === name ? st.open : null;
 
   useEffect(() => panelStore.subscribe(setSt), []);
   // This device's choice (here or in another tab) decides whether Preview is offered: re-read it when it changes.
@@ -161,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,
@@ -233,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;
@@ -245,9 +238,6 @@ export function PreviewPanel({ name, split, msgs, subscribe, keyOf, reveal, down
   // Esc in the panel closes it (and is not the chat's "stop the reply").
   const onPanelKey = (e) => { if (e.key === "Escape" && !e.isComposing) { e.preventDefault(); closePanel(); } };
 
-  if (trial) return html`<${EffectTrialPanel} binding=${trial.binding} title=${trial.handle.reply.offer.title}
-    current=${trial.handle.current} ownerCss=${trial.ownerCss} onStage=${trial.onStage}
-    onStop=${trial.handle.stop} onClose=${() => { if (panelStore.get().open === trial) closePanel(); }} />`;
   if (!open) return null;
   const going = run.state === "starting" || run.state === "running";
   const a = P().availability();
@@ -282,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;