@songsid/agend 2.2.0-beta.2 → 2.2.0-beta.20

package/dist/ui/chat-thread.js

@@ -9,6 +9,7 @@
 import "./chat-render.js";
 import "./preview.js";
 import { loadHtmlAttachment } from "./html-attachment.js";
+import { chatTime, chatTimeFull, onDayChange } from "./chat-time.js";
 
 const R = () => globalThis.AgendChatRender;
 /** #1589: the public link shows attachments as downloads only (its page says so: <body data-public-link="1">). */
@@ -22,16 +23,25 @@ export const TEXT_PREVIEW_NODES = 4000;
 /** A csv/tsv wider than this is shown as text, as Markdown tables are capped at 20 columns. */
 export const TEXT_PREVIEW_COLUMNS = 50;
 const P = () => globalThis.AgendPreview;
+/** #1672: a status line longer than this (lines, or characters) is folded until it is opened. */
+export const STATUS_FOLD_LINES = 6;
+export const STATUS_FOLD_CHARS = 600;
 const COPY = '<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" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
 /** 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}),
  * setPreviewOptIn(on), copyText(text) → Promise<boolean>, download(code), panel? }. panel (#1481): { shown() → the card
- * key the side panel shows, or null; open(spec, { run }) } — without it a card has no "Open in panel".
+ * key the side panel shows, or null; open(spec, { run }); version(); claim(); claims() } — without it a card has no "Open in panel".
  */
 export function createThread(list, scroller, opts) {
   const nodes = new Map();          // key → { html, node }
@@ -43,20 +53,68 @@ 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) : []);
+  /** #1770: write a message node's time label for now; unchanged text is not touched. */
+  function timeLabel(node) {
+    const el = node.querySelector(".meta .time[data-ts]");
+    if (!el) return;
+    const v = chatTime(el.dataset.ts, { yesterday: (hm) => trf("chat.yesterdayAt", hm) });
+    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;
+  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; }
+  }
 
   const TICKS = () => ({ queued: tr("chat.tick_queued"), processing: tr("chat.tick_processing"), delivered: tr("chat.tick_delivered"), failed: tr("chat.tick_failed"), cancelled: tr("chat.tick_cancelled") });
 
   function msgHtml(x) {
+    // #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>`;
+    if (x.role === "status") return statusHtml(x, time);
     const u = opts.isUser(x);
-    const time = x.ts ? new Date(x.ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "";
     // 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 buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span><span class="time">${time}</span>${ticks}</div><div class="body"><div class="md">${R().renderMarkdown(x.text, { htmlCards: x.role === "agent", emojis: opts.emojis })}</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">${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>`;
+  }
+  /**
+   * #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
+   * start with "agend". A long one is folded until it is opened.
+   */
+  function statusHtml(x, time) {
+    const text = String(x.text == null ? "" : x.text);
+    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>`
+      : "";
+    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>`;
   }
   /**
    * #1266: an agent reply's buttons. Labels are text (escaped, never Markdown); the click names the set and the index,
@@ -64,6 +122,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) => {
@@ -73,11 +132,51 @@ export function createThread(list, scroller, opts) {
     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>`;
   }
+  /**
+   * #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 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}`;
+  }
+  /** #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;
@@ -299,14 +398,32 @@ export function createThread(list, scroller, opts) {
     };
     const ui = { state: (name, reason) => { state = name === "starting" || name === "running" ? name : "idle"; refresh(reason || null); } };
     // Nothing is read for Preview on a device that does not allow previews: the button is not even shown there.
-    run.onclick = () => { if (P().availability().ok) withCode((c) => P().start(key, holder, c, ui)); };
+    // A Preview click is newer than any Open in panel still reading (#1704): it claims the panel's turn too — and, its
+    // own HTML read, starts only if no newer click claimed meanwhile and no preview was started since (the panel's own
+    // Preview): a late read never undoes a newer choice. A close is neither, so it does not drop this click.
+    run.onclick = () => {
+      if (!P().availability().ok || reading) return;     // this card already reading: that click stays the one
+      const mine = panel ? (panel.claim(), panel.claims()) : 0, started = P().startCount();
+      withCode((c) => {
+        if ((panel && panel.claims() !== mine) || P().startCount() !== started) { refresh(); return; }
+        P().start(key, holder, c, ui);
+      });
+    };
     stopB.onclick = () => { if (reading) { reading = 0; refresh(); } else P().stop(key, "stopped", ""); };
-    // A running preview moves: it stops here and starts in the panel (the click that ran it). An idle one opens the
-    // panel with its own Preview to click.
+    // #1704: this click runs it in the panel, as Preview there would — a running preview moves (it stops here and
+    // starts there), an idle one starts there. Whether it can run is the panel's to say: a device that has not allowed
+    // previews is offered Allow first (and allowing runs it); where previews are off, nothing runs.
+    // An attachment's HTML is read first. The click claims the panel at once, so a newer click (even one still reading)
+    // wins: if the panel changed (another click, block, close) or any preview started meanwhile, this one is dropped —
+    // a late read never undoes a newer click.
     if (toPanel) toPanel.onclick = () => {
-      const moving = P().running(key);
-      if (moving) P().stop(key, "stopped", "");
-      withCode((c) => panel.open({ key, instance: x.instance, msgKey: msgKey(x), ...(att ? { att } : { n: source.n }), code: c, sender: x.sender, ts: x.ts }, { run: moving }));
+      if (reading) return;                               // this card already reading: that click stays the one
+      if (P().running(key)) P().stop(key, "stopped", "");
+      const at = panel.claim(), started = P().startCount();
+      withCode((c) => {
+        if (panel.version() !== at || P().startCount() !== started) { refresh(); return; }
+        panel.open({ key, instance: x.instance, msgKey: msgKey(x), ...(att ? { att } : { n: source.n }), code: c, sender: x.sender, ts: x.ts }, { run: true });
+      });
     };
     if (dl) dl.onclick = () => opts.download(code);
     ack.onclick = () => P().ackBanner();      // every card and the panel hear it (onChange)
@@ -334,6 +451,44 @@ 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();
@@ -341,35 +496,51 @@ export function createThread(list, scroller, opts) {
     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);
-      }
+        have = { html, node, x }; nodes.set(key, have);
+      } else { have.x = x; timeLabel(have.node); }
       const want = prev ? prev.nextSibling : list.firstChild;
       // A node already in the list is being moved: its preview stops first. A new node (still in its template) has none.
       if (have.node !== want) { if (have.node.parentNode === list) stopIn(have.node); list.insertBefore(have.node, want); }
       prev = have.node;
     }
-    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();
+    armDay();
+    armPolls();
+    return added;
   }
 
   function onScroll() {
@@ -384,6 +555,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");
@@ -426,21 +598,24 @@ export function createThread(list, scroller, opts) {
     if (act === "copyMsg") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) copyFrom(el, x.text); }
     else if (act === "copyCode") { const pre = el.closest(".codeblock")?.querySelector("pre"); if (pre) copyFrom(el, pre.textContent); }
     else if (act === "toggleFold") {
-      const box = el.closest(".codeblock"); if (!box) return;
+      const box = el.closest(".codeblock, .msg.status-line"); if (!box) return;
       const folded = box.classList.toggle("folded");
-      el.textContent = folded ? trf("chat.showAll", el.dataset.lines) : tr("chat.showLess");
+      el.textContent = !folded ? tr("chat.showLess") : el.dataset.lines ? trf("chat.showAll", el.dataset.lines) : tr("chat.showMore");
     } else if (act === "toggleWrap") opts.toggleWrap();
     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 === "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 (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-time.js

@@ -0,0 +1,80 @@
+// #1770: the time a chat line shows, read in the fleet's zone (the one chat-logs, fleet.log and the #1586 DMs use) —
+// "17:38" today, "Yesterday 17:38", "10/11 17:38" earlier this year, "2025/10/11 17:38" before. The hour and minute keep
+// the browser's own format (12- or 24-hour), as they always had. No imports: the thread, the preview panel and the
+// tests read it as it is.
+
+const cache = new Map();
+/** One formatter per (kind, zone, locale): a thread may label 500 lines on every render. */
+function fmt(kind, tz, locale) {
+  const key = `${kind}|${tz || ""}|${locale || ""}`;
+  let f = cache.get(key);
+  if (!f) {
+    const o = kind === "hm" ? { hour: "2-digit", minute: "2-digit" }
+      : kind === "ymd" ? { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric", hourCycle: "h23" }
+      : { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+    f = new Intl.DateTimeFormat(kind === "ymd" ? "en-US" : (locale || []), { ...o, timeZone: tz || undefined });
+    cache.set(key, f);
+  }
+  return f;
+}
+/** `tz` when this browser knows it, else undefined (the browser's own zone): a label must still be drawn. */
+function known(tz) {
+  if (!tz) return undefined;
+  try { fmt("ymd", tz); return tz; } catch { return undefined; }
+}
+/** The fleet's zone, as the page was served it (<body data-fleet-tz>); undefined when absent or unknown here. */
+export function fleetTz() { return known(globalThis.document?.body?.dataset?.fleetTz); }
+
+const toMs = (ts) => (typeof ts === "number" ? ts : Date.parse(String(ts || "")));
+function wall(ms, tz) {
+  const p = {};
+  for (const x of fmt("ymd", tz).formatToParts(ms)) p[x.type] = Number(x.value);
+  return p;
+}
+
+/**
+ * The label for `ts` (ISO string or epoch ms), "" when it cannot be read. opts: tz (default the fleet's), now (epoch ms),
+ * yesterday(hm) → the word for "yesterday" around hm (default: hm alone), locale (tests).
+ */
+export function chatTime(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  const tz = "tz" in opts ? known(opts.tz) : fleetTz();
+  const hm = fmt("hm", tz, opts.locale).format(ms);
+  const d = wall(ms, tz), today = wall(opts.now ?? Date.now(), tz);
+  if (d.year === today.year && d.month === today.month && d.day === today.day) return hm;
+  const y = new Date(Date.UTC(today.year, today.month - 1, today.day - 1));
+  if (d.year === y.getUTCFullYear() && d.month === y.getUTCMonth() + 1 && d.day === y.getUTCDate()) return opts.yesterday ? opts.yesterday(hm) : hm;
+  return d.year === today.year ? `${d.month}/${d.day} ${hm}` : `${d.year}/${d.month}/${d.day} ${hm}`;
+}
+
+/** The full date, time and zone of `ts`, for a tooltip; "" when it cannot be read. */
+export function chatTimeFull(ts, opts = {}) {
+  const ms = toMs(ts);
+  if (!Number.isFinite(ms)) return "";
+  return fmt("full", "tz" in opts ? known(opts.tz) : fleetTz(), opts.locale).format(ms);
+}
+
+/** Milliseconds until the fleet's next midnight (when "today" labels change), at most an hour (a DST day self-corrects). */
+export function msToNextDay(now = Date.now(), tz = fleetTz()) {
+  const w = wall(now, known(tz));
+  const into = ((w.hour * 60 + w.minute) * 60 + w.second) * 1000 + (now % 1000);
+  return Math.max(1000, Math.min(3_600_000, 86_400_000 - into + 1000));
+}
+
+/**
+ * Call `fn` when the fleet's day may have changed — at its next midnight, then again for each one after (an hour at
+ * most between looks, so a DST day or a late timer corrects itself). Each subscriber holds its own timer, and no
+ * module-wide state: the unsubscribe it returns leaves nothing armed.
+ */
+export function onDayChange(fn) {
+  let timer = null, live = true;
+  const arm = () => {
+    timer = setTimeout(() => {
+      timer = null;
+      try { fn(); } finally { if (live) arm(); }
+    }, msToNextDay());
+  };
+  arm();
+  return () => { live = false; if (timer !== null) { clearTimeout(timer); timer = null; } };
+}

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,10 +51,10 @@ 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) {
@@ -60,18 +65,18 @@ function show(i) {
   }
   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);
 }