@songsid/agend 2.3.5-alpha.3 → 2.3.5-alpha.5

package/dist/ui/shared/chat-render.js

@@ -0,0 +1,682 @@
+/*
+ * Markdown for the web chat, safe by construction: the text is HTML-escaped FIRST, and only then are a few
+ * Markdown forms turned into a fixed set of tags. Nothing in a message can produce a tag, an attribute or an
+ * event handler of its own; the only attribute that carries message text is a link's href, and only an
+ * http(s)/mailto URL gets one (rendered with target=_blank rel="noopener noreferrer").
+ *
+ * Imported by the chat panel (#1408: the import sets globalThis.AgendChatRender); also exports itself for the tests.
+ */
+(function (root, factory) {
+  "use strict";
+  var api = factory();
+  if (typeof module === "object" && module && module.exports) module.exports = api;
+  // The global as well: the chat imports this file for its side effect (#1408), in the browser and under the tests.
+  if (root) root.AgendChatRender = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function () {
+  "use strict";
+
+  function escapeHtml(s) {
+    return String(s == null ? "" : s)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  /** An escaped URL is linkable only with an explicit http(s)/mailto scheme; anything else stays text. */
+  function safeHref(escapedUrl) {
+    var u = escapedUrl.trim();
+    if (!/^(https?:\/\/|mailto:)[^\s]+$/i.test(u)) return null;
+    // A quote or an angle bracket is never part of a URL we link: such text stays text (it could only be an attempt).
+    if (/&(?:quot|#39|lt|gt);/.test(u)) return null;
+    // A placeholder in a URL would be expanded into markup inside the attribute: never trust one there.
+    if (u.indexOf("\u0000") !== -1) return null;
+    return u;
+  }
+
+  function link(href, label) {
+    return '<a href="' + href + '" target="_blank" rel="noopener noreferrer" data-trust="link">' + label + "</a>";
+  }
+
+  // Placeholders survive the later passes untouched (they contain no Markdown characters).
+  function stash(store, html) { store.push(html); return "\u0000" + (store.length - 1) + "\u0000"; }
+  function unstash(store, s) {
+    // A stashed fragment can hold another placeholder (a `code` span inside a link label): expand until
+    // none is left. Every fragment is the renderer's own output, so this cannot introduce message markup;
+    // bounded so a malformed store cannot loop.
+    for (var pass = 0; pass < 4 && s.indexOf("\u0000") !== -1; pass++) {
+      s = s.replace(/\u0000(\d+)\u0000/g, function (_m, i) { var f = store[Number(i)]; return f === undefined ? "" : f; });
+    }
+    return s;
+  }
+
+  // #1630: a Discord server emoji, `<:name:id>` / `<a:name:id>` — escaped by now — drawn as its picture. Only an id the
+  // page knows (the fleet's servers: /ui/emojis) and only from the dashboard's own route; the src is built from the
+  // matched digits, the name (word characters only) goes into alt/title. Any other — an id the page does not know, or
+  // before the list has come — reads `:name:` (never the raw markup); so does a picture that does not load
+  // (chat-thread.js swaps it: an <img> sized to an emoji showed an empty box, the user's "tofu").
+  var EMOJI_RE = /&lt;(a?):([A-Za-z0-9_]{2,32}):(\d{15,25})&gt;/g;
+  function emojiImg(id, name) {
+    return '<img class="emoji" src="/ui/img/emoji/' + id + '" alt=":' + name + ':" title=":' + name + ':" decoding="async">';
+  }
+  function emojiText(name) { return '<span class="emoji-text" title=":' + name + ':">:' + name + ':</span>'; }
+
+  // #1682: Discord mentions — `<@id>` / `<@!id>` (a user), `<@&id>` (a role), `<#id>` (a channel) — escaped by now (the
+  // role's & too), drawn as a pill: the name the page knows (store.mentions(kind, id), inserted escaped), else @user /
+  // @role / #channel; never the raw token. The id is the token's own digits (title, data-mention: the page fills a
+  // name in later). And a Telegram @username (a letter, then 4–31 word characters; not part of a word, an e-mail
+  // or a path) gets the same look — no lookup, no link. It runs after the links (see inline()).
+  var MENTION_RE = /&lt;(@!?|@&amp;|#)(\d{15,25})&gt;/g;
+  // Not a package or a path either: `@scope/pkg`, `@anthropic-ai/sdk` (followed by - or /) stay text.
+  var TG_MENTION_RE = /(^|[^\w@\/.&;])@([A-Za-z][A-Za-z0-9_]{4,31})(?![\w@\/-])/g;
+  var MENTION_KIND = { "@": "u", "@!": "u", "@&amp;": "r", "#": "c" };
+  var MENTION_UNKNOWN = { u: "@user", r: "@role", c: "#channel" };
+  function mentionPill(kind, id, name) {
+    var label = name ? (kind === "c" ? "#" : "@") + escapeHtml(name) : MENTION_UNKNOWN[kind];
+    return '<span class="mention" data-mention="' + kind + ":" + id + '" title="' + id + '">' + label + "</span>";
+  }
+
+  /** Inline Markdown over ALREADY-ESCAPED text. */
+  function inline(escaped, store) {
+    var s = escaped;
+    // `code` first: nothing inside it is Markdown.
+    // #1812: in a table cell a path may wrap after its separators — the cell keeps words whole, so without these a long
+    // path held its whole column wide.
+    s = s.replace(/`([^`\n]+)`/g, function (_m, code) { return stash(store, "<code>" + (store.inCell ? code.replace(/\//g, "/<wbr>") : code) + "</code>"); });
+    var known = store.emojis;
+    s = s.replace(EMOJI_RE, function (_m, _a, name, id) { return stash(store, known && known(id) ? emojiImg(id, name) : emojiText(name)); });
+    var names = store.mentions;
+    s = s.replace(MENTION_RE, function (_m, sigil, id) {
+      var kind = MENTION_KIND[sigil];
+      var name = names ? names(kind, id) : null;
+      return stash(store, mentionPill(kind, id, typeof name === "string" && name ? name : null));
+    });
+    // [label](url)
+    s = s.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, function (m, label, url) {
+      var href = safeHref(url);
+      return href ? stash(store, link(href, emphasis(label))) : m;
+    });
+    // bare URLs
+    s = s.replace(/(^|[\s(])((?:https?:\/\/)[^\s<]+[^\s<.,;:!?)\]'"&])/g, function (m, pre, url) {
+      var href = safeHref(url);
+      return href ? pre + stash(store, link(href, url)) : m;
+    });
+    // #1682: a Telegram @username — after the links (a link is stashed by now, so an @ inside a URL is never touched).
+    s = s.replace(TG_MENTION_RE, function (_m, pre, user) { return pre + stash(store, '<span class="mention tg">@' + user + "</span>"); });
+    return emphasis(s);
+  }
+
+  /** Bold, strike-through and italics, over escaped text (a link's label gets them too). */
+  function emphasis(s) {
+    s = s.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+    s = s.replace(/~~([^~\n]+)~~/g, "<del>$1</del>");
+    s = s.replace(/(^|[^*\w])\*([^*\s][^*\n]*?)\*(?![*\w])/g, "$1<em>$2</em>");
+    s = s.replace(/(^|[^_\w])_([^_\s][^_\n]*?)_(?![_\w])/g, "$1<em>$2</em>");
+    return s;
+  }
+
+  /** How deep a list may nest: deeper items stay at the deepest level (a message cannot build an unbounded tree). */
+  var MAX_LIST_DEPTH = 6;
+  /** The widest table rendered as a table; a wider one stays text. */
+  var MAX_TABLE_COLUMNS = 20;
+
+  /** Leading whitespace as columns: a tab counts four. */
+  function indentOf(ws) { var n = 0; for (var i = 0; i < ws.length; i++) n += ws[i] === "\t" ? 4 : 1; return n; }
+
+  /**
+   * A run of list items as nested lists. An item indented deeper than the one before opens a list inside that
+   * item; a shallower one closes lists back to its level; at the same level a change of kind (- vs 1.) starts a
+   * new list. Every tag is the renderer's own; item text goes through inline() like any other text.
+   */
+  function renderList(items, store) {
+    var html = "";
+    var stack = [];   // { indent, tag }
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i];
+      while (stack.length && it.indent < stack[stack.length - 1].indent) html += "</li></" + stack.pop().tag + ">";
+      var top = stack[stack.length - 1];
+      if (!top || (it.indent > top.indent && stack.length < MAX_LIST_DEPTH)) {
+        html += "<" + it.tag + ">";
+        stack.push({ indent: it.indent, tag: it.tag });
+      } else if (top.tag !== it.tag) {
+        html += "</li></" + top.tag + "><" + it.tag + ">";
+        top.tag = it.tag;
+      } else {
+        html += "</li>";
+      }
+      html += "<li>" + inline(it.text, store);
+    }
+    while (stack.length) html += "</li></" + stack.pop().tag + ">";
+    return html;
+  }
+
+  /** The cells of one table row (escaped text). A leading/trailing pipe is optional; `\|` is a literal pipe. */
+  function tableCells(line) {
+    var t = line.trim();
+    if (t.charAt(0) === "|") t = t.slice(1);
+    if (t.charAt(t.length - 1) === "|" && t.charAt(t.length - 2) !== "\\") t = t.slice(0, -1);
+    var cells = [];
+    var cur = "";
+    for (var i = 0; i < t.length; i++) {
+      if (t[i] === "\\" && t[i + 1] === "|") { cur += "|"; i++; continue; }
+      if (t[i] === "|") { cells.push(cur.trim()); cur = ""; continue; }
+      cur += t[i];
+    }
+    cells.push(cur.trim());
+    return cells;
+  }
+
+  /**
+   * The alignments of a separator row (`|---|:--:|--:|`), or null when the line is not one. Checked cell by cell
+   * with linear tests only (#1287 review: one regex with adjacent optional whitespace backtracked for seconds on a
+   * few KB of spaces with a bad tail, blocking the page).
+   */
+  function tableAligns(line) {
+    if (line.indexOf("-") === -1 || !/^[\s|:-]*$/.test(line)) return null;
+    var cells = tableCells(line);
+    for (var i = 0; i < cells.length; i++) if (!/^:?-+:?$/.test(cells[i])) return null;
+    return cells.map(function (c) {
+      var l = c.charAt(0) === ":", r = c.charAt(c.length - 1) === ":";
+      return l && r ? "c" : r ? "r" : l ? "l" : "";
+    });
+  }
+
+  function renderTable(header, aligns, rows, store) {
+    function cell(tag, text, i) {
+      var a = aligns[i] ? ' class="al-' + aligns[i] + '"' : "";
+      store.inCell = true;
+      try { return "<" + tag + a + ">" + inline(text, store) + "</" + tag + ">"; } finally { store.inCell = false; }
+    }
+    function row(tag, cells) {
+      var out = "";
+      for (var i = 0; i < aligns.length; i++) out += cell(tag, cells[i] === undefined ? "" : cells[i], i);
+      return "<tr>" + out + "</tr>";
+    }
+    return '<div class="tbl"><table><thead>' + row("th", header) + "</thead><tbody>" +
+      rows.map(function (r) { return row("td", r); }).join("") + "</tbody></table></div>";
+  }
+
+  /** Block Markdown (headings, lists, tables, quotes, rules, paragraphs) over one run of non-code text. */
+  function blocks(text, store) {
+    var lines = escapeHtml(text).split("\n");
+    var out = [];
+    var para = [];
+    var list = [];    // [{ indent, tag, text }]
+    var quote = [];
+    function flushPara() { if (para.length) { out.push("<p>" + para.map(function (l) { return inline(l, store); }).join("<br>") + "</p>"); para = []; } }
+    function flushList() { if (list.length) { out.push(renderList(list, store)); list = []; } }
+    function flushQuote() { if (quote.length) { out.push("<blockquote>" + quote.map(function (l) { return inline(l, store); }).join("<br>") + "</blockquote>"); quote = []; } }
+    function flushAll() { flushPara(); flushList(); flushQuote(); }
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i];
+      var m;
+      if (/^\s*$/.test(line)) { flushAll(); continue; }
+      // A table: a header row with a pipe, then a separator row with the same number of columns.
+      if (line.indexOf("|") !== -1 && i + 1 < lines.length) {
+        var aligns = tableAligns(lines[i + 1]);
+        var header = aligns && tableCells(line);
+        if (aligns && header.length === aligns.length && aligns.length <= MAX_TABLE_COLUMNS) {
+          flushAll();
+          var rows = [];
+          var j = i + 2;
+          for (; j < lines.length && lines[j].indexOf("|") !== -1 && !/^\s*$/.test(lines[j]); j++) rows.push(tableCells(lines[j]));
+          out.push(renderTable(header, aligns, rows, store));
+          i = j - 1;
+          continue;
+        }
+      }
+      if ((m = /^(#{1,6})\s+(.*)$/.exec(line))) { flushAll(); var n = Math.min(m[1].length + 2, 6); out.push("<h" + n + ">" + inline(m[2], store) + "</h" + n + ">"); continue; }
+      if (/^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/.test(line)) { flushAll(); out.push("<hr>"); continue; }
+      if ((m = /^&gt;\s?(.*)$/.exec(line))) { flushPara(); flushList(); quote.push(m[1]); continue; }
+      if ((m = /^([ \t]*)([-*+]|\d{1,9}[.)])\s+(.*)$/.exec(line))) {
+        flushPara(); flushQuote();
+        list.push({ indent: indentOf(m[1]), tag: /\d/.test(m[2]) ? "ol" : "ul", text: m[3] });
+        continue;
+      }
+      flushList(); flushQuote();
+      para.push(line);
+    }
+    flushAll();
+    return out.join("");
+  }
+
+  // ── Code highlighting: a small tokenizer, never a library. Every token is escaped and wrapped in one of four
+  //    fixed classes; what is not recognised stays plain escaped text. Unknown languages are not highlighted. ──
+  var KEYWORDS = {
+    js: "break case catch class const continue default delete do else export extends false finally for function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while yield async await",
+    py: "and as assert async await break class continue def del elif else except False finally for from global if import in is lambda None nonlocal not or pass raise return True try while with yield",
+    sh: "if then else elif fi for while until do done case esac function in return local export set unset echo exit",
+    json: "true false null"
+  };
+  KEYWORDS.ts = KEYWORDS.js + " interface type enum implements private public protected readonly declare namespace keyof as";
+  var LANG_ALIAS = { javascript: "js", jsx: "js", mjs: "js", cjs: "js", typescript: "ts", tsx: "ts", python: "py", bash: "sh", shell: "sh", zsh: "sh", console: "sh" };
+  var TOKEN_RE = {
+    // An unclosed string or comment runs to the end of its line (or of the code): it matches once instead of
+    // failing and being re-scanned from every later quote, which made a run of unclosed quotes quadratic.
+    js: /(\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$))|("(?:[^"\\\n]|\\.)*"?|'(?:[^'\\\n]|\\.)*'?|`(?:[^`\\]|\\.)*`?)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)/g,
+    py: /(#[^\n]*)|("""[\s\S]*?(?:"""|$)|'''[\s\S]*?(?:'''|$)|"(?:[^"\\\n]|\\.)*"?|'(?:[^'\\\n]|\\.)*'?)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_]\w*)/g,
+    sh: /(#[^\n]*)|("(?:[^"\\]|\\.)*"?|'[^']*'?)|(\b\d+\b)|([A-Za-z_][\w-]*)/g,
+    json: /(\u0001)|("(?:[^"\\\n]|\\.)*"?)|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|([A-Za-z_]\w*)/g
+  };
+  TOKEN_RE.ts = TOKEN_RE.js;
+
+  /** Code as highlighted HTML for a known language, or null (then the caller escapes it as before). */
+  function highlight(code, lang) {
+    var key = String(lang || "").toLowerCase();
+    if (Object.prototype.hasOwnProperty.call(LANG_ALIAS, key)) key = LANG_ALIAS[key];
+    if (!Object.prototype.hasOwnProperty.call(TOKEN_RE, key)) return null;
+    var words = {};
+    KEYWORDS[key].split(" ").forEach(function (w) { words[w] = true; });
+    var re = new RegExp(TOKEN_RE[key].source, "g");
+    var out = "";
+    var last = 0;
+    var m;
+    while ((m = re.exec(code)) !== null) {
+      if (m[0] === "") { re.lastIndex++; continue; }
+      out += escapeHtml(code.slice(last, m.index));
+      var cls = m[1] ? "tk-c" : m[2] ? "tk-s" : m[3] ? "tk-n" : (m[4] && Object.prototype.hasOwnProperty.call(words, m[4])) ? "tk-k" : null;
+      out += cls ? '<span class="' + cls + '">' + escapeHtml(m[0]) + "</span>" : escapeHtml(m[0]);
+      last = re.lastIndex;
+    }
+    return out + escapeHtml(code.slice(last));
+  }
+
+  // A fenced code block: ```lang …``` — or unterminated to the end of the text (what a length cut leaves).
+  var FENCE_RE = /```([A-Za-z0-9_+.-]{0,32})[^\n]*\n([\s\S]*?)(?:```|$)/g;
+  function isHtmlLang(lang) { return String(lang || "").toLowerCase() === "html"; }
+
+  /**
+   * The ```html fences of a message, in order (#1306): each one's code, and whether it was closed. The n-th entry is
+   * the card renderMarkdown(text, { htmlCards: true }) numbered n. Only `html` exactly (any case) — not html5, xhtml, htm.
+   */
+  function htmlFences(text) {
+    var src = String(text == null ? "" : text).replace(/\r\n?/g, "\n").replace(/\u0000/g, "");
+    var re = new RegExp(FENCE_RE.source, "g");
+    var out = [];
+    var m;
+    while ((m = re.exec(src)) !== null) {
+      if (isHtmlLang(m[1])) out.push({ code: m[2].replace(/\n$/, ""), terminated: m[0].slice(-3) === "```" });
+      if (m[0].length === 0) break;
+    }
+    return out;
+  }
+
+  /**
+   * The whole message: fenced code blocks verbatim (escaped), everything else as Markdown. With { htmlCards: true }
+   * (only ever for a message the server marked `agent` — #1306), each ```html fence is followed by an empty card
+   * placeholder <div class="html-card" data-card="n">, or — for a fence a cut left open — one marked "truncated",
+   * which gets no Preview. No text of the HTML goes into an attribute: the page reads it from the message, by n.
+   */
+  function renderMarkdown(text, opts) {
+    var cards = !!(opts && opts.htmlCards);
+    var src = String(text == null ? "" : text).replace(/\r\n?/g, "\n").replace(/\u0000/g, "");   // \u0000 is the placeholder mark
+    var store = [];
+    // #1630: which server emoji ids the page knows (a function id → boolean); without it every `<:name:id>` stays text.
+    store.emojis = opts && typeof opts.emojis === "function" ? opts.emojis : null;
+    // #1682: the names the page knows for mentions (a function (kind "u" | "r" | "c", id) → name or null).
+    store.mentions = opts && typeof opts.mentions === "function" ? opts.mentions : null;
+    var html = "";
+    var re = new RegExp(FENCE_RE.source, "g");
+    var last = 0;
+    var n = 0;
+    var m;
+    while ((m = re.exec(src)) !== null) {
+      html += blocks(src.slice(last, m.index), store);
+      var lang = m[1] ? ' data-lang="' + escapeHtml(m[1]) + '"' : "";
+      var code = m[2].replace(/\n$/, "");
+      var lit = highlight(code, m[1]);
+      html += "<pre" + lang + "><code>" + (lit === null ? escapeHtml(code) : lit) + "</code></pre>";
+      if (cards && isHtmlLang(m[1])) {
+        html += '<div class="html-card' + (m[0].slice(-3) === "```" ? "" : " truncated") + '" data-card="' + n + '"></div>';
+        n++;
+      }
+      last = re.lastIndex;
+      if (m[0].length === 0) break;
+    }
+    html += blocks(src.slice(last), store);
+    return unstash(store, html);
+  }
+
+  /**
+   * The chat's message list after `incoming` arrives (history, a live SSE message or an SSE replay): one entry per
+   * id, in id order, the newest `cap` kept. The same message can arrive twice — from /ui/history and from the
+   * stream — and must show once.
+   */
+  function buttonsRank(b) { return b && b.state !== "open" ? 1 : 0; }
+  /**
+   * Whether `next` is an older view than `had` of the same buttons: they only go forward (open → ended), and a poll's
+   * views (#1823), which change while it is open, by their `rev`.
+   */
+  function olderButtons(next, had) {
+    var d = buttonsRank(next) - buttonsRank(had);
+    if (d) return d < 0;
+    return !!(next && had && next.poll && had.poll && next.poll.rev < had.poll.rev);
+  }
+  /** #1823: a poll's time left, counted down by the page every second: m:ss, or h:mm:ss. */
+  function pollRemaining(ms) {
+    var s = Math.max(0, Math.ceil(ms / 1000));
+    var h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), r = s % 60;
+    var mm = h ? String(m).padStart(2, "0") : String(m);
+    return (h ? h + ":" : "") + mm + ":" + String(r).padStart(2, "0");
+  }
+  /**
+   * #1266: a reply's buttons changed (one was chosen, or they expired): the message carrying them, by its set id.
+   * Returns the list unchanged when no message carries that set.
+   */
+  function applyReplyButtons(list, buttons) {
+    if (!Array.isArray(list) || !buttons || typeof buttons.id !== "string") return list;
+    var i = -1;
+    for (var j = list.length - 1; j >= 0; j--) if (list[j] && list[j].buttons && list[j].buttons.id === buttons.id) { i = j; break; }
+    if (i < 0 || olderButtons(buttons, list[i].buttons)) return list;
+    var out = list.slice();
+    out[i] = Object.assign({}, list[i], { buttons: buttons });
+    return out;
+  }
+
+  function mergeMessages(existing, incoming, cap) {
+    var seen = {};
+    var out = [];
+    // Ids restart with every fleet process; the boot generation makes them an identity again.
+    function key(m) { return String(m.boot || "") + ":" + m.id; }
+    function add(m) {
+      if (!m || typeof m.id !== "number") return;
+      var k = key(m);
+      if (seen[k] !== undefined) {
+        // The same message again (history after the stream): the copy that got further shows its ticks.
+        var had = out[seen[k]];
+        var next = nextDeliveryState(had.delivery, m.delivery);
+        if (next !== had.delivery) out[seen[k]] = had = Object.assign({}, had, { delivery: next });
+        // #1266: …and the copy whose buttons got further (open → chosen / expired) shows them.
+        if (m.buttons && (!had.buttons || buttonsRank(m.buttons) > buttonsRank(had.buttons) || (buttonsRank(m.buttons) === buttonsRank(had.buttons) && m.buttons.poll && had.buttons.poll && m.buttons.poll.rev > had.buttons.poll.rev))) out[seen[k]] = Object.assign({}, had, { buttons: m.buttons });
+        return;
+      }
+      seen[k] = out.length;
+      out.push(m);
+    }
+    (existing || []).forEach(add);
+    (incoming || []).forEach(add);
+    // Within one boot the id is the order; across boots (a restart) the time is.
+    out.sort(function (a, b) {
+      if ((a.boot || "") === (b.boot || "")) return a.id - b.id;
+      var ta = String(a.ts || ""), tb = String(b.ts || "");
+      return ta < tb ? -1 : ta > tb ? 1 : 0;
+    });
+    var limit = typeof cap === "number" && cap > 0 ? cap : 500;
+    return out.length > limit ? out.slice(out.length - limit) : out;
+  }
+
+  /**
+   * The delivery ticks of a web user's message (web track C3) — the same order the fleet keeps
+   * (web-chat-history.ts nextDeliveryState): a report that arrives late or twice never moves a tick back;
+   * delivered and failed are final, cancelled gives way to what the agent actually got.
+   */
+  var DELIVERY_RANK = { queued: 1, processing: 2, cancelled: 3, delivered: 4, failed: 4 };
+  function nextDeliveryState(prev, next) {
+    if (!Object.prototype.hasOwnProperty.call(DELIVERY_RANK, next)) return prev;
+    if (prev === undefined || !Object.prototype.hasOwnProperty.call(DELIVERY_RANK, prev)) return next;
+    return DELIVERY_RANK[next] > DELIVERY_RANK[prev] ? next : prev;
+  }
+
+  /** The list after a delivery report for `messageId`: the same list when nothing moved, else a copy. */
+  function applyDelivery(list, messageId, delivery) {
+    var msgs = list || [];
+    for (var i = msgs.length - 1; i >= 0; i--) {
+      if (!msgs[i] || msgs[i].messageId !== messageId) continue;
+      var next = nextDeliveryState(msgs[i].delivery, delivery);
+      if (next === msgs[i].delivery) return msgs;
+      var out = msgs.slice();
+      out[i] = Object.assign({}, msgs[i], { delivery: next });
+      return out;
+    }
+    return msgs;
+  }
+
+  /**
+   * #2305: the list after a reactions update for the row `boot`/`id` (the instance's reactions — its minimal reply): the
+   * same list when nothing changed, else a copy. At most 8 distinct short strings are taken; the server sent them.
+   */
+  function applyReactions(list, boot, id, reactions) {
+    var msgs = list || [];
+    if (!Array.isArray(reactions)) return msgs;
+    var clean = [];
+    for (var j = 0; j < reactions.length && clean.length < 8; j++) {
+      var e = reactions[j];
+      if (typeof e === "string" && e.length > 0 && e.length <= 16 && clean.indexOf(e) < 0) clean.push(e);
+    }
+    for (var i = msgs.length - 1; i >= 0; i--) {
+      if (!msgs[i] || msgs[i].boot !== boot || msgs[i].id !== id) continue;
+      var had = msgs[i].reactions || [];
+      var same = had.length === clean.length;
+      for (var k = 0; same && k < had.length; k++) if (had[k] !== clean[k]) same = false;
+      if (same) return msgs;
+      var out = msgs.slice();
+      out[i] = Object.assign({}, msgs[i], { reactions: clean });
+      return out;
+    }
+    return msgs;
+  }
+  /** #2305: an emoji drawn as one — a heart, ☃, ✍ and the like have a text form unless U+FE0F follows. */
+  function emojiForm(e) { return /\p{Emoji_Presentation}/u.test(e) ? e : e + "\uFE0F"; }
+  /** #2305: a message's reactions under its bubble, labelled for a screen reader (`label`: who reacted); "" when none. */
+  function reactionsHtml(reactions, label) {
+    if (!Array.isArray(reactions) || !reactions.length) return "";
+    var items = "";
+    for (var i = 0; i < reactions.length; i++) {
+      if (typeof reactions[i] !== "string") continue;
+      items += '<span class="reaction" role="img" aria-label="' + escapeHtml(reactions[i]) + '">' + escapeHtml(emojiForm(reactions[i])) + "</span>";
+    }
+    var l = escapeHtml(label || "");
+    return items ? '<div class="msg-reactions" role="group" aria-label="' + l + '" title="' + l + '">' + items + "</div>" : "";
+  }
+
+  var TICK_GLYPH = { queued: "◷", processing: "✓", delivered: "✓✓", failed: "!", cancelled: "⊘" };
+  /** The ticks for one state, labelled for a screen reader as well as a pointer; "" when there is none. */
+  function deliveryHtml(state, labels) {
+    if (!Object.prototype.hasOwnProperty.call(TICK_GLYPH, state)) return "";
+    var label = escapeHtml((labels && labels[state]) || state);
+    return '<span class="tick tick-' + state + '" role="img" aria-label="' + label + '" title="' + label + '">' + TICK_GLYPH[state] + "</span>";
+  }
+
+  /**
+   * Whether a scrolled list counts as "at the bottom" (#1307): within `slack` px of it. Only then does a new message
+   * pull the view down; a reader who scrolled up stays where they are.
+   */
+  function isNearBottom(scrollTop, clientHeight, scrollHeight, slack) {
+    return Number(scrollHeight) - Number(scrollTop) - Number(clientHeight) <= (slack == null ? 48 : slack);
+  }
+
+  /** A paste longer than this many characters becomes a text file instead of filling the composer (#1307; 4,000 per #1269). */
+  var LONG_PASTE_CHARS = 4000;
+  function isLongPaste(text) { return typeof text === "string" && text.length > LONG_PASTE_CHARS; }
+
+  /** How long a turn has run, as m:ss (h:mm:ss past an hour); never negative. */
+  function formatElapsed(ms) {
+    var t = Math.max(0, Math.floor((Number(ms) || 0) / 1000));
+    var h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), sec = t % 60;
+    var two = function (n) { return (n < 10 ? "0" : "") + n; };
+    return h ? h + ":" + two(m) + ":" + two(sec) : m + ":" + two(sec);
+  }
+
+  /** A code block longer than this many lines is folded until it is opened. */
+  var CODE_FOLD_LINES = 30;
+  /** Lines in a block of code (a trailing newline does not start another). */
+  function lineCount(code) {
+    var s = String(code == null ? "" : code).replace(/\n$/, "");
+    return s === "" ? 0 : s.split("\n").length;
+  }
+
+  /** Whether the chat shows "working" and its Stop button for an instance in this execution state. */
+  function isBusy(state) { return state === "working" || state === "stuck"; }
+
+  /**
+   * What a key in the composer does: Enter sends, Shift+Enter is a new line, nothing happens mid-IME-composition.
+   * #2478 (the user's request): on a touch screen (a coarse pointer) Return is a new line — the Send button sends.
+   */
+  function composerKey(ev, opts) {
+    if (!ev || ev.key !== "Enter" || ev.isComposing || ev.keyCode === 229) return "none";
+    if (opts && opts.touch) return "newline";
+    if (ev.shiftKey || ev.altKey || ev.ctrlKey || ev.metaKey) return "newline";
+    return "send";
+  }
+
+  /** The defaults of the upload limits the server enforces (web-upload.ts UPLOAD_LIMITS), for a page that was given none. */
+  var FILE_LIMITS = { maxFileBytes: 50 * 1024 * 1024, maxFiles: 5, maxTotalBytes: 100 * 1024 * 1024 };
+  /**
+   * #1937: the limits in force for this page — the server's (web.upload_max_file_mb / _total_mb, and the public link's
+   * own cap), on <body data-upload-limits>. Checked here first only to say so early: the server checks every upload.
+   */
+  function fileLimits() {
+    try {
+      var raw = JSON.parse(document.body.dataset.uploadLimits || "null");
+      var ok = function (n) { return typeof n === "number" && isFinite(n) && n > 0; };
+      if (raw && ok(raw.maxFileBytes) && ok(raw.maxFiles) && ok(raw.maxTotalBytes)) {
+        return { maxFileBytes: raw.maxFileBytes, maxFiles: raw.maxFiles, maxTotalBytes: raw.maxTotalBytes, publicLinkCapped: raw.publicLinkCapped === true };
+      }
+    } catch (e) { /* no page, or no limits on it */ }
+    return { maxFileBytes: FILE_LIMITS.maxFileBytes, maxFiles: FILE_LIMITS.maxFiles, maxTotalBytes: FILE_LIMITS.maxTotalBytes, publicLinkCapped: false };
+  }
+  /** A size in MB as the limits are worded ("50", "2.5") — web-upload.ts mbText. */
+  function mbText(bytes) { return String(Math.round((bytes / 1024 / 1024) * 10) / 10); }
+  /** #1937: the words for a file checkFiles() refused — a chat string key and the numbers it says, from fileLimits(). */
+  function fileRejection(reason) {
+    var l = fileLimits();
+    if (reason === "too-large") return { key: l.publicLinkCapped ? "chat.file_too_large_public" : "chat.file_too_large", values: [mbText(l.maxFileBytes)] };
+    if (reason === "too-many") return { key: "chat.file_too_many", values: [l.maxFiles] };
+    if (reason === "too-much") return { key: "chat.file_too_much", values: [mbText(l.maxTotalBytes)] };
+    return { key: "chat.file_" + String(reason).replace(/-/g, "_"), values: [] };
+  }
+
+  function formatSize(n) {
+    var b = Number(n) || 0;
+    if (b < 1024) return b + " B";
+    if (b < 1024 * 1024) return (b / 1024).toFixed(b < 10 * 1024 ? 1 : 0) + " KB";
+    return (b / 1024 / 1024).toFixed(1) + " MB";
+  }
+
+  /**
+   * Which of `adding` can join `pending` on one message: within the count, per-file and total limits.
+   * Returns the files kept (pending first, then the accepted new ones) and, for each refused one, why.
+   */
+  function checkFiles(pending, adding) {
+    var limits = fileLimits();
+    var kept = (pending || []).slice();
+    var total = 0;
+    kept.forEach(function (f) { total += Number(f.size) || 0; });
+    var rejected = [];
+    (adding || []).forEach(function (f) {
+      var size = Number(f.size) || 0;
+      if (size === 0) rejected.push({ name: f.name, reason: "empty" });
+      else if (size > limits.maxFileBytes) rejected.push({ name: f.name, reason: "too-large" });
+      else if (kept.length >= limits.maxFiles) rejected.push({ name: f.name, reason: "too-many" });
+      else if (total + size > limits.maxTotalBytes) rejected.push({ name: f.name, reason: "too-much" });
+      else { kept.push(f); total += size; }
+    });
+    return { kept: kept, rejected: rejected };
+  }
+
+  /** #1306 §6.1 (Q4): an attachment a preview card is offered for — a fleet-issued id, a non-image named *.html / *.htm. */
+  function isHtmlAttachment(a) {
+    return !!a && typeof a.id === "string" && /^[0-9a-f]{32}$/.test(a.id) && a.kind !== "photo" && typeof a.name === "string" && /\.html?$/i.test(a.name.trim());
+  }
+
+  /**
+   * #1589: how an attachment is shown inline, by its name (agents' files carry their extension; uploads keep theirs):
+   * "video" / "audio" (native controls, by id), "md", "csv" / "tsv", "json", "code:<lang>", "text" — or null (a
+   * download only: an image, an .html file, a PDF, anything else). Text is always shown escaped, never run.
+   */
+  var MEDIA_EXT = { mp4: "video", m4v: "video", webm: "video", mov: "video", mp3: "audio", m4a: "audio", wav: "audio", ogg: "audio", oga: "audio", opus: "audio" };
+  var CODE_EXT = { js: "js", jsx: "js", mjs: "js", cjs: "js", ts: "ts", tsx: "ts", py: "py", sh: "sh", bash: "sh", zsh: "sh" };
+  var TEXT_EXT = { txt: 1, log: 1, toml: 1, yaml: 1, yml: 1, ini: 1, cfg: 1, conf: 1, xml: 1, diff: 1, patch: 1, sql: 1, css: 1, scss: 1, go: 1, rs: 1,
+    java: 1, kt: 1, c: 1, h: 1, cc: 1, cpp: 1, hpp: 1, rb: 1, php: 1, swift: 1, jsonl: 1 };
+  function attachmentPreviewType(a) {
+    if (!a || a.gone === true || typeof a.id !== "string" || !/^[0-9a-f]{32}$/.test(a.id) || a.kind === "photo" || typeof a.name !== "string") return null;
+    var m = /\.([A-Za-z0-9]{1,8})$/.exec(a.name.trim());
+    var ext = m ? m[1].toLowerCase() : "";
+    if (Object.prototype.hasOwnProperty.call(MEDIA_EXT, ext)) return MEDIA_EXT[ext];
+    if (ext === "md" || ext === "markdown") return "md";
+    if (ext === "csv" || ext === "tsv") return ext;
+    if (ext === "json") return "json";
+    if (Object.prototype.hasOwnProperty.call(CODE_EXT, ext)) return "code:" + CODE_EXT[ext];
+    if (Object.prototype.hasOwnProperty.call(TEXT_EXT, ext)) return "text";
+    return null;
+  }
+
+  /**
+   * The files shown with a message. Only an id the fleet issued (32 hex) becomes a URL, and only under
+   * /ui/file/; a name is text. Images are shown (and open full size), other files are download links.
+   * With { htmlCards: true } (a server-marked agent reply, as for renderMarkdown) each .html/.htm file also gets an
+   * empty card placeholder <div class="html-card" data-att="<id>"> after the list — the id is 32 hex, nothing else.
+   */
+  // The box a photo is drawn in (app.css: .msg .att-img img, max 260 × 220): its own size, scaled down to fit.
+  var PHOTO_MAX_W = 260, PHOTO_MAX_H = 220;
+  /**
+   * #2184: a photo's drawn size as width/height attributes, from the size the server read from its headers: the box is there
+   * before the picture loads, so the text around it never moves when it does (a chat opened cold jittered, as each
+   * photo grew from nothing). Nothing when the size is not known (drawn as before).
+   */
+  function photoBox(a) {
+    var w = a.width, h = a.height;
+    var ok = function (v) { return typeof v === "number" && v >= 1 && v <= 65535 && Math.floor(v) === v; };
+    if (!ok(w) || !ok(h)) return "";
+    var k = Math.min(1, PHOTO_MAX_W / w, PHOTO_MAX_H / h);
+    return ' width="' + Math.max(1, Math.round(w * k)) + '" height="' + Math.max(1, Math.round(h * k)) + '"';
+  }
+
+  /**
+   * Hub PR A (#3226): where a file is read. The Hub's files carry their own room-scoped `url`; it is used only when it is a
+   * plain same-origin path (a leading "/", then letters, digits, "_-./" only: no "//", no "..", nothing to escape), else the
+   * fleet's /ui/file/<id> as always. The id is still the 32-hex one every file has (the Hub issues the same kind).
+   */
+  var SAFE_FILE_PATH = /^\/(?!\/)[A-Za-z0-9_\-.\/]{1,256}$/;
+  function attachmentUrl(a) {
+    var u = a && a.url;
+    if (typeof u === "string" && SAFE_FILE_PATH.test(u) && !/(^|\/)\.\.?(\/|$)/.test(u)) return u;
+    return "/ui/file/" + a.id;
+  }
+
+  function attachmentsHtml(attachments, opts) {
+    if (!Array.isArray(attachments)) return "";
+    var cards = !!(opts && opts.htmlCards);
+    // #1589: { inlinePreviews: true } (not on the public link) plays media and offers text inline, after the file list.
+    // #2547: { textPreviews: true } offers the text cards (Markdown, CSV/TSV, JSON, code, text) on the public link too:
+    // the same capped, same-origin read and the same rendering (nothing in the file ever runs); media stays local.
+    var inline = !!(opts && opts.inlinePreviews), texts = inline || !!(opts && opts.textPreviews);
+    var out = [], after = [];
+    attachments.forEach(function (a) {
+      // #1565: a file from before the fleet restarted that could not be served again — its name, marked unavailable;
+      // no link (it has no id), no card.
+      if (a && a.gone === true && typeof a.name === "string") {
+        out.push('<span class="att-file att-gone"' + (opts && opts.goneTitle ? ' title="' + escapeHtml(opts.goneTitle) + '"' : "") + ">📎 " + escapeHtml(a.name) + ' <span class="att-size">' + escapeHtml(opts && opts.goneLabel ? opts.goneLabel : formatSize(a.size)) + "</span></span>");
+        return;
+      }
+      if (!a || typeof a.id !== "string" || !/^[0-9a-f]{32}$/.test(a.id)) return;
+      if (cards && isHtmlAttachment(a)) after.push('<div class="html-card" data-att="' + a.id + '"></div>');
+      var url = attachmentUrl(a);
+      var kind = texts ? attachmentPreviewType(a) : null;
+      if ((kind === "video" || kind === "audio") && !inline) kind = null;
+      if (kind === "video") after.push('<div data-trust="media" class="att-media"><video class="att-video" controls preload="metadata" src="' + url + '"></video></div>');
+      else if (kind === "audio") after.push('<div data-trust="media" class="att-media"><audio class="att-audio" controls preload="metadata" src="' + url + '"></audio></div>');
+      else if (kind) after.push('<div class="text-card" data-att="' + a.id + '" data-type="' + kind + '"></div>');
+      var name = escapeHtml(a.name || "file");
+      if (a.kind === "photo") {
+        out.push('<a class="att-img" href="' + url + '" target="_blank" rel="noopener noreferrer"><img src="' + url + '" alt="' + name + '"' + photoBox(a) + ' loading="lazy"></a>');
+      } else {
+        out.push('<a class="att-file" href="' + url + '" download="' + name + '">📎 ' + name + ' <span class="att-size">' + escapeHtml(formatSize(a.size)) + "</span></a>");
+      }
+    });
+    return (out.length ? '<div data-trust="attachment" class="atts">' + out.join("") + "</div>" : "") + after.join("");
+  }
+
+  return {
+    renderMarkdown: renderMarkdown, escapeHtml: escapeHtml, attachmentUrl: attachmentUrl, mergeMessages: mergeMessages, applyReplyButtons: applyReplyButtons, composerKey: composerKey,
+    pollRemaining: pollRemaining,
+    
+    FILE_LIMITS: FILE_LIMITS, fileLimits: fileLimits, fileRejection: fileRejection, formatSize: formatSize, checkFiles: checkFiles, attachmentsHtml: attachmentsHtml, isHtmlAttachment: isHtmlAttachment,
+    nextDeliveryState: nextDeliveryState, applyDelivery: applyDelivery, deliveryHtml: deliveryHtml, isBusy: isBusy,
+    applyReactions: applyReactions, reactionsHtml: reactionsHtml,
+    isNearBottom: isNearBottom, CODE_FOLD_LINES: CODE_FOLD_LINES, lineCount: lineCount,
+    LONG_PASTE_CHARS: LONG_PASTE_CHARS, isLongPaste: isLongPaste, formatElapsed: formatElapsed,
+    htmlFences: htmlFences, attachmentPreviewType: attachmentPreviewType, highlight: highlight,
+  };
+});