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

package/dist/ui/backend-signin.js

@@ -0,0 +1,297 @@
+// #2233: signing a backend in from the dashboard — the dialog, the line every admin page shows while a sign-in runs,
+// and the list Settings → Agents shows. Behind the session gate (/ui/js/); a guest's page never loads it.
+//
+// What the page is told comes from GET /ui/backend-login, as this session may see it (web-backend-login.ts): the
+// session that started a sign-in gets its terminal link, access code and device code; every other admin page only that
+// one runs, on which device, and may cancel it. The stream's `backend_login` event carries nothing — it only says to
+// read again. Starting is two steps, as in chat: check (the server keeps what it found) and start (with its id).
+import { html, useEffect, useState } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { appStore, createStore, useStore } from "/assets/app-store.js";
+import { closeDialog, shellStore, showDialog } from "/assets/app-shell.js";
+import { Dialog } from "/assets/ui-dialog.js";
+import { toast } from "/assets/ui-toast.js";
+
+register("signin", {
+  en: {
+    title: "Sign in to {0}",
+    checking: "Checking whether {0} is signed in…",
+    confirmDevice: "AgEnD runs {0}'s own sign-in on this machine. You get a link and a one-time code here, to finish in your browser.",
+    confirmTerminal: "AgEnD runs {0}'s own sign-in on this machine and opens it as a terminal in your browser (only that sign-in, no shell). You get the link and a one-time access code here.",
+    stillSignedIn: "It is still signed in: signing in again replaces that login.",
+    logoutFirst: "It signs out first ({0}), then in.",
+    publicNote: "Not at this machine? A temporary public link opens the terminal from anywhere, for this sign-in only.",
+    go: "Sign in",
+    goPublic: "Use a temporary public link",
+    cancel: "Cancel",
+    close: "Close",
+    starting: "Starting…",
+    deviceStep: "Open this page and enter the code:",
+    linkStep: "Open this page to sign in; if it gives you a code, paste it into the sign-in terminal:",
+    terminalStep: "Open the sign-in terminal and enter this access code there. It works once, for {0} minutes.",
+    openTerminal: "Open the sign-in terminal",
+    accessCode: "Access code",
+    code: "Code",
+    copy: "Copy",
+    copied: "Copied",
+    publicLink: "Public link: anyone with the link and the code could use it — keep both to yourself.",
+    loopback: "This terminal listens on the machine's own address only. Open it on that machine, or set web_terminal.bind for your network.",
+    waitingHint: "Waiting for the sign-in to show its link…",
+    signedIn: "{0} is signed in.",
+    ended: "The sign-in ended.",
+    cancelSignIn: "Cancel sign-in",
+    cancelled: "Sign-in cancelled.",
+    running: "Signing in to {0} (started on {1}).",
+    open: "Open",
+    expired: "That took too long — start again.",
+    notHere: "Signing in is not available over the public link. Open the dashboard on the machine running AgEnD, or use /login in your chat.",
+    notAdmin: "Only a fleet admin signed in on this machine or its network can sign a backend in.",
+    notOffered: "A public link is not offered for this sign-in.",
+    failed: "That did not work.",
+    listTitle: "Sign-ins",
+    listHint: "Each backend's login on this machine, and each credential profile an agent uses.",
+    stUsable: "signed in",
+    stNotSignedIn: "not signed in",
+    stNotInstalled: "not installed",
+    stTooOld: "too old",
+    stUnknown: "not checked",
+    signIn: "Sign in",
+    signInAgain: "Sign in again",
+    onHost: "Sign in on the machine: {0}",
+    install: "Install on the machine: {0}",
+    update: "Update on the machine: {0}",
+    profile: "{0} · profile {1}",
+  },
+  "zh-TW": {
+    title: "登入 {0}",
+    checking: "正在確認 {0} 是否已登入…",
+    confirmDevice: "AgEnD 會在這台機器上執行 {0} 自己的登入。這裡會給你一個連結和一次性代碼，在瀏覽器完成登入。",
+    confirmTerminal: "AgEnD 會在這台機器上執行 {0} 自己的登入，並在瀏覽器以終端機開啟（只有這個登入，沒有 shell）。這裡會給你連結和一次性存取碼。",
+    stillSignedIn: "它目前仍是登入狀態：重新登入會取代原本的登入。",
+    logoutFirst: "會先登出（{0}），再登入。",
+    publicNote: "不在這台機器前？臨時公開連結可以從任何地方開啟終端機，只用於這次登入。",
+    go: "登入",
+    goPublic: "使用臨時公開連結",
+    cancel: "取消",
+    close: "關閉",
+    starting: "啟動中…",
+    deviceStep: "開啟這個頁面並輸入代碼：",
+    linkStep: "開啟這個頁面登入；如果它給你一組代碼，請貼到登入終端機：",
+    terminalStep: "開啟登入終端機，在那裡輸入這個存取碼。只能用一次，{0} 分鐘內有效。",
+    openTerminal: "開啟登入終端機",
+    accessCode: "存取碼",
+    code: "代碼",
+    copy: "複製",
+    copied: "已複製",
+    publicLink: "公開連結：拿到連結和代碼的人都能使用——兩者都只留給自己。",
+    loopback: "這個終端機只在本機位址上接聽。請在那台機器上開啟，或為你的網路設定 web_terminal.bind。",
+    waitingHint: "等待登入顯示連結…",
+    signedIn: "{0} 已登入。",
+    ended: "登入已結束。",
+    cancelSignIn: "取消登入",
+    cancelled: "已取消登入。",
+    running: "正在登入 {0}（從 {1} 啟動）。",
+    open: "開啟",
+    expired: "等太久了——請重新開始。",
+    notHere: "公開連結上不能登入。請在執行 AgEnD 的機器上開啟儀表板，或在聊天裡用 /login。",
+    notAdmin: "只有在這台機器或它的網路上登入的 fleet 管理員，才能讓後端登入。",
+    notOffered: "這次登入不提供公開連結。",
+    failed: "沒有成功。",
+    listTitle: "登入",
+    listHint: "這台機器上每個 backend 的登入，以及代理使用的每個憑證設定檔。",
+    stUsable: "已登入",
+    stNotSignedIn: "未登入",
+    stNotInstalled: "未安裝",
+    stTooOld: "版本太舊",
+    stUnknown: "未檢查",
+    signIn: "登入",
+    signInAgain: "重新登入",
+    onHost: "在機器上登入：{0}",
+    install: "在機器上安裝：{0}",
+    update: "在機器上更新：{0}",
+    profile: "{0} · 設定檔 {1}",
+  },
+});
+const tn = (k, ...v) => t(`signin.${k}`, ...v);
+const shownOf = (backend, profile) => (profile ? tn("profile", backend, profile) : backend);
+
+/** What this page knows: the current sign-in as this session may see it, and Settings' list. */
+export const signInStore = createStore({ loaded: false, login: null, targets: [] });
+
+let reading = null, again = false;
+/**
+ * Read GET /ui/backend-login (one read at a time). Asked again while one is on its way (an event that came after it was
+ * sent): one more read follows it, so the last change is never missed (#2262 review).
+ */
+export function refreshSignIn() {
+  if (reading) { again = true; return reading; }
+  reading = fetch("/ui/backend-login", { cache: "no-store" })
+    .then((r) => (r.ok ? r.json() : null))
+    .then((b) => { if (b) signInStore.set({ loaded: true, login: b.login || null, targets: Array.isArray(b.targets) ? b.targets : [] }); return b; })
+    .catch(() => null)
+    .finally(() => { reading = null; if (again) { again = false; void refreshSignIn(); } });
+  return reading;
+}
+
+let installed = false;
+/** Once per admin page: listen for `backend_login`, read once, and show the line while a sign-in runs. */
+export function installSignIn() {
+  if (installed || !signInOffered()) return;
+  installed = true;
+  const on = appStore.get().streamOn;
+  if (typeof on === "function") on("backend_login", () => { void refreshSignIn(); });
+  void refreshSignIn();
+  shellStore.set({ banner: SignInLine });
+}
+
+/** Open the dialog for one login (a backend's default one, or a credential profile). */
+export function openSignIn({ backend, profile }) {
+  showDialog(SignInDialog, { backend, ...(profile ? { profile } : {}) });
+}
+
+/** Open the dialog on the running sign-in (its starter's view, or the cancel-only one). */
+function openRunning(login) { showDialog(SignInDialog, { backend: login.backend, ...(login.profile ? { profile: login.profile } : {}), resume: true }); }
+
+async function post(path, body) {
+  try {
+    const res = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+    let json = null; try { json = await res.json(); } catch { /* none */ }
+    return { ok: res.ok, status: res.status, body: json };
+  } catch { return { ok: false, status: 0, body: null }; }
+}
+
+const errorText = (code) => (code === "confirm_expired" ? tn("expired") : code === "tunnel_not_offered" ? tn("notOffered")
+  : code === "sign_in_not_over_public_link" ? tn("notHere") : code === "sign_in_needs_a_local_admin" ? tn("notAdmin") : tn("failed"));
+/** The public link's page (#2233: Sign in is refused there — never offered). */
+export const signInOffered = () => !(typeof document !== "undefined" && document.body && document.body.dataset.publicLink === "1");
+const loopbackHost = (h) => h === "localhost" || h === "::1" || h === "[::1]" || /^127\./.test(h);
+
+function CopyField({ label, value }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => { try { await navigator.clipboard.writeText(value); setCopied(true); } catch { toast(value); } };
+  return html`<div class="signin-field"><span class="signin-label">${label}</span><code class="signin-value">${value}</code>
+    <button type="button" class="btn btn-sm" onClick=${copy}>${copied ? tn("copied") : tn("copy")}</button></div>`;
+}
+
+/** The starter's view of a running sign-in: the device link and code, or the terminal and its access code. */
+function Running({ login }) {
+  const { hint, terminal, accessCode } = login;
+  const away = terminal && terminal.loopback && typeof location !== "undefined" && !loopbackHost(location.hostname);
+  return html`<div class="signin-run">
+    ${hint ? html`<p>${hint.code ? tn("deviceStep") : tn("linkStep")}</p>
+      ${hint.linkable ? html`<p><a data-trust="navigation" class="btn btn-primary" href=${hint.url} target="_blank" rel="noopener noreferrer">${tn("open")}</a> <span class="signin-url">${hint.url}</span></p>`
+        : html`<${CopyField} label="URL" value=${hint.url} />`}
+      ${hint.code ? html`<${CopyField} label=${tn("code")} value=${hint.code} />` : null}` : null}
+    ${terminal ? html`<p>${tn("terminalStep", terminal.ttlMinutes)}</p>
+      <p><a data-trust="navigation" class="btn btn-primary" href=${terminal.url} target="_blank" rel="noopener noreferrer">${tn("openTerminal")}</a></p>
+      ${accessCode ? html`<${CopyField} label=${tn("accessCode")} value=${accessCode} />` : null}
+      ${terminal.public ? html`<p class="signin-note">${tn("publicLink")}</p>` : null}
+      ${away ? html`<p class="signin-note">${tn("loopback")}</p>` : null}` : null}
+    ${!hint && !terminal ? html`<p class="signin-note">${tn("waitingHint")}</p>` : null}
+  </div>`;
+}
+
+export function SignInDialog({ backend, profile, resume = false, onClose }) {
+  const s = useStore(signInStore);
+  const [step, setStep] = useState(resume ? { kind: "login" } : { kind: "checking" });
+  const [busy, setBusy] = useState(false);
+  const shown = shownOf(backend, profile);
+  const close = onClose || closeDialog;
+  useEffect(() => {
+    if (resume) return undefined;
+    let gone = false;
+    post("/ui/backend-login/check", { backend, ...(profile ? { profile } : {}) }).then((r) => {
+      if (gone) return;
+      if (r.body && r.body.confirm) setStep({ kind: "confirm", confirm: r.body.confirm });
+      else setStep({ kind: "message", text: (r.body && (r.body.message || (r.body.error && errorText(r.body.error)))) || tn("failed") });
+    });
+    return () => { gone = true; };
+  }, []);
+  const login = s.login;
+  const live = step.kind === "login" && login && login.phase === "running";
+  // While a running sign-in is on screen, read it every 2 s too (a page without the stream still sees it move).
+  useEffect(() => {
+    if (!live) return undefined;
+    const h = setInterval(() => { void refreshSignIn(); }, 2000);
+    return () => clearInterval(h);
+  }, [live]);
+  const start = async (tunnel) => {
+    setBusy(true); setStep({ kind: "starting" });
+    const r = await post("/ui/backend-login/start", { confirm: step.confirm.id, ...(tunnel ? { tunnel: true } : {}) });
+    setBusy(false);
+    if (r.body && r.body.login) { signInStore.set({ login: r.body.login }); setStep({ kind: "login" }); return; }
+    setStep({ kind: "message", text: (r.body && (r.body.message || (r.body.error && errorText(r.body.error)))) || tn("failed") });
+  };
+  const cancelRun = async () => {
+    setBusy(true);
+    const r = await post("/ui/backend-login/cancel", {});
+    setBusy(false);
+    toast((r.body && r.body.message) || tn("cancelled"));
+    void refreshSignIn();
+  };
+  let body, actions;
+  if (step.kind === "checking" || step.kind === "starting") {
+    body = html`<p role="status">${step.kind === "checking" ? tn("checking", shown) : tn("starting")}</p>`;
+    actions = html`<button type="button" class="btn" disabled=${busy} onClick=${close}>${tn("cancel")}</button>`;
+  } else if (step.kind === "confirm") {
+    const c = step.confirm;
+    body = html`<p>${c.deviceAuth ? tn("confirmDevice", shown) : tn("confirmTerminal", shown)}</p>
+      ${c.tokenPresent ? html`<p>${tn("stillSignedIn")}</p>` : null}
+      ${c.logoutFirst ? html`<p>${tn("logoutFirst", c.logoutFirst)}</p>` : null}
+      ${c.publicLink ? html`<p class="signin-note">${tn("publicNote")}</p>` : null}`;
+    actions = html`<button type="button" class="btn" onClick=${close}>${tn("cancel")}</button>
+      ${c.publicLink ? html`<button type="button" class="btn" onClick=${() => start(true)}>${tn("goPublic")}</button>` : null}
+      <button type="button" class="btn btn-primary" onClick=${() => start(false)}>${tn("go")}</button>`;
+  } else if (step.kind === "message") {
+    body = html`<p class="signin-message">${step.text}</p>`;
+    actions = html`<button type="button" class="btn btn-primary" onClick=${close}>${tn("close")}</button>`;
+  } else if (!login) {
+    body = html`<p class="signin-note">${tn("ended")}</p>`;
+    actions = html`<button type="button" class="btn btn-primary" onClick=${close}>${tn("close")}</button>`;
+  } else if (!login.mine) {
+    body = html`<p>${login.phase === "running" ? tn("running", shownOf(login.backend, login.profile), login.startedOn) : tn("ended")}</p>`;
+    actions = html`<button type="button" class="btn" onClick=${close}>${tn("close")}</button>
+      ${login.phase === "running" ? html`<button type="button" class="btn btn-danger" disabled=${busy} onClick=${cancelRun}>${tn("cancelSignIn")}</button>` : null}`;
+  } else {
+    const lines = Array.isArray(login.lines) ? login.lines : [];
+    body = html`${login.phase === "running" ? html`<${Running} login=${login} />`
+        : html`<p role="status" class=${login.ok ? "signin-ok" : "signin-message"}>${login.ok ? tn("signedIn", shownOf(login.backend, login.profile)) : tn("ended")}</p>`}
+      ${lines.length ? html`<ul class="signin-lines">${lines.map((l, i) => html`<li key=${i}>${l}</li>`)}</ul>` : null}`;
+    actions = html`<button type="button" class="btn" onClick=${close}>${tn("close")}</button>
+      ${login.phase === "running" ? html`<button type="button" class="btn btn-danger" disabled=${busy} onClick=${cancelRun}>${tn("cancelSignIn")}</button>` : null}`;
+  }
+  return html`<${Dialog} title=${tn("title", shown)} onClose=${close} busy=${busy} actions=${actions}>${body}</${Dialog}>`;
+}
+
+/** The line every admin page shows while a sign-in runs (the shell's banner slot). */
+export function SignInLine() {
+  const { login } = useStore(signInStore);
+  if (!login || login.phase !== "running") return null;
+  return html`<div data-trust="status" class="conn op-line signin-line" role="status">
+    <span>${tn("running", shownOf(login.backend, login.profile), login.startedOn)}</span>
+    <button type="button" class="btn btn-sm" onClick=${() => openRunning(login)}>${tn("open")}</button></div>`;
+}
+
+const STATE_KEY = { usable: "stUsable", not_signed_in: "stNotSignedIn", not_installed: "stNotInstalled", too_old: "stTooOld", unknown: "stUnknown" };
+
+/** Settings → Agents: each login on this machine, with Sign in where the dashboard can do it. */
+export function SignInList() {
+  const { targets, loaded, login } = useStore(signInStore);
+  useEffect(() => { void refreshSignIn(); }, []);
+  if (!loaded || !targets.length) return null;
+  const running = login && login.phase === "running";
+  return html`<section class="s-group signin-list" aria-label=${tn("listTitle")}>
+    <div class="list-head"><span>${tn("listTitle")}</span></div>
+    <p class="sub">${tn("listHint")}</p>
+    ${targets.map((x) => html`<div key=${`${x.backend}:${x.profile || ""}`} class="s-row">
+      <span class="s-name">${shownOf(x.backend, x.profile)}</span>
+      <span class="tag">${tn(STATE_KEY[x.state] || "stUnknown")}</span>
+      <span class="s-br" aria-hidden="true"></span>
+      ${x.install ? html`<span class="s-meta"><code>${tn("install", x.install)}</code></span>` : null}
+      ${x.update ? html`<span class="s-meta"><code>${tn("update", x.update)}</code></span>` : null}
+      ${x.hostCommand ? html`<span class="s-meta"><code>${tn("onHost", x.hostCommand)}</code></span>` : null}
+      <span class="s-actions">${x.signIn ? html`<button type="button" class=${x.state === "not_signed_in" ? "btn btn-sm btn-primary" : "btn btn-sm"} disabled=${!!running}
+        onClick=${() => openSignIn(x)}>${x.state === "usable" ? tn("signInAgain") : tn("signIn")}</button>` : null}</span>
+    </div>`)}
+  </section>`;
+}

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: "停止目前的回覆",