@songsid/agend 2.3.0-beta.9 → 2.3.0

package/dist/ui/panel-chat.js

@@ -8,10 +8,10 @@
 // that apply to its state are offered (#1408 rough edges 4 and 7).
 import { html, useCallback, useEffect, useLayoutEffect, useRef, useState } from "/assets/app-html.js";
 import { lang, t } from "/assets/app-i18n.js";
-import { appStore, guestPage, useStore } from "/assets/app-store.js";
-import { AuthorizeChip } from "/assets/web-authorize.js";
+import { appStore, createStore, guestPage, useStore } from "/assets/app-store.js";
+import { ComposerAuth } from "/assets/web-authorize.js";
 import { useLease } from "/assets/app-ctx.js";
-import { modelText, namesOf, namesStore } from "/assets/instance-nav.js";
+import { modelText, namesOf, namesStore, navStore as instanceNavStore } from "/assets/instance-nav.js";
 import { PanelHeader, onPanelKey, setTitle, statusClass, statusLabel, openDrawer, requestNewInstance } from "/assets/app-shell.js";
 import { detailsPath, textLinkSegments } from "/assets/app-route.js";
 import { InstanceSwitch } from "/assets/instance-switch.js";
@@ -21,33 +21,53 @@ import { Menu } from "/assets/ui-menu.js";
 import { Dialog } from "/assets/ui-dialog.js";
 import { Empty, Skeleton } from "/assets/ui-states.js";
 import { Icon } from "/assets/ui-icons.js";
+import { recordEdit } from "/assets/text-undo.js";
 import { toast } from "/assets/ui-toast.js";
 import { confirmDialog } from "/assets/ui-confirm.js";
 import { savePref } from "/assets/app-prefs.js";
 import { applyTheme, clearAmbient, resolvedMode, themeFor, themeImageUrl, themeMenuItems, themesStore } from "/assets/app-themes.js";
 import { colorMenuItem } from "/assets/identity-color.js";
-import { IdentityCard, useCard } from "/assets/identity-card.js";
+import { brokenPictures, cardFoldable, IdentityCard, useCard } from "/assets/identity-card.js";
 import { AgentWidget, instanceBinds, widgetFor } from "/assets/agent-widget.js";
 
-// #1629 r4 §1: the identity card folded into the chat's header — folded by default; open or not is this device's choice.
+// #1629 r4 §1: the identity card under the chat's header — hidden by default; shown or not is this device's choice.
+// #2217 (the user, 2026-10-19): no row of its own; its picture and bio can be folded away (the banner stays) — this
+// device's choice too, kept the same way. The user (2026-10-20): no control on the card — one card button in the header
+// (a guest's and the public link's header too: they have no ⋯ menu), pressed-looking while the card is shown, opens a
+// small menu of two checkboxes: Show card, and Show picture and bio (disabled while the card is hidden, or when it cannot
+// fold: no banner, or nothing on its row).
 const CHAT_CARD_KEY = "agend_chat_card";
-const chatCardOpen = () => { try { return localStorage.getItem(CHAT_CARD_KEY) === "open"; } catch { return false; } };
+const CHAT_CARD_ROW_KEY = "agend_chat_card_row";
+const readKey = (k, v) => { try { return localStorage.getItem(k) === v; } catch { return false; } };
+const writeKey = (k, v) => { try { if (v) localStorage.setItem(k, v); else localStorage.removeItem(k); } catch { /* this page only */ } };
+/** Shared by the header's Show card and the card itself, so the two never disagree. */
+export const chatCardPrefs = createStore({ open: readKey(CHAT_CARD_KEY, "open"), rowHidden: readKey(CHAT_CARD_ROW_KEY, "hidden") });
+export const setChatCardOpen = (open) => { writeKey(CHAT_CARD_KEY, open ? "open" : null); chatCardPrefs.set((s) => ({ ...s, open })); };
+export const setChatCardRowHidden = (rowHidden) => { writeKey(CHAT_CARD_ROW_KEY, rowHidden ? "hidden" : null); chatCardPrefs.set((s) => ({ ...s, rowHidden })); };
 function ChatCard({ name, card }) {
-  const [open, setOpen] = useState(chatCardOpen);
-  if (!card) return null;
-  const toggle = () => { const next = !open; setOpen(next); try { if (next) localStorage.setItem(CHAT_CARD_KEY, "open"); else localStorage.removeItem(CHAT_CARD_KEY); } catch { /* this page only */ } };
-  return html`<div data-trust="card" class=${`chat-card${open ? " open" : ""}`}>
-    <button type="button" class="chat-card-toggle" aria-expanded=${open ? "true" : "false"} onClick=${toggle}>
-      <${Icon} name="chevron" size=${14} cls=${open ? "caret" : "caret flipped"} /><span>${t(open ? "card.hide" : "card.show")}</span>
-      ${!open && card.tagline ? html`<span class="chat-card-peek">${card.tagline.text}</span>` : null}
-    </button>
-    ${open ? html`<${IdentityCard} name=${name} card=${card} compact=${true} />` : null}
+  const prefs = useStore(chatCardPrefs);
+  if (!card || !prefs.open) return null;
+  return html`<div data-trust="card" class="chat-card open">
+    <${IdentityCard} name=${name} card=${card} compact=${true} rowHidden=${prefs.rowHidden} />
   </div>`;
 }
+/** The header's card menu: ☑ Show card, ☑ Show picture and bio. */
+function CardMenu({ card }) {
+  const prefs = useStore(chatCardPrefs);
+  useStore(brokenPictures);                        // a banner that failed to load: the card cannot fold, the item greys out
+  if (!card) return null;
+  const items = [
+    { key: "card", checkbox: true, checked: prefs.open, label: t("card.show"), onSelect: () => setChatCardOpen(!prefs.open) },
+    { key: "row", checkbox: true, checked: !prefs.rowHidden && cardFoldable(card), disabled: !prefs.open || !cardFoldable(card), label: t("card.showRow"),
+      onSelect: () => setChatCardRowHidden(!prefs.rowHidden) },
+  ];
+  return html`<${Menu} items=${items} label=${t("card.menu")} icon="idcard" cls="chat-card-menu" active=${prefs.open} />`;
+}
 import "./chat-strings.js";
-import { confirmedWrite } from "./settings-confirm.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";
@@ -55,11 +75,14 @@ import { PreviewPanel, claimPanel, openPanel, panelClaims, panelStore, panelVers
 import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot } from "./chat-tour.js";
 import { LightboxHost, openLightbox } from "./image-lightbox.js";
-import { ChatEffectPosters } from "/ui/js/chat-effect-posters.js";
-import { ChatEffects, chatEffectsMenuAvailable } from "./chat-effects.js";
+import { canvasWorkerMenuAvailable, experimentalComponent, useCanvasWorker } from "/assets/feature-flags.js";
+const ChatEffectPosters = experimentalComponent(() => import("./chat-effect-posters.js"), m => m.ChatEffectPosters);
+const ChatEffects = experimentalComponent(() => import("./chat-effects.js"), m => m.ChatEffects);
 import { setFollowsReducedMotion } from "/assets/fx-motion.js";
 import { AmbientMotionNote, ChatAmbient, ambientMenuItems } from "./chat-ambient.js";
-import { startAppEffects, getAppEffects } from "./app-effects.js";
+import { startEffectsWaker, getAppEffects, wakeEffects, effectsLoaded, onEffectsAwake, chatHasEffects } from "/assets/feature-flags.js";
+/** The composer's textarea (#2342: text put back into it is a step Ctrl+Z goes back from). */
+const composerField = () => (typeof document !== "undefined" ? document.getElementById("msgIn") : null);
 
 const R = () => globalThis.AgendChatRender;
 const P = () => globalThis.AgendPreview;
@@ -99,7 +122,9 @@ export async function setPreviewOptIn(on, commit = (apply) => apply()) {
 export function boot({ stream, boot: bootData, deps = {} }) {
   if (store) return store;
   store = createChatStore({
-    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
+    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog,
+    XMLHttpRequest: typeof XMLHttpRequest === "function" ? XMLHttpRequest : undefined,   // an upload's progress (chat-store.js)
+    ...deps,
   });
   emojiIndex = createEmojiIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
   mentionIndex = createMentionIndex((url) => (deps.fetch || fetch)(url, { credentials: "same-origin" }));
@@ -119,8 +144,9 @@ export function boot({ stream, boot: bootData, deps = {} }) {
   }
   // #1604: the preview opt-in and Tour live in Settings → This device now (and on each preview card's menu).
   installTour();
-  // #2118: viewing current in-scope Chat effects needs no management or personal-slot authority.
-  startAppEffects({ store });
+  // #2118: viewing current in-scope Chat effects needs no management or personal-slot authority. #2193: the runtime
+  // itself loads only when there is something to play (effects-waker.js).
+  startEffectsWaker({ store });
   return store;
 }
 
@@ -163,6 +189,10 @@ function useChatTick(name, kinds) {
 
 /** #1722: the chat's title — the name that leads, the other on hover. */
 const headerName = ({ primary, secondary }) => (secondary ? html`<span title=${secondary}>${primary}</span>` : primary);
+/** #2478: who the composer writes to — the display name, else the instance's name (a long id made the box two lines). */
+const composerLabel = (inst, name) => (inst && typeof inst.display_name === "string" && inst.display_name.trim()) || name;
+/** #2478: a touch screen (a coarse pointer) — Return is a new line there and only the Send button sends. Asked each time. */
+const touchScreen = () => typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
 
 export function ChatPanel({ route, navKey }) {
   const lease = useLease(navKey);
@@ -238,7 +268,12 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
   }, [themeKey]);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
   // First visit to this instance's chat on this page: its history (a navigation — it counts as use). Back again: nothing.
-  useEffect(() => { store.openHistory(name, lease); }, [name]);
+  // #2188: left before it answered (passing through on the way to another chat) — the read is aborted.
+  useEffect(() => {
+    const ac = typeof AbortController === "function" ? new AbortController() : null;
+    store.openHistory(name, lease, ac?.signal);
+    return () => ac?.abort();
+  }, [name]);
   useEffect(() => { try { localStorage.setItem("agend_last_instance", name); } catch { /* none */ } }, [name]);
   // Files dragged over the chat show where they go; a drop attaches them (counted, so moving over messages does not flicker).
   useEffect(() => {
@@ -271,6 +306,9 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     else if (r && r.held) toast(r.message);
     else toast(t(verb === "start" ? "chat.started" : verb === "stop" ? "chat.stoppedInst" : "chat.restarted", name));
   };
+  // #2193: this chat's Canvas Worker placements (its status row's effect_chat_v): none, no effects code runs for it.
+  const cwEnabled = useCanvasWorker();
+  const fxHere = cwEnabled && chatHasEffects(name);
   const items = [
     // #1523 N2: Details is a page now (the Fleet side of this instance), not a dialog.
     { key: "details", label: t("chat.details"), icon: "info", onSelect: () => navigate(detailsPath(name)) },
@@ -283,7 +321,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ...themeMenuItems(name),
     // #2117: its ambient — why it is not showing here (with the way to change that), and a person's Clear.
     ...ambientMenuItems(name, { publicLink: document.body.dataset.publicLink === "1", clear: clearAmbient }),
-    chatEffectsMenuAvailable() ? { key: "effects", label: t("chatFx.title"), onSelect: () => setDialog("effects") } : null,
+    cwEnabled && canvasWorkerMenuAvailable(window) ? { key: "effects", label: t("cwControls.title"), onSelect: () => setDialog("effects") } : null,
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   const cls = statusClass(inst, exec, awaiting);
@@ -296,7 +334,7 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
     ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", modelText(inst))} aria-label=${t("chat.chipModel", modelText(inst))} onClick=${() => pick("model")}>${modelText(inst)}</button>` : null}
     ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
-    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} />`}><${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
+    <${PanelHeader} title=${headerName(namesOf(inst || { name }, names.primary))} sub=${sub} nav=${guest ? null : html`<${InstanceSwitch} name=${name} current="chat" />`} notice=${html`<${ChatEffects} name=${name} lease=${lease} element=${effectSurface} store=${store} open=${dialog === "effects"} onPlayback=${publishCanvasPlayback} onClose=${() => setDialog(null)} active=${fxHere} />`}>${fxHere ? html`<${ChatEffectPosters} name=${name} lease=${lease} element=${effectSurface} />` : null}<${CardMenu} card=${card} /><${HeaderTools} navKey=${navKey} />${guest ? null : html`<${Menu} items=${items} label=${t("app.more")} />`}</${PanelHeader}>
     <${ChatCard} key=${name} name=${name} card=${card} />
     <${AgentWidget} slot="chat_header" widget=${widgetFor(name, "chat_header")} binds=${instanceBinds(inst, exec, awaiting)} />
     <div class="chat-split" ref=${split}>
@@ -322,9 +360,48 @@ function ChatView({ name, inst, lease, navKey, exec, awaiting }) {
  * each switch built the thread again: a revisit was no faster than a first visit). A kept thread is its list element
  * and its renderer, and nothing more: it leaves as a chat always did (previews stop), with no subscription or timer
  * left; shown again, one render draws only what changed meanwhile, where the reader was. A new language, another
- * document, or more than THREAD_KEEP lets one go.
+ * document, or more than the budget lets one go.
+ *
+ * #2184: the budget (raised for people who switch among ~10 favourites): up to THREAD_KEEP threads on a wide screen and
+ * THREAD_KEEP_NARROW on a narrow one (a phone), and THREAD_KEEP_NODES drawn messages in all, so memory stays bounded
+ * however long the chats are. Over it, the least recently shown goes first — one that is not a favourite before a
+ * favourite; the chat on screen never goes.
+ */
+export const THREAD_KEEP = 12;
+export const THREAD_KEEP_NARROW = 6;
+export const THREAD_KEEP_NODES = 2400;
+/**
+ * #2188: a chat shown for less than this, on the way to another (clicking down the sidebar), is not kept: it is let go
+ * as it leaves, so passing through chats never evicts the ones in use. One that was already kept stays kept.
  */
-export const THREAD_KEEP = 4;
+export const THREAD_PASS_MS = 1000;
+const monotonic = () => (typeof performance === "object" && typeof performance.now === "function" ? performance.now() : Date.now());
+let now = monotonic;
+/** Tests only: the clock THREAD_PASS_MS is measured on (null: the page's monotonic clock). */
+export function setThreadClock(fn) { now = typeof fn === "function" ? fn : monotonic; }
+/**
+ * The kept threads to let go, in order. `kept`: [name, drawn messages], least recently shown first; `current`: the
+ * one on screen (never let go).
+ */
+export function threadsToLetGo(kept, current, { keep, maxNodes, favorites }) {
+  let count = kept.length, nodes = kept.reduce((n, [, d]) => n + d, 0);
+  const out = [];
+  const order = [...kept.filter(([n]) => n !== current && !favorites.has(n)), ...kept.filter(([n]) => n !== current && favorites.has(n))];
+  for (const [n, d] of order) {
+    if (count <= keep && nodes <= maxNodes) break;
+    out.push(n); count--; nodes -= d;
+  }
+  return out;
+}
+const narrowScreen = () => typeof matchMedia === "function" && matchMedia("(max-width: 899px)").matches;
+/** Let go what the budget does not hold (after `current` was shown, or drew more). */
+function trimKept(current) {
+  const kept = [...keptThreads].map(([n, e]) => [n, e.thread.nodes.size]);
+  const favorites = new Set(instanceNavStore.get().favorites);
+  for (const n of threadsToLetGo(kept, current, { keep: narrowScreen() ? THREAD_KEEP_NARROW : THREAD_KEEP, maxNodes: THREAD_KEEP_NODES, favorites })) {
+    letGo(keptThreads.get(n), true); keptThreads.delete(n);
+  }
+}
 const keptThreads = new Map();                 // name → { thread, list, sink, lang }
 /** Tests only: let every kept thread go. */
 export function forgetKeptThreads() { for (const e of keptThreads.values()) letGo(e, true); keptThreads.clear(); }
@@ -341,7 +418,8 @@ function threadEntry(name, doc) {
   const thread = createThread(list, doc.createElement("div"), {
     t, tf: t, isUser: (x) => store.isUser(x, name), onJump: (j) => e.sink?.setJump(j), onEmpty: (v) => e.sink?.setEmpty(v),
     setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
-    effectTrialStatus: x => getAppEffects()?.trialStatus(x) ?? "localAdmin",
+    // #2193: an offer shown while the effects runtime sleeps wakes it; until it answers, the offer is being checked.
+    effectTrialStatus: x => { const fx = getAppEffects(); if (fx) return fx.trialStatus(x); if (!effectsLoaded()) { void wakeEffects(); return "checking"; } return "localAdmin"; },
     effectTrialFailure: x => getAppEffects()?.trialFailure(x),
     fixEffectTrial: (x, reason) => {
       if (reason === "reducedMotion") setFollowsReducedMotion(false);
@@ -353,6 +431,13 @@ 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
+    retryOutgoing: (clientId) => store.retryOutgoing(name, clientId),              // a failed send's Retry and Delete
+    deleteOutgoing: (clientId) => store.deleteOutgoing(name, clientId),
+    putBackOutgoing: (clientId) => { recordEdit(composerField()); store.putBackOutgoing(name, clientId); },   // undoable, as typing
+    // #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
@@ -370,16 +455,27 @@ function follow(name, thread) {
   // #1682: the same for mention names — asked for the ids the messages carry; when names arrive, drawn again.
   const wantEmojis = (msgs) => { if (emojiIndex && emojiIndex.wants(msgs)) emojiIndex.ensure(); if (mentionIndex) mentionIndex.ensure(msgs); };
   const offs = [];
-  if (emojiIndex) offs.push(emojiIndex.subscribe(() => thread.render(store.state.msgs[name] || [])));
-  if (mentionIndex) offs.push(mentionIndex.subscribe(() => thread.render(store.state.msgs[name] || [])));
+  if (emojiIndex) offs.push(emojiIndex.subscribe(() => thread.render(store.threadRows(name))));
+  if (mentionIndex) offs.push(mentionIndex.subscribe(() => thread.render(store.threadRows(name))));
   wantEmojis(store.state.msgs[name]);
   offs.push(store.subscribe((instance, kind) => {
     if (instance !== name) return;
-    if (kind === "msgs") { thread.render(store.state.msgs[name] || []); wantEmojis(store.state.msgs[name]); }
+    if (kind === "msgs") { thread.render(store.threadRows(name)); wantEmojis(store.state.msgs[name]); }
+    else if (kind === "progress") thread.progress();                       // an upload moved: its bar, in place
     else if (kind === "sent") thread.jumpLatest();
   }));
   offs.push(P() ? P().onChange(() => thread.refreshCards()) : () => {});
-  offs.push(getAppEffects()?.subscribeTrial(() => thread.render(store.state.msgs[name] || [])) ?? (() => {}));
+  // #2193: the runtime may start later (an offer shown wakes it): its trial updates are followed from then.
+  let trialOff = null, trialOwner = null;
+  const watchTrial = () => {
+    const next = getAppEffects();
+    if (next === trialOwner) return;
+    trialOff?.(); trialOff = null; trialOwner = next;
+    trialOff = next?.subscribeTrial(() => thread.render(store.threadRows(name))) ?? null;
+  };
+  watchTrial();
+  offs.push(onEffectsAwake(() => { watchTrial(); thread.render(store.threadRows(name)); }));
+  offs.push(() => { trialOff?.(); trialOff = null; trialOwner = null; });
   offs.push(panelStore.subscribe(() => thread.refreshCards()));   // a card shows whether the panel has its block
   return () => { for (const off of offs) off(); };
 }
@@ -398,29 +494,48 @@ function Thread({ name, th }) {
     if (e) keptThreads.delete(name);
     else e = threadEntry(name, doc);
     keptThreads.set(name, e);                                              // the most recent last
-    for (const [k, old] of keptThreads) {
-      if (keptThreads.size <= THREAD_KEEP) break;
-      if (k !== name) { letGo(old, true); keptThreads.delete(k); }
-    }
+    // A thread already kept is trimmed against at once; a new one first has to stay (see THREAD_PASS_MS).
+    if (kept) trimKept(name);
+    const shownAt = now();
     const thread = e.thread, sc = scroller.current, ls = e.list;
     e.sink = { setJump, setEmpty };
     host.current.append(ls);
     thread.attach(sc);
     th.current = thread;
     // Up to date, at the reader's place (the bottom unless they had scrolled up); a kept one's cards say what they can do.
-    thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
+    thread.render(store.threadRows(name), { restore: store.state.scrollMemo[name] ?? null });
     if (kept) thread.refreshCards();
     const unfollow = follow(name, thread);
     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]);
+    // #2293: search opening a message of this chat while it is shown — the address's #m= changes, the route does not.
+    // Only this chat's address: during a jump to another chat this one is still mounted for a moment.
+    const onHash = () => {
+      const m = /^#m=([0-9a-f]{1,32}-\d{1,15})$/.exec(location.hash);
+      if (m && location.pathname === `/ui/chat/${encodeURIComponent(name)}`) void thread.jumpTo(m[1]);
+    };
+    window.addEventListener("hashchange", onHash);
     return () => {
+      window.removeEventListener("hashchange", onHash);
       unfollow();
+      offActions();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       e.sink = null;
       th.current = null;
-      if (keptThreads.get(name) === e) { thread.park(); ls.remove(); }   // kept for a later visit: the chat left
+      // Passed through (new, and shown under THREAD_PASS_MS): let go. Otherwise kept for a later visit, within the budget.
+      if (keptThreads.get(name) === e && !kept && now() - shownAt < THREAD_PASS_MS) { keptThreads.delete(name); letGo(e, false); }
+      else if (keptThreads.get(name) === e) { thread.park(); ls.remove(); trimKept(null); }   // kept for a later visit: the chat left
       else letGo(e, false);                                                // let go meanwhile (a new language)
     };
   }, [name]);
@@ -441,15 +556,20 @@ function Dock({ name, inst, lease, exec, awaiting, workingLabel }) {
     <${WorkBar} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} workingLabel=${workingLabel} />
     <${CommandCard} name=${name} lease=${lease} />
     <${QuickActions} name=${name} inst=${inst} lease=${lease} />
-    ${s.failedSends[name] ? html`<div class="failed-send" role="alert"><span>${t("chat.notSent")}</span><span class="txt">${s.failedSends[name]}</span>
-      <button type="button" class="btn btn-primary btn-sm" onClick=${() => store.putBack(name)}>${t("chat.putBack")}</button>
-      <button type="button" class="btn btn-sm" onClick=${() => store.discardFailed(name)}>${t("chat.discard")}</button></div>` : null}
-    <${Composer} name=${name} lease=${lease} busy=${R().isBusy(exec)} />
-    <p class="hint" title=${t(guestPage() ? "chat.guestMore" : "chat.composerMore")}>${t("chat.composerHint")}</p>
-    ${guestPage() ? html`<p class="guest-note">${t("chat.guestNote")}</p>` : html`<${AuthorizeChip} />`}
+    ${s.waking[name] ? html`<p class="send-waking" role="status">${t("chat.waking", name)}</p>` : null}
+    <${Composer} name=${name} label=${composerLabel(inst, name)} lease=${lease} busy=${R().isBusy(exec)} />
+    <div class="composer-row">${guestPage() ? html`<span class="guest-note" title=${t("chat.guestNote")}>${t("chat.guestNote")}</span>` : html`<${ComposerAuth} />`}<span
+      class="hint" title=${t(guestPage() ? "chat.guestMore" : "chat.composerMore")}>${t(touchScreen() ? "chat.composerHintTouch" : "chat.composerHint")}</span></div>
   </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];
@@ -468,6 +588,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>`;
 }
 
@@ -514,7 +636,13 @@ 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>`;
 }
 
-function Composer({ name, lease, busy }) {
+/** #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, label = name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
   const [, tick] = useState(0);
@@ -522,14 +650,20 @@ 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.
   const guest = guestPage();
   const palette = guest || files.length || closedFor === value ? null : paletteFor(value);
   const pick = palette && palette.length ? palette[Math.min(sel, palette.length - 1)] : null;
-  // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300).
-  useLayoutEffect(() => { const el = input.current; if (!el) return; el.style.height = "auto"; el.style.height = `${Math.min(el.scrollHeight, 240)}px`; }, [value]);
+  // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300). Empty, it is one line
+  // (#2478 — a long name's placeholder made the box two lines tall).
+  useLayoutEffect(() => {
+    const el = input.current; if (!el) return;
+    el.style.height = "auto";
+    if (value) el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+  }, [value]);
   useEffect(() => { if (input.current) input.current.focus(); }, [name]);
   useEffect(() => { refreshTourSpot(); });
   const setValue = (v) => { store.setDraft(name, v); setSel(0); tick(n => n + 1); };
@@ -540,7 +674,8 @@ function Composer({ name, lease, busy }) {
     setValue("");
     store.runCommand(name, cmd.command, cmd.args, { alive: () => lease.current() });
   };
-  const complete = (c) => setValue(`/${c.name}${c.arg ? " " : ""}`);
+  // #2342: a completion is a step Ctrl+Z goes back from (to what was typed); a command that runs consumes the line.
+  const complete = (c) => { recordEdit(input.current); setValue(`/${c.name}${c.arg ? " " : ""}`); };
   const submit = () => {
     if (pick) {
       if (value === `/${pick.name}` && !needsArgument(pick.name)) runLine({ command: pick.name, args: "" });
@@ -550,7 +685,7 @@ function Composer({ name, lease, busy }) {
     // #1920: a guest's "/…" would be refused as a command — said here, the draft kept to edit.
     if (guest && /^\s*\//.test(value)) { toast(t("chat.guestNoCommands"), false); return; }
     const cmd = files.length ? null : parseCommandLine(value);
-    if (cmd && needsArgument(cmd.command) && !cmd.args) { setValue(`/${cmd.command} `); return; }
+    if (cmd && needsArgument(cmd.command) && !cmd.args) { recordEdit(input.current); setValue(`/${cmd.command} `); return; }
     if (cmd) { runLine(cmd); return; }
     store.send(name);
   };
@@ -562,7 +697,8 @@ 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 (R().composerKey(e) === "send") { e.preventDefault(); submit(); }
+    if (reply && e.key === "Escape" && !e.isComposing) { e.preventDefault(); store.clearReply(name); return; }   // #2272
+    if (R().composerKey(e, { touch: touchScreen() }) === "send") { e.preventDefault(); submit(); }
   };
   const onInput = (e) => { setValue(e.target.value); };
   // Files in a paste are attached; a very long text paste goes as a text file — only once it is really attached.
@@ -580,17 +716,25 @@ 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>
       <input ref=${fileIn} type="file" multiple hidden
         onChange=${(e) => { store.addFiles(name, e.target.files); e.target.value = ""; }} />
-      <textarea id="msgIn" ref=${input} rows="1" value=${value} placeholder=${t("chat.composerPlaceholder", name)} aria-label=${t("chat.composerPlaceholder", name)}
-        autocomplete="off" aria-controls=${palette ? "cmdPalette" : undefined} aria-expanded=${palette ? "true" : "false"}
-        aria-activedescendant=${pick ? optId(pick) : undefined} onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>
+      ${/* #2478: the placeholder is drawn beside the box, one line ending in "…" — a textarea's own placeholder is clipped,
+          never ellipsized, and a long name wrapped it to two lines. The box keeps the words as its accessible name. */ ""}
+      <span class="composer-field"><textarea id="msgIn" ref=${input} rows="1" value=${value} aria-label=${t("chat.composerPlaceholder", label)}
+        enterkeyhint=${touchScreen() ? "enter" : undefined} autocomplete="off" aria-controls=${palette ? "cmdPalette" : undefined} aria-expanded=${palette ? "true" : "false"}
+        aria-activedescendant=${pick ? optId(pick) : undefined} onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>${value ? null
+        : html`<span class="composer-ph" aria-hidden="true">${t("chat.composerPlaceholder", label)}</span>`}</span>
       <button id="stopBtn" type="button" class="btn btn-stop" hidden=${!busy} title=${t("chat.stopReplyTitle")}
         disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} /><span class="stop-label">${t("chat.stopReply")}</span></button>
-      <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content || !!s.sending[name]}
+      <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content}
         onMouseDown=${(e) => e.preventDefault()}
         aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${submit}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
     </div></div>`;
@@ -608,7 +752,7 @@ function FileChip({ f, i, name }) {
   return html`<span class="file-chip">
     ${isImage ? html`<img ref=${img} alt="" />` : html`<span class="ic"><${Icon} name="file" size=${16} /></span>`}
     <span class="nm">${f.name}</span><span class="sz">${R().formatSize(f.size)}</span>
-    ${store.isPasted(f) ? html`<button type="button" class="as-text" onClick=${() => store.fileBackAsText(name, i)}>${t("chat.asText")}</button>` : null}
+    ${store.isPasted(f) ? html`<button type="button" class="as-text" onClick=${() => { recordEdit(composerField()); store.fileBackAsText(name, i); }}>${t("chat.asText")}</button>` : null}
     <button type="button" class="chip-x" title=${t("chat.removeFile")} aria-label=${`${t("chat.removeFile")} ${f.name}`} onClick=${() => store.removeFile(name, i)}><${Icon} name="close" size=${14} /></button></span>`;
 }
 
@@ -631,7 +775,7 @@ function DeleteDialog({ name, onClose }) {
     // navigates anything (the person may be anywhere by then).
     try {
       const res = await confirmedWrite(`/ui/instances/${encodeURIComponent(name)}/delete`, { method: "POST", body: { confirm: typed }, label: t("chat.deleteTitle", name),
-        onPending: () => { handedOver = true; toast(t("app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
+        onPending: (_id, view) => { handedOver = true; toast(t(selfConfirmed(view) ? "app.pendingSelfSent" : "app.pendingSent")); if (lease.current()) { setBusy(false); onClose(); } } });
       r = res.ok ? res.body || {} : { error: (res.body && res.body.error) || `HTTP ${res.status}` };
     } catch (err) { r = { error: err && err.message ? err.message : t("chat.disconnected") }; }
     if (r && r.error) { toast(r.error, false); if (!handedOver && lease.current()) setBusy(false); return; }

package/dist/ui/panel-details.js

@@ -25,6 +25,7 @@ import { Empty, ErrorState, Skeleton } from "/assets/ui-states.js";
 import { toast } from "/assets/ui-toast.js";
 import "./chat-strings.js";
 import { api } from "./settings-confirm.js";
+import { InstanceBoardWork } from "./fleet-task-work.js";
 import { requestAgentSettings } from "./settings-request.js";
 
 export function DetailsPanel({ route, navKey }) {
@@ -150,6 +151,7 @@ function DetailsView({ name, inst, navKey, exec, awaiting }) {
         ${row(t("chat.dContext"), html`<span class="pct">${ctx != null ? `${Math.round(ctx)}%` : "--"}</span>${ctx != null ? bar(ctx, ctx > 80 ? "warn" : "") : null}`)}
         ${row(t("chat.dRate5"), html`<span class="pct">${Math.round(rl5)}%</span>${bar(rl5, rl5 > 90 ? "error" : rl5 > 70 ? "warn" : "")}`)}
         ${row(t("chat.dRate7"), html`<span class="pct">${Math.round(rl7)}%</span>${bar(rl7, rl7 > 90 ? "error" : rl7 > 70 ? "warn" : "")}`)}</section>
+      <${InstanceBoardWork} name=${name} onOpen=${(id) => navigate(`/ui/fleet?card=${encodeURIComponent(id)}`)} />
       <section class="card"><h3>${t("chat.dActivity")}</h3>${d.recent_activity?.length ? d.recent_activity.map((a, i) => html`<div key=${i} class="activity">
         <span class="mono muted">${a.timestamp ? new Date(`${a.timestamp.replace(" ", "T")}Z`).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}</span>
         <span class="ev">${a.event}</span> ${a.summary || ""}</div>`) : html`<p class="note">${t("chat.dNoActivity")}</p>`}</section>`;