@songsid/agend 2.2.0-beta.9 → 2.3.0-beta.1

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">). */
@@ -31,6 +33,12 @@ const COPY = '<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill=
 /** Escapes & " ' < >: safe for text and inside a quoted attribute. */
 export function escAttr(s) { return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
 export const msgKey = (x) => `${x.boot}-${x.id}`;
+/**
+ * Board 00ef2430: a thread opens with only its newest messages drawn — enough for a screen — so switching chats paints
+ * at once; the older ones are drawn after that, a chunk at a time between frames, the reader's place kept.
+ */
+export const THREAD_TAIL = 24;
+export const THREAD_CHUNK = 40;
 
 /**
  * Bind a renderer to `list` (the thread element) inside `scroller`. opts: { t, tf, isUser(x), onJump({show, unseen}),
@@ -47,6 +55,10 @@ export function createThread(list, scroller, opts) {
   // 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;
+  // 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;
   const cardRefresh = new WeakMap(); // card node → re-read availability (weak: a card that left takes its source with it)
   const tr = opts.t, trf = opts.tf;
   const stopIn = (node) => (P() ? P().stopIn(node) : []);
@@ -58,7 +70,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; }
@@ -70,13 +82,39 @@ 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) : "";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body"><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>`;
+    // 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>`;
+  }
+  /**
+   * A button click as a chip: 🔘 and the label (escaped: the label is the agent's text). With `of` (live, while its
+   * reply is in this thread) it is a button that shows that reply; restored from disk, plain.
+   */
+  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" 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; } }
+  function trialHtml(offer, time, message) {
+    const expired = trialNow() >= offer.expiresAt, available = !PUBLIC_LINK() && !expired && opts.canTryEffect?.(message) === true;
+    const button = available ? `<button type="button" class="btn btn-sm effect-trial-start" data-act="effectTrial" data-arg="${escAttr(msgKey(message))}">${escAttr(tr("chat.effectTrialStart"))}</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(expired ? "chat.effectTrialExpired" : "chat.effectTrialLocal"))}</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,
@@ -88,10 +126,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,
@@ -99,6 +139,7 @@ export function createThread(list, scroller, opts) {
    */
   function replyButtonsHtml(b) {
     if (!b || typeof b.id !== "string" || !Array.isArray(b.labels) || !b.labels.length) return "";
+    if (b.poll && typeof b.poll === "object") return pollHtml(b);
     const busy = !!(opts.replyButtonBusy && opts.replyButtonBusy(b.id));
     const off = b.state !== "open" || busy;
     const items = b.labels.map((label, i) => {
@@ -106,14 +147,53 @@ 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
+   * sees. Counts only when the server sends them (revealed: live, or closed); names only at close with show_voters. The
+   * time left is not in the html (a node is kept by its html): pollLeft writes it, every second.
+   */
+  function pollHtml(b) {
+    const p = b.poll, closed = b.state === "closed";
+    const busy = !!(opts.replyButtonBusy && opts.replyButtonBusy(b.id));
+    const mine = (opts.pollMine && opts.pollMine(b.id)) || [];
+    const counts = Array.isArray(p.counts) && p.counts.length === b.labels.length ? p.counts : null;
+    const items = b.labels.map((label, i) => {
+      const me = !closed && mine.includes(i);
+      const tally = counts ? ` · ${counts[i]}${closed && p.answered ? ` (${Math.round((counts[i] / p.answered) * 100)}%)` : ""}` : "";
+      return `<button type="button" class="btn btn-sm rb-btn${me ? " chosen" : ""}" data-act="replyButton" data-arg="${escAttr(`${b.id}:${i}`)}" aria-pressed="${me ? "true" : "false"}"${closed || busy ? " disabled" : ""}>${escAttr(`${me ? "✓ " : ""}${label}${tally}`)}</button>`;
+    }).join("");
+    const status = closed
+      ? 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 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 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) {
+    for (const el of node.querySelectorAll(".poll-left[data-deadline]")) {
+      const v = R().pollRemaining(Number(el.dataset.deadline) - (opts.serverNow ? opts.serverNow() : Date.now()));
+      if (el.textContent !== v) el.textContent = v;
+    }
+  }
+  // #1823: while an open poll is on screen, its time left is rewritten every second.
+  let pollTick = null;
+  function armPolls() {
+    const open = nodes.size > 0 && !!list.querySelector(".poll-left[data-deadline]");
+    if (open && !pollTick) pollTick = setInterval(() => pollLeft(list), 1000);
+    else if (!open && pollTick) { clearInterval(pollTick); pollTick = null; }
   }
+
   function msgNode(html, x, stoppedKeys) {
     const tpl = list.ownerDocument.createElement("template");
     tpl.innerHTML = html;
     const node = tpl.content.firstElementChild;
     decorateCode(node);
     timeLabel(node);
+    pollLeft(node);
     if (x) decorateHtmlCards(node, x, stoppedKeys || []);
     if (x) decorateTextCards(node, x);
     return node;
@@ -124,7 +204,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");
@@ -133,7 +213,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);
       }
@@ -151,7 +231,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);
@@ -181,12 +261,12 @@ 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;
@@ -199,7 +279,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);
@@ -219,7 +300,7 @@ 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);
       }
@@ -280,7 +361,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;
@@ -290,15 +371,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");
@@ -388,44 +469,97 @@ export function createThread(list, scroller, opts) {
   const ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
   if (ro) { ro.observe(list); ro.observe(scroller); }
 
+  /** Where drawing starts in `msgs`: at the oldest drawn message, or (none yet) the newest THREAD_TAIL. */
+  function startIndex() {
+    const i = firstKey === null ? -1 : msgs.findIndex((x) => msgKey(x) === firstKey);
+    // Whatever is drawn stays drawn: the list may have reordered (merged across fleet restarts) or lost its oldest to
+    // the cap — so the window starts at the earlier of the oldest drawn key and the first message still drawn.
+    const still = nodes.size ? msgs.findIndex((x) => nodes.has(msgKey(x))) : -1;
+    const at = [i, still].filter((n) => n >= 0);
+    return at.length ? Math.min(...at) : Math.max(0, msgs.length - THREAD_TAIL);
+  }
+  /** 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
+    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; }
+    scheduleGrow();
+  }
+  /** After the next frame has painted (the click's own frame stays light), draw a chunk more. */
+  function scheduleGrow() {
+    if (growTimer !== null || growFrame !== null || startIndex() <= 0) return;
+    const later = () => { growFrame = null; growTimer = setTimeout(grow, 0); };
+    if (typeof requestAnimationFrame === "function") growFrame = requestAnimationFrame(later); else later();
+  }
+  /** Everything drawn now (a remembered scroll position, a message to show that is not drawn yet). */
+  function growAll() {
+    if (startIndex() <= 0) return;
+    if (growFrame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(growFrame);
+    if (growTimer !== null) clearTimeout(growTimer);
+    growTimer = growFrame = null;
+    firstKey = msgs.length ? msgKey(msgs[0]) : null;
+    draw({ older: true });
+  }
+
   /** Draw `next` (this instance's messages). `restore`: the scroll position to return to (null = the bottom). */
   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();
+      firstKey = null;
       armDay();
       list.textContent = "";
       opts.onEmpty(true);
       return;
     }
     opts.onEmpty(false);
-    const keep = new Set(msgs.map(msgKey));
+    // A position to return to that is not the bottom needs the messages above it: all of them, at once (as before).
+    if ("restore" in renderOpts && renderOpts.restore != null) firstKey = msgKey(msgs[0]);
+    const added = draw({});
+    if (firstKey === null || startIndex() > 0) { firstKey = msgKey(msgs[startIndex()]); scheduleGrow(); }
+    if ("restore" in renderOpts) {
+      unseen = 0;
+      if (renderOpts.restore == null) toBottom();
+      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); lastTop = scroller.scrollTop; }
+    } else if (stick) toBottom();
+    else unseen += added;
+    reportJump();
+  }
+  /** Put the messages from startIndex() on in the list (nodes reused when unchanged). Returns how many are new. */
+  function draw(drawOpts) {
+    const shown = msgs.slice(startIndex());
+    const keep = new Set(shown.map(msgKey));
     for (const [k, v] of nodes) if (!keep.has(k)) { stopIn(v.node); v.node.remove(); nodes.delete(k); }
     let prev = null, added = 0;
-    for (const x of msgs) {
-      const key = msgKey(x), html = msgHtml(x);
+    for (const x of shown) {
+      const key = msgKey(x);
       let have = nodes.get(key);
+      // Filling in older messages: a node drawn from this very message object is current — not drawn again.
+      if (drawOpts.older && have && have.x === x) { prev = have.node; continue; }
+      const html = msgHtml(x);
       if (!have || have.html !== html) {
         const stopped = have ? stopIn(have.node) : [];
         const node = msgNode(html, x, stopped);
         if (have) have.node.replaceWith(node); else added++;
-        have = { html, node }; nodes.set(key, have);
-      } else timeLabel(have.node);
+        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.
       if (have.node !== want) { if (have.node.parentNode === list) stopIn(have.node); list.insertBefore(have.node, want); }
       prev = have.node;
     }
     armDay();
-    if ("restore" in renderOpts) {
-      unseen = 0;
-      if (renderOpts.restore == null) toBottom();
-      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); lastTop = scroller.scrollTop; }
-    } else if (stick) toBottom();
-    else unseen += added;
-    reportJump();
+    armPolls();
+    return added;
   }
 
   function onScroll() {
@@ -440,6 +574,7 @@ export function createThread(list, scroller, opts) {
   function jumpLatest() { toBottom(); unseen = 0; reportJump(); }
   /** Show one message (the panel's "from …" link, #1481): scrolled into view and briefly marked. */
   function reveal(key) {
+    if (!nodes.has(key) && msgs.some((x) => msgKey(x) === key)) growAll();     // an older message not drawn yet
     const have = nodes.get(key); if (!have) return false;
     if (typeof have.node.scrollIntoView === "function") have.node.scrollIntoView({ block: "center" });
     have.node.classList.add("flash");
@@ -489,15 +624,24 @@ 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 || opts.canTryEffect?.(row) !== true) return;
+      opts.startEffectTrial?.(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() {
+    disposed = true;
+    if (trialTimer !== null) clearTimeout(trialTimer); trialTimer = null;
     if (ro) ro.disconnect();
     if (P()) P().stopAll("leave");
     nodes.clear();
     armDay();
+    armPolls();
   }
 
   return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, dispose, nodes, get unseen() { return unseen; } };

package/dist/ui/chat-tour.js

@@ -1,7 +1,8 @@
-// #1366: the first sign-in tour, in the app shell (#1408). Shown once on this device (agend_tour_done), dismissed by
-// Got it, Skip or Esc, and replayed from Tour in the sidebar. A card that outlines one thing at a time: no overlay,
-// nothing blocked, and no style attribute — the outline is a class (#1300). When this browser's storage cannot be read
-// it is not shown at all: a tour that comes back on every load is worse than none.
+// #1366: the chat tour, in the app shell (#1408). Since #1854 (rank 6) it never starts by itself: a first visit opens
+// on a quiet page, and Settings → This device → Chat tour starts it on an agent's chat. It walks only the steps whose
+// target is on the page. Got it, Skip or Esc ends it and records it (agend_tour_done, kept as before: no new key). A
+// card that outlines one thing at a time: no overlay, nothing blocked, and no style attribute — the outline is a class
+// (#1300).
 //
 // Esc order: the phone drawer covers the card, so it closes first (the shell); then the tour; only then may Esc reach
 // the chat and stop a reply. The Esc that closed the tour is spent: its key repeats (a held key) must not go on to stop
@@ -24,6 +25,8 @@ const STEPS = [
     : document.querySelector(".badge-await") || byId("instanceList")) },
 ];
 let at = -1, spot = null, returnTo = null, escHeld = false, installed = false;
+/** The steps of the running tour: those whose target was on the page when it started (#1854: target-aware). */
+let steps = STEPS;
 
 export function tourDone() { try { return localStorage.getItem(TOUR_KEY) === "1"; } catch { return true; } }
 export function tourStep() { return at; }
@@ -32,13 +35,15 @@ export function startTour() {
   // Replayed from the drawer: the drawer closes first (focus goes back to ☰), so the card is seen.
   closeDrawer();
   if (at < 0) returnTo = document.activeElement;
+  steps = STEPS.filter((s) => s.spot());
+  if (!steps.length) return;
   show(0);
 }
 
 /** The current step's outline follows a redraw (a new badge, Send swapped for Stop reply) — same card, same focus. */
 export function refreshTourSpot() {
   if (at < 0) return;
-  const next = STEPS[at].spot() || null;
+  const next = steps[at].spot() || null;
   if (next === spot && (!next || next.classList.contains("tour-spot"))) return;
   if (spot) spot.classList.remove("tour-spot");
   spot = next;
@@ -46,32 +51,32 @@ export function refreshTourSpot() {
 }
 
 function show(i) {
-  if (i < 0 || i >= STEPS.length) return;
+  if (i < 0 || i >= steps.length) return;
   at = i;
   if (spot) spot.classList.remove("tour-spot");
-  spot = STEPS[i].spot() || null;
+  spot = steps[i].spot() || null;
   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);
   }
   card.textContent = "";
   const title = document.createElement("h2"); title.id = "tourTitle"; title.textContent = t("chat.tourTitle");
-  const text = document.createElement("p"); text.className = "tour-text"; text.setAttribute("aria-live", "polite"); text.textContent = t(STEPS[i].text);
+  const text = document.createElement("p"); text.className = "tour-text"; text.setAttribute("aria-live", "polite"); text.textContent = t(steps[i].text);
   const foot = document.createElement("div"); foot.className = "tour-foot";
-  const count = document.createElement("span"); count.className = "tour-count"; count.textContent = t("chat.tourStep", i + 1, STEPS.length);
+  const count = document.createElement("span"); count.className = "tour-count"; count.textContent = t("chat.tourStep", i + 1, steps.length);
   const button = (label, act, arg, cls) => {
     const b = document.createElement("button"); b.type = "button"; b.className = `btn btn-sm ${cls}`; b.dataset.tour = act;
     if (arg != null) b.dataset.arg = String(arg);
     b.textContent = t(label); return b;
   };
   foot.append(count);
-  if (i < STEPS.length - 1) foot.append(button("chat.tourSkip", "end", null, "btn-ghost"));
+  if (i < steps.length - 1) foot.append(button("chat.tourSkip", "end", null, "btn-ghost"));
   if (i > 0) foot.append(button("chat.tourBack", "move", -1, "btn-ghost"));
-  const next = i < STEPS.length - 1 ? button("chat.tourNext", "move", 1, "btn-primary") : button("chat.tourDone", "end", null, "btn-primary");
+  const next = i < steps.length - 1 ? button("chat.tourNext", "move", 1, "btn-primary") : button("chat.tourDone", "end", null, "btn-primary");
   foot.append(next);
   card.append(title, text, foot);
   next.focus();
@@ -105,12 +110,10 @@ export function onTourKey(e) {
   if (at >= 0) { e.preventDefault(); e.stopPropagation(); endTour(); escHeld = true; }
 }
 
-/** Once per page: the key handler, the language follow-up, and the first showing on a device that has not seen it. */
+/** Once per page: the key handler and the language follow-up. Nothing is shown: the tour is started by a person (#1854). */
 export function installTour() {
   if (installed) return;
   installed = true;
   document.addEventListener("keydown", onTourKey, true);
   onLang(() => { if (at >= 0) show(at); });
-  // Shown first on the chat (it points at the chat's own controls), never over View or another panel.
-  if (!tourDone() && /^\/ui(\/chat\/|$)/.test(location.pathname)) setTimeout(startTour, 0);
 }

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

@@ -0,0 +1,119 @@
+/** #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;
+  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; 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; 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" }), 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)], [host, "pagehide", dispose], [host.document, "visibilitychange", () => { if (host.document.visibilityState !== "visible") end(active); }]]) {
+      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 };
+    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: () => end(op), });
+      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); 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);
+}