@songsid/agend 2.2.1 → 2.3.0-beta.10

package/dist/ui/chat-thread.js

@@ -8,8 +8,10 @@
 // Unrelated updates (a new message, another message's tick) stop nothing (#1306 §6.2, #1408 §4).
 import "./chat-render.js";
 import "./preview.js";
+import { effectTrialMessage } from "./effect-trial-offer.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
 import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
+import { textLinkSegments } from "/assets/app-route.js";
 
 const R = () => globalThis.AgendChatRender;
 /** #1589: the public link shows attachments as downloads only (its page says so: <body data-public-link="1">). */
@@ -37,6 +39,41 @@ export const msgKey = (x) => `${x.boot}-${x.id}`;
  */
 export const THREAD_TAIL = 24;
 export const THREAD_CHUNK = 40;
+/** #2158: a reader's scroll (smooth, momentum) is theirs until it has been this quiet since their last input or scroll. */
+export const READER_QUIET_MS = 250;
+const SCROLL_KEYS = new Set(["PageUp", "PageDown", "ArrowUp", "ArrowDown", "Home", "End", " "]);
+
+/**
+ * #2053: a message's rendered Markdown, kept across renders and chat switches. A draw compares each message's html with
+ * its node's, so every render of a thread rendered every drawn message's Markdown again (~320 calls per 200-message
+ * switch). renderMarkdown's output depends only on the text, whether its HTML cards are on (an agent's message), and —
+ * for a text that has them — whether the page knows each server-emoji id and the name it has for each mention: the key
+ * holds exactly those, so a cached html is always what renderMarkdown would return now. Bounded: least recently used out.
+ */
+export const MD_CACHE_MAX = 4000;
+const mdCache = new Map();
+const EMOJI_IDS = /<a?:[A-Za-z0-9_]{2,32}:(\d{15,25})>/g;
+const MENTION_IDS = /<(@!?|@&|#)(\d{15,25})>/g;
+const MENTION_KINDS = { "@": "u", "@!": "u", "@&": "r", "#": "c" };
+export function renderedMarkdown(text, cards, emojis, mentions) {
+  const src = typeof text === "string" ? text : String(text == null ? "" : text);
+  let sig = cards ? "c" : "-";
+  if (src.includes("<")) {
+    // Read as renderMarkdown reads it: it drops NUL first (its placeholder mark), so "<@\0id>" is a mention there too.
+    const seen = src.includes("\u0000") ? src.replace(/\u0000/g, "") : src;
+    for (const m of seen.matchAll(EMOJI_IDS)) sig += `|e${m[1]}${emojis && emojis(m[1]) ? 1 : 0}`;
+    for (const m of seen.matchAll(MENTION_IDS)) { const name = mentions ? mentions(MENTION_KINDS[m[1]], m[2]) : null; sig += `|m${m[1]}${m[2]}=${typeof name === "string" ? name.length + ":" + name : "-"}`; }
+  }
+  const key = `${sig}\u0000${src}`;
+  let html = mdCache.get(key);
+  if (html === undefined) html = R().renderMarkdown(src, { htmlCards: cards, emojis, mentions });
+  else mdCache.delete(key);
+  mdCache.set(key, html);
+  while (mdCache.size > MD_CACHE_MAX) mdCache.delete(mdCache.keys().next().value);
+  return html;
+}
+/** Tests only: forget every rendered Markdown. */
+export function clearRenderedMarkdown() { mdCache.clear(); }
 
 /**
  * Bind a renderer to `list` (the thread element) inside `scroller`. opts: { t, tf, isUser(x), onJump({show, unseen}),
@@ -45,6 +82,17 @@ export const THREAD_CHUNK = 40;
  */
 export function createThread(list, scroller, opts) {
   const nodes = new Map();          // key → { html, node }
+  // A server emoji's picture that does not load reads `:name:` (its alt) instead of an empty box (error does not bubble:
+  // caught on the way down).
+  list.addEventListener("error", (e) => {
+    const img = e.target;
+    if (!img || img.tagName !== "IMG" || !img.classList || !img.classList.contains("emoji")) return;
+    const span = list.ownerDocument.createElement("span");
+    span.className = "emoji-text";
+    span.textContent = img.getAttribute("alt") || "";
+    span.title = img.getAttribute("title") || span.textContent;
+    img.replaceWith(span);
+  }, true);
   let msgs = [];
   let unseen = 0;
   // The reader is at the newest message. While pinned, content that grows after it was drawn — an image loading, a
@@ -52,12 +100,15 @@ export function createThread(list, scroller, opts) {
   // Only a move UP unpins: the browser's own scroll anchoring also fires scroll events when content grows (the view
   // moves down or stays), and those must not count as the reader leaving the bottom. Reaching the bottom pins again.
   let pinned = true;
-  let lastTop = 0;
+  // Where the view was (and how tall it was) at the last scroll the page saw or made: a move up from there unpins.
+  let lastTop = 0, lastView = 0;
+  const mark = () => { lastTop = scroller.scrollTop; lastView = scroller.clientHeight; };
   // The oldest message drawn (by key): everything after it is drawn, so new messages never push the window. Null: none
   // drawn yet — the next render draws the newest THREAD_TAIL and the rest follows (grow).
   let firstKey = null;
-  let growTimer = null, growFrame = null, disposed = false;
+  let growTimer = null, growFrame = null, disposed = false, parked = false;
   const cardRefresh = new WeakMap(); // card node → re-read availability (weak: a card that left takes its source with it)
+  const cardDrop = new WeakMap();    // card node → drop the HTML read it is waiting on (the chat left: park)
   const tr = opts.t, trf = opts.tf;
   const stopIn = (node) => (P() ? P().stopIn(node) : []);
   /** #1770: write a message node's time label for now; unchanged text is not touched. */
@@ -68,7 +119,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;
+  let offDay = null, trialTimer = 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; }
@@ -80,15 +131,17 @@ export function createThread(list, scroller, opts) {
     // #1770: the label ("17:38", "Yesterday 17:38", "10/11 17:38") depends on today, so it is not part of the html a node
     // 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>`;
+    const trial = effectTrialMessage(x);
+    if (trial) return 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).
     const ticks = u && x.delivery ? R().deliveryHtml(x.delivery, TICKS()) : "";
-    const tools = u ? "" : `<div class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
+    const tools = u ? "" : `<div data-trust="thread-control" class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
     const buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
     // A person's click on a reply button shows as the button's label, never the line the agent was given (its value).
     const clicked = x.role === "user" && x.click && typeof x.click.label === "string";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${R().renderMarkdown(x.text, { htmlCards: x.role === "agent", emojis: opts.emojis, mentions: opts.mentions })}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
+    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, opts.mentions)}</div>`}${R().attachmentsHtml(x.attachments, { htmlCards: x.role === "agent", goneTitle: tr("chat.attGone"), goneLabel: tr("chat.attUnavailable"), inlinePreviews: !PUBLIC_LINK() })}${buttons}</div>${tools}</div>`;
   }
   /**
    * A button click as a chip: 🔘 and the label (escaped: the label is the agent's text). With `of` (live, while its
@@ -97,10 +150,29 @@ export function createThread(list, scroller, opts) {
   function clickHtml(click) {
     const inner = `<span class="click-mark" aria-hidden="true">🔘</span><span class="sr-only">${escAttr(tr("chat.clicked"))} </span>${escAttr(click.label)}`;
     const of = typeof click.of === "string" && /^[0-9a-f]{32}$/.test(click.of) ? click.of : null;
-    return `<div class="click-chip">${of
+    return `<div class="click-chip" data-trust="thread-control">${of
       ? `<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;
+    const now = trialNow(), next = msgs.map(x => effectTrialMessage(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
@@ -111,10 +183,12 @@ export function createThread(list, scroller, opts) {
     const lines = R().lineCount(text);
     const manyLines = lines > STATUS_FOLD_LINES;
     const more = manyLines || text.length > STATUS_FOLD_CHARS
-      ? `<button type="button" class="st-more" data-act="toggleFold"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""}>${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}</button>`
+      ? `<button data-trust="thread-control" type="button" class="st-more" data-act="toggleFold"${manyLines ? ` data-lines="${escAttr(lines)}"` : ""}>${escAttr(manyLines ? trf("chat.showAll", lines) : tr("chat.showMore"))}</button>`
       : "";
-    const tools = `<div class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
-    return `<div class="msg status-line${more ? " folded" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${escAttr(text)}</div>${more}</div>${tools}</div>`;
+    const tools = `<div data-trust="thread-control" class="msg-tools"><button type="button" class="chip-btn icon-only" data-act="copyMsg" data-arg="${escAttr(msgKey(x))}" title="${escAttr(tr("chat.copyMessage"))}" aria-label="${escAttr(tr("chat.copyMessage"))}">${COPY}</button></div>`;
+    // #1990: the other instance's name opens its chat (an in-app link the router takes: no target).
+    const body = textLinkSegments(text, x.links).map(sg => sg.href ? `<a data-trust="link" class="st-link" href="${escAttr(sg.href)}">${escAttr(sg.text)}</a>` : escAttr(sg.text)).join("");
+    return `<div class="msg status-line${more ? " folded" : ""}"><div class="meta">${time}</div><div class="body"><div class="st-text">${body}</div>${more}</div>${tools}</div>`;
   }
   /**
    * #1266: an agent reply's buttons. Labels are text (escaped, never Markdown); the click names the set and the index,
@@ -130,7 +204,7 @@ export function createThread(list, scroller, opts) {
       return `<button type="button" class="btn btn-sm rb-btn${chosen ? " chosen" : ""}" data-act="replyButton" data-arg="${escAttr(`${b.id}:${i}`)}"${off ? " disabled" : ""}>${escAttr(chosen ? `✓ ${label}` : label)}</button>`;
     }).join("");
     const note = b.state === "chosen" ? trf("chat.rbChosen", b.by || "") : b.state === "expired" ? tr("chat.rbExpired") : "";
-    return `<div class="rb-row" role="group" aria-label="${escAttr(tr("chat.rbGroup"))}">${items}${note ? `<span class="rb-note">${escAttr(note)}</span>` : ""}</div>`;
+    return `<div data-trust="reply" class="rb-row" role="group" aria-label="${escAttr(tr("chat.rbGroup"))}">${items}${note ? `<span class="rb-note">${escAttr(note)}</span>` : ""}</div>`;
   }
   /**
    * #1823: a poll. Anyone here may click while it is open; the page marks its own vote (opts.pollMine), which no one else
@@ -151,9 +225,9 @@ export function createThread(list, scroller, opts) {
       ? escAttr(trf("chat.pollClosed", p.answered))
       : `${escAttr(trf("chat.pollAnswered", p.answered))} · ⏳ <span class="poll-left" data-deadline="${escAttr(p.deadline)}" title="${escAttr(tr("chat.pollLeft"))}"></span>`;
     const voters = closed && Array.isArray(p.voters)
-      ? `<ul class="poll-voters" aria-label="${escAttr(tr("chat.pollVoters"))}">${b.labels.map((label, i) => `<li>${escAttr(`${label}: ${(p.voters[i] || []).join(", ") || "—"}`)}</li>`).join("")}</ul>`
+      ? `<ul data-trust="reply" class="poll-voters" aria-label="${escAttr(tr("chat.pollVoters"))}">${b.labels.map((label, i) => `<li>${escAttr(`${label}: ${(p.voters[i] || []).join(", ") || "—"}`)}</li>`).join("")}</ul>`
       : "";
-    return `<div class="rb-row poll" role="group" aria-label="${escAttr(tr("chat.pollGroup"))}">${items}<span class="rb-note">${status}</span></div>${voters}`;
+    return `<div data-trust="reply" class="rb-row poll" role="group" aria-label="${escAttr(tr("chat.pollGroup"))}">${items}<span class="rb-note">${status}</span></div>${voters}`;
   }
   /** #1823: the time left on this node's open polls, now. */
   function pollLeft(node) {
@@ -187,7 +261,7 @@ export function createThread(list, scroller, opts) {
     const doc = list.ownerDocument;
     for (const pre of root.querySelectorAll(".md pre")) {
       const box = doc.createElement("div"); box.className = "codeblock";
-      const head = doc.createElement("div"); head.className = "cb-head";
+      const head = doc.createElement("div"); head.className = "cb-head"; head.setAttribute("data-trust", "thread-control");
       const lang = doc.createElement("span"); lang.className = "cb-lang"; lang.textContent = pre.dataset.lang || "text";
       const wrap = doc.createElement("button"); wrap.type = "button"; wrap.className = "chip-btn"; wrap.dataset.act = "toggleWrap"; wrap.textContent = tr("chat.wrap");
       const copy = doc.createElement("button"); copy.type = "button"; copy.className = "chip-btn"; copy.dataset.act = "copyCode"; copy.textContent = tr("chat.copy");
@@ -196,7 +270,7 @@ export function createThread(list, scroller, opts) {
       const lines = R().lineCount(pre.textContent);
       if (lines > R().CODE_FOLD_LINES) {
         box.classList.add("folded");
-        const more = doc.createElement("button"); more.type = "button"; more.className = "cb-more"; more.dataset.act = "toggleFold";
+        const more = doc.createElement("button"); more.type = "button"; more.className = "cb-more"; more.setAttribute("data-trust", "thread-control"); more.dataset.act = "toggleFold";
         more.dataset.lines = String(lines); more.textContent = trf("chat.showAll", lines);
         box.append(more);
       }
@@ -214,7 +288,7 @@ export function createThread(list, scroller, opts) {
       if (!fence) continue;
       ph.textContent = "";
       if (ph.classList.contains("truncated") || !fence.terminated) {
-        const note = doc.createElement("div"); note.className = "pv-note"; note.textContent = tr("chat.pvTruncated"); ph.append(note);
+        const note = doc.createElement("div"); note.className = "pv-note"; note.setAttribute("data-trust", "thread-control"); note.textContent = tr("chat.pvTruncated"); ph.append(note);
         continue;
       }
       buildCard(ph, x, `${msgKey(x)}:f${n}`, { n, code: fence.code }, stoppedKeys);
@@ -244,15 +318,15 @@ export function createThread(list, scroller, opts) {
     const doc = list.ownerDocument;
     const el = (tag, cls, text) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
     ph.textContent = "";
-    const head = el("div", "tc-head");
+    const head = el("div", "tc-head"); head.setAttribute("data-trust", "thread-control");
     const label = el("span", "tc-label", att.name);
     const show = el("button", "btn btn-sm tc-show", tr("chat.tcShow")); show.type = "button";
     const dl = el("a", "btn btn-sm tc-dl", tr("chat.tcDownload")); dl.href = `/ui/file/${att.id}`; dl.setAttribute("download", att.name);
     head.append(label, show, dl);
-    const note = el("div", "pv-note");
+    const note = el("div", "pv-note"); note.setAttribute("data-trust", "thread-control");
     const body = el("div", "tc-body"); body.hidden = true;
     ph.append(head, note, body);
-    let text = null, reading = false, all = false;
+    let text = null, reading = 0, reads = 0, all = false;
     const draw = () => {
       body.textContent = "";
       const lines = text.split(/\r?\n/);
@@ -262,7 +336,8 @@ export function createThread(list, scroller, opts) {
       // Formatting is built only within TEXT_PREVIEW_NODES: the markup is measured as a string first, never as DOM.
       const plain = () => {
         const pre = el("pre", "tc-pre"), code = el("code", null, src);
-        pre.append(code); body.append(el("div", "pv-note", tr("chat.tcPlain")), pre);
+        const note = el("div", "pv-note", tr("chat.tcPlain")); note.setAttribute("data-trust", "thread-control");
+        pre.append(code); body.append(note, pre);
       };
       if (type === "md") {
         const html = R().renderMarkdown(src);
@@ -282,17 +357,20 @@ export function createThread(list, scroller, opts) {
         }
       }
       if (cut) {
-        const more = el("button", "btn btn-sm tc-more", trf("chat.tcShowAll", lines.length)); more.type = "button";
+        const more = el("button", "btn btn-sm tc-more", trf("chat.tcShowAll", lines.length)); more.setAttribute("data-trust", "thread-control"); more.type = "button";
         more.onclick = () => { all = true; draw(); };
         body.append(more);
       }
     };
+    // #2053: as an HTML card's read (cardDrop), one still waiting when the chat left is dropped, the card not left Loading.
+    cardDrop.set(ph, () => { if (reading) { reading = 0; note.textContent = ""; } });
     show.onclick = async () => {
       if (reading) return;
       if (text !== null) { body.hidden = !body.hidden; show.textContent = tr(body.hidden ? "chat.tcShow" : "chat.tcHide"); return; }
-      reading = true; note.textContent = tr("chat.pvLoading");
+      const mine = reading = ++reads; note.textContent = tr("chat.pvLoading");
       const r = await loadHtmlAttachment({ id: att.id, name: att.name, size: att.size });
-      reading = false;
+      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
       if (!r.ok) { note.textContent = r.reason === "over" ? tr("chat.tcOver") : attReason(r.reason); return; }
       note.textContent = "";
@@ -343,7 +421,7 @@ export function createThread(list, scroller, opts) {
     const el = (tag, cls, text) => { const e = doc.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; };
     const att = source.att || null;
     let code = att ? null : source.code;
-    const head = el("div", "pv-head");
+    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";
     const stopB = el("button", "btn btn-sm pv-stop", tr("chat.pvStop")); stopB.type = "button"; stopB.hidden = true;
@@ -353,15 +431,15 @@ export function createThread(list, scroller, opts) {
     const panel = opts.panel || null;
     const toPanel = panel ? el("button", "btn btn-sm btn-ghost pv-open", tr("chat.pvOpenPanel")) : null;
     if (toPanel) toPanel.type = "button";
-    const menu = el("details", "pv-menu");
+    const menu = el("details", "pv-menu"); menu.setAttribute("data-trust", "preview-menu");
     const sum = el("summary", null, "⋯"); sum.title = tr("chat.pvMenu"); sum.setAttribute("aria-label", tr("chat.pvMenu"));
     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);
-    const note = el("div", "pv-note");
+    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.hidden = true;
+    const banner = el("div", "pv-banner"); banner.setAttribute("data-trust", "thread-control"); banner.hidden = true;
     const ack = el("button", "btn btn-sm btn-ghost pv-ack", P().bannerAckLabel()); ack.type = "button"; ack.title = P().bannerAckTitle();
     banner.append(el("span", "pv-banner-text", P().banner()), ack);
     const holder = el("div", "pv-holder");
@@ -430,6 +508,10 @@ export function createThread(list, scroller, opts) {
     optB.onclick = () => { menu.open = false; opts.setPreviewOptIn(!P().optedIn()); };
     neverB.onclick = () => { menu.open = false; P().setNever(!P().never()); refreshCards(); };
     cardRefresh.set(ph, refresh);
+    // #2053: a kept card is shown again later. A read still waiting when its chat left is dropped then: its answer —
+    // whenever it comes — starts nothing (no preview, no panel without a new click), and the card is not left Loading
+    // (shown again, it is refreshed: refreshCards).
+    cardDrop.set(ph, () => { reading = 0; });
     refresh(stoppedKeys.includes(key) ? tr("chat.pvChanged") : null);
   }
   /** Re-read this device's preview choice on every card in this thread. */
@@ -444,12 +526,32 @@ export function createThread(list, scroller, opts) {
   // newest bubble clipped behind it, and the next growth past 48 px put the pill over it.
   const atBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight, 1);
   function reportJump() { opts.onJump({ show: !nearBottom(), unseen }); }
-  function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; lastTop = scroller.scrollTop; }
+  function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; mark(); }
   // Sizes change without a scroll event (layout after the render, the dock under the thread): while pinned, the view
   // stays flush with the bottom; a reader who scrolled up is never moved.
   const resized = () => { if (pinned && !atBottom()) toBottom(); reportJump(); };
-  const ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
+  let ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
   if (ro) { ro.observe(list); ro.observe(scroller); }
+  // #2158: the reader's own hand on the thread — a wheel, a touch, the scrollbar (a pointer held), a scrolling key
+  // outside a text field — and the scroll that follows it until it has been quiet READER_QUIET_MS.
+  let inputAt = -Infinity, held = false;
+  const touched = () => { inputAt = performance.now(); };
+  const hold = (on) => () => { held = on; touched(); };
+  const onKey = (ev) => {
+    const el = ev.target;
+    if (SCROLL_KEYS.has(ev.key) && !(el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName || "")))) touched();
+  };
+  const onScroller = [["wheel", touched], ["touchstart", hold(true)], ["touchend", hold(false)], ["touchcancel", hold(false)], ["pointerdown", hold(true)]];
+  const onDocument = [["pointerup", hold(false)], ["pointercancel", hold(false)], ["keydown", onKey]];
+  /** Listen for the reader's input on `sc` (and its document: a pointer let go anywhere, a key), or stop. */
+  function watchReader(sc, on) {
+    const doc = sc.ownerDocument, how = on ? "addEventListener" : "removeEventListener";
+    for (const [type, fn] of onScroller) sc[how](type, fn, { passive: true });
+    if (doc) for (const [type, fn] of onDocument) doc[how](type, fn, true);
+    if (!on) held = false;
+  }
+  const readerActive = () => held || performance.now() - inputAt < READER_QUIET_MS;
+  watchReader(scroller, true);
 
   /** Where drawing starts in `msgs`: at the oldest drawn message, or (none yet) the newest THREAD_TAIL. */
   function startIndex() {
@@ -463,14 +565,14 @@ export function createThread(list, scroller, opts) {
   /** Draw the next chunk of older messages, keeping the reader where they were; then the next, until all are drawn. */
   function grow() {
     growTimer = growFrame = null;
-    if (disposed) return;                 // the chat left: nothing more is drawn
+    if (disposed || parked) return;       // the chat left: nothing more is drawn (a kept one fills in when shown again)
     const at = startIndex();
     if (at <= 0) return;
     firstKey = msgKey(msgs[Math.max(0, at - THREAD_CHUNK)]);
     const fromBottom = scroller.scrollHeight - scroller.scrollTop;
     draw({ older: true });                // drawn above the reader: never "new below" (render alone counts those)
     if (pinned) toBottom();
-    else { scroller.scrollTop = scroller.scrollHeight - fromBottom; lastTop = scroller.scrollTop; }
+    else { scroller.scrollTop = scroller.scrollHeight - fromBottom; mark(); }
     scheduleGrow();
   }
   /** After the next frame has painted (the click's own frame stays light), draw a chunk more. */
@@ -493,6 +595,7 @@ 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();
@@ -510,7 +613,7 @@ export function createThread(list, scroller, opts) {
     if ("restore" in renderOpts) {
       unseen = 0;
       if (renderOpts.restore == null) toBottom();
-      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); lastTop = scroller.scrollTop; }
+      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); mark(); }
     } else if (stick) toBottom();
     else unseen += added;
     reportJump();
@@ -531,7 +634,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 }; nodes.set(key, have);
+        have = { html, node, x, trialButton: node.querySelector(".effect-trial-offer > button.effect-trial-start") }; 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.
@@ -544,10 +647,23 @@ export function createThread(list, scroller, opts) {
   }
 
   function onScroll() {
+    // #2158: the thread got shorter under a pinned view (text settling on a cold load, a card) and the browser clamped
+    // scrollTop to its new end — for the view as tall as it was then; the view got shorter too before WebKit sent that
+    // clamp's scroll event (it comes before the ResizeObserver). A view resting exactly at the bottom of the view as it
+    // was at the last mark, with no hand of the reader's on the thread, was put there by the browser: still pinned, back
+    // at the bottom. Geometry alone can't tell (a reader's move up by the dock's growth lands there too): any input of
+    // theirs, and the scroll after it, is theirs and unpins as before. The page's own scrolls (reveal) have no input but
+    // don't land there.
+    const reader = readerActive();
+    if (reader) touched();                // the reader's scroll goes on (smooth, momentum): still theirs while it does
+    else if (pinned && !atBottom() && Math.abs(scroller.scrollHeight - lastView - scroller.scrollTop) <= 1) toBottom();
     const bottom = nearBottom(), top = scroller.scrollTop;
-    if (bottom) pinned = true;
+    // #2087: pinned only at the exact bottom — a reader still wheeling through the last 48 px was pinned there, so
+    // the next resize (a picture, a card, the dock) pulled the view the rest of the way down under them. Near the bottom
+    // still counts for a new message (render follows it) and for the pill; nothing else moves a view the reader moves.
+    if (atBottom()) pinned = true;
     else if (top < lastTop) pinned = false;
-    lastTop = top;
+    mark();
     if (bottom) unseen = 0;
     reportJump();
     return bottom ? null : scroller.scrollTop;
@@ -605,18 +721,56 @@ 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 = effectTrialMessage(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)); }
   }
 
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
-  function dispose() {
+  /**
+   * #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
+   * caller drops its subscriptions. Shown again: attach, then render — only what changed is drawn.
+   */
+  function park() {
+    parked = true;
+    watchReader(scroller, false);
+    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;
+    if (offDay) { offDay(); offDay = null; }
+    if (pollTick) { clearInterval(pollTick); pollTick = null; }
+  }
+  /** In view in `sc` (the view's scroller): sizes watched there from now on; the caller restores the position. */
+  function attach(sc) {
+    if (!parked) watchReader(scroller, false);   // moved from the scroller it was made with
+    parked = false;
+    scroller = sc;
+    watchReader(sc, true);
+    if (ro) ro.disconnect();
+    ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
+    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. */
+  function dispose(own = false) {
     disposed = true;
+    if (!parked) watchReader(scroller, false);
+    if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
     if (ro) ro.disconnect();
-    if (P()) P().stopAll("leave");
+    if (P()) { if (own) P().stopIn(list); else P().stopAll("leave"); }
     nodes.clear();
     armDay();
     armPolls();
   }
 
-  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, dispose, nodes, get unseen() { return unseen; } };
+  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
 }

package/dist/ui/chat-tour.js

@@ -58,7 +58,7 @@ function show(i) {
   if (spot) spot.classList.add("tour-spot");
   let card = byId("tour");
   if (!card) {
-    card = document.createElement("section"); card.id = "tour"; card.className = "tour";
+    card = document.createElement("section"); card.id = "tour"; card.className = "tour"; card.setAttribute("data-trust", "tour");
     card.setAttribute("role", "dialog"); card.setAttribute("aria-labelledby", "tourTitle");
     card.addEventListener("click", onCardClick);
     document.body.appendChild(card);

package/dist/ui/effect-trial-controller.js

@@ -0,0 +1,124 @@
+/** #1629: explicit-click control lane. Responses never grant authority; Start reauthorizes on the server. */
+import { effectTrialMessage } from "./effect-trial-offer.js";
+import { checkEffectTrialStart } from "/assets/effect-runtime-loader.js";
+import { chatEffectIdentity } from "/assets/effect-chat-runtime.js";
+const owners = new WeakSet(), safe = fn => { try { return fn(); } catch { return null; } };
+const LIMIT = 128 * 1024;
+export function createEffectTrialController({ window: host, current, allowed, onStart, onChange = () => {} }) {
+  let dead = false, active = null, physical = null, previous = null, broken = false, clockBusy = false, endedReason = null, endedOffer = null;
+  const cleanup = [], releases = [], identity = safe(() => chatEffectIdentity(host));
+  const tell = () => { if (!dead) safe(onChange); };
+  function clock() {
+    if (broken || clockBusy) { broken = true; return null; }
+    clockBusy = true; const t = safe(() => host.performance.now()); clockBusy = false;
+    if (broken || typeof t !== "number" || !Number.isFinite(t) || t < 0 || t > Number.MAX_SAFE_INTEGER || previous !== null && t < previous) { broken = true; return null; }
+    return previous = t;
+  }
+  function eligible(op) {
+    if (dead || broken || !op || active !== op || op.dead || op.checking || host.AgendAuth?.sessionEnded?.() !== false) return false;
+    op.checking = true;
+    try {
+      const t = clock();
+      if (t === null || t < op.began || t >= op.until || safe(() => current(op.instance) === true && allowed() === true) !== true) return false;
+      const after = clock();
+      return !dead && !op.dead && active === op && after !== null && after >= op.began && after < op.until;
+    } finally { op.checking = false; }
+  }
+  function end(op, reason = "stopped") {
+    if (!op || op.dead) return false;
+    op.dead = true; if (active === op) active = null;
+    endedReason = typeof reason === "string" && /^[a-z][a-z0-9_]{0,79}$/.test(reason) ? reason : "trial_failed";
+    endedOffer = op.offer.offer;
+    safe(() => op.resolve?.(false));
+    safe(() => host.clearTimeout(op.timer)); safe(() => op.controller.abort());
+    if (op.reply && !op.stopQueued) { op.stopQueued = true; cleanup.push(op); }
+    // Physical paint is removed before callbacks, cleanup I/O or another explicit click.
+    safe(() => op.dispose?.()); op.dispose = null;
+    if (!["stopped", "replaced"].includes(endedReason)) safe(() => host.console?.warn("[AgEnD effects] Try stopped:", endedReason));
+    tell(); drain(); return true;
+  }
+  function arm(op) {
+    safe(() => host.clearTimeout(op.timer));
+    if (!eligible(op)) { end(op, "trial_ended"); return; }
+    const t = clock(); if (t === null || t >= op.until) { end(op, "trial_expired"); return; }
+    op.timer = host.setTimeout(() => { if (!op.dead) arm(op); }, Math.max(1, Math.ceil(op.until - t)));
+  }
+  async function read(response) {
+    let reader = null;
+    try {
+      if (!response || response.redirected || response.status !== 200 || !/^application\/json(?:\s*;|$)/i.test(response.headers.get("content-type") || "")) return null;
+      const length = response.headers.get("content-length"); if (length !== null && (!/^\d+$/.test(length) || Number(length) > LIMIT)) return null;
+      reader = response.body?.getReader(); if (!reader) return null;
+      const chunks = []; let size = 0;
+      for (;;) { const r = await reader.read(); if (r.done) break; if (!(r.value instanceof Uint8Array) || (size += r.value.byteLength) > LIMIT) return null; chunks.push(r.value); }
+      const bytes = new Uint8Array(size); let offset = 0; for (const c of chunks) { bytes.set(c, offset); offset += c.byteLength; }
+      return JSON.parse(new TextDecoder("utf-8", { fatal: true }).decode(bytes));
+    } catch { return null; }
+    finally { try { if (reader) await reader.cancel(); else await response?.body?.cancel(); } catch { /* retained until cancellation settles */ } }
+  }
+  function drain() {
+    if (physical || !cleanup.length) return;
+    const op = cleanup.shift(), token = {}; physical = token; const controller = new host.AbortController();
+    const timer = host.setTimeout(() => controller.abort(), 10000);
+    // Stop remains permitted after CSS/gate/session changes. It cannot mount or mutate appearance.
+    Promise.resolve().then(async () => {
+      const response = await host.fetch(`/ui/effect-trials/${op.reply.trial}/stop?ownerEpoch=${identity.epoch}`, {
+        method: "POST", credentials: "same-origin", cache: "no-store", redirect: "error", headers: { "Content-Type": "application/json" }, body: "{}", signal: controller.signal,
+      });
+      try { await response.body?.cancel(); } catch { /* no response fields are consumed */ }
+    }).catch(() => {}).finally(() => { safe(() => host.clearTimeout(timer)); if (physical === token) physical = null; tell(); drain(); });
+  }
+  function dispose() {
+    if (dead) return; dead = true; end(active); for (const off of releases.splice(0)) safe(off); tell();
+  }
+  const api = { ok: false, start: async () => false, stop: () => end(active), sync() { const op = active; if (op && !eligible(op)) end(op, "trial_ended"); },
+    snapshot: () => Object.freeze({ busy: !!physical || cleanup.length > 0, phase: active ? active.reply ? "running" : "starting" : "idle", reason: active ? null : endedReason, offer: active ? active.offer.offer : endedOffer }), dispose };
+  if (!identity || owners.has(host) || typeof current !== "function" || typeof allowed !== "function" || typeof onStart !== "function"
+    || typeof host.AgendAuth?.trialSession !== "function" || typeof host.AgendAuth?.onSessionEnd !== "function") return Object.freeze(api);
+  owners.add(host);
+  try {
+    const off = host.AgendAuth.onSessionEnd(dispose);
+    if (dead) { safe(off); return Object.freeze(api); }
+    releases.push(off);
+    for (const [target, type, fn] of [[host, "blur", () => end(active, "trial_window_blur")], [host, "pagehide", dispose], [host.document, "visibilitychange", () => { if (host.document.visibilityState !== "visible") end(active, "hidden"); }]]) {
+      target.addEventListener(type, fn); releases.push(() => target.removeEventListener(type, fn));
+    }
+  } catch { dispose(); return Object.freeze(api); }
+  if (dead) return Object.freeze(api);
+  api.ok = true;
+  api.start = async message => {
+    if (dead || active || physical || cleanup.length) return false;
+    const offer = safe(() => effectTrialMessage(message)), instance = safe(() => message.instance), began = clock();
+    if (!offer || began === null || began + 10000 > Number.MAX_SAFE_INTEGER || safe(() => host.Date.now() < offer.expiresAt) !== true) return false;
+    const op = { instance, offer, began, until: began + 10000, controller: new host.AbortController(), timer: null, reply: null, dead: false, stopQueued: false, dispose: null };
+    endedReason = null; endedOffer = null; active = op; const token = {}; physical = token;
+    const cancelled = new Promise(resolve => { op.resolve = resolve; });
+    const work = Promise.resolve().then(async () => {
+      if (!eligible(op)) return false;
+      arm(op); const session = await host.AgendAuth.trialSession();
+      if (!eligible(op) || !session || session.localAdmin !== true || session.epoch !== identity.epoch) return false;
+      const response = await host.fetch(`/ui/effect-trials/start?ownerEpoch=${identity.epoch}`, {
+        method: "POST", credentials: "same-origin", cache: "no-store", redirect: "error", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ offer: offer.offer, instance }), signal: op.controller.signal,
+      });
+      const reply = checkEffectTrialStart(await read(response), offer.offer, offer.id);
+      if (!reply) return false;
+      op.reply = reply;
+      if (op.dead && !op.stopQueued) { op.stopQueued = true; cleanup.push(op); }
+      if (reply.offer.title !== offer.title || reply.offer.expiresAt !== offer.expiresAt) return false;
+      if (!eligible(op)) { if (!op.stopQueued) { op.stopQueued = true; cleanup.push(op); } return false; }
+      op.until = began + reply.remainingMs;
+      if (op.until > Number.MAX_SAFE_INTEGER || !eligible(op)) return false;
+      arm(op);
+      const handle = Object.freeze({ reply, startedAt: began, instance, current: () => eligible(op), stop: (reason = "stopped") => end(op, reason), });
+      const disposer = onStart(handle);
+      if (typeof disposer !== "function") return false;
+      if (!eligible(op)) { safe(disposer); return false; }
+      op.dispose = disposer; tell(); return eligible(op);
+    }).catch(() => false).then(ok => { if (!ok) end(op, "trial_start_failed"); return ok; }).finally(() => { if (physical === token) physical = null; tell(); drain(); });
+    // The logical caller may stop immediately, while the physical request/cancel still owns the lane.
+    tell();
+    return Promise.race([work, cancelled]);
+  };
+  return Object.freeze(api);
+}