@songsid/agend 2.3.0-beta.9 → 2.3.1

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-effects.js

@@ -9,7 +9,7 @@ import { navigate } from "/assets/app-nav.js";
 import { toast } from "/assets/ui-toast.js";
 import { setThemesShown, themesShown, themesStore } from "/assets/app-themes.js";
 import { setFollowsReducedMotion } from "/assets/fx-motion.js";
-import { getAppEffects } from "./app-effects.js";
+import { getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake } from "./effects-waker.js";
 
 register("chatFx", {
   en: { stock: "Off: the page layout could not be verified ({0}). Reload and report this code if it persists.", transport: "Off: the isolated effect frame could not start. Reload to try again.", enableHere: "Turn effects on here", playMotion: "Play effects anyway", leaveSafe: "Leave safe mode", viewerShow: "Show themes, effects and widgets here", clock: "Off: the page timing clock is unavailable. Reload to try again.", gatesUnknown: "Off: the playback conditions could not be verified.", resource: "Off: this effect could not be loaded or verified. Reload to try again.", frontQueue: "Waiting for a foreground slot.", consent: "This page has older playback information. Reload to use the isolated effect player.", previewMissing: "Off: the isolated effect frame is unavailable. Reload to try again.", unsupported: "Off: this browser lacks required Canvas Worker or layout support.", calibration: "Starting the effect.", baseline: "This page has older playback information. Reload to try again.", safetyUnknown: "Stopped: this device's safety history could not be verified. Reload to check it.", rawReason: "Playback blocked: {0}", missingRow: "Playback state is unavailable (runtime_unavailable).", region: "Off: this effect does not declare the chat region.", blocked: "Placed effects are blocked for this viewer:", deviceSetting: "Open device preferences", webSetting: "Open Web settings", reloadHint: "Reload page",
@@ -78,8 +78,13 @@ function ReasonAction({ reason, onClose = () => {} }) {
 }
 
 const NO_PLAYBACK = () => {};
-export function ChatEffects({ name, lease, element, store, open, onClose, onPlayback = NO_PLAYBACK }) {
+export function ChatEffects({ name, lease, element, store, open, onClose, onPlayback = NO_PLAYBACK, active = true }) {
   const cssLife = useStore(ownerCssLifecycle);
+  // #2193: `active` — this chat has placements (its status row says so). While the runtime sleeps, a chat with none
+  // attaches and reads nothing (the dialog says "No effects in this chat"); one with some wakes it and attaches once it
+  // runs. Once it runs (woken by anything — a Try card needs its chat attached), every chat attaches as before.
+  const [awake, setAwake] = useState(() => getAppEffects() !== null || effectsLoaded());
+  useEffect(() => (awake ? undefined : onEffectsAwake(() => setAwake(true))), [awake]);
   useStore(themesStore); // Viewer-local off/on is visible immediately, independent of runtime callbacks.
   // Which effects were running just before this dialog opened ("was running" is said in the past, never shown as
   // current). The ⋯ menu that opens it is a barrier too, so "just before" is within RECENT_MS of the observed stop.
@@ -100,6 +105,8 @@ export function ChatEffects({ name, lease, element, store, open, onClose, onPlay
     lease.hold(cleanup);
     try {
       setBusy(false); onClose(); setCanWrite(false); setState(null);
+      if (!active && !awake) { setState({ error: null, rows: [], effects: [], loading: false }); return cleanup; }
+      if (!awake) { void wakeEffects(); return cleanup; }        // "Checking effects…" until it runs
       const host = window, owner = getAppEffects(host);
       const current = () => live && lease.current();
       if (!owner) { setState({ error: null, rows: [], effects: [], unavailable: true, reason: typeof host.OffscreenCanvas !== "function" || typeof host.Worker !== "function" ? "unsupported_host" : "runtime_unavailable" }); return cleanup; }
@@ -132,7 +139,7 @@ export function ChatEffects({ name, lease, element, store, open, onClose, onPlay
       if (lease.current()) setState({ error: "runtime_unavailable", rows: [], effects: [] });
       return cleanup;
     }
-  }, [name, lease]);
+  }, [name, lease, active, awake]);
   const rows = state?.rows ?? [], effects = state?.effects ?? [];
   if (open && !wasOpen.current) {
     const now = performance.now();

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-render.js

@@ -432,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) {
@@ -471,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 };
   /**
@@ -580,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);
@@ -602,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>");
       }
@@ -613,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,