@songsid/agend 2.3.0-beta.8 → 2.3.0

package/dist/ui/chat-render.js

@@ -53,11 +53,14 @@
 
   // #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. An unknown id stays the literal text.
+  // 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 /
@@ -82,7 +85,7 @@
     // 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;
-    if (known) s = s.replace(EMOJI_RE, function (m, _a, name, id) { return known(id) ? stash(store, emojiImg(id, name)) : m; });
+    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];
@@ -429,6 +432,44 @@
     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) {
@@ -468,27 +509,17 @@
   /** 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. */
-  function composerKey(ev) {
+  /**
+   * 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";
   }
 
-  /**
-   * A send that failed: where does its text go? Back into the composer only if that composer is the same
-   * target's, still on screen and empty; otherwise it is kept aside for that target (never put into another
-   * target's composer, never over a draft someone is typing) and offered back when that chat is open.
-   */
-  function settleFailedSend(target, current, composerPresent, composerValue) {
-    return target === current && composerPresent && !composerValue ? "restore" : "keep";
-  }
-
-  /** "Put back" for a kept message: in front of whatever is being typed now, never replacing it. */
-  function putBack(failedText, draft) {
-    return draft ? failedText + "\n" + draft : failedText;
-  }
-
   /** 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 };
   /**
@@ -577,6 +608,21 @@
    * 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)) + '"';
+  }
+
   function attachmentsHtml(attachments, opts) {
     if (!Array.isArray(attachments)) return "";
     var cards = !!(opts && opts.htmlCards);
@@ -599,7 +645,7 @@
       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 + '" loading="lazy"></a>');
+        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>");
       }
@@ -610,9 +656,10 @@
   return {
     renderMarkdown: renderMarkdown, escapeHtml: escapeHtml, mergeMessages: mergeMessages, applyReplyButtons: applyReplyButtons, composerKey: composerKey,
     pollRemaining: pollRemaining,
-    settleFailedSend: settleFailedSend, putBack: putBack,
+    
     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,

package/dist/ui/chat-store.js

@@ -42,7 +42,7 @@ const COMPACT_PAGE_LIMIT_MS = 11 * 60_000;
 /** Build a store. `deps` (fetch, toast, announce, t, now) are injected so tests can drive every path. */
 export function createChatStore(deps) {
   const s = {
-    msgs: {}, drafts: {}, failedSends: {}, pendingFiles: {}, sending: {}, inFlightFiles: {},
+    msgs: {}, drafts: {}, replies: {}, pendingFiles: {}, sending: {}, outgoing: {}, instanceStatus: {}, waking: {},
     prompts: {}, workingSince: {}, stopping: {}, cancelling: {}, scrollMemo: {}, historyRead: new Set(), rbBusy: new Set(),
     pollMine: readPollMine(),
     // #1823 (#1828 review): the server's clock minus this device's. A poll's deadline is the server's; a page whose clock
@@ -61,9 +61,10 @@ export function createChatStore(deps) {
 
   /** Tell subscribers what changed: `kind` "msgs" (the thread redraws) or "state" (everything else). */
   function changed(instance, kind = "state") { for (const fn of [...subs]) fn(instance, kind); }
-  async function api(method, path, body) {
+  async function api(method, path, body, signal) {
     const o = { method, headers: { "Content-Type": "application/json" } };
     if (body) o.body = JSON.stringify(body);
+    if (signal) o.signal = signal;
     const r = await deps.fetch(path, o);
     return r.json();
   }
@@ -82,6 +83,7 @@ export function createChatStore(deps) {
   function applyStatus(d) {
     if (!d || !Array.isArray(d.instances)) return;
     for (const i of d.instances) {
+      s.instanceStatus[i.name] = i.status;
       noteExec(i.name, (i.execution_state !== undefined ? i.execution_state : i.state) ?? null);
       const waits = i.state === "awaiting_input" ? (typeof i.interaction_summary === "string" ? i.interaction_summary : "") : null;
       if (i.name === s.current && waits != null && s.awaiting[i.name] == null) deps.announce(tf("chat.awaiting", i.name));
@@ -106,6 +108,8 @@ export function createChatStore(deps) {
     liveReplies.message(m, extra);
     const before = s.msgs[m.instance];
     s.msgs[m.instance] = R().mergeMessages(before, [m], 500);
+    // The live copy of a message this page sent carries its clientId: its pending bubble goes in this same redraw.
+    if (settleOutgoing(m.instance, m.role === "user" ? m.clientId : undefined) && s.msgs[m.instance] === before) changed(m.instance, "msgs");
     if (m.instance === s.current && s.msgs[m.instance] !== before && m.role !== "status" && !isUser(m, m.instance) && (s.msgs[m.instance] || []).length > (before || []).length) deps.announce(tf("chat.a11yReplied", m.sender));
     if (s.msgs[m.instance] !== before) changed(m.instance, "msgs");
   }
@@ -127,6 +131,13 @@ export function createChatStore(deps) {
     s.msgs[u.instance] = R().applyReplyButtons(before, u.buttons);
     if (s.msgs[u.instance] !== before) changed(u.instance, "msgs");
   }
+  /** #2305: the instance reacted to a message — its bubble shows it. */
+  function applyReactions(u) {
+    if (!u || typeof u.instance !== "string" || typeof u.boot !== "string" || typeof u.id !== "number") return;
+    const before = s.msgs[u.instance];
+    s.msgs[u.instance] = R().applyReactions(before, u.boot, u.id, u.reactions);
+    if (s.msgs[u.instance] !== before) changed(u.instance, "msgs");
+  }
   /**
    * #1266: click one of a reply's buttons (the first click anywhere answers for everyone). On a poll (#1823) it is this
    * session's vote: the answer is its ballot, which only this page marks.
@@ -142,16 +153,22 @@ export function createChatStore(deps) {
     if (!r || !r.answered) deps.toast(r && r.error ? r.error : t("chat.disconnected"), false);
   }
 
-  /** Read an instance's history once per page (the first time a person opens its chat). */
-  async function openHistory(name, lease) {
-    if (s.historyRead.has(name)) return false;
+  /**
+   * Read an instance's history once per page (the first time a person opens its chat). #2188: `signal` — the chat was
+   * left before the answer came (clicking down the sidebar): the read is aborted, nothing is merged, and the next visit
+   * reads again.
+   */
+  async function openHistory(name, lease, signal) {
+    if (s.historyRead.has(name) || signal?.aborted) return false;
     s.historyRead.add(name);
     try {
-      const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=200`);
+      const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=200`, undefined, signal);
+      if (signal?.aborted) { s.historyRead.delete(name); return false; }
       if (!r || !Array.isArray(r.messages)) { s.historyRead.delete(name); return true; }
       // Kept even when the person has moved on: the store is page-lived, and the answer belongs to `name`.
       for (const m of r.messages) liveReplies.message(m);
       s.msgs[name] = R().mergeMessages(s.msgs[name], r.messages, 500);
+      settleOutgoing(name);
       changed(name, "msgs");
     } catch { s.historyRead.delete(name); /* the live stream still works; the next visit tries again */ }
     void lease;
@@ -228,51 +245,186 @@ export function createChatStore(deps) {
   }
   const promptsFor = (instance) => Object.values(s.prompts).filter(p => p.instance === instance);
 
-  // ── Sending. Never lose anything: a failed send's files go back to that chat's list and its text back into its own
-  // composer when that is empty, otherwise it is kept for its chat and offered back (Put back).
-  async function uploadFile(target, file) {
-    const r = await deps.fetch(`/ui/upload?instance=${encodeURIComponent(target)}`, {
-      method: "POST",
-      headers: { "Content-Type": file.type || "application/octet-stream", "X-Agend-Filename": encodeURIComponent(file.name || "file") },
-      body: file,
+  // ── Sending (Discord-like, the user's request): a message shows at once as its own bubble, dimmed while it goes; its
+  // files show their upload progress. The server's copy replaces it when it arrives — matched by the page's clientId
+  // (on the live copy) or the messageId the send answered with — so it is never shown twice. A send that fails stays,
+  // marked, with Retry and Delete: nothing is lost, and nothing is put back into the composer behind the person's back.
+  // Sends of one chat go out in order, one at a time; a later one waits behind an earlier one still going.
+  let outSeq = 0;
+  const objectUrl = (f) => { try { return globalThis.URL && typeof URL.createObjectURL === "function" && /^image\/(png|jpeg|gif|webp)$/.test(f.type || "") ? URL.createObjectURL(f) : null; } catch { return null; } };
+  const freeUrl = (u) => { try { if (u) URL.revokeObjectURL(u); } catch { /* gone */ } };
+  const newClientId = () => {
+    const bytes = new Uint8Array(12);
+    try { globalThis.crypto.getRandomValues(bytes); } catch { for (let i = 0; i < bytes.length; i++) bytes[i] = Math.floor(Math.random() * 256); }
+    return "c" + [...bytes].map((x) => x.toString(16).padStart(2, "0")).join("");
+  };
+  /** Pending bubbles the server's copy now stands for go (their previews freed). Returns whether any went. */
+  function settleOutgoing(name, clientId) {
+    const list = s.outgoing[name];
+    if (!list || !list.length) return false;
+    const ids = new Set((s.msgs[name] || []).map((m) => m.messageId).filter(Boolean)), clients = new Set(clientId ? [clientId] : []);
+    const kept = list.filter((e) => !((e.messageId && ids.has(e.messageId)) || clients.has(e.clientId)));
+    if (kept.length === list.length) return false;
+    for (const e of list) if (!kept.includes(e)) for (const f of e.files) freeUrl(f.url);
+    s.outgoing[name] = kept;
+    return true;
+  }
+  /** The thread as drawn: the server's messages, then this page's pending ones. */
+  function threadRows(name) {
+    const out = s.outgoing[name];
+    return out && out.length ? (s.msgs[name] || []).concat(out) : (s.msgs[name] || []);
+  }
+  /** Upload one file, its progress told as it goes (XHR: fetch cannot report an upload's progress). */
+  async function uploadFile(target, file, onProgress) {
+    const url = `/ui/upload?instance=${encodeURIComponent(target)}`;
+    const X = deps.XMLHttpRequest;
+    if (!X) {                                                            // no XHR given (a test): the whole file at once
+      const r = await deps.fetch(url, { method: "POST", headers: { "Content-Type": file.type || "application/octet-stream", "X-Agend-Filename": encodeURIComponent(file.name || "file") }, body: file });
+      let body = {};
+      try { body = await r.json(); } catch { /* not JSON */ }
+      if (!r.ok || !body || typeof body.id !== "string") throw new Error(body && body.error ? `${file.name}: ${body.error}` : `${file.name}: upload failed (${r.status})`);
+      onProgress?.(file.size || 0, file.size || 0);
+      return body;
+    }
+    // The CSRF header the page's fetch adds (agend-auth.js), added here too; a 401 ends the session as fetch's would.
+    const csrf = globalThis.AgendAuth && typeof globalThis.AgendAuth.csrf === "function" ? await globalThis.AgendAuth.csrf().catch(() => null) : null;
+    return new Promise((resolve, reject) => {
+      const xhr = new X();
+      xhr.open("POST", url);
+      xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+      xhr.setRequestHeader("X-Agend-Filename", encodeURIComponent(file.name || "file"));
+      if (csrf) xhr.setRequestHeader("X-Agend-CSRF", csrf);
+      if (xhr.upload && onProgress) xhr.upload.onprogress = (ev) => { if (ev.lengthComputable) onProgress(ev.loaded, ev.total); };
+      xhr.onload = () => {
+        let body = {};
+        try { body = JSON.parse(xhr.responseText || "{}"); } catch { /* not JSON */ }
+        if (xhr.status === 401) globalThis.AgendAuth?.unauthorized?.();
+        if (xhr.status >= 200 && xhr.status < 300 && body && typeof body.id === "string") resolve(body);
+        else reject(new Error(body && body.error ? `${file.name}: ${body.error}` : `${file.name}: upload failed (${xhr.status})`));
+      };
+      xhr.onerror = () => reject(new Error(`${file.name}: ${t("chat.uploadNoConnection")}`));
+      xhr.onabort = () => reject(new Error(`${file.name}: ${t("chat.uploadNoConnection")}`));
+      xhr.send(file);
     });
-    let body = {};
-    try { body = await r.json(); } catch { /* not JSON */ }
-    if (!r.ok || !body || typeof body.id !== "string") throw new Error(body && body.error ? `${file.name}: ${body.error}` : `${file.name}: upload failed (${r.status})`);
-    return body;
   }
-  async function send(target) {
+  /** Send what the composer holds: its bubble at once, then out in this chat's order. */
+  function send(target) {
     const txt = (s.drafts[target] || "").trim();
     const files = (s.pendingFiles[target] || []).slice();
-    if ((!txt && !files.length) || !target || s.sending[target]) return;
-    s.sending[target] = true;
+    if ((!txt && !files.length) || !target) return;
+    const quote = s.replies[target];
+    const e = {
+      // "You" until the server's copy (with the person's name) replaces it: no request is made for a name.
+      boot: "out", id: ++outSeq, instance: target, role: "user", sender: t("chat.you"), text: txt,
+      ts: new Date().toISOString(), clientId: newClientId(), replyTo: quote ? { boot: quote.boot, id: quote.id, sender: quote.sender, text: quote.text, media: quote.media } : undefined,
+      quote, outgoing: { state: "queued" },
+      files: files.map((f) => ({ file: f, name: f.name || "file", size: f.size || 0, type: f.type || "", url: objectUrl(f), loaded: 0, total: f.size || 0, state: "waiting", id: null })),
+    };
+    (s.outgoing[target] = s.outgoing[target] || []).push(e);
     s.drafts[target] = "";
-    s.pendingFiles[target] = []; s.inFlightFiles[target] = files;
+    s.pendingFiles[target] = [];
+    if (quote) delete s.replies[target];
+    changed(target, "msgs");
     changed(target);
     changed(target, "sent");          // your own message: the thread goes to the bottom
+    return pump(target);
+  }
+  /** Take this chat's waiting sends, one after another. */
+  async function pump(target) {
+    if (s.sending[target]) return;
+    s.sending[target] = true;
+    try {
+      for (let e = nextQueued(target); e; e = nextQueued(target)) await deliver(target, e);
+    } finally { s.sending[target] = false; delete s.waking[target]; changed(target); }
+  }
+  const nextQueued = (target) => (s.outgoing[target] || []).find((x) => x.outgoing.state === "queued");
+  /** One send: its files (each with its own progress), then the message. */
+  async function deliver(target, e) {
+    e.outgoing = { state: "sending" };
+    s.waking[target] = s.instanceStatus[target] === "paused";
+    changed(target, "msgs"); changed(target);
     let r;
     try {
-      const ids = [];
-      for (const f of files) ids.push((await uploadFile(target, f)).id);
-      r = await api("POST", "/ui/send", ids.length ? { instance: target, message: txt, attachments: ids } : { instance: target, message: txt });
-    } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
-    s.sending[target] = false;
-    delete s.inFlightFiles[target];
-    if (r && !r.error) { changed(target); return; }
-    if (files.length) s.pendingFiles[target] = R().checkFiles(files, s.pendingFiles[target] || []).kept;
-    if (txt) {
-      const shown = s.current === target;
-      if (R().settleFailedSend(target, s.current, shown, shown ? (s.drafts[target] || "") : "") === "restore") s.drafts[target] = txt;
-      else s.failedSends[target] = s.failedSends[target] ? `${s.failedSends[target]}\n${txt}` : txt;
+      for (const f of e.files) {
+        if (f.id) continue;                                              // uploaded by an earlier try
+        f.state = "uploading"; f.loaded = 0; changed(target, "progress");
+        let last = 0;
+        const body = await uploadFile(target, f.file, (loaded, total) => {
+          f.loaded = loaded; f.total = total || f.total;
+          const at = deps.now ? deps.now() : Date.now();
+          if (at - last > 60 || loaded >= f.total) { last = at; changed(target, "progress"); }
+        });
+        f.id = body.id; f.state = "done"; f.loaded = f.total; changed(target, "progress");
+      }
+      const body = { instance: target, message: e.text, clientId: e.clientId };
+      const ids = e.files.map((f) => f.id);
+      if (ids.length) body.attachments = ids;
+      if (e.quote) body.replyTo = { boot: e.quote.boot, id: e.quote.id };
+      r = await api("POST", "/ui/send", body);
+    } catch (err) {
+      const f = e.files.find((x) => x.state === "uploading");
+      if (f) f.state = "failed";
+      // The browser's own words for a request that never reached the server (Chrome, Firefox, Safari): the page's.
+      const offline = err && err.name === "TypeError" && /failed to fetch|networkerror|load failed/i.test(err.message || "");
+      r = { error: offline ? t("chat.sendNoConnection") : err && err.message ? err.message : t("chat.disconnected") };
     }
-    changed(target);
-    deps.toast(r && r.error ? r.error : t("chat.disconnected"), false);
+    if (!(s.outgoing[target] || []).includes(e)) return;                // deleted meanwhile
+    if (r && !r.error && r.sent !== false) {
+      e.outgoing = { state: "sent" };
+      if (typeof r.messageId === "string") e.messageId = r.messageId;
+      settleOutgoing(target);
+      changed(target, "msgs"); changed(target);
+      return;
+    }
+    // Files the server no longer holds (they are released when a delivery fails) are uploaded again on Retry.
+    if (r && typeof r.error === "string" && /files? (are|is) not available|no such file|already sent/i.test(r.error)) for (const f of e.files) { f.id = null; f.state = "waiting"; }
+    // #2272: the quoted message is gone: Retry sends it without the quote.
+    if (r && r.reason === "reply_gone") { e.quote = undefined; e.replyTo = undefined; }
+    const why = r && r.reason;
+    const key = typeof why === "string" ? `chat.sendFailure_${why}` : "";
+    const localized = key ? t(key) : "";
+    e.outgoing = { state: "failed", error: localized && localized !== key ? localized : (r && r.error ? r.error : t("chat.disconnected")) };
+    changed(target, "msgs"); changed(target);
+    deps.toast(e.outgoing.error, false);
+  }
+  /** A failed send, sent again (the same bubble; files already uploaded are not uploaded again). */
+  function retryOutgoing(target, clientId) {
+    const e = (s.outgoing[target] || []).find((x) => x.clientId === clientId);
+    if (!e || e.outgoing.state !== "failed") return;
+    e.outgoing = { state: "queued" };
+    for (const f of e.files) if (f.state === "failed") f.state = "waiting";
+    changed(target, "msgs");
+    return pump(target);
+  }
+  /** A failed send, let go (its previews freed). */
+  function deleteOutgoing(target, clientId) {
+    const list = s.outgoing[target] || [];
+    const e = list.find((x) => x.clientId === clientId);
+    if (!e || e.outgoing.state !== "failed") return;
+    for (const f of e.files) freeUrl(f.url);
+    s.outgoing[target] = list.filter((x) => x !== e);
+    changed(target, "msgs"); changed(target);
+  }
+  /**
+   * A failed send, back in the composer to change it: its text before what is typed there now, its files (within the
+   * limits) and its reply, if none is started; the bubble goes. The page records the composer's undo step first.
+   */
+  function putBackOutgoing(target, clientId) {
+    const list = s.outgoing[target] || [];
+    const e = list.find((x) => x.clientId === clientId);
+    if (!e || e.outgoing.state !== "failed") return;
+    const draft = s.drafts[target] || "";
+    s.drafts[target] = e.text ? (draft ? e.text + "\n" + draft : e.text) : draft;
+    for (const f of e.files) freeUrl(f.url);
+    s.outgoing[target] = list.filter((x) => x !== e);
+    if (e.quote && !s.replies[target]) s.replies[target] = e.quote;
+    changed(target, "msgs");
+    if (e.files.length) addFiles(target, e.files.map((f) => f.file)); else changed(target);
   }
   function addFiles(target, list) {
     if (!target) return;
-    const inFlight = s.inFlightFiles[target] || [];
-    const res = R().checkFiles(inFlight.concat(s.pendingFiles[target] || []), [...(list || [])]);
-    s.pendingFiles[target] = res.kept.slice(inFlight.length);
+    const res = R().checkFiles(s.pendingFiles[target] || [], [...(list || [])]);
+    s.pendingFiles[target] = res.kept;
     for (const x of res.rejected) { const why = R().fileRejection(x.reason); deps.toast(`${x.name}: ${t(why.key, ...why.values)}`, false); }
     changed(target);
   }
@@ -282,7 +434,7 @@ export function createChatStore(deps) {
     if (!target) return false;
     const stamp = new Date().toISOString().slice(0, 19).replace(/[-:T]/g, "");
     const f = new File([text], `pasted-${stamp}.txt`, { type: "text/plain" });
-    const taken = (s.inFlightFiles[target] || []).concat(s.pendingFiles[target] || []);
+    const taken = s.pendingFiles[target] || [];
     if (R().checkFiles(taken, [f]).rejected.length) { deps.toast(t("chat.pasteKeptAsText")); return false; }
     pastedTexts.set(f, text);
     addFiles(target, [f]);
@@ -299,16 +451,32 @@ export function createChatStore(deps) {
     changed(target);
   }
   const isPasted = (f) => pastedTexts.has(f);
-  function putBack(target) {
-    const kept = s.failedSends[target];
-    if (!kept) return;
-    s.drafts[target] = R().putBack(kept, s.drafts[target] || "");
-    delete s.failedSends[target];
+  /** Typing stays local. */
+  function setDraft(target, value) { s.drafts[target] = value; }
+  /**
+   * #2272: reply to a message of this chat — what the bar above the composer shows (its sender and first words); only
+   * its row is sent. One at a time per chat: a new one replaces it.
+   */
+  function startReply(target, m) {
+    if (!target || !m || typeof m.boot !== "string" || typeof m.id !== "number") return;
+    s.replies[target] = { boot: m.boot, id: m.id, sender: String(m.sender || ""), text: String(m.click?.label ?? m.text ?? "").replace(/\s+/g, " ").trim().slice(0, 160),
+      media: (m.attachments || []).length ? ((m.attachments || []).some(a => a.kind === "photo") ? "photo" : "document") : undefined };
     changed(target);
   }
-  function discardFailed(target) { delete s.failedSends[target]; changed(target); }
-  /** Typing: kept for its chat, no redraw (the composer already shows it). */
-  function setDraft(target, value) { s.drafts[target] = value; }
+  function clearReply(target) { if (s.replies[target]) { delete s.replies[target]; changed(target); } }
+  /**
+   * #2272: the quoted message, drawn for a jump: in what this chat holds, or after reading the longest history the
+   * server keeps for it (the newest 500). false: no longer kept.
+   */
+  async function findQuoted(name, key) {
+    const has = () => (s.msgs[name] || []).some(m => `${m.boot}-${m.id}` === key);
+    if (has()) return true;
+    try {
+      const r = await api("GET", `/ui/history?instance=${encodeURIComponent(name)}&limit=500`);
+      if (r && Array.isArray(r.messages)) { s.msgs[name] = R().mergeMessages(s.msgs[name], r.messages, 500); settleOutgoing(name); changed(name, "msgs"); }
+    } catch { /* the jump says it is not there */ }
+    return has();
+  }
 
   // ── Stop the reply under way (the composer's Stop, or Esc). Set before the request goes, so a held Esc or a second
   // click sends nothing more (#1317); "Stopping…" until the agent goes idle, or a minute passes.
@@ -391,6 +559,7 @@ export function createChatStore(deps) {
     stream.on("prompts", applyPrompts);
     stream.on("prompt_resolved", resolvePrompt);
     stream.on("reply_buttons", applyReplyButtons);
+    stream.on("reactions", applyReactions);                              // #2305
     stream.on("clock", noteServerClock);                                  // #1823
   }
 
@@ -402,7 +571,8 @@ export function createChatStore(deps) {
     attach, applyStatus, applyActivity, ingest, applyDeliveries, openHistory,
     onPrompt, applyPrompts, resolvePrompt, answerPrompt, answerByNonce, holdPrompt, releasePrompt, promptsFor,
     applyReplyButtons, clickReplyButton,
-    uploadFile, send, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, putBack, discardFailed, setDraft,
+    uploadFile, send, retryOutgoing, deleteOutgoing, putBackOutgoing, threadRows, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, setDraft,
+    startReply, clearReply, findQuoted,
     cancelReply, isUser, runCommand, dismissCommand, commandFree,
   };
 }