@songsid/agend 2.3.0-beta.16 → 2.3.0-beta.17

package/dist/ui/chat-msg-actions.js

@@ -0,0 +1,176 @@
+// #2272: a chat message's own actions, beyond the hover strip — the message menu (right-click, long-press on a phone),
+// swipe left to reply (as in Telegram), and R on a focused message. One install per thread element.
+//
+// - Right-click on a message opens Reply / Copy text / Copy link. Shift+right-click, a right-click with text selected,
+//   or one on a link, an image or a field keeps the browser's own menu.
+// - A long press (500 ms without moving) opens the same menu; the click and the browser menu it would also cause are
+//   swallowed.
+// - Swipe left on a message: it follows the finger (up to 64 px); let go past 56 px and it is a reply. A mostly
+//   vertical move is scrolling, never a reply. A swipe right is the phone drawer's (app-swipe.js), on a message too: the
+//   two never fight.
+// - R (no modifier) on a focused message replies; ↑/↓ move to the message before or after (one message is in the Tab
+//   order); Escape closes the menu.
+
+const LONG_PRESS_MS = 500, MOVE_TOLERANCE = 10, SWIPE_REPLY_PX = 56, SWIPE_MAX_PX = 64;
+
+/** The message element an event is on (a person's or an agent's message of this thread), or null. */
+function messageEl(list, target) {
+  const el = target && target.closest ? target.closest(".msg[data-key]") : null;
+  return el && list.contains(el) ? el : null;
+}
+/** The browser's own menu stays for: Shift, selected text, a link, an image, a field, code. */
+function keepsNativeMenu(e, doc) {
+  if (e.shiftKey) return true;
+  const sel = doc.getSelection ? doc.getSelection() : null;
+  if (sel && !sel.isCollapsed && String(sel).trim()) return true;
+  return !!(e.target && e.target.closest && e.target.closest("a[href], img, video, input, textarea, select, pre, code, [contenteditable='true']"));
+}
+
+/**
+ * Install the gestures on `list` (the thread element). `deps`:
+ *   messageOf(key) → the row; reply(row); copyText(text) → Promise<boolean>; linkOf(row) → string; notice(text);
+ *   canReply() → boolean (false: no Reply — a page that cannot send); t(key).
+ * Returns a function that removes everything (and closes an open menu).
+ */
+export function installMessageActions(list, deps) {
+  const doc = list.ownerDocument, win = doc.defaultView;
+  let menu = null, press = null, swipe = null, swallowClick = false;
+
+  function closeMenu() {
+    if (!menu) return;
+    menu.remove(); menu = null;
+    doc.removeEventListener("pointerdown", outside, true);
+    doc.removeEventListener("keydown", onMenuKey, true);
+    win?.removeEventListener("scroll", closeMenu, true);
+    win?.removeEventListener("blur", closeMenu);
+  }
+  function outside(e) { if (menu && !menu.contains(e.target)) closeMenu(); }
+  function onMenuKey(e) {
+    if (!menu) return;
+    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); closeMenu(); return; }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = [...menu.querySelectorAll("button")], i = items.indexOf(doc.activeElement);
+      items[(i + (e.key === "ArrowDown" ? 1 : items.length - 1)) % items.length]?.focus();
+    }
+  }
+  /** The message menu at (x, y), within the window; focus on its first item. */
+  function openMenu(row, x, y) {
+    closeMenu();
+    const items = [];
+    if (deps.canReply?.() !== false) items.push(["reply", deps.t("chat.reply"), () => deps.reply(row)]);
+    items.push(["copyText", deps.t("chat.copyText"), async () => { const ok = await deps.copyText(String(row.click?.label ?? row.text ?? "")); deps.notice(deps.t(ok ? "chat.copied" : "chat.copyFailed"), ok); }]);
+    items.push(["copyLink", deps.t("chat.copyLink"), async () => { const ok = await deps.copyText(deps.linkOf(row)); deps.notice(deps.t(ok ? "chat.copied" : "chat.copyFailed"), ok); }]);
+    menu = doc.createElement("div");
+    menu.className = "msg-menu";
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", deps.t("chat.msgMenu"));
+    menu.setAttribute("data-trust", "menu");
+    for (const [id, label, run] of items) {
+      const b = doc.createElement("button");
+      b.type = "button"; b.className = "menu-item"; b.setAttribute("role", "menuitem"); b.dataset.item = id; b.textContent = label;
+      b.addEventListener("click", () => { closeMenu(); void run(); });
+      menu.append(b);
+    }
+    doc.body.append(menu);
+    const w = win?.innerWidth ?? 1024, h = win?.innerHeight ?? 768, r = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(4, Math.min(x, w - r.width - 4))}px`;
+    menu.style.top = `${Math.max(4, Math.min(y, h - r.height - 4))}px`;
+    doc.addEventListener("pointerdown", outside, true);
+    doc.addEventListener("keydown", onMenuKey, true);
+    win?.addEventListener("scroll", closeMenu, true);
+    win?.addEventListener("blur", closeMenu);
+    menu.querySelector("button")?.focus();
+  }
+
+  function onContextMenu(e) {
+    if (swallowClick) { e.preventDefault(); return; }               // the long press already opened ours
+    cancelPress();                                                   // Android's long press fires this itself: one menu
+    const el = messageEl(list, e.target);
+    if (!el || keepsNativeMenu(e, doc)) return;
+    const row = deps.messageOf(el.dataset.key);
+    if (!row) return;
+    e.preventDefault();
+    openMenu(row, e.clientX, e.clientY);
+  }
+  function onKeyDown(e) {
+    // ↑/↓ on a focused message: the one before or after it (one message is in the Tab order: the thread's rove()).
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey
+      && e.target && e.target.matches && e.target.matches(".msg[data-key]") && list.contains(e.target)) {
+      const all = [...list.querySelectorAll(".msg[data-key]")], i = all.indexOf(e.target);
+      const to = all[i + (e.key === "ArrowDown" ? 1 : -1)];
+      if (to) { e.preventDefault(); deps.rove?.(to.dataset.key); to.focus(); to.scrollIntoView?.({ block: "nearest" }); }
+      return;
+    }
+    if (e.key !== "r" && e.key !== "R") return;
+    if (e.ctrlKey || e.metaKey || e.altKey || deps.canReply?.() === false) return;
+    const el = e.target && e.target.matches && e.target.matches(".msg[data-key]") && list.contains(e.target) ? e.target : null;
+    const row = el ? deps.messageOf(el.dataset.key) : null;
+    if (!row) return;
+    e.preventDefault();
+    deps.reply(row);
+  }
+
+  function onTouchStart(e) {
+    if (e.touches.length !== 1) { cancelPress(); cancelSwipe(); return; }
+    const el = messageEl(list, e.target);
+    if (!el) return;
+    const t0 = e.touches[0];
+    const native = keepsNativeMenu({ target: e.target, shiftKey: false }, doc);   // a link, an image, code: the browser's
+    press = native ? null : { el, x: t0.clientX, y: t0.clientY, timer: setTimeout(() => {
+      const row = deps.messageOf(el.dataset.key);
+      press = null; cancelSwipe();
+      if (!row) return;
+      swallowClick = true; setTimeout(() => { swallowClick = false; }, 700);
+      openMenu(row, t0.clientX, t0.clientY);
+    }, LONG_PRESS_MS) };
+    swipe = deps.canReply?.() === false || native ? null : { el, x: t0.clientX, y: t0.clientY, dx: 0, locked: null };
+  }
+  function onTouchMove(e) {
+    const p = e.touches[0];
+    if (press && (Math.abs(p.clientX - press.x) > MOVE_TOLERANCE || Math.abs(p.clientY - press.y) > MOVE_TOLERANCE)) cancelPress();
+    if (!swipe) return;
+    const dx = p.clientX - swipe.x, dy = p.clientY - swipe.y;
+    if (swipe.locked === null && (Math.abs(dx) > MOVE_TOLERANCE || Math.abs(dy) > MOVE_TOLERANCE)) swipe.locked = dx < 0 && Math.abs(dy) < -dx / 2 ? "x" : "no";
+    if (swipe.locked !== "x") return;
+    swipe.dx = Math.max(0, Math.min(-dx, SWIPE_MAX_PX));               // how far left, as a positive distance
+    swipe.el.style.transform = `translateX(${-swipe.dx}px)`;
+    swipe.el.classList.toggle("swipe-ready", swipe.dx >= SWIPE_REPLY_PX);
+  }
+  function onTouchEnd() {
+    cancelPress();
+    if (!swipe) return;
+    const { el, dx, locked } = swipe;
+    cancelSwipe();
+    if (locked === "x" && dx >= SWIPE_REPLY_PX) { const row = deps.messageOf(el.dataset.key); if (row) deps.reply(row); }
+  }
+  function cancelPress() { if (press) { clearTimeout(press.timer); press = null; } }
+  function cancelSwipe() {
+    if (!swipe) return;
+    swipe.el.style.transform = ""; swipe.el.classList.remove("swipe-ready");
+    swipe = null;
+  }
+  function onClickCapture(e) { if (swallowClick) { e.preventDefault(); e.stopPropagation(); } }
+
+  // A message focused by a click or a tap becomes the one Tab comes back to.
+  function onFocusIn(e) { const el = e.target && e.target.matches && e.target.matches(".msg[data-key]") ? e.target : null; if (el && list.contains(el)) deps.rove?.(el.dataset.key); }
+  list.addEventListener("focusin", onFocusIn);
+  list.addEventListener("contextmenu", onContextMenu);
+  list.addEventListener("keydown", onKeyDown);
+  list.addEventListener("touchstart", onTouchStart, { passive: true });
+  list.addEventListener("touchmove", onTouchMove, { passive: true });
+  list.addEventListener("touchend", onTouchEnd, { passive: true });
+  list.addEventListener("touchcancel", onTouchEnd, { passive: true });
+  list.addEventListener("click", onClickCapture, true);
+  return () => {
+    closeMenu(); cancelPress(); cancelSwipe();
+    list.removeEventListener("focusin", onFocusIn);
+    list.removeEventListener("contextmenu", onContextMenu);
+    list.removeEventListener("keydown", onKeyDown);
+    list.removeEventListener("touchstart", onTouchStart);
+    list.removeEventListener("touchmove", onTouchMove);
+    list.removeEventListener("touchend", onTouchEnd);
+    list.removeEventListener("touchcancel", onTouchEnd);
+    list.removeEventListener("click", onClickCapture, true);
+  };
+}

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: {}, sendFailures: {}, instanceStatus: {}, waking: {},
+    msgs: {}, drafts: {}, replies: {}, failedSends: {}, pendingFiles: {}, sending: {}, inFlightFiles: {}, sendFailures: {}, 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
@@ -250,6 +250,7 @@ export function createChatStore(deps) {
   }
   async function send(target) {
     const txt = (s.drafts[target] || "").trim();
+    const quote = s.replies[target];         // #2272: the message this one replies to (its row; the server reads the rest)
     const files = (s.pendingFiles[target] || []).slice();
     if ((!txt && !files.length) || !target || s.sending[target]) return;
     s.sending[target] = true;
@@ -263,12 +264,16 @@ export function createChatStore(deps) {
     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 });
+      const body = ids.length ? { instance: target, message: txt, attachments: ids } : { instance: target, message: txt };
+      if (quote) body.replyTo = { boot: quote.boot, id: quote.id };
+      r = await api("POST", "/ui/send", body);
     } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     s.sending[target] = false;
     delete s.waking[target];
     delete s.inFlightFiles[target];
-    if (r && !r.error) { changed(target); return; }
+    if (r && !r.error) { if (s.replies[target] === quote) delete s.replies[target]; changed(target); return; }
+    // #2272: the quoted message is gone: the reply goes, the text and files stay (sent again without it, or re-aimed).
+    if (r && r.reason === "reply_gone" && s.replies[target] === quote) delete s.replies[target];
     if (files.length) s.pendingFiles[target] = R().checkFiles(files, s.pendingFiles[target] || []).kept;
     if (txt) {
       const shown = s.current === target;
@@ -331,6 +336,30 @@ export function createChatStore(deps) {
   function discardFailed(target) { delete s.failedSends[target]; changed(target); }
   /** Typing stays local, except a failed send's Retry button must follow edits too. */
   function setDraft(target, value) { s.drafts[target] = value; if (s.sendFailures[target]) changed(target); }
+  /**
+   * #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 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); 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.
@@ -425,6 +454,7 @@ export function createChatStore(deps) {
     onPrompt, applyPrompts, resolvePrompt, answerPrompt, answerByNonce, holdPrompt, releasePrompt, promptsFor,
     applyReplyButtons, clickReplyButton,
     uploadFile, send, canRetrySend, retrySend, addFiles, removeFile, attachPastedText, fileBackAsText, isPasted, putBack, discardFailed, setDraft,
+    startReply, clearReply, findQuoted,
     cancelReply, isUser, runCommand, dismissCommand, commandFree,
   };
 }

package/dist/ui/chat-strings.js

@@ -10,6 +10,9 @@ register("chat", {
     sendFailure_instance_stopped: "This instance was stopped or removed. Start it on the host before retrying.",
     sendFailure_delivery_unavailable: "The instance could not receive this message. Check its status on the host, then retry.",
     sendFailure_delivery_changed: "The session or instance changed before this message was sent. Sign in again if needed, then retry.",
+    sendFailure_reply_gone: "The message you replied to is no longer in this chat. Your text is still here: send it without the reply, or reply to another message.",
+    reply: "Reply", replyingTo: "Replying to {0}", replyCancel: "Cancel the reply (Esc)", replyHidden: "an earlier message", replyPhoto: "[Photo]", replyFile: "[File]",
+    replyGone: "That message is no longer in this chat.", replyJump: "Show the message this replies to", copyText: "Copy text", copyLink: "Copy link", msgMenu: "Message",
 
     effectTrialReason_checking: "Checking this session…",
     effectTrialReason_localAdmin: "Sign in as an admin outside the public link to Try.",
@@ -35,7 +38,7 @@ register("chat", {
     compactTimeout: "No sign that compaction finished within {0} minutes — check the agent's own chat.",
     compactLost: "Can't follow this compaction: the command did not reach the agent, or the agent stopped or changed backend.",
     compactNotCompacted: "kiro did not compact the conversation: it was too short, or the compaction was stopped.",
-    cmdChoose: "Choose", cmdCurrent: "current", chipCompact: "Compact", chipClear: "Clear…", chipContext: "Context {0}% used",
+    cmdChoose: "Choose", cmdCurrent: "current", cmdSignIn: "Sign in", cmdSignInTo: "Sign in to {0}", chipCompact: "Compact", chipClear: "Clear…", chipContext: "Context {0}% used",
     chipModel: "Model: {0} — choose another", chipEffort: "Effort: {0} — choose another",
     cmd_ctx: "Context use, model and effort", cmd_compact: "Compact the conversation", cmd_clear: "Clear the conversation (asks first)",
     cmd_model: "Show or switch the model", cmd_backend: "Switch the CLI backend, then model and effort (restarts)", cmd_effort: "Show or set the reasoning effort", cmd_cancel: "Stop the current reply",
@@ -144,6 +147,9 @@ register("chat", {
     sendFailure_instance_stopped: "這個實例已停止或移除。請先在主機啟動它，再重試。",
     sendFailure_delivery_unavailable: "實例目前無法接收這則訊息。請在主機檢查它的狀態，再重試。",
     sendFailure_delivery_changed: "訊息送出前，登入或實例狀態已改變。必要時請重新登入，再重試。",
+    sendFailure_reply_gone: "你回覆的訊息已不在這個聊天裡。內容還在：可以不帶回覆直接送出，或改回覆其他訊息。",
+    reply: "回覆", replyingTo: "回覆 {0}", replyCancel: "取消回覆（Esc）", replyHidden: "之前的一則訊息", replyPhoto: "[圖片]", replyFile: "[檔案]",
+    replyGone: "那則訊息已不在這個聊天裡。", replyJump: "顯示被回覆的訊息", copyText: "複製文字", copyLink: "複製連結", msgMenu: "訊息",
 
     effectTrialReason_checking: "正在確認工作階段…",
     effectTrialReason_localAdmin: "請在公開連結以外的儀表板以管理員登入後試播。",
@@ -169,7 +175,7 @@ register("chat", {
     compactTimeout: "{0} 分鐘內沒有看到壓縮完成的紀錄，請到代理自己的對話確認。",
     compactLost: "無法再追蹤這次壓縮：指令沒有送到代理，或代理已停止、換了後端。",
     compactNotCompacted: "kiro 沒有壓縮對話：對話太短，或壓縮被中止了。",
-    cmdChoose: "選擇", cmdCurrent: "目前", chipCompact: "壓縮", chipClear: "清空…", chipContext: "已用 {0}% 的 context",
+    cmdChoose: "選擇", cmdCurrent: "目前", cmdSignIn: "登入", cmdSignInTo: "登入 {0}", chipCompact: "壓縮", chipClear: "清空…", chipContext: "已用 {0}% 的 context",
     chipModel: "模型：{0}——選擇其他", chipEffort: "推理強度：{0}——選擇其他",
     cmd_ctx: "context 用量、模型與推理強度", cmd_compact: "壓縮對話", cmd_clear: "清空對話（會先確認）",
     cmd_model: "查看或切換模型", cmd_backend: "切換 CLI backend，再選模型和推理強度（會重新啟動）", cmd_effort: "查看或設定推理強度", cmd_cancel: "停止目前的回覆",

package/dist/ui/chat-thread.js

@@ -28,6 +28,7 @@ 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 REPLY = '<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"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>';
 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. */
@@ -141,7 +142,22 @@ export function createThread(list, scroller, opts) {
     const buttons = x.role === "agent" ? replyButtonsHtml(x.buttons) : "";
     // A person's click on a reply button shows as the button's label, never the line the agent was given (its value).
     const clicked = x.role === "user" && x.click && typeof x.click.label === "string";
-    return `<div class="msg ${u ? "user" : "agent"}"><div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div><div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, 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>`;
+    // #2272: reply to it — a hover strip at its top right (phones: swipe left or long-press; R on a focused message).
+    const key = msgKey(x);
+    const act = opts.canReply?.() === false ? "" : `<div data-trust="thread-control" class="msg-actions"><button type="button" class="chip-btn icon-only" data-act="reply" data-arg="${escAttr(key)}" title="${escAttr(tr("chat.reply"))}" aria-label="${escAttr(tr("chat.reply"))}">${REPLY}</button></div>`;
+    return `<div class="msg ${u ? "user" : "agent"}" data-key="${escAttr(key)}" tabindex="-1">${act}<div class="meta"><span class="sender">${escAttr(x.sender)}</span>${time}${ticks}</div>${quoteHtml(x.replyTo)}<div class="body">${clicked ? clickHtml(x.click) : `<div class="md">${renderedMarkdown(x.text, x.role === "agent", opts.emojis, 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>`;
+  }
+  /**
+   * #2272: what a reply quotes, above its body — the quoted sender and first words (or that it had files), as the server
+   * read them when it was sent; a button that shows that message. A guest that may not see it gets only "an earlier
+   * message". Text only: everything is escaped.
+   */
+  function quoteHtml(q) {
+    if (!q || typeof q !== "object" || typeof q.boot !== "string" || typeof q.id !== "number") return "";
+    const words = q.hidden ? tr("chat.replyHidden")
+      : (typeof q.text === "string" && q.text) || (q.media === "photo" ? tr("chat.replyPhoto") : q.media === "document" ? tr("chat.replyFile") : "");
+    const who = !q.hidden && typeof q.sender === "string" && q.sender ? `<span class="quote-sender">${escAttr(q.sender)}</span> ` : "";
+    return `<button type="button" data-trust="thread-control" class="msg-quote" data-act="jumpQuote" data-arg="${escAttr(`${q.boot}-${q.id}`)}" title="${escAttr(tr("chat.replyJump"))}"><span class="quote-mark">${REPLY}</span> ${who}<span class="quote-text">${escAttr(words)}</span></button>`;
   }
   /**
    * A button click as a chip: 🔘 and the label (escaped: the label is the agent's text). With `of` (live, while its
@@ -656,8 +672,20 @@ export function createThread(list, scroller, opts) {
     }
     armDay();
     armPolls();
+    rove();
     return added;
   }
+  /**
+   * #2272 (review): one message in the thread is in the Tab order — the last one focused while it is still drawn, else
+   * the newest; ↑/↓ move between messages (chat-msg-actions.js). The rest are -1, so Tab passes the thread in one step.
+   */
+  let roving = null;
+  function rove(key) {
+    if (key !== undefined) roving = key;
+    const at = (roving && nodes.has(roving) ? nodes.get(roving).node : null) || [...list.querySelectorAll(".msg[data-key]")].at(-1) || null;
+    for (const el of list.querySelectorAll('.msg[data-key][tabindex="0"]')) if (el !== at) el.setAttribute("tabindex", "-1");
+    if (at) at.setAttribute("tabindex", "0");
+  }
 
   function onScroll() {
     // #2158: the thread got shorter under a pinned view (text settling on a cold load, a card) and the browser clamped
@@ -742,7 +770,21 @@ export function createThread(list, scroller, opts) {
       if (trialStatus(row) === "ready" && opts.canTryEffect?.(row) === true) opts.startEffectTrial?.(row);
       else opts.fixEffectTrial?.(row, trialStatus(row));
     } else if (act === "showButtons") { const x = msgs.find(y => y.buttons && y.buttons.id === el.dataset.arg); if (x) reveal(msgKey(x)); }
+    else if (act === "reply") { const x = msgs.find(y => msgKey(y) === el.dataset.arg); if (x) opts.startReply?.(x); }
+    else if (act === "jumpQuote") void jumpTo(el.dataset.arg);
   }
+  /**
+   * #2272: show the message a reply quotes, flashed — drawn now, or after the chat reads back the longest history the
+   * server keeps; otherwise it says it is no longer there.
+   */
+  async function jumpTo(key) {
+    if (typeof key !== "string" || !key) return;
+    if (reveal(key)) return;
+    const found = opts.findQuoted ? await opts.findQuoted(key) : false;
+    if (!found || !reveal(key)) opts.notice?.(tr("chat.replyGone"));
+  }
+  /** #2272: a drawn message's row (for the message menu and gestures), or undefined. */
+  function messageOf(key) { return msgs.find(y => msgKey(y) === key); }
 
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
   /**
@@ -785,5 +827,5 @@ export function createThread(list, scroller, opts) {
     armPolls();
   }
 
-  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
+  return { render, onScroll, onClick, jumpLatest, reveal, jumpTo, messageOf, rove, refreshCards, park, attach, dispose, nodes, get unseen() { return unseen; } };
 }

package/dist/ui/panel-chat.js

@@ -66,6 +66,7 @@ import "./chat-strings.js";
 import { confirmedWrite, selfConfirmed } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
 import { createThread, msgKey } from "./chat-thread.js";
+import { installMessageActions } from "./chat-msg-actions.js";
 import { createEmojiIndex } from "./chat-emojis.js";
 import { pollPublicPreview } from "./preview-status.js";
 import { createMentionIndex } from "./chat-mentions.js";
@@ -419,6 +420,10 @@ function threadEntry(name, doc) {
     canTryEffect: x => getAppEffects()?.canTry(x) === true,
     startEffectTrial: x => { const seq = navStore.get().seq; void getAppEffects()?.startTrial(x).then(ok => { if (!ok && e.sink && navStore.get().seq === seq && document.hasFocus?.() === true && document.visibilityState === "visible") toast(t("chat.effectTrialUnavailable")); }); },
     clickReplyButton: (id, index) => store.clickReplyButton(name, id, index),      // #1266
+    // #2272: reply to a message (the bar above the composer), and show the one a reply quotes.
+    startReply: (x) => { store.startReply(name, x); doc.getElementById("msgIn")?.focus(); },
+    findQuoted: (key) => store.findQuoted(name, key),
+    notice: (text) => toast(text, false),
     replyButtonBusy: (id) => store.state.rbBusy.has(id),
     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
@@ -484,8 +489,18 @@ function Thread({ name, th }) {
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
+    // #2272: the message menu, swipe left / long-press on a phone, R on a focused message.
+    const offActions = installMessageActions(ls, {
+      t, messageOf: thread.messageOf, rove: thread.rove, reply: (x) => { store.startReply(name, x); document.getElementById("msgIn")?.focus(); },
+      copyText, notice: (text, ok = true) => toast(text, ok),
+      linkOf: (x) => `${location.origin}/ui/chat/${encodeURIComponent(name)}#m=${msgKey(x)}`,
+    });
+    // A copied message link (#m=<boot>-<id>): show that message, flashed.
+    const linked = /^#m=([0-9a-f]{1,32}-\d{1,15})$/.exec(location.hash);
+    if (linked) void thread.jumpTo(linked[1]);
     return () => {
       unfollow();
+      offActions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       e.sink = null;
@@ -525,6 +540,13 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
   </div></div>`;
 }
 
+/** #2233: the public link's page — the dashboard's Sign in is refused there, so it is never offered (#2262 review). */
+const publicLinkPage = () => typeof document !== "undefined" && !!document.body && document.body.dataset.publicLink === "1";
+/** #2233: a backend's "not signed in" choice offers Sign in (the module behind the session gate, loaded when asked). */
+function openBackendSignIn(backend) {
+  import("./backend-signin.js").then((m) => m.openSignIn({ backend }), () => toast(t("app.loadFailed"), false));
+}
+
 /** #1269: what the last chat command answered — its text, why it was refused, or a list to choose from. */
 function CommandCard({ name, lease }) {
   const c = store.state.commands[name];
@@ -543,6 +565,8 @@ function CommandCard({ name, lease }) {
     ${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}
       disabled=${!!o.disabled} title=${o.disabled || undefined} onClick=${() => { if (!o.disabled) run(o.id); }}>${o.label}</button>`)}</div>` : null}
+    ${c.choices && c.choices.options.some((o) => o.signIn) && !publicLinkPage() ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdSignIn")}>${c.choices.options.filter((o) => o.signIn).map((o) => html`<button
+      key=${`signin:${o.signIn}`} type="button" class="btn btn-sm btn-primary" onClick=${() => openBackendSignIn(o.signIn)}>${t("chat.cmdSignInTo", o.signIn)}</button>`)}</div>` : null}
   </div>`;
 }
 
@@ -589,6 +613,12 @@ function WorkBar({ name, lease, exec, awaiting, workingLabel }) {
       : html`<span class="elapsed" title=${t("chat.elapsedTitle")} aria-hidden="true">${since == null ? "" : R().formatElapsed(performance.now() - since)}</span>`}</div>`;
 }
 
+/** #2272: the reply bar's quote — the first ~80 characters, or what it had instead of text. */
+function replySnippet(r) {
+  const text = r.text ? (r.text.length > 80 ? `${r.text.slice(0, 79).trimEnd()}…` : r.text) : "";
+  return text || (r.media === "photo" ? t("chat.replyPhoto") : r.media === "document" ? t("chat.replyFile") : "");
+}
+
 function Composer({ name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
@@ -597,6 +627,7 @@ function Composer({ name, lease, busy }) {
   const [closedFor, setClosedFor] = useState(null);    // the draft the palette was closed on (Esc); it opens again on change
   const value = s.drafts[name] || "";
   const files = s.pendingFiles[name] || [];
+  const reply = s.replies[name];                       // #2272: the message this one will reply to
   const content = !!value.trim() || files.length > 0;
   // A file waiting: what goes is a message with its file, never a command (no palette, no command line). A guest never
   // runs one (#1920: the server refuses its slash text), so it has no palette either.
@@ -637,6 +668,7 @@ function Composer({ name, lease, busy }) {
     }
     if (pick && e.key === "Tab" && !e.shiftKey) { e.preventDefault(); complete(pick); return; }
     if (palette && e.key === "Escape" && !e.isComposing) { e.preventDefault(); setClosedFor(value); return; }
+    if (reply && e.key === "Escape" && !e.isComposing) { e.preventDefault(); store.clearReply(name); return; }   // #2272
     if (R().composerKey(e) === "send") { e.preventDefault(); submit(); }
   };
   const onInput = (e) => { setValue(e.target.value); };
@@ -655,6 +687,11 @@ function Composer({ name, lease, busy }) {
           <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)
         : html`<li class="cmd-none" role="option" aria-selected="false">${t("chat.cmdNotCommand")}</li>`}
     </ul>` : null}
+    ${reply ? html`<div class="reply-bar" data-trust="composer" role="status">
+      <span class="reply-mark" aria-hidden="true"><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"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg></span><span class="reply-label">${t("chat.replyingTo", reply.sender)}</span>
+      <span class="reply-text">${replySnippet(reply)}</span>
+      <button type="button" class="icon-btn reply-cancel" title=${t("chat.replyCancel")} aria-label=${t("chat.replyCancel")} onClick=${() => { store.clearReply(name); input.current?.focus(); }}><${Icon} name="close" size=${14} /></button>
+    </div>` : null}
     ${files.length ? html`<div class="pending-files">${files.map((f, i) => html`<${FileChip} key=${`${f.name}-${i}`} f=${f} i=${i} name=${name} />`)}</div>` : null}
     <div class="composer">
       <button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>

package/dist/ui/panel-needs.js

@@ -20,11 +20,12 @@ import { Empty } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
 import { toast } from "/assets/ui-toast.js";
 import { notifyStore, notifySupport, reasonText, refreshNotify, setNotify } from "/assets/app-needs.js";
+import { openSignIn, signInOffered } from "./backend-signin.js";
 
 register("needs", {
   en: {
     title: "Needs you", empty: "Nothing needs you right now", emptyHint: "When an agent waits for you, it shows here — and in your chat app's General.", emptyHintWeb: "When an agent waits for you, it shows here.",
-    open: "Open chat", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
+    open: "Open chat", signIn: "Sign in", acknowledge: "Acknowledge", acknowledging: "Acknowledging…", answering: "Answering…",
     ageNow: "just now", ageMin: "{0} min", ageHour: "{0} h", ageDay: "{0} d",
     notifyTitle: "Notify me on this device", notifyOn: "Notifications are on for this browser while a tab is open.",
     notifyOff: "Get a desktop notification when something new needs you while this tab is in the background.",
@@ -36,7 +37,7 @@ register("needs", {
   },
   "zh-TW": {
     title: "等你處理", empty: "目前沒有需要你處理的事", emptyHint: "agent 在等你時，會出現在這裡——也會出現在聊天 app 的 General。", emptyHintWeb: "agent 在等你時，會出現在這裡。",
-    open: "開啟聊天", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
+    open: "開啟聊天", signIn: "登入", acknowledge: "確認", acknowledging: "確認中…", answering: "回覆中…",
     ageNow: "剛剛", ageMin: "{0} 分鐘", ageHour: "{0} 小時", ageDay: "{0} 天",
     notifyTitle: "在這台裝置通知我", notifyOn: "這個瀏覽器的通知已開啟（需要開著分頁）。",
     notifyOff: "分頁在背景時，有新的事等你處理就跳出桌面通知。",
@@ -185,6 +186,7 @@ function NeedsItem({ item, nowMs, owner }) {
             disabled=${promptBusy} onClick=${() => answer(a.id)}>${(p ? p.busy : fallback === "busy") ? tn("answering") : a.label}</button>`) : null}
         ${item.type === "delivery" ? html`<button type="button" class="btn btn-sm" disabled=${!!ack} onClick=${acknowledge}>
             <${Icon} name="check" size=${14} />${ack === "busy" ? tn("acknowledging") : tn("acknowledge")}</button>` : null}
+        ${item.reason === "auth_paused" && item.signIn && signInOffered() ? html`<button type="button" class="btn btn-sm btn-primary" onClick=${() => openSignIn(item.signIn)}>${tn("signIn")}</button>` : null}
         <a class="btn btn-sm btn-ghost" href=${chatPath(item.instance)}>${tn("open")}</a>
       </div>
     </div>

package/dist/ui/panel-settings.js

@@ -45,6 +45,7 @@ import "./chat-strings.js";
 import { AppearanceSection } from "./settings-appearance.js";
 import { GuestsCard } from "./settings-guests.js";
 import { WebAuthorityCard } from "./settings-web-authority.js";
+import { SignInList } from "./backend-signin.js";
 
 const tn = (k, ...v) => t(`settings.${k}`, ...v);
 /** What a refused change says to a person: the server's code in words (the code itself only for one not listed). */
@@ -475,8 +476,10 @@ function Agents({ ctx, search, openDialog }) {
   };
   const head = html`<div class="list-head"><span>${Object.keys(insts).length === 1 ? tn("countAgent") : tn("countAgents", Object.keys(insts).length)}</span>
     <button type="button" class="btn btn-primary" onClick=${() => openDialog({ kind: "create" })}><${Icon} name="plus" size=${16} />${tn("newAgent")}</button></div>`;
-  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />`;
-  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />`;
+  // #2233: after the agents, each login on this machine with Sign in (backend-signin.js).
+  const signIns = html`<${SignInList} />`;
+  if (!Object.keys(insts).length) return html`${head}<${Empty} icon="bot" title=${tn("noAgents")} />${signIns}`;
+  if (!groups.length) return html`${head}<${Empty} icon="search" title=${tn("noAgentMatch", search.trim())} />${signIns}`;
   return html`${head}<div class="s-list">${groups.map(({ group, names }) => {
     const folded = collapsed.has(group) && !search.trim();      // searching opens every group
     return html`<section key=${group} class="s-group">
@@ -508,7 +511,7 @@ function Agents({ ctx, search, openDialog }) {
         </div>`;
       })}
     </section>`;
-  })}</div>`;
+  })}</div>${signIns}`;
 }
 
 function ConnectionRetry({ id, ctx }) {

package/dist/ui/shared/app-shell.js

@@ -20,7 +20,7 @@ import { OwnerCssKeepBar } from "./owner-css.js";
 import { AgentWidget, fleetBinds, sidebarWidget, sidebarWidgetStore } from "./agent-widget.js";
 
 /** Shell state shared with panels: the phone drawer, the collapsed sidebar, extensions a panel module adds. */
-export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null });
+export const shellStore = createStore({ drawer: false, collapsed: readCollapsed(), keyboard: false, dialog: null, side: null, banner: null });
 
 /**
  * The mounted panel's own sidebar section, in place of the instance list (View's roster: its groups, filter and order,
@@ -617,6 +617,7 @@ export function Shell({ panels, onNewInstance, viewOnly = false }) {
     <main id="main" class="main" tabindex="-1" inert=${shell.drawer && narrow() ? true : undefined}>
       <${ConnectionLine} />
       ${viewOnly || guest ? null : html`<${OperationLine} route=${nav.route} />`}
+      ${viewOnly || guest || !shell.banner ? null : html`<${shell.banner} />`}
       <${Outlet} route=${nav.route} seq=${nav.seq} panels=${panels} />
     </main>
     ${guest ? null : html`<${UsageRail} route=${nav.route} />`}

package/dist/ui/shared/app-stream.js

@@ -32,7 +32,8 @@
 // #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
 // #1918: traffic — a message between instances moved; delegation — a task opened, or its report closed it (SSE only: the
 // org canvas reads /ui/traffic when it has no stream).
-const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation"];
+// #2233: backend_login — a dashboard sign-in started, moved or ended (no details: the page reads its own view).
+const EVENTS = ["status", "message", "agent_reply_live", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick", "clock", "traffic", "delegation", "backend_login"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed