@songsid/agend 2.2.0-beta.1 → 2.2.0-beta.11

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,6 +23,9 @@ 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. */
@@ -31,7 +35,7 @@ export const msgKey = (x) => `${x.boot}-${x.id}`;
 /**
  * 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 }
@@ -46,17 +50,48 @@ export function createThread(list, scroller, opts) {
   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, x.role === "agent" ? { htmlCards: true } : undefined)}</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"><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>`;
+  }
+  /**
+   * #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 +99,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 +109,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 +375,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)
@@ -341,6 +435,7 @@ export function createThread(list, scroller, opts) {
     if (!msgs.length) {
       for (const v of nodes.values()) stopIn(v.node);
       nodes.clear();
+      armDay();
       list.textContent = "";
       opts.onEmpty(true);
       return;
@@ -357,12 +452,14 @@ export function createThread(list, scroller, opts) {
         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);
       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();
+    armPolls();
     if ("restore" in renderOpts) {
       unseen = 0;
       if (renderOpts.restore == null) toBottom();
@@ -426,9 +523,9 @@ 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 || "");
@@ -441,6 +538,8 @@ export function createThread(list, scroller, opts) {
     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/panel-chat.js

@@ -10,6 +10,7 @@ import { html, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-
 import { t } from "/assets/app-i18n.js";
 import { appStore, useStore } from "/assets/app-store.js";
 import { useLease } from "/assets/app-ctx.js";
+import { namesOf, namesStore } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
 import { detailsPath } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
@@ -21,11 +22,15 @@ import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
+import { savePref } from "/assets/app-prefs.js";
 import "./chat-strings.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
-import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
+import { createEmojiIndex } from "./chat-emojis.js";
+import { pollPublicPreview } from "./preview-status.js";
+import { createMentionIndex } from "./chat-mentions.js";
+import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVersion, shownKey } from "./preview-panel.js";
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { FirstRunCard } from "./first-run.js";
@@ -40,6 +45,9 @@ export let store = null;
 // ── Announcements: one polite, visually hidden line for the coarse events only (a reply arrived, the agent started,
 // finished, or waits on you). Messages themselves are not read out as they arrive; the list is a log to browse.
 let announceTimer = null;
+/** #1630: which Discord server emoji this page may draw (created with the store, in boot). */
+let emojiIndex = null;
+let mentionIndex = null;   // #1682: the names of the mentions shown
 function announce(text) {
   let el = document.getElementById("announcer");
   if (!el) { el = document.createElement("div"); el.id = "announcer"; el.className = "sr-only"; el.setAttribute("role", "status"); el.setAttribute("aria-live", "polite"); el.setAttribute("aria-atomic", "true"); document.body.appendChild(el); }
@@ -51,11 +59,14 @@ function announce(text) {
 
 /**
  * This device's preview opt-in: asks once (the app's dialog) and says what it means; turning it off stops every
- * running preview. Resolves to the choice in force.
+ * running preview. Resolves to the choice in force. commit(apply): runs `apply` (the change itself) — the panel's Allow
+ * wraps it to know which change of the choice is its own (#1704).
  */
-export async function setPreviewOptIn(on) {
+export async function setPreviewOptIn(on, commit = (apply) => apply()) {
   if (on && !P().optedIn() && !(await confirmDialog({ message: t("chat.pvConfirm"), confirmLabel: t("chat.pvAllowButton") }))) on = false;
-  P().setOptIn(on);
+  commit(() => P().setOptIn(on));
+  // #1665: kept on the host for every device (only a signed-in page writes it; never the public link).
+  savePref("preview.optIn", P().optedIn());
   return P().optedIn();
 }
 
@@ -65,11 +76,15 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   store = createChatStore({
     fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
   });
+  emojiIndex = createEmojiIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
+  mentionIndex = createMentionIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
   store.attach(stream);
   // #1306: what the server said about previews for this load. The page-wide message and storage listeners this adds
   // belong to the app, once (they are never per mount).
   // #1554: its words in the page's language (chat.pv*); a key the dictionary does not have keeps preview.js's English.
   if (P() && bootData) P().init(bootData, { text: (key, ...v) => { const k = `chat.${key}`, s = t(k, ...v); return s === k ? null : s; } });
+  // #1723: the public link's preview was still starting when this page loaded: ask until it is up (or failed).
+  if (P() && bootData) pollPublicPreview(P());
   // #1568: the banner's "I understand" lasts until the next sign-in — preview.js is told which sign-in this page is
   // (the session handle, from the one /auth/session read); none (no session, or no AgendAuth): this tab only.
   if (P() && typeof P().setBannerScope === "function") {
@@ -119,6 +134,9 @@ function useChatTick(name, kinds) {
 
 // ── The panel ──
 
+/** #1722: the chat's title — the name that leads, the other on hover. */
+const headerName = ({ primary, secondary }) => (secondary ? html`<span title=${secondary}>${primary}</span>` : primary);
+
 export function ChatPanel({ route, navKey }) {
   const lease = useLease(navKey);
   const app = useStore(appStore);
@@ -154,6 +172,7 @@ function NotFound({ name }) {
 }
 
 function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
+  const names = useStore(namesStore);   // #1722: which name leads (the title)
   const [dialog, setDialog] = useState(null);       // "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
   const view = useRef(null), split = useRef(null), thread = useRef(null);
@@ -189,6 +208,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
   const items = [
@@ -206,14 +226,14 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", inst.model)} aria-label=${t("chat.chipModel", inst.model)} onClick=${() => pick("model")}>${inst.model}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
-    <${PanelHeader} title=${name} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${html`<${InstanceSwitch} name=${name} current="chat" />`}><${HeaderTools} navKey=${navKey} /><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
     <div class="chat-split" ref=${split}>
       <div class="chat-main">
         <${Thread} name=${name} th=${thread} />
         <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} />
       </div>
       <${PreviewPanel} name=${name} split=${split} msgs=${() => store.state.msgs[name] || []} subscribe=${(fn) => store.subscribe(fn)}
-        keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${() => setPreviewOptIn(true)} />
+        keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} allow=${(commit) => setPreviewOptIn(true, commit)} />
     </div>
     <${LightboxHost} />
     <div class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
@@ -232,14 +252,24 @@ function Thread({ name, th }) {
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
       clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
       replyButtonBusy: (id) => store.state.rbBusy.has(id),
-      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o) },   // #1481
+      pollMine: (id) => store.state.pollMine[id],                            // #1823: this device's own vote
+      serverNow: () => Date.now() + store.state.clockSkew,                   // #1823: the deadline is the server's
+      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o), version: panelVersion, claim: claimPanel, claims: panelClaims },   // #1481, #1704
       openImage: openLightbox,                                               // an image, full size, in the page
+      emojis: (id) => !!emojiIndex && emojiIndex.known(id),                  // #1630: the fleet's server emoji
+      mentions: (kind, id) => (mentionIndex ? mentionIndex.name(kind, id) : null),   // #1682: mention names
     });
     th.current = thread;
+    // #1630: the server-emoji list is read once a message shows a tag; when it arrives, those messages are drawn again.
+    // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
+    const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
+    const offEmojis = emojiIndex ? emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
+    const offMentions = mentionIndex ? mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])) : () => {};
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
+    wantEmojis(store.state.msgs[name]);
     const off = store.subscribe((instance, kind) => {
       if (instance !== name) return;
-      if (kind === "msgs") thread.render(store.state.msgs[name] || []);
+      if (kind === "msgs") { thread.render(store.state.msgs[name] || []); wantEmojis(store.state.msgs[name]); }
       else if (kind === "sent") thread.jumpLatest();
     });
     const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
@@ -249,7 +279,7 @@ function Thread({ name, th }) {
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv(); offPanel();
+      off(); offPv(); offPanel(); offEmojis(); offMentions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -292,6 +322,7 @@ function CommandCard({ name, lease }) {
         aria-label=${t("chat.cmdDismiss")} onClick=${() => store.dismissCommand(name)}><${Icon} name="close" size=${14} /></button>`}</div>
     ${c.error ? html`<p class="cmd-text">${c.error}</p>` : null}
     ${c.text ? html`<pre class="cmd-text">${c.text}</pre>` : null}
+    ${c.choices && c.choices.prompt ? html`<pre class="cmd-text">${c.choices.prompt}</pre>` : null}
     ${c.choices ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdChoose")}>${c.choices.options.map((o) => html`<button key=${o.id} type="button"
       class=${`btn btn-sm${o.id === c.choices.current ? " current" : ""}`} aria-current=${o.id === c.choices.current ? "true" : undefined} onClick=${() => run(o.id)}>${o.label}</button>`)}</div>` : null}
   </div>`;
@@ -466,7 +497,7 @@ function DeleteDialog({ name, onClose }) {
       <button type="button" class="btn btn-danger" disabled=${typed !== want || busy} onClick=${go}>${t("chat.deleteGo")}</button>`}>
     <p>${t("chat.deleteHelp", name)}</p>
     <label class="field"><span class="sr-only">${t("chat.deleteHelp", name)}</span>
-      <input type="text" value=${typed} autocomplete="off" spellcheck="false" placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
+      <input type="text" value=${typed} autocomplete="off" spellcheck=${false} placeholder=${want} onInput=${(e) => setTyped(e.target.value)}
         onKeyDown=${(e) => { if (e.key === "Enter") go(); }} /></label>
   </${Dialog}>`;
 }

package/dist/ui/panel-details.js

@@ -73,11 +73,13 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
     try { const res = await fetch(`/ui/${verb}/${encodeURIComponent(name)}`, { method: "POST", headers: { "Content-Type": "application/json" } }); r = await res.json(); }
     catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) toast(r.error, false);
+    else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   });
   const pauseWake = (verb) => act(verb, async () => {
     const res = await api(`/api/settings/instances/${encodeURIComponent(name)}/${verb}`, { method: "POST" }).catch(() => ({ ok: false, body: {} }));
     if (!res.ok) toast((res.body && res.body.error) || t("chat.dActionFailed"), false);
+    else if (res.body && res.body.held) toast(res.body.message);
     else toast(t(verb === "pause" ? "chat.dPaused" : "chat.dWoken", name));
   });
   // A ClassicBot room (classicBot.yaml) keeps Classic's split: its own Settings dialog, and only the actions Settings'