// Chat, as a mini-app — the existing chat retooled onto the framework, not a
// parallel one. It speaks the wire protocol we already have (the composer
// emits an original-shaped untyped payload) AND renders the original feed's exact
// markup: every element uses the same class names and structure appendMessage
// builds, so style.css styles both feeds identically — hover-revealed times
// and action icons, reply quotes, separators, reactions — with no duplicated
// CSS. If the two ever look different, it's a bug here, not a style fork.
//
// The host (chat.js) feeds the app everything the original feed consumes:
//
//   chat.msg     ← each stored message's decrypted payload (text, attachment
//                  metadata, replyTo), history / live / scroll-back alike
//   chat.react   ← the server's reaction frames / load-time reaction lists
//   chat.edit    ← edit frames (server-verified author), decrypted
//   chat.delete  ← delete frames (server-verified author, hard-deleted)
//
// Those four are hostEvents — host-only fold handlers, never wire types — so a
// member cannot spoof a reaction/edit/delete by posting a typed message.
// Everything outbound (send, react, edit, unsend, upload, unfurl, older pages)
// goes back through the original machinery via the narrow host bridge below.
// Typing is the one wire type the app owns, as a relay-only ephemeral event.
//
// This is the DEFAULT chat experience for group/DM threads; a device can
// switch back per-device (⋮ menu → "Use original chat" — see chat.js).
import { defineApp, namespace, keyedList, runCommand, runAppMention, messageActionsFor, commandCatalog, buildLocalNotice, renderApp, deliverAnswer, cancelAnswer, setAnswerCancelledHook, parseMeCommand, defaultCommandFor, appChatReadOnly, setCommandPanelHost, notifyCommandPanel, motionOK } from "../apps.js";
import { replySnippet, formatBytes, emojiOnlyCount, firstLink, youtubeId, typingSummary } from "../format.js";
import { openLightbox } from "../lightbox.js";
import { parseMessage, renderTree, plainText as mdPlainText } from "../markdown.js";
import { createComposer, adoptComposer, classicComposerPref, formatAsYouTypePref } from "../composer.js";

// The rich (ProseMirror) composer backend loads via a primed dynamic import —
// fetching starts at module load, mounts long after — and never in the native
// shells' webviews (they draw their own composer; the hidden one stays the
// cheap textarea). If the import fails, the factory quietly falls back to the
// plain backend: chat always works.
let pmModule = null;
// (typeof guard: the event-vector tests import this module under Node.)
if (typeof document !== "undefined" && !document.documentElement.classList.contains("native")) {
  import("../composer-pm.js").then((m) => (pmModule = m)).catch(() => null);
}
import { renderCard, CARD_CSS } from "../cards.js";
import { emojify } from "../emoji.js";
import { fileIcon, shouldSend, composerToken, ownMessage, sameSender } from "../ui.js";
import { decodeBlurhash } from "../blurhash.js";

// The host bridge: chat.js injects the pieces that are server mechanisms,
// key-holding machinery, or host state — the app never touches crypto/tokens.
//   react(threadId, sid, emoji, on, targetUid, targetText)
//                                        encrypted react/unreact event
//   del(threadId, sid)                   original delete frame (server-verified)
//   edit(threadId, sid, payload)         re-encrypt + original edit frame
//   loadBlob(threadId, att) → url        fetch + decrypt an attachment blob
//   upload(threadId, file) → att | null  downscale/allow-list/encrypt/upload
//   unfurl(url) → preview | null         the OpenGraph card data
//   loadOlder(threadId, beforeSid) → n   fold an older history page: rows
//                                        folded, 0 = the server says history
//                                        ends here, -1 = the FETCH FAILED
//                                        (never latch `exhausted` on -1)
//   mentionNames() / mention(label, el)  roster labels + the member menu
//   isGroup(threadId) / agentKind(name)  sender-name + AI/BOT-badge rules
//   icons                                the original in-code SVG icon strings
let host = null;
export function setHost(h) {
  host = h;
}

const REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🎉"]; // mirrors allowedReactions (hub.go)
const EDIT_WINDOW_MS = 15 * 60 * 1000; // mirrors editWindow (hub.go); server enforces it
const TIME_SEPARATOR_GAP_MS = 15 * 60 * 1000; // mirrors the original feed's separator rule
// Typing beats, mirroring the original composer: while you're typing we re-emit a
// beat every TYPING_INTERVAL_MS so the receiver's indicator survives a pause, and
// each beat expires after TYPING_EXPIRY_S — comfortably longer than the interval,
// so a single late/dropped beat doesn't blink the indicator out.
const TYPING_INTERVAL_MS = 10000;
const TYPING_EXPIRY_S = 15;
const coarse = typeof matchMedia !== "undefined" && matchMedia("(pointer: coarse)").matches;

// Event TYPES only: N.ev("msg") → "chat.msg", etc. (chat reuses the original
// feed's shared CSS classes — .msg/.bubble/.feed/… — which stay literal.)
const N = namespace("chat");

// Per-thread presence: name → epoch ms until which they count as typing.
// Ephemeral events never fold, so this lives outside reducer state — it's
// transient UI, allowed to differ between devices.
const typing = new Map(); // threadId → Map(name → until)
const refreshTyping = new Map(); // threadId → fn redrawing the typing row

// Private command replies ("only visible to you") live in the feed as CLIENT-ONLY
// rows: never sent, gone on reload, and interleaved with real messages so they
// stack like chat bubbles and persist (no auto-dismiss). Each carries a `seq` just
// above the newest message at creation time, so a later real message falls below
// it. render() folds these into its keyedList (see the notice branch in renderItem).
const localNotices = new Map(); // threadId → [{ id, seq, sender, text, actions }]
const refreshFeed = new Map(); // threadId → fn re-rendering this chat pane
const mountedCtx = new Map(); // threadId → live app ctx (for shell-injected notices)
const pendingNotices = new Map(); // threadId → [spec] queued until that thread mounts
let noticeSeq = 0; // monotonic: unique ids + a stable tie-break within a thread

// appendNotice injects a private "only visible to you" notice into a thread's feed
// from OUTSIDE a command (the shell uses it when an action chip answers in place —
// the welcome's "Take the tour", and the tour continuing after it navigates you to
// the Eleven DM). If the target thread isn't mounted yet (we just navigated to it
// and its feed is still loading), the notice is queued and flushed when it mounts.
export function appendNotice(threadId, spec) {
  const ctx = mountedCtx.get(threadId);
  if (ctx) {
    addLocalNotice(ctx, spec);
    return;
  }
  const q = pendingNotices.get(threadId) || [];
  q.push(spec);
  pendingNotices.set(threadId, q);
}

// setNoticeTyping shows/clears a typing row for a SCRIPTED speaker (the setup
// conversation's "Eleven is typing…" beat before each reply). Local-only — it
// rides the same transient typing state as real members' beats, never the wire.
// The until-cap self-expires a beat whose clear got lost.
export function setNoticeTyping(threadId, name, on) {
  let m = typing.get(threadId);
  if (!m) typing.set(threadId, (m = new Map()));
  if (on) m.set(name, Date.now() + 10000);
  else m.delete(name);
  const refresh = refreshTyping.get(threadId);
  if (refresh) refresh();
}

// addLocalNotice records a command reply for `threadId` and re-renders the pane so
// it appears immediately. Anchored just above the current newest message so it
// sits where you typed it and never jumps around as the conversation continues.
// The composer placeholder follows the conversation: a scripted question can
// carry a `hint` ("e.g. Finn Wolfhard") that replaces "Message" the moment the
// question renders, or an `attachHint` ("Optional: describe your photo") that
// applies only while attachments are staged — a photo question shouldn't
// relabel the box before there's a photo. A `label` ("Your name:") renders as
// an inset field label INSIDE the input — the Mail/Messages "To:" pattern —
// so the ask survives even when the placeholder is hidden by typed text.
// Sending resets everything to "Message"; the next question sets its own.
// Keyed like refreshFeed.
const composerHints = new Map();
const composerAttachHints = new Map();
const composerLabels = new Map();
const refreshComposerHint = new Map();
function applyComposerHint(threadId) {
  const fn = refreshComposerHint.get(threadId);
  if (fn) fn();
}
function clearComposerHint(threadId) {
  composerHints.set(threadId, "");
  composerAttachHints.set(threadId, "");
  composerLabels.set(threadId, "");
  applyComposerHint(threadId);
}
// A cancelled ask never strands its pill (#1375) — whoever cancelled it.
setAnswerCancelledHook((threadId) => clearComposerHint(threadId));

// Feed-follow with intent: feedGlideToBottom eases towards the (still
// growing) bottom, and while it's in flight feedNearBottom stays true — an
// instantaneous scrollTop read mid-glide looks "scrolled away" and used to make
// the typing row skip its pin. A user wheel/touch cancels the chase.
const feedGlides = new WeakSet();
const feedGlideCancels = new WeakSet();
export function feedNearBottom(feed, slack = 80) {
  return feedGlides.has(feed) || feed.scrollHeight - feed.scrollTop - feed.clientHeight < slack;
}
// How far the reader has to scroll up before the "jump to latest" button
// appears — deliberately much wider than feedNearBottom's 60px auto-pin
// slack, so the button doesn't show for merely reading the newest message.
const JUMP_BUTTON_GAP = 400;
export function feedGlideToBottom(feed, jump) {
  if (!feedGlideCancels.has(feed)) {
    feedGlideCancels.add(feed);
    const cancel = () => feedGlides.delete(feed);
    // Cancel on SCROLL INTENT only — wheel, or an actual touch DRAG. A bare
    // touchstart is any tap in the feed (action chips included), and cancelling
    // on those broke the follow for every chip-tapped step on touch devices.
    feed.addEventListener("wheel", cancel, { passive: true });
    feed.addEventListener("touchmove", cancel, { passive: true });
  }
  if (jump || matchMedia("(prefers-reduced-motion: reduce)").matches) {
    feedGlides.delete(feed);
    feed.scrollTop = feed.scrollHeight;
    return;
  }
  if (feedGlides.has(feed)) return; // the running glide chases new growth itself
  feedGlides.add(feed);
  // NB for anyone adding a scroll of their own: while this set holds the feed,
  // step() writes scrollTop EVERY frame and feedNearBottom reports "at bottom"
  // regardless of geometry — so a smooth scrollIntoView elsewhere is cancelled
  // on the next frame and each render re-arms the follow. Call feedCancelGlide
  // first (see revealMessage).
  // Also detect intervention we DON'T get events for (scrollbar drag, PageUp,
  // arrow keys): if scrollTop is meaningfully below where we last placed it, the
  // user moved it — bail so we never fight them back down.
  let lastSet = feed.scrollTop;
  const step = () => {
    if (!feedGlides.has(feed)) return; // cancelled by the user (wheel/touch)
    if (feed.scrollTop < lastSet - 12) {
      feedGlides.delete(feed);
      return;
    }
    const target = feed.scrollHeight - feed.clientHeight;
    const d = target - feed.scrollTop;
    if (Math.abs(d) < 2) {
      feed.scrollTop = target;
      feedGlides.delete(feed);
      return;
    }
    feed.scrollTop += d * 0.16;
    lastSet = feed.scrollTop;
    requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}

// Stop a running follow-the-bottom glide. The wheel/touchmove listeners above
// do this when the reader intervenes; a scroll WE start has to do it
// explicitly, because step() would otherwise overwrite scrollTop on its next
// frame (an auto-behaviour write cancels an in-flight smooth scroll) and the
// glide's presence keeps feedNearBottom true, re-arming the follow on every
// subsequent render.
export function feedCancelGlide(feed) {
  feedGlides.delete(feed);
}

function addLocalNotice(ctx, spec) {
  composerHints.set(ctx.threadId, spec.hint || "");
  composerAttachHints.set(ctx.threadId, spec.attachHint || "");
  composerLabels.set(ctx.threadId, spec.label || "");
  applyComposerHint(ctx.threadId);
  // Hint-only (a persisted question with no chips): the placeholder was the
  // whole point — don't add an empty row to the feed.
  if (!spec.text && !spec.img && !(spec.actions && spec.actions.length)) return;
  const msgs = (ctx.getState() && ctx.getState().msgs) || [];
  const maxSid = msgs.length ? msgs[msgs.length - 1].sid : 0;
  const list = localNotices.get(ctx.threadId) || [];
  noticeSeq += 1;
  // maxSid + a tiny monotonic fraction: strictly between this sid and the next, so
  // ordering vs. integer message sids is unambiguous and creation order is kept.
  // `at` (creation time) drives the loud→compact collapse in buildLocalNotice: a
  // fresh reply shows the full card then calms down; one rebuilt long after it
  // landed (thread reopened) starts compact. `short` is the terse one-liner text.
  list.push({ id: "ln" + noticeSeq, seq: maxSid + noticeSeq * 1e-6, sender: spec.sender || null, text: spec.text || "", short: spec.short || "", place: spec.place || "", actions: spec.actions || null, img: spec.img || "", imgAlt: spec.imgAlt || "", at: Date.now() });
  localNotices.set(ctx.threadId, list);
  // A notice is always a response to something the reader just did (a command,
  // an action chip, a scripted step) — snap to it like a local send, even if
  // they'd scrolled up.
  // A full notice snaps the feed like a local send (pinNext → instant); a
  // chips-only row rides the smooth glide of the bubble it belongs to — the
  // extra instant jump right after a glide is what reads as jank.
  if (spec.text || spec.img) pinNext.add(ctx.threadId);
  const refresh = refreshFeed.get(ctx.threadId);
  if (refresh) refresh();
}

function typingNames(threadId, exceptName) {
  const m = typing.get(threadId);
  if (!m) return [];
  const now = Date.now();
  const out = [];
  for (const [name, until] of m) {
    if (until <= now) m.delete(name);
    else if (name && name !== exceptName) out.push(name);
  }
  return out;
}

// Command panels: the transient results surface a slash command can open
// (ctx.panel — see the command-panels section of apps.js). Each mounted pane
// registers its controller in buildSkeleton; the one injected host routes an
// open/close to the pane it belongs to. Returning false when the thread has no
// mounted chat surface lets the command fall back to a plain reply.
const cmdPanels = new Map(); // threadId → (spec|null) => void
setCommandPanelHost((threadId, spec) => {
  const show = cmdPanels.get(threadId);
  if (!show) return false;
  show(spec);
  return true;
});

// Which reactions are mine, keyed "sid|emoji" — seeded from the load-time mine
// flags and kept current by local toggles, exactly like the original feed's
// myReactions set (live reaction frames carry counts only).
const myReactions = new Set();

// The composer controller for each mounted thread, so bubble actions (Reply,
// Edit) can reach the composer they share a pane with.
const composers = new Map(); // threadId → { refreshSend(), startReply(item), startEdit(item) }

// The reply-thread view controller for each mounted thread, so bubble taps (a
// quote card, a "N Replies" tally) can lift that thread over the pane they live
// in. Built alongside the composer in buildSkeleton, overwritten per mount.
// paneComposer() hands out the docked pane's composer api while one is mounted
// (null otherwise) — how setConnected and bubble actions reach the second
// composer without a second registry.
const threads = new Map(); // threadId → { open(rootSid, ref, opener), close(), isOpen(), paneComposer(), openForMessage(sid), reveal(sid) }

// composerFor: the composer a bubble action (Reply, Edit, swipe-reply) lands
// in — the docked thread pane's own when the acting bubble lives inside that
// pane, else the thread's main composer. Decided on the DOM (is the anchor
// inside `.chatapp-thread-panel--docked`?), not on state: the pane's rows come
// from the same renderItem as the transcript's, so WHERE the bubble is is the
// only thing that tells the two apart. The overlay has no pane composer
// (paneComposer() is null), so it resolves to the main one — as before.
function composerFor(anchor, ctx) {
  const t = threads.get(ctx.threadId);
  const pane = t && t.paneComposer && t.paneComposer();
  if (pane && anchor && anchor.closest && anchor.closest(".chatapp-thread-panel--docked")) return pane;
  return composers.get(ctx.threadId);
}

// openReplyThread: the "Reply in thread" verb — open the thread `m` belongs
// to (threadTarget: a message already in a thread continues it; anything else
// roots a new thread on itself), docked or lifted per openThread's
// width check. From a bubble inside the pane itself this is harmless: same
// root, so openThread's already-open branch just refocuses. The opener is
// where focus returns on close, so only a node that can take focus is worth
// recording: press-and-hold and the cmd/ctrl-T hotkey anchor the picker on
// the bubble (a plain div), and handing closeThread an unfocusable node would
// swallow its main-composer fallback.
function openReplyThread(m, ctx, anchor) {
  const t = threads.get(ctx.threadId);
  if (!t) return;
  const target = threadTarget(((ctx.getState() || {}).msgs) || [], m);
  if (!target.id) return;
  t.open(target.id, target, anchor && anchor.tabIndex >= 0 ? anchor : null);
}

// convertChain / convertToThread: the "Convert to thread" verb — take the
// inline reply chain hanging under `m` out of the transcript and into a thread
// rooted on `m`. The chain is derived here, on the converting client, and
// shipped as an explicit id list (see the chat.convert fold): the list is what
// everyone folds, so no two clients can disagree about what moved.
//
// convertChain is the same question the menus ask to decide whether to offer
// the verb at all — a message with nothing under it never shows it, and neither
// does a bubble inside a thread (nothing inline hangs off one).
//
// `anchor` is the bubble the menu opened on, and it settles the one case the
// chain can't: a thread's ROOT is rendered inside the thread view too, and it
// CAN still have inline replies out in the feed. Tidying those is something
// you do while looking at the feed, so the verb stays out of the thread's own
// menus — the same call the native containers make.
function convertChain(m, ctx, anchor) {
  if (!m || !m.sid || !host || !host.convert) return [];
  if (anchor && anchor.closest && anchor.closest(".chatapp-thread-panel")) return [];
  return inlineChainIds(((ctx.getState() || {}).msgs) || [], m.sid);
}

// The confirm is deliberate, not ceremony: this reorganises the chat for
// EVERYONE and, in v1, can't be undone (see convertConfirm).
//
// A conversion that can't reach the server has to SAY so. Nothing about a
// failed one is visible — the chain simply stays where it was, which is
// exactly what it looks like when nobody converted anything — so after
// confirming a one-way act the reader would be left believing it happened. The
// answer is an ordinary private notice in the feed (inline, "only visible to
// you"), never a floating toast.
function convertToThread(m, ctx, anchor) {
  const ids = convertChain(m, ctx, anchor);
  if (!ids.length) return;
  if (!confirm(convertConfirm(ids.length))) return;
  Promise.resolve(host.convert(ctx.threadId, m.sid, ids)).then((sent) => {
    if (!sent) addLocalNotice(ctx, { text: "Those replies didn't move — the connection dropped. Try again once you're back online.", short: "Couldn't move those replies" });
  });
}

// activeThreadPane: the open reply-thread controller for a mounted thread
// (null when none is open) — how the shell's ▤ Views menu lists an open
// thread as a view and puts focus back in it. openThread/closeThread dispatch
// lchat:views-changed, so that menu repaints as the pane comes and goes.
export function activeThreadPane(threadId) {
  const t = threads.get(threadId);
  return t && t.isOpen() ? t : null;
}

// threadListCount / openThreadList: the ▤ Threads row's two questions — is
// there anything to list in this chat (0 hides the row, and with it the whole
// menu when nothing else offers a view), and open the list. Kept as plain
// exports beside activeThreadPane so the shell asks chat.js rather than
// re-deriving threads from state it doesn't own.
export function threadListCount(threadId) {
  const t = threads.get(threadId);
  return t && t.listCount ? t.listCount() : 0;
}

export function openThreadList(threadId) {
  const t = threads.get(threadId);
  return !!(t && t.openList && t.openList());
}

// Threads whose next render should snap to the newest message even if the reader
// had scrolled up — set when you send from the composer (a reply included), since
// there's no optimistic echo: your message only lands on the server round-trip's
// re-render, by which time render()'s scroll-position check has forgotten you just
// sent. render() consumes (and clears) this so a send always brings your message
// into view, like every familiar chat client.
const pinNext = new Set(); // threadId

// Whether the socket is currently open. chat.js flips this on ws open/close so
// each composer can grey its send button while a message can't reach the server
// — a send while down is kept in the composer, never dropped (see compose.onsubmit).
let connected = true;
export function setConnected(v) {
  connected = v;
  for (const c of composers.values()) c.refreshSend();
  // The docked thread pane's composer isn't in `composers` (one entry per
  // thread, the main block's) — reach it through the threads registry so its
  // send button greys with the socket too.
  for (const t of threads.values()) {
    const pane = t.paneComposer && t.paneComposer();
    if (pane) pane.refreshSend();
  }
}

// Successful unfurl results cached by URL so a bubble re-render doesn't
// refetch; a failed or empty unfurl is evicted (see addLinkPreview) so a later
// render retries rather than staying blank until a full reload.
const unfurls = new Map(); // url → Promise<preview | null>

// One document-level hotkey listener, dispatching to the currently-active
// mount's handler. render() re-points this on every open — including the
// instant-restore path where buildSkeleton is skipped — and only ever to a
// connected root, so a parked/torn-down pane never hijacks the shortcuts.
let hotkeys = null;
if (typeof document !== "undefined") {
  document.addEventListener("keydown", (e) => {
    if (hotkeys) hotkeys(e);
  });
}

// ---- time helpers (the original feed's exact rules) -------------------------

function formatTime(ms) {
  return new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
}
function sameDay(a, b) {
  const da = new Date(a);
  const db = new Date(b);
  return da.getFullYear() === db.getFullYear() && da.getMonth() === db.getMonth() && da.getDate() === db.getDate();
}
// "Today" / "Yesterday" / a weekday (past week) / a date — the separator label.
function dayLabel(ms) {
  const now = Date.now();
  if (sameDay(ms, now)) return "Today";
  if (sameDay(ms, now - 86400000)) return "Yesterday";
  const d = new Date(ms);
  if (now - ms < 7 * 86400000) return d.toLocaleDateString([], { weekday: "long" });
  const sameYear = new Date(now).getFullYear() === d.getFullYear();
  return d.toLocaleDateString([], sameYear ? { month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" });
}

// viewItems derives the render list from folded messages, with the original
// feed's exact grouping rules: a .time-sep when a message opens the feed, the
// calendar day changes (dated), or >15 min passed (time only); `cont` (tighter
// spacing + hidden repeated name) for a same-sender run with no separator
// between; and each message's reply tally. Pure and exported for tests.
//
// Two revs, so keyedList rebuilds a bubble only when it truly must: `vrev` is the
// HARD rev — content (text/edit) and neighbour-derived layout (separator, run) —
// and any change to it re-renders the whole bubble. `srev` is the SOFT rev —
// reactions and the reply tally — and a change to it patches only those rows in
// place (see patchBubble), never rebuilding, so a decrypted photo's <img> and a
// playing YouTube embed survive a reaction or an incoming reply landing on it.
// threadRootOf: the sid of the thread a message BELONGS to, or 0 for a message
// that's in no thread. A thread exists only because someone chose "Reply in
// thread", so membership is exactly the wire flag: a reply carrying
// `reply.thread` points DIRECTLY at its thread's root (every thread send
// derives its target from the root — see threadReplyTarget), so this is a
// straight read, never a walk. Plain quote replies — the ordinary Reply verb,
// and every reply in the history from before the two verbs split — belong to
// no thread at all: an inline chain is a conversation in the feed, not a
// thread nobody opened.
function threadRootOf(m) {
  if (m.reply && m.reply.thread && m.reply.id) return m.reply.id;
  // …or the thread a CONVERSION moved it into after the fact (see
  // claimConverts). The wire flag is read first on purpose: a reply someone
  // composed in a thread belongs to that thread, and no conversion can pull it
  // out of one.
  return m.movedTo || 0;
}

// ---- converting an inline chain into a thread (the chat.convert fold) -------
//
// Reply and Reply-in-thread are separate verbs, and EVERY reply in the history
// from before that split is inline — so the way a long chain becomes a thread
// is always after the fact. The messages themselves can't be rewritten to say
// so: only their author may edit one, only for fifteen minutes, and rewriting N
// messages would churn N authorships and timestamps to change a display rule.
//
// So a conversion is its own encrypted event — one message-shaped payload
// saying "these ids now live in the thread rooted at R" — that every client
// folds client-side, exactly as a reaction does. The server stores one more
// opaque blob and learns nothing; a client too old to know the payload type
// drops it and goes on showing the chain inline.

// A server message id as the wire may carry it: a positive whole number, and
// NOTHING a coercion would rescue. Deliberately not `Number(x) || 0` — Swift's
// MessagePayload types root/ids as Int64, so `"400"` or `400.5` fails to decode
// and native drops the whole payload. Coercing here would convert on web and do
// nothing on native: the same messages, a different transcript per platform,
// which the cross-platform contract calls a hard error.
function isSid(n) {
  return Number.isSafeInteger(n) && n > 0;
}

// claimConverts: merge one convert event's claims into the map (sid →
// { root, at }, where `at` is the CONVERT EVENT's own server id).
//
// Two people can convert overlapping chains, and the same event folds twice
// routinely (history page + live echo, or a reconnect catch-up), so the merge
// must be a pure function of the SET of events, never of their arrival order:
// the OLDEST conversion (lowest `at`) owns a message, and re-folding one
// changes nothing. Ties are impossible — `at` is a server message id. Returns
// null when nothing changed, so the fold can hand back the same state.
// Exported for tests: "the oldest conversion wins, and a repeat is a no-op" is
// the rule that makes the fold order-independent, so it's pinned directly.
//
// The guards mirror Swift's exactly (see isSid): a payload native would drop is
// dropped here too, whole or per id.
export function claimConverts(claims, root, ids, at) {
  if (!isSid(root) || !isSid(at)) return null;
  let out = null;
  for (const sid of ids.slice(0, MAX_CONVERT_IDS)) {
    if (!isSid(sid) || sid === root) continue; // a root is never inside its own thread
    const prev = (out || claims)[sid];
    if (prev && prev.at <= at) continue; // an older conversion already owns it
    if (!out) out = { ...claims };
    out[sid] = { root, at };
  }
  return out;
}

// convertedRoots: the claims resolved to the thread each message actually
// lands in — a pure function of the claim map, so every client and every
// arrival order derives the same answer. Exported for tests.
//
// Claims can nest: one conversion moves [b, c] under root a while another moves
// [c] under root b. A claimed root is followed through to the thread IT ended
// up in, so claim-rooted nesting flattens onto the outermost root. (That is
// what's guaranteed — NOT "threads never nest". A reply someone composed in a
// thread carries the wire flag, which is authoritative and can't be
// re-pointed, so if a conversion moves the message that reply's thread is
// rooted on, its thread ends up inside the converted one. Benign and reachable
// — it renders from its root's bubble in the outer thread, exactly like any
// thread — and only a race can produce it: a "Reply in thread" in flight while
// someone converts the chain it lives in.)
//
// A cycle can only come from a malformed or hostile payload (a real reply's sid
// is always higher than the message it quotes, so real chains can't loop) and
// resolves to no conversion at all rather than hanging.
export function convertedRoots(claims) {
  const out = new Map();
  for (const key of Object.keys(claims || {})) {
    const sid = Number(key);
    let cur = claims[key].root;
    const seen = new Set([sid]);
    while (claims[cur] && !seen.has(cur)) {
      seen.add(cur);
      cur = claims[cur].root;
    }
    if (claims[cur]) continue; // cycled — leave every message in it inline
    if (cur && cur !== sid) out.set(sid, cur);
  }
  return out;
}

// convertHolds: does a conversion's claim on `m` actually hold? The sender's
// id list is a CLAIM, not a fact, and the receiver checks it against the
// message itself: a conversion moves a reply CHAIN, so each message it names
// must really hang off the thread it's being moved into — its own quote is
// either the root, or another message the conversions claimed.
//
// Without this the shipped primitive would be "move any N messages under any
// root", which is a great deal worse than it sounds: a conversion renders no
// bubble (its only trace is a transient chat-list line), the oldest claim wins
// forever so no later event can undo it, and deleting the convert row isn't an
// undo either — so one crafted payload could quietly hide a couple of hundred
// unrelated messages under some old root, unattributably. Now such an id is
// simply ignored and the message stays exactly where it is.
//
// Order-independent, and it needs no loaded window beyond the message itself: a
// claimed message that hasn't arrived yet has no quote to check, so it stays
// inline until it does — the same degradation as a thread reply whose root is
// paged out.
function convertHolds(m, claims) {
  const claim = claims[m.sid];
  if (!claim) return false;
  const quoted = (m.reply && m.reply.id) || 0;
  return quoted === claim.root || !!claims[quoted];
}

// applyConverts: stamp each message with the thread a conversion moved it into
// (`movedTo` — the one field threadRootOf reads besides the wire flag).
// Derived, never authoritative: the claim map is the state and this is its
// projection onto the loaded window, re-run on every fold so a message that
// arrives AFTER its own conversion (an older page paging in, an out-of-order
// live frame) lands in the thread just the same. Messages it doesn't move keep
// their identity, so nothing else re-renders.
export function applyConverts(msgs, claims) {
  const roots = convertedRoots(claims);
  let changed = false;
  const out = msgs.map((m) => {
    const to = (m.sid && convertHolds(m, claims) && roots.get(m.sid)) || 0;
    if ((m.movedTo || 0) === to) return m;
    changed = true;
    return { ...m, movedTo: to };
  });
  return changed ? out : msgs;
}

// inlineChainIds: the inline reply chain hanging under `rootSid` — every
// message that quotes it, everything that quotes those, and so on — which is
// exactly what "Convert to thread" moves. Empty when there's nothing to move,
// which is also the whole gate on offering the verb.
//
// This is the transitive quote walk the two-verb split deleted, back in the
// one narrow place that needs it: deciding what a conversion covers. It is NOT
// a membership rule — nothing here reads it to decide where a message renders
// (that's threadRootOf, still a straight read) — and it runs on the CONVERTING
// client only, at menu time, to build the event's id list.
//
// One forward pass suffices because `msgs` is in server order and a reply's sid
// is always higher than the message it quotes: by the time the walk reaches a
// reply, whatever it quotes has already been seen. Messages already living in a
// thread are skipped, so the chain is only ever inline conversation — and a
// bubble inside a thread pane has no chain at all, which is what keeps the verb
// off the menus in there.
export function inlineChainIds(msgs, rootSid) {
  if (!rootSid) return [];
  const root = msgs.find((m) => m.sid === rootSid);
  if (!root || threadRootOf(root)) return []; // unloaded, or already in a thread
  const chain = new Set([rootSid]);
  const out = [];
  for (const m of msgs) {
    if (!m.sid || threadRootOf(m)) continue; // pending copy, or already in a thread
    const quoted = (m.reply && m.reply.id) || 0;
    if (!quoted || !chain.has(quoted)) continue;
    chain.add(m.sid);
    out.push(m.sid);
  }
  return out;
}

// Does a conversion name this sid? The O(1) question the message fold asks
// before paying for a re-stamp — cheap enough to ask on every arrival, and
// false for every message in the overwhelming case of a chat where nobody has
// converted anything.
function converted(s, sid) {
  return !!(sid && s.converts && s.converts[sid]);
}

// A hostile client could name thousands of ids in one payload (the server caps
// a blob at 64KB and can't read it), and the claim map is never pruned — so the
// fold takes a generous slice rather than however many arrived. Far above any
// real chain: a conversation with more than this many inline replies to one
// message doesn't exist. Exported so the chat-list line counts what the fold
// actually took, never what the payload asked for.
export const MAX_CONVERT_IDS = 2000;

// The one wording for the conversion's confirm, so web, Mac and iOS ask the
// same question — pluralised and locale-grouped like every displayed count.
// It says what everyone will see and that it's one-way, because it is: v1 has
// no undo.
export function convertConfirm(n) {
  const what = n === 1 ? "this reply" : `these ${n.toLocaleString()} replies`;
  return `Move ${what} into a thread? Everyone will see the conversation there instead of in the chat, and this can't be undone.`;
}

// quoteTarget: the replyTo a PLAIN reply to `m` carries — the exact message
// clicked, nothing resolved. Replying to a reply quotes that reply; the chain
// stacks inline in the feed and starts no thread. Pure and exported for tests
// (mirrored natively by ChatFeedModel.quoteTarget — pinned by the
// reply_thread_grouping vector's expected_reply_targets.quote).
export function quoteTarget(m) {
  return { id: m.sid, name: m.name, snippet: replySnippet(m.raw) };
}

// threadTarget: the replyTo a "Reply in thread" on `m` carries — the ROOT of
// the thread the reply belongs in. A message already IN a thread continues
// that thread (its root, snapshotted fresh when loaded, the quoted snapshot
// until then); anything else — a plain message, a quote reply, a whole inline
// chain — roots a NEW thread on ITSELF, because until someone chose this verb
// there was no thread to join. Pure and exported for tests (mirrored natively
// by ChatFeedModel.threadTarget). The `thread: true` wire flag is added at the
// compose seam (threadReplyTarget), never here.
export function threadTarget(msgs, m) {
  const rootSid = threadRootOf(m);
  if (!rootSid) return quoteTarget(m);
  const root = msgs.find((x) => x.sid === rootSid);
  if (root) return { id: root.sid, name: root.name, snippet: replySnippet(root.raw) };
  // Root paged out. The frozen snapshot a FLAGGED reply carries is the root's
  // own (every thread send derives its ref from the root), so it stands in. A
  // CONVERTED message's ref is the message it quoted — which is not the root —
  // so there's nothing truthful to fall back on and the id travels alone: the
  // reply still lands in the right thread, and the view says the original
  // isn't available rather than naming the wrong message.
  const flagged = !!(m.reply && m.reply.thread);
  return { id: rootSid, name: (flagged && m.reply.name) || "", snippet: (flagged && m.reply.snippet) || "" };
}

// threadItems: the reply thread rooted at `rootSid` — the root message (when
// loaded) followed by every message whose thread root is that sid, in server
// order. Thread membership is the flag and a direct pointer (threadRootOf):
// an inline quote chain hanging off the same root is NOT part of the thread,
// it's ordinary feed conversation. When the root itself has scrolled out of
// the loaded window the replies still fold — the view's list simply starts at
// the oldest loaded reply, under its note. Pure and exported for tests — the
// thread view re-derives this from current state on every fold, never a
// cached list.
export function threadItems(msgs, rootSid) {
  if (!rootSid) return []; // 0 is the pending-copy key, never a thread root
  const out = [];
  const root = msgs.find((m) => m.sid === rootSid);
  if (root) out.push(root);
  for (const m of msgs) {
    if (threadRootOf(m) === rootSid) out.push(m);
  }
  // Same order as the feed: confirmed by sid, a still-pending optimistic reply
  // (sid 0) LAST. A plain by-sid sort put the pending copy first, ahead of the
  // root — and for the whole server round-trip the thread view read "root not
  // loaded": the count jumped, the "original message isn't available" note
  // flashed, the root sat below the reply answering it, then all snapped back
  // on the echo — the blink on every reply sent from the thread.
  return out.sort(bySidPendingLast);
}

// threadListItems: every thread in the loaded window, newest activity first —
// what the ▤ Threads list shows. One row per thread ROOT: the root's author +
// snippet (the line you recognise it by), how many replies it holds, and the
// message that last landed in it.
//
// Membership is threadRootOf — the same read the "N Replies" tally makes, so
// the count on a row and the count on its root can never disagree. Plain
// quote replies therefore never appear: an inline chain is a conversation
// already visible in the feed, not a thread anyone opened, and it has no
// thread to come back to.
//
// Ordering is by LAST REPLY, not root age: the list answers "where is the
// conversation", so this morning's root that nobody answered sits below a
// week-old one someone replied to a minute ago. `last` is picked (and the
// rows sorted) with the feed's own comparator, so a still-pending optimistic
// reply counts as the newest thing in its thread — as it visibly is.
//
// A thread whose root has scrolled out of the loaded window keeps its row,
// headed by the quoted snapshot its replies carry — exactly the fallback the
// thread view's own header uses (`rootLoaded` says which one a row is).
// Pure and exported for tests.
export function threadListItems(msgs) {
  const bySid = bySidIndex(msgs);
  const byRoot = new Map(); // root sid → row
  for (const m of msgs) {
    const rootSid = threadRootOf(m);
    if (!rootSid) continue;
    let row = byRoot.get(rootSid);
    if (!row) {
      const root = bySid.get(rootSid);
      // Unloaded root: only a FLAGGED reply's ref is the root's own snapshot
      // (see threadTarget) — a converted message quotes something else, so its
      // row is headed by nothing rather than by the wrong message.
      const stand = m.reply && m.reply.thread ? m.reply : {};
      row = {
        rootSid,
        rootLoaded: !!root,
        name: root ? root.name || "" : stand.name || "",
        snippet: root ? replySnippet(root.raw) : stand.snippet || "",
        count: 0,
        last: m,
      };
      byRoot.set(rootSid, row);
    }
    row.count++;
    if (bySidPendingLast(row.last, m) < 0) row.last = m;
  }
  return [...byRoot.values()].sort((a, b) => bySidPendingLast(b.last, a.last));
}

// threadListSignature: everything the rendered list actually shows — order,
// each row's identity, its tally, and the line it's headed by (which changes
// when an unloaded root pages in, or when someone edits it). The open panel
// compares this before repainting, so a fold that leaves the list looking
// identical never rebuilds its buttons under a keyboard user. Exported for
// tests: "a repaint happens exactly when the list changed" is a rule worth
// pinning, not a coincidence of string building.
export function threadListSignature(rows) {
  return rows.map((r) => `${r.rootSid}:${r.count}:${r.name}:${r.snippet}`).join("|");
}

// bySidIndex: the loaded window keyed by sid — what inMainFeed checks a thread
// reply's root against. Exported so callers outside viewItems (jump fallback,
// hotkeys, ↑-to-edit, tests) build the same index rather than each re-deriving
// "is the root loaded".
export function bySidIndex(msgs) {
  return new Map(msgs.map((m) => [m.sid, m]));
}

// inMainFeed: whether a message renders in the main transcript. A reply
// composed IN a thread (`reply.thread` — the pane's or overlay's composer, the
// "Reply in thread" verb) lives only in that thread, Slack-style: the
// transcript shows just its root's "N Replies" tally. Plain quote replies
// (the flag absent — every message from before the flag, and the ordinary
// Reply verb) stay inline exactly as they always did.
//
// ROOT-AWARE: the hide only holds while the reply's root is in the loaded
// window (`bySid` — the index viewItems already builds). The tally lives on
// the root's bubble, so with the root paged out (a fresh reply to an
// old message, cold-opening a busy chat) hiding the reply would leave it
// rendered NOWHERE until the reader blind-scrolled back past the root. So it
// degrades to an ordinary inline bubble — quote card and all — and collapses
// into the tally the moment the root pages in. Pure and exported: the feed
// filter, the jump fallbacks and the event vectors all read this one
// predicate (native mirrors it — pinned by message_in_thread and
// thread_reply_root_unloaded).
export function inMainFeed(m, bySid) {
  // Flagged but pointing nowhere resolvable is a feed bubble, same as
  // unflagged: id 0 is the pending-copy key, so without threadRootOf's guard
  // a ref-less thread reply would hide itself behind any in-flight send —
  // and no root tally would carry it. (Native's threadRoots skips id 0
  // for the same reason; the two predicates must agree.)
  const root = threadRootOf(m);
  if (!root) return true;
  return !bySid.has(root);
}

// Message order: confirmed messages by server id (the stable identity), with any
// still-pending optimistic copies (sid 0) after all of them, ordered by send time
// — so a just-sent bubble sits at the bottom until its echo slots it into place.
function bySidPendingLast(a, b) {
  if (a.sid && b.sid) return a.sid - b.sid;
  if (!a.sid && !b.sid) return a.ts - b.ts;
  return a.sid ? -1 : 1;
}

// `mainFeed: true` is the transcript's call: replies that live only in their
// thread (inMainFeed false — root loaded) drop out of the list — they still
// tally on their root, and the separators + sender runs are derived over
// what's actually shown, so a hidden reply never breaks a run or strands a
// day separator. The thread view calls it plain (every reply shows there).
export function viewItems(msgs, { mainFeed = false } = {}) {
  // The "N Replies" tally counts a root's THREAD — only the replies someone
  // deliberately made in it (threadRootOf: the `reply.thread` flag). An
  // ordinary inline reply contributes nothing: it's already visible right
  // there in the feed, so a tally on top of it would be counting the same
  // conversation twice and would read as a thread nobody started. Each thread
  // reply carries its root sid (`replyRoot`) so taps/jumps land on the thread;
  // tallies run over EVERY message, because a thread reply counts even though
  // the transcript never lists it (the tally is its only trace there).
  const bySid = bySidIndex(msgs);
  const replyCounts = new Map(); // thread root sid → messages in its thread
  const roots = new Map(); // thread reply sid → its thread's root sid
  for (const m of msgs) {
    const root = threadRootOf(m);
    if (root) {
      roots.set(m.sid, root);
      replyCounts.set(root, (replyCounts.get(root) || 0) + 1);
    }
  }
  const out = [];
  let prev = null;
  for (const m of msgs) {
    if (mainFeed && !inMainFeed(m, bySid)) continue; // lives in its (loaded) thread; `prev` stays the last VISIBLE message
    let timeSep = null;
    if (!prev) timeSep = { withDay: true }; // the oldest message opens with a dated separator
    else {
      const newDay = !sameDay(m.ts, prev.ts);
      if (newDay || m.ts - prev.ts > TIME_SEPARATOR_GAP_MS) timeSep = { withDay: newDay };
    }
    const cont = !timeSep && sameSender(prev, m);
    const replyCount = replyCounts.get(m.sid) || 0;
    // A THREAD reply's own view of its thread's tally: the SAME number the
    // root's "N Replies" shows, so a quote card that doubles as a thread link
    // can never disagree with the root it points at (threadLinkCount decides
    // whether it wears one). 0 for a plain inline reply — its card is a quote
    // and a jump, never a way into a thread.
    const threadCount = replyCounts.get(roots.get(m.sid)) || 0;
    // The soft rev is derived purely from reactions + tally (never myReactions —
    // viewItems stays pure/exported/tested); a chip's count moves on every
    // react/unreact, so this signature captures mine-flips too.
    const reactSig = (m.reactions || []).map((r) => `${r.emoji}${r.count}`).join(",");
    out.push({
      ...m,
      timeSep,
      cont,
      replyCount,
      threadCount,
      replyRoot: roots.get(m.sid) || 0,
      vrev: `${m.rev}|${timeSep ? (timeSep.withDay ? "D" : "t") : ""}|${cont ? 1 : 0}`,
      // Delivery state rides the SOFT rev: the pending→slow→confirmed transitions
      // patch the bubble in place (data-id, the "sending…" chip, action affordances)
      // without rebuilding it — so an optimistic photo never flashes on confirm.
      // The quote card's thread link is soft too (patchBubble repaints it in
      // place), and only a reply ever carries one — so the segment stays absent
      // on everything else and a root's signature is unchanged.
      srev: `${reactSig}|${replyCount}|${m.pending ? (m.slow ? "slow" : "send") : "ok"}|${m.sid ? 1 : 0}` +
        (threadCount ? `|t${threadCount}` : ""),
    });
    prev = m;
  }
  return out;
}

// How one history page's result reads — the distinction every backward walk
// turns on, pulled out pure so it's pinned by a test rather than re-decided at
// each call site. `n` is host.loadOlder's return: rows folded, 0 = the SERVER
// says history ends here, -1 = the FETCH FAILED.
//
// "end" and "error" must never be conflated. Only "end" may latch `exhausted`
// (which kills scroll-back for the rest of the mount) or answer a jump with
// "that message isn't available any more" — an offline blip or a 502 during a
// deploy is neither the start of history nor a deletion, so it stays
// retryable.
export function pageResult(n) {
  if (n < 0) return "error";
  if (n === 0) return "end";
  return "page";
}

// The inline wording for a jump that couldn't land, by how the backward walk
// ended (pageBackTo's outcome). "" for "found" — nothing to say. Three
// genuinely different answers, because "gone" is final and "capped" means
// keep scrolling; the reader is never left tapping a control that does
// nothing. Pure + exported so the Node suite pins it against its Swift twin,
// ChatFeedModel.jumpReachNote — web, Mac and iOS must say the same thing.
export function jumpReachNote(reach) {
  if (reach === "capped") return "That message is further back than this jump reaches — keep scrolling up for it.";
  if (reach === "gone") return "That message isn't available any more.";
  return "";
}

// The one wording for a thread's size, wherever it's shown: the root's tally,
// the quote-card thread link and the thread view's own header read as the same
// thing because they ARE the same string. Pluralised, and grouped for the
// locale (1,204 Replies).
export function replyCountLabel(n) {
  return n === 1 ? "1 Reply" : `${n.toLocaleString()} Replies`;
}

// How many REPLIES a threadItems list holds — the list minus its root, when
// the root is loaded (it's the first item; see threadItems). The thread view
// renders root and replies as one list now, so "how many rows" and "how many
// answers" are no longer the same number: a thread nobody has answered yet is
// one row and must still read "0 Replies", never "1 Reply". Pure and exported
// so that invariant is pinned by a test rather than re-derived at each render
// site — native's twin is ChatFeedModel.threadReplyCount.
export function threadReplyCount(items, rootSid) {
  if (!items.length) return 0;
  return items[0].sid === rootSid ? items.length - 1 : items.length;
}

// Does this reply's quote card double as a link into its thread, and with what
// count? Only a THREAD reply ever wears one (an inline reply's threadCount is
// 0 — its card quotes and jumps, nothing more), and only while its thread
// holds more than just it: rendered inline because its root is paged out, its
// card is the one way back into the conversation it belongs to. The number is
// the thread's WHOLE tally (the same one the root wears), never "the others
// besides me": two people looking at the same thread from different bubbles
// must read the same size. Returns 0 for "no thread link".
export function threadLinkCount(m) {
  const n = (m && m.threadCount) || 0;
  return n > 1 ? n : 0;
}

export const app = defineApp({
  name: "chat",
  title: "Chat",
  glyph: "💬",
  places: [], // host-mounted for chat threads — never in the Apps menu
  snapshot: false, // state IS the message log; snapshotting would duplicate it
  incremental: true, // reconcile the pane in place — appends, not rebuilds

  initialState: () => ({ msgs: [] }),

  // The one wire type the app owns: typing, relay-only (handled by the
  // ephemeral hook below). The no-op fold claims the type; if a hostile client
  // stores one as a real message, it folds to nothing.
  events: {
    [N.ev("typing")]: (s) => s,
  },

  // Host-only folds: the existing protocol, translated. Messages key on the
  // server message id (the original identity) and stay sorted by it, so a
  // scroll-back page folded later still lands before newer messages. `raw`
  // keeps the original payload fields (attachments with w/h, replyTo, name…)
  // so an edit can rebuild the full payload exactly like the original composer
  // ({ ...orig, text }). `rev` is the HARD rev: it bumps only on a content change
  // (edit) so keyedList rebuilds that bubble. A reaction does NOT bump it —
  // reactions ride viewItems' soft rev and patch the row in place (see patchBubble),
  // so reacting never recreates the bubble's photo or its playing YouTube embed.
  hostEvents: {
    [N.ev("msg")]: (s, e, meta) => {
      const text = typeof e.text === "string" ? e.text : "";
      const atts = Array.isArray(e.attachments) ? e.attachments.filter((a) => a && a.id) : [];
      const sid = (meta && meta.id) || 0;
      const cid = typeof e._cid === "string" ? e._cid : "";
      const pending = !!(meta && meta.pending);
      // A server message needs its id; an optimistic local echo has none yet
      // (it's pending, keyed only by cid until its own broadcast confirms it).
      if ((!text.trim() && !atts.length) || (!sid && !pending)) return s;
      if (sid && s.msgs.some((m) => m.sid === sid)) return s; // re-fold — already present
      // Our own echo confirming an optimistic copy: upgrade that pending record
      // IN PLACE — adopt the server id, drop the pending flags — keeping its
      // stable keyedList id (its bubble is patched, never rebuilt, so a photo or
      // playing embed never flashes). A second optimistic fold of the same cid
      // (no sid yet) is a no-op.
      if (cid) {
        const idx = s.msgs.findIndex((m) => m.cid === cid);
        if (idx >= 0) {
          if (!sid) return s;
          const msgs = s.msgs.slice();
          msgs[idx] = { ...msgs[idx], sid, ts: e.ts || msgs[idx].ts, pending: false, slow: false };
          msgs.sort(bySidPendingLast);
          // It has a real sid now, so a conversion could already name it.
          return { ...s, msgs: converted(s, sid) ? applyConverts(msgs, s.converts) : msgs };
        }
      }
      const raw = { name: e.name || "", text, ts: e.ts || ((meta && meta.ts) || 0) };
      if (e.uid) raw.uid = e.uid;
      if (atts.length) raw.attachments = atts.map((a) => ({ ...a }));
      if (e.replyTo) raw.replyTo = { ...e.replyTo };
      if (Array.isArray(e.actions) && e.actions.length) raw.actions = e.actions; // helper chips (host-whitelisted at render)
      if (e.card && typeof e.card === "object") raw.card = e.card; // bot-authored card — validated at render (cards.js)
      if (typeof e.key === "string" && e.key) raw.key = e.key; // scripted-line dedup key (one-Eleven welcome, shell.js)
      if (e.action) raw.action = true; // keeps a /me line rendering as an action line if you edit it
      if (e.warn) raw.warn = true; // an admin warning keeps its framing through edits too
      const msgs = [
        ...s.msgs,
        {
          // A pending optimistic copy keys on its cid for life (stable across the
          // upgrade to a real sid), so its bubble is never destroyed/recreated.
          id: sid ? "m" + sid : "c" + cid,
          sid,
          cid,
          pending, // shown, but not yet acknowledged by the server
          slow: false, // flipped true by chat.pending after 5s unconfirmed
          text,
          name: raw.name,
          uid: e.uid || "",
          ts: raw.ts,
          attachments: raw.attachments || [],
          // `thread` (additive, cross-platform — see inMainFeed): the reply was
          // composed IN its thread, so it lives only there. Absent/false is a
          // quote reply that renders inline — old clients, existing history.
          reply: e.replyTo ? { id: e.replyTo.id || 0, name: e.replyTo.name || "", snippet: e.replyTo.snippet || "", thread: !!e.replyTo.thread } : null,
          actions: raw.actions || [],
          card: raw.card || null,
          action: !!e.action, // an app-thread /me-style action line, not a bubble
          // An admin warning (issue #578): same bubble, distinct system framing.
          // It rides inside the ciphertext — the server can't tell a warning
          // from a "hello"; it only audits that one was issued.
          warn: !!e.warn,
          reactions: [],
          edited: false,
          raw,
          rev: 0,
        },
      ];
      msgs.sort(bySidPendingLast);
      // A message can arrive AFTER the conversion that moves it (an older page
      // paging in, an out-of-order live frame, a reconnect catch-up): stamp it
      // so it lands in its thread rather than inline. ONLY when a conversion
      // actually names this sid — every other message's stamp is unchanged by
      // an arrival (a claim resolves against the claim map alone, never against
      // the loaded window), so a history page of a hundred rows does one O(1)
      // lookup each instead of a hundred full re-resolutions.
      return { ...s, msgs: converted(s, sid) ? applyConverts(msgs, s.converts) : msgs };
    },
    // An inline reply chain converted into a thread: the ids now live in the
    // thread rooted at `root`. Never a wire type — shell.js recognises the
    // encrypted "threadconvert" payload and synthesises this, exactly as it
    // does for reactions, so nobody can spoof one with a typed message. The
    // claim map IS the state; where each message renders is derived from it
    // (applyConverts → movedTo → threadRootOf), so folds in any order, and
    // repeated folds of the same event, settle on the same feed.
    [N.ev("convert")]: (s, e, meta) => {
      const at = (meta && meta.id) || 0; // the convert event's own server id
      const ids = Array.isArray(e.ids) ? e.ids : [];
      if (!ids.length) return s;
      // No coercion: claimConverts validates root/at/each id the way Swift's
      // decoder does, so a payload native drops is dropped here too.
      const converts = claimConverts(s.converts || {}, e.root, ids, at);
      if (!converts) return s;
      return { ...s, converts, msgs: applyConverts(s.msgs, converts) };
    },
    // A still-unconfirmed optimistic send, 5s on: mark it slow so the bubble
    // surfaces a subtle "sending…" state (host-fed by shell.js's markSlow timer).
    [N.ev("pending")]: (s, e) => {
      const cid = typeof e._cid === "string" ? e._cid : "";
      if (!cid) return s;
      const idx = s.msgs.findIndex((m) => m.cid === cid && m.pending);
      if (idx < 0) return s;
      const msgs = s.msgs.slice();
      msgs[idx] = { ...msgs[idx], slow: true };
      return { ...s, msgs };
    },
    [N.ev("reaction")]: (s, e, meta, ctx) => {
      if (e.targetSid === undefined || e.emoji === undefined || e.uid === undefined || e.on === undefined) return s;
      const me = ctx && ctx.me;
      const msgs = s.msgs.map((m) => {
        if (m.sid !== e.targetSid) return m;
        const reactionEvents = m.reactionEvents || [];
        let found = false;
        const updated = reactionEvents.map((ev) => {
          if (ev.emoji === e.emoji && ev.uid === e.uid) {
            found = true;
            return { ...ev, on: e.on, ts: e.ts };
          }
          return ev;
        });
        if (!found && e.on) {
          updated.push({ emoji: e.emoji, uid: e.uid, on: true, ts: e.ts });
        }
        const currentReactions = updated.filter((ev) => ev.on);
        const derived = [];
        const emojiMap = new Map();
        for (const ev of currentReactions) {
          if (!emojiMap.has(ev.emoji)) {
            emojiMap.set(ev.emoji, []);
          }
          emojiMap.get(ev.emoji).push(ev.uid);
        }
        for (const [emoji, uids] of emojiMap) {
          derived.push({ emoji, count: uids.length, mine: uids.includes(me) });
        }
        derived.sort((a, b) => a.emoji.localeCompare(b.emoji));
        return { ...m, reactions: derived, reactionEvents: updated, rev: m.rev + 1 };
      });
      return { ...s, msgs };
    },
    [N.ev("edit")]: (s, e) => ({
      ...s,
      msgs: s.msgs.map((m) => {
        if (m.sid !== e.msgId) return m;
        const text = typeof e.text === "string" ? e.text : m.text;
        return { ...m, text, raw: { ...m.raw, text }, edited: true, rev: m.rev + 1 };
      }),
    }),
    // A deleted message leaves its conversion claim behind — harmless, since
    // nothing resolves it any more. Its neighbours are untouched: every claim
    // names its root directly, so deleting one message mid-chain never spills
    // the rest of the thread back into the feed.
    [N.ev("delete")]: (s, e) => ({ ...s, msgs: s.msgs.filter((m) => m.sid !== e.msgId) }),
  },

  // Typing: relay-only, never stored or folded. The server echoes your own beat
  // back to you, so drop it here rather than at display time — matching by uid is
  // robust even in a fresh thread, where myName() stays null until one of your
  // messages folds into view. A uid-less legacy beat falls back to the screen
  // name, mirroring the original feed's `payload.name === session.name` guard.
  ephemeral(e, ctx) {
    if (e.type !== N.ev("typing") || !e.name) return;
    if (e.uid ? e.uid === ctx.me : e.name === ctx.meName) return;
    let m = typing.get(ctx.threadId);
    if (!m) typing.set(ctx.threadId, (m = new Map()));
    const secs = Math.min(Math.max(Number(e.expiry) || 0, 0), 60);
    if (secs === 0) m.delete(e.name);
    else m.set(e.name, Date.now() + secs * 1000);
    const refresh = refreshTyping.get(ctx.threadId);
    if (refresh) refresh();
  },

  // Almost no CSS of its own: the feed content is original markup styled by
  // style.css. What remains is layout glue — the pane loses its app padding so
  // the feed/composer sit exactly like the original ones, the item wrapper is
  // display:contents so .msg/.time-sep participate in the feed's flex layout
  // as if they were direct children, and .chatapp-feed mirrors the #feed rule
  // (the one original selector that's id-based, so unreusable).
  styles: `
#app-pane:has(> .chatapp-root) { padding: 0; gap: 0; }
.chatapp-root { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; position: relative; }
.chatapp-item { display: contents; }
/* Embedded in the native shell: the shell draws its own composer + banners, so
   the app shows only the feed (mirrors the original .native-embed layout). */
.chatapp-root.embed > .composer,
.chatapp-root.embed .typeahead,
.chatapp-root.embed > .composer-reply,
.chatapp-root.embed > .composer-edit { display: none; }
/* A read-only chat view (the owning app declares chatReadOnly — the Admin app's
   notice stream): the app posts here, the user doesn't, so no composer at all. */
.chatapp-root.readonly > .composer,
.chatapp-root.readonly .typeahead,
.chatapp-root.readonly > .composer-reply,
.chatapp-root.readonly > .composer-edit { display: none; }
/* The docked thread pane's composer is nested (not a root child), so the two
   child-combinator sweeps above miss it — same rule, same reasons: embedded,
   the shell draws the composer; read-only, nobody replies. */
.chatapp-root.embed .chatapp-thread-composer,
.chatapp-root.readonly .chatapp-thread-composer { display: none; }
/* Embedded: keep the attachment preview visible (a staged photo shows just above
   the native composer) and give the feed the native safe-area insets — mirrors
   the original feed's .native-embed rules. */
.native-embed .chatapp-feed {
  padding-top: calc(18px + var(--native-top-inset, 0px));
  padding-bottom: calc(18px + var(--native-bottom-inset, 0px));
}
.native-embed .feed-jump-btn { bottom: calc(18px + var(--native-bottom-inset, 0px)); }
.chatapp-feed {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 18px; display: flex; flex-direction: column; gap: 4px;
}
.chatapp-feed::before { content: ""; margin-top: auto; }
/* The feed's positioning wrapper: the reply-thread view overlays exactly this
   box (inset:0 in style.css), so it dims/covers the transcript but never the
   composer stack below — the real composer stays usable under the thread. */
.chatapp-feedwrap {
  flex: 1 1 auto; min-height: 0; min-width: 0; position: relative;
  display: flex; flex-direction: column;
}
/* The feed's inline status line — the transcript's twin of the thread view's
   .chatapp-thread-note, and deliberately NOT a floating toast: it sits in
   flow above the feed and takes real layout space (CLAUDE.md's no-toast
   rule). Today it answers a jump that has to page history back for its
   target, so a tap is never a silent no-op. */
.chatapp-feed-note {
  flex: 0 0 auto; padding: 8px 18px;
  font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
/* Empty = no layout, but deliberately NOT display:none. It's a role="status"
   live region: display:none takes the node out of the accessibility tree, and
   a region that is hidden when its text is written then revealed in the same
   tick is announced unreliably (often not at all). Collapsing to nothing keeps
   it in the tree, so the next update is announced from a node that was already
   there. */
.chatapp-feed-note:empty { padding: 0; border-bottom: 0; }
/* Jump-to-latest: bottom-right of the feed, shown once the reader has
   scrolled a moderate distance up (see JUMP_BUTTON_GAP). Sits below the
   reply-thread overlay's z-index (30) so that view still covers it. */
.feed-jump-btn {
  position: absolute; right: 18px; bottom: 18px; z-index: 20;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bubble-them); color: var(--ink);
  box-shadow: 0 6px 20px var(--shadow);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.feed-jump-btn svg { width: 20px; height: 20px; }
.feed-jump-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .feed-jump-btn { transition: none; } }
` + CARD_CSS,

  // Incremental render: the skeleton (feed / banners / composer) is built once
  // and kept; each state change only reconciles the message list via keyedList
  // (the composite vrev re-renders a bubble when its content or its
  // neighbour-derived presentation changes). Scroll stays pinned to the bottom
  // unless the reader scrolled up.
  render(state, el, ctx) {
    let root = el.querySelector(":scope > .chatapp-root");
    if (!root) {
      root = buildSkeleton(el, ctx);
    }
    // Stamp the mount with its thread so a stray refresh can tell whether the
    // pane still belongs to it (see doRefresh). #app-pane is shared across
    // threads, so an async welcome/tour step firing after you've navigated
    // away would otherwise re-render its thread into whatever's on screen now.
    root.dataset.thread = ctx.threadId;
    // Point the single document-level hotkey listener at THIS mount. On the
    // instant-restore path buildSkeleton is skipped, so this — not the build —
    // is what keeps the shortcuts live after switching threads. Guard on
    // isConnected so a parked thread re-rendering off-screen can't steal the
    // active pane's shortcuts.
    if (root.isConnected) hotkeys = root._hotkeys;
    // Same for the native shell's composer bridge: registerNative sets one
    // dispatcher in the host, so without re-pointing it here a native
    // send/typing/attach after revisiting a chat would route to the last-built
    // (now detached) thread. Guarded on isConnected — like the hotkeys re-point
    // above — so a parked pane re-rendering off-screen can't grab the bridge.
    if (root.isConnected && root._native && host && host.registerNative) {
      host.registerNative(root._native);
    }
    // Same again for the native macOS shell's Finder file-drop: it fills the
    // page's single static #file-input and fires `change`, so point that input at
    // the thread on screen (not the last-built one). Idempotent .onchange = so
    // re-rendering doesn't stack listeners. (The classic composer that used to own
    // #file-input is gone, so nothing else is listening.)
    if (root.isConnected && root._dropFiles) {
      const fileDropInput = document.getElementById("file-input");
      if (fileDropInput) fileDropInput.onchange = root._dropFiles;
    }

    // A closed DM (issue #578): the server refuses new traffic, so the
    // composer gives way to an honest banner with the one useful action —
    // Reopen. Re-evaluated every render, so the dm_closed/dm_reopened frames
    // flip the pane live.
    paintClosedState(root, ctx);

    // Let addLocalNotice re-render this pane when a command reply comes in — the
    // reply isn't folded state, so nothing else would. Points at the live mount
    // (like the hotkeys/native re-points above), self-removed on teardown.
    const doRefresh = () => {
      // A parked thread's refresh (a late welcome/tour notice, a scripted
      // typing beat) must not paint into the shared #app-pane once another
      // thread has taken it over — that's how Eleven's onboarding messages
      // leaked into the chat you'd navigated to. The notice is already stored
      // in localNotices and paints when this thread is next opened; skip the
      // live render when the pane no longer belongs to us.
      const cur = el.querySelector(":scope > .chatapp-root");
      if (cur && cur.dataset.thread && cur.dataset.thread !== ctx.threadId) return;
      renderApp(ctx.threadId, "chat", el);
    };
    refreshFeed.set(ctx.threadId, doRefresh);
    // Keep the live mount ctx so the shell can inject a private notice into this
    // thread (e.g. the welcome DM's "Take the tour" chip starting Eleven's tour).
    mountedCtx.set(ctx.threadId, ctx);
    // Flush any notices that were queued for this thread before it mounted (the
    // tour navigating to the Eleven DM appends its next step while the feed loads).
    const queued = pendingNotices.get(ctx.threadId);
    if (queued) {
      pendingNotices.delete(ctx.threadId);
      for (const spec of queued) addLocalNotice(ctx, spec);
    }
    ctx.onCleanup(() => {
      if (refreshFeed.get(ctx.threadId) === doRefresh) refreshFeed.delete(ctx.threadId);
      if (mountedCtx.get(ctx.threadId) === ctx) mountedCtx.delete(ctx.threadId);
    });

    const feed = root.querySelector(".chatapp-feed");
    // A local send arms pinNext: snap to the newest even if we'd scrolled up.
    // Set.delete both reads and clears it, so it only forces this one render.
    const forcePin = pinNext.delete(ctx.threadId);
    const wasAtBottom = forcePin || feedNearBottom(feed, 60) || !feed.childElementCount;

    const msgs = (state && state.msgs) || [];
    // A sender's message arriving means they've stopped typing — clear their
    // row immediately rather than waiting out the beat expiry (original rule).
    const last = msgs[msgs.length - 1];
    if (last && last.name && Date.now() - last.ts < 10000) {
      const tm = typing.get(ctx.threadId);
      if (tm) tm.delete(last.name);
    }
    const firstBuild = !feed.childElementCount;
    // The transcript: thread-only replies fold away into their root's tally
    // (an open thread view lists them — root._refreshThread below).
    const items = viewItems(msgs, { mainFeed: true });
    // Client-only command replies ("only visible to you") ride in the feed as keyed
    // rows, interleaved by their creation-time seq (see addLocalNotice) so they
    // stack like bubbles and stay put as the conversation continues. Merge + sort
    // only when some exist, so a normal feed keeps its plain message order.
    const notices = localNotices.get(ctx.threadId);
    if (notices && notices.length) {
      // In a solo thread (a persona conversation like setup — no other members)
      // "Only visible to you" is implicit, so the tag stays off.
      const solo = !!(host && host.soloThread && host.soloThread(ctx.threadId));
      for (const n of notices) items.push({ id: n.id, notice: n, seq: n.seq, solo, vrev: "notice", srev: "" });
      items.sort((a, b) => (a.notice ? a.seq : a.sid) - (b.notice ? b.seq : b.sid));
      // Notices stack in sender runs like regular messages: consecutive notices
      // from the same speaker keep one header (name + badge), the rest continue.
      let prevNotice = null;
      for (const it of items) {
        if (it.notice) {
          it.cont = !!(prevNotice && prevNotice.sender && it.notice.sender && prevNotice.sender.name === it.notice.sender.name);
          // Spent chips (their step resolved — a.stale()) fold into the vrev so
          // the keyed renderer rebuilds the row when a later render pass finds
          // them newly stale; without this a resolved chip stays looking live.
          const spent = (it.notice.actions || []).reduce((n, a) => n + (a && a.stale && a.stale() ? 1 : 0), 0);
          it.vrev = `notice|${it.cont ? 1 : 0}|${it.solo ? 1 : 0}|${spent}`;
          prevNotice = it.notice;
        } else {
          prevNotice = null;
        }
      }
    }
    // The bot's intro ("This is the start of your chat history with To-do…") is a
    // PERSISTENT first item — a keyed row that scrolls up as the conversation and
    // its action lines grow, marking the beginning, rather than a vanishing
    // empty-state. host.chatIntro is null for a normal chat (no intro row).
    const introText = host && host.chatIntro && host.chatIntro(ctx.threadId);
    // vrev tracks the text so a dynamic intro (an open group's live "N people
    // here") re-renders when it changes; static intros keep a stable rev.
    if (introText) items.unshift({ id: "chatapp-intro", intro: true, text: introText, vrev: "intro|" + introText });
    keyedList(feed, items, {
      key: (m) => m.id,
      rev: (m) => m.vrev + mutedRev(m, ctx) + mentionRev(m),
      srev: (m) => m.srev,
      render: (m) => renderItem(m, ctx),
      update: (node, m) => patchBubble(node, m, ctx),
    });
    if (wasAtBottom) {
      // History builds — and a local send from scrolled-up (forcePin) — jump
      // straight to the newest; a plain live append glides (the original ease),
      // respecting reduced-motion. A send jumps rather than gliding the whole
      // history so it lands instantly on your message, not after a long scroll.
      feedGlideToBottom(feed, firstBuild || forcePin);
    }
    if (root._updateJumpBtn) root._updateJumpBtn();

    // An open reply-thread view folds from this same state — re-derive and
    // re-render it every state change so new replies/reactions/edits land live
    // (it reads current state via threadItems, never a cached list). No-op when
    // closed; stashed on the root like _hotkeys so the instant-restore path
    // (which skips buildSkeleton) keeps the live mount's view current.
    if (root._refreshThread) root._refreshThread();
    // The ▤ Threads list folds from that same state: a new reply re-sorts it
    // and moves a count. Repaints only when what it shows actually changed
    // (its own signature check) — the rows are buttons, and a reader tabbing
    // them must not lose their place to someone else's message.
    if (root._refreshThreadList) root._refreshThreadList();

    // The in-feed typing row, exactly like the original feed: a .typing element
    // kept as the feed's last child (below the newest message). keyedList only
    // manages keyed children, so it never touches this row.
    const myName = () => {
      const mine = msgs.find((m) => m.uid && m.uid === ctx.me);
      return mine ? mine.name : null;
    };
    const drawTyping = () => {
      const names = typingNames(ctx.threadId, myName());
      let row = feed.querySelector(":scope > .typing");
      if (!names.length) {
        if (row) row.remove();
        return;
      }
      if (!row) {
        row = document.createElement("div");
        row.setAttribute("aria-live", "polite");
      }
      const dm = !(host && host.isGroup && host.isGroup(ctx.threadId));
      const label = typingSummary(names);
      // Only rebuild the contents on a real change — recreating the dots on
      // every ~10s beat would visibly restart their animation (original rule).
      if (row.dataset.mode !== (dm ? "bubble" : "text") || row.dataset.label !== label) {
        row.dataset.mode = dm ? "bubble" : "text";
        row.dataset.label = label;
        row.className = dm ? "typing typing-bubble" : "typing";
        row.textContent = ""; // textContent: names are untrusted
        if (dm) {
          for (let i = 0; i < 3; i++) {
            const dot = document.createElement("span");
            dot.className = "dot";
            row.appendChild(dot);
          }
          const sr = document.createElement("span"); // dots say nothing to a screen reader
          sr.className = "sr-only";
          sr.textContent = label;
          row.appendChild(sr);
        } else {
          row.textContent = label;
        }
      }
      const atBottom = feedNearBottom(feed);
      feed.appendChild(row); // (re-)appending keeps it below the newest message
      if (atBottom) feedGlideToBottom(feed);
    };
    refreshTyping.set(ctx.threadId, drawTyping);
    drawTyping();
    ctx.interval(drawTyping, 1000);
    ctx.onCleanup(() => {
      if (refreshTyping.get(ctx.threadId) === drawTyping) refreshTyping.delete(ctx.threadId);
    });
    // Keep the composer's outbound typing beat alive across a mid-message pause.
    // Like drawTyping this has to live on the render path, not in buildSkeleton:
    // the framework clears every interval before each render, so a once-per-mount
    // ticker would be torn down here and never re-armed (state lives in the
    // composer, so re-registering the timer each draw is harmless).
    const composer = composers.get(ctx.threadId);
    if (composer && composer.tickTyping) ctx.interval(composer.tickTyping, 1000);
    // The docked thread pane's composer beats typing too. Resolved lazily on
    // each tick, not captured: the pane opens and closes between renders (no
    // re-render marks either), so a captured handle would go stale — and with
    // no pane this is a 1s no-op, the same cost as the ticker above.
    ctx.interval(() => {
      const t = threads.get(ctx.threadId);
      const pane = t && t.paneComposer && t.paneComposer();
      if (pane && pane.tickTyping) pane.tickTyping();
    }, 1000);
  },
});

// Muted-message stubs the user tapped open this session (by sid). Deliberately
// not persisted: reopening the app re-folds — a mute means muted.
const revealedMuted = new Set();

// Muted-person folding is render-level state, not folded state — mix it into
// the keyed-list rev so muting, unmuting, or revealing rebuilds exactly the
// rows it changes and nothing else (m0 = folded stub, m1 = revealed).
function mutedRev(m, ctx) {
  if (!m.uid || !ctx || m.uid === ctx.me || !host || !host.mutedPerson || !host.mutedPerson(m.uid)) return "";
  return revealedMuted.has(m.sid) ? "|m1" : "|m0";
}

// A message renders its @mentions against the roster AT RENDER TIME
// (renderRichText reads host.mentionNames() fresh) — but keyedList only calls
// render() once per key; an already-rendered bubble is never revisited unless
// its rev changes. A person who joins (or is newly added to a group) after a
// message mentioning them already rendered stays plain, unbolded text
// forever, until something touches that row (issue #249). repaintMentionsOf
// marks exactly the messages that need one (sids only); mentionRev reads that
// mark so keyedList rebuilds those rows and leaves everything else alone —
// bumping a global rev would force-rebuild the whole visible feed for a
// change that's almost always irrelevant to it.
const mentionDirty = new Set();
function mentionRev(m) {
  return mentionDirty.has(m.sid) ? "|mention" : "";
}

// Pure: which of the last `cap` messages newly reference one of `names` —
// "newly" meaning not already in `alreadyDirty`, so a repeat call over the
// same feed finds nothing and triggers nothing. (An already-dirty row's rev
// is the fixed "|mention" tag, so a second name resolving in the same message
// couldn't rebuild it anyway — skipping it loses no repaint.) Exported for
// the Node tests.
export function newlyDirtyMentionSids(msgs, names, alreadyDirty, cap = 100) {
  const out = [];
  for (const m of (msgs || []).slice(-cap)) {
    if (m.text && !alreadyDirty.has(m.sid) && names.some((n) => m.text.includes("@" + n))) out.push(m.sid);
  }
  return out;
}

// repaintMentionsOf(names): one or more roster labels just became known (a
// fresh joiner, or a label that finished decrypting) — called from shell.js's
// decryptRosterLabels. Scans each mounted thread's last 100 messages for ones
// that actually reference a newly-known name and marks only those dirty, then
// asks the thread to re-render — a small, targeted repaint instead of a
// blanket one (issue #249).
export function repaintMentionsOf(names) {
  if (!names || !names.length) return;
  // Iterate a SNAPSHOT: refresh() re-renders, and a re-render tears down the
  // old mount (deleting its mountedCtx entry) before the new one re-adds it.
  // A delete + re-add lands at the end of the Map's iteration order, so a
  // live iterator here would visit the same thread again — and, with the
  // same @name still in its feed, again forever: the 2026-07-17 hard freeze
  // on web boot. The newly-dirty gate below is the second lock on that door.
  for (const ctx of [...mountedCtx.values()]) {
    const msgs = (ctx.getState() && ctx.getState().msgs) || [];
    const fresh = newlyDirtyMentionSids(msgs, names, mentionDirty);
    if (!fresh.length) continue;
    for (const sid of fresh) mentionDirty.add(sid);
    const refresh = refreshFeed.get(ctx.threadId);
    if (refresh) refresh();
  }
}

// Swap the composer for the closed-conversation banner while the host says
// this DM is closed (issue #578). The banner occupies the composer's layout
// slot — inline, never floating over the feed.
function paintClosedState(root, ctx) {
  const closed = !!(host && host.dmClosed && host.dmClosed(ctx.threadId));
  // Direct children only: a docked thread pane nests its own ".composer",
  // and this paint must never grab that one by first match.
  const compose = root.querySelector(":scope > .composer");
  const float = root.querySelector(":scope > .composer-float");
  const paneCompose = root.querySelector(".chatapp-thread-composer");
  let bar = root.querySelector(":scope > .dm-closed-bar");
  if (!closed) {
    if (bar) bar.remove();
    if (compose) compose.classList.remove("hidden");
    if (float) float.classList.remove("hidden");
    if (paneCompose) paneCompose.classList.remove("hidden");
    return;
  }
  if (compose) compose.classList.add("hidden");
  if (float) float.classList.add("hidden");
  if (paneCompose) paneCompose.classList.add("hidden");
  if (bar) return; // already painted; keep any inline error it shows
  bar = document.createElement("div");
  bar.className = "dm-closed-bar";
  const text = document.createElement("span");
  text.textContent = "This conversation is closed.";
  bar.appendChild(text);
  const reopen = document.createElement("button");
  reopen.type = "button";
  reopen.textContent = "Reopen";
  reopen.onclick = async () => {
    reopen.disabled = true;
    const r = host && host.reopenDM ? await host.reopenDM(ctx.threadId) : { ok: false };
    if (r && r.ok) return; // the host repaints; the banner unmounts itself
    reopen.disabled = false;
    // "dms closed" = their DM door (issue #578); anything else is transient.
    text.textContent =
      r && String(r.error).includes("dms closed")
        ? "They're not accepting direct messages right now."
        : "Couldn't reopen — try again.";
  };
  bar.appendChild(reopen);
  root.appendChild(bar);
}

// ---- bubbles: the original feed's exact markup ------------------------------

// renderItem builds one feed row inside a display:contents wrapper, so the
// optional .time-sep and the .msg land in the feed's flex flow exactly like
// original siblings. Structure and class names mirror appendMessage verbatim.
function renderItem(m, ctx) {
  const item = document.createElement("div");
  item.className = "chatapp-item";

  if (m.timeSep) {
    const sep = document.createElement("div");
    sep.className = "time-sep";
    if (m.timeSep.withDay) {
      const day = document.createElement("strong");
      day.textContent = dayLabel(m.ts);
      sep.appendChild(day);
      sep.appendChild(document.createTextNode(" " + formatTime(m.ts)));
    } else {
      sep.textContent = formatTime(m.ts);
    }
    item.appendChild(sep);
  }

  // The persistent "start of your chat history" intro row (keyed first).
  if (m.intro) {
    const el = document.createElement("div");
    el.className = "chatapp-intro";
    el.textContent = m.text;
    item.appendChild(el);
    return item;
  }

  // A private "only visible to you" command reply — a client-only feed row that
  // persists and stacks like a bubble (see addLocalNotice / buildLocalNotice).
  if (m.notice) {
    item.appendChild(buildLocalNotice(m.notice, { cont: !!m.cont, solo: !!m.solo }));
    return item;
  }

  // An app-thread action ("added 'milk'") — a centered /me-style line, not a
  // bubble: a record of your interaction with the bot in the chat history.
  if (m.action) {
    const line = document.createElement("div");
    line.className = "chatapp-action";
    line.textContent = m.text;
    item.appendChild(line);
    return item;
  }

  // A muted member's message (issue #578) folds to a quiet stub — visible and
  // tappable rather than silently gone, because the honest framing of a mute
  // is "you stop seeing them", not "they stop existing". Reveal is per-message
  // and per-session. Your own messages never fold.
  if (m.uid && m.uid !== ctx.me && host && host.mutedPerson && host.mutedPerson(m.uid) && !revealedMuted.has(m.sid)) {
    const stub = document.createElement("div");
    stub.className = "muted-stub";
    const label = document.createElement("span");
    label.className = "muted-stub-label";
    label.textContent = "Muted message";
    stub.appendChild(label);
    const show = document.createElement("button");
    show.type = "button";
    show.className = "muted-stub-show";
    show.textContent = "Show";
    show.setAttribute("aria-label", "Show muted message");
    show.onclick = () => {
      revealedMuted.add(m.sid);
      item.replaceWith(renderItem(m, ctx)); // re-render this one row in place
    };
    stub.appendChild(show);
    item.appendChild(stub);
    return item;
  }

  // Mirror the original feed's attribution (ownMessage): prefer the inline uid,
  // but fall back to a screen-name match so your own legacy (uid-less) messages
  // still render as yours — right-aligned, name hidden in group runs, editable.
  const mine = ownMessage({ uid: m.uid, name: m.name }, ctx.me, ctx.meName);
  const wrap = document.createElement("div");
  wrap.className = "msg " + (mine ? "me" : "them") + (m.cont ? " cont" : "");
  if (Date.now() - m.ts < 3000) wrap.classList.add("appear"); // live arrivals ease in, history doesn't
  wrap.dataset.id = m.sid || ""; // its server id (empty while pending) — lets a reply quote scroll back here
  wrap.dataset.t = m.ts;
  wrap.dataset.sender = m.name;
  // Tag with the thread root for a thread reply (replyRoot), the quoted id for
  // a plain one — so the "N Replies" jump belt on a root finds its thread's
  // replies, and a plain quote still points at what it quotes.
  if (m.reply && m.reply.id) wrap.dataset.replyTo = m.replyRoot || m.reply.id;

  // The header shows the sender's CURRENT roster name (looked up by the uid
  // inside the ciphertext), falling back to the name snapshot the sender
  // stamped into the payload. The lookup heals messages sent before a member
  // picked a name — permanently nameless snapshots — and retitles history
  // after a rename; the snapshot still covers uid-less legacy messages and
  // members who've since left the roster.
  const senderName = (m.uid && host && host.memberName && host.memberName(m.uid)) || m.name;
  if (!mine && senderName && host && host.isGroup && host.isGroup(ctx.threadId) && !m.cont) {
    const nm = document.createElement("div");
    nm.className = "name";
    nm.style.display = "flex"; // center the name text with its AI/BOT badge
    nm.style.alignItems = "center";
    nm.textContent = senderName;
    const kind = host.agentKind && host.agentKind(senderName);
    if (kind) nm.appendChild(agentTag(kind));
    wrap.appendChild(nm);
  }

  // The bubble + its quote/image/preview + hover icons live in .content (the
  // positioning context for the hover affordances); reactions sit below it.
  const content = document.createElement("div");
  content.className = "content";

  // An admin warning (issue #578) keeps the ordinary bubble but announces
  // itself — a formal notice should never read like small talk.
  if (m.warn) {
    wrap.classList.add("warn");
    const w = document.createElement("div");
    w.className = "warn-tag";
    w.textContent = "⚠️ A notice from an admin";
    content.appendChild(w);
  }

  if (m.reply && (m.reply.name || m.reply.snippet)) {
    const q = document.createElement("button");
    q.type = "button";
    q.className = "reply-quote";
    const who = document.createElement("div");
    who.className = "reply-quote-name";
    who.textContent = m.reply.name;
    const txt = document.createElement("div");
    txt.className = "reply-quote-text";
    txt.textContent = m.reply.snippet;
    q.append(who, txt);
    paintQuoteThreadLink(q, m);
    q.onclick = () => {
      // Two verbs, two cards. A THREAD reply's card is the way into its thread
      // — it's only rendered inline because its root is paged out, so opening
      // the thread (threadTarget also hands us the root's name/snippet as the
      // header fallback) is the whole point; the card is the opener, so focus
      // returns to it when the view closes. A PLAIN reply's card is a quote,
      // and tapping a quote jumps to the message it quotes — the behaviour
      // that predates threads, and the one a reader expects when nothing here
      // said "thread". Scroll-jump also covers a mount with no thread controls.
      //
      // "In a thread" is threadRootOf, not the wire flag: a CONVERTED reply
      // rendered inline (its root paged out) wears the same thread tally on
      // its card — paintQuoteThreadLink reads the same rollup — so the card
      // must open the thread it advertises. Native asks the same question
      // (MessageBubble's replyQuote → threadRootID).
      const t = threads.get(ctx.threadId);
      const ref = threadRootOf(m) ? threadTarget(((ctx.getState() || {}).msgs) || [], m) : null;
      if (t && ref && ref.id) t.open(ref.id, ref, q);
      else scrollToMessage(wrap, m.reply.id);
    };
    content.appendChild(q);
  }

  for (const a of m.attachments) {
    if (a.type && a.type.startsWith("image/")) {
      const img = document.createElement("img");
      // A GIF's click belongs to its play/pause toggle, not the lightbox —
      // .msg-gif swaps the zoom-in cursor for a plain pointer.
      img.className = a.type === "image/gif" ? "msg-image msg-gif" : "msg-image";
      img.alt = a.name || "photo";
      // Reserve the image's final box before the blob decrypts (see the original
      // appendMessage note) so the feed doesn't jump as photos pop in.
      if (a.w && a.h) {
        img.style.aspectRatio = `${a.w} / ${a.h}`;
        const scale = Math.min(260 / a.w, 320 / a.h, 1);
        img.style.width = Math.round(a.w * scale) + "px";
      }
      // The BlurHash ghost of the photo while its blob downloads + decrypts
      // (attachments[].bh, inside the encrypted payload): decoded into a tiny
      // canvas and painted as the element's background — the decoded pixels
      // simply cover it, and matching colours make the swap read gently.
      if (a.bh) {
        try {
          const pw = 32, ph = a.w && a.h ? Math.max(1, Math.round((32 * a.h) / a.w)) : 24;
          const px = decodeBlurhash(a.bh, pw, ph);
          if (px) {
            const c = document.createElement("canvas");
            c.width = pw;
            c.height = ph;
            c.getContext("2d").putImageData(new ImageData(px, pw, ph), 0, 0);
            img.style.backgroundImage = `url(${c.toDataURL()})`;
            img.style.backgroundSize = "cover";
          }
        } catch { /* a bad hash keeps the flat placeholder */ }
      }
      if (host) {
        host.loadBlob(ctx.threadId, a).then((url) => {
          if (!url) return;
          img.src = url;
          if (a.type === "image/gif") wireGifToggle(img, url);
          else img.onclick = () => openLightbox(url, img);
        });
      }
      content.appendChild(img);
    } else if (a.type && a.type.startsWith("video/")) {
      content.appendChild(buildVideoCard(a, ctx));
    } else {
      content.appendChild(buildFileCard(a, ctx));
    }
  }

  // A message carrying a valid card renders the card as its body; the text is
  // that card's plain fallback and would be pure duplication next to it. A
  // card that fails to normalize (unknown schema/block — fail closed,
  // cards.js) renders null and the text shows as usual.
  const cardEl = m.card ? renderCard(m.card) : null;
  if (m.text.trim() && !cardEl) {
    const bubble = document.createElement("div");
    const jumbo = !m.attachments.length && emojiOnlyCount(m.text) > 0;
    bubble.className = jumbo ? "bubble jumbo-emoji" : "bubble";
    renderRichText(bubble, m.text);
    content.appendChild(bubble);
    const link = firstLink(m.text);
    const yt = link && youtubeId(link);
    if (yt) content.appendChild(buildYouTubeCard(yt));
    else if (link) addLinkPreview(content, link);
  }
  if (cardEl) content.appendChild(cardEl);

  // Helper-proposed one-tap action chips ("Switch to dark" …): the host
  // whitelists, labels, and runs them (they're host machinery — theme,
  // profile); the app mounts the returned row in the original position.
  if (m.actions && m.actions.length && host && host.actionChips) {
    const chips = host.actionChips(m.actions);
    if (chips) content.appendChild(chips);
  }

  wrap.appendChild(content);

  // Reactions below the bubble (buildReactionsRow seeds the load-time "mine"
  // flags). It's the SAME builder patchBubble reuses, so a later reaction
  // reconciles this row in place rather than rebuilding the whole bubble.
  const reactions = buildReactionsRow(m, ctx);
  if (reactions) wrap.appendChild(reactions);

  if (m.replyCount) wrap.appendChild(buildReplyCount(m, wrap, ctx));

  if (m.edited) {
    const e = document.createElement("div");
    e.className = "edited-tag";
    e.textContent = "Edited";
    wrap.appendChild(e);
  }

  // A still-pending optimistic send withholds its interactive actions — you can't
  // react to, reply to, link, or edit a message that hasn't been sent yet — and
  // wears a subtle status the CSS only reveals once it's `.slow` (5s unconfirmed).
  // On confirmation patchBubble promotes it: attaches these actions with the real
  // server id, no rebuild. A confirmed message gets them straight away.
  if (m.pending) {
    wrap.dataset.pending = "1";
    wrap.classList.add("pending");
    if (m.slow) wrap.classList.add("slow");
    wrap.appendChild(buildSendStatus());
  } else {
    attachActions(wrap, content, m, ctx);
  }

  item.appendChild(wrap);
  return item;
}

// The interactive message actions — desktop's hover strip (react / reply /
// reply-in-thread / edit / copy-link) plus its press-and-hold, or touch's
// swipe-reply + long-press picker.
// Split out of renderItem so patchBubble can attach them to a bubble that first
// rendered while pending (actions withheld) the moment its echo confirms it — with
// the now-real server id, and without rebuilding the bubble (no photo flash).
function attachActions(wrap, content, m, ctx) {
  if (coarse) {
    attachSwipeReply(wrap, m, ctx);
    attachTouchPicker(wrap, m, ctx);
    return;
  }
  // Desktop: the hover strip beside the bubble — action icons + exact time,
  // revealed on hover (see .msg-actions in style.css).
  const mine = ownMessage({ uid: m.uid, name: m.name }, ctx.me, ctx.meName);
  const actions = document.createElement("div");
  actions.className = "msg-actions";
  actions.appendChild(hoverBtn("react-hover", "React", icon("react"), (e) => openMessagePicker(m, ctx, e.currentTarget)));
  actions.appendChild(
    hoverBtn("reply-hover", "Reply", icon("reply"), () => {
      const ctl = composerFor(wrap, ctx);
      if (ctl) ctl.startReply(m);
    }),
  );
  // Reply in thread, right beside Reply — the two are siblings, so they belong
  // side by side. It was menu-only (the picker + the touch sheet, both of which
  // keep it), and on desktop that menu opens from the *React* smiley: nobody
  // hunting for threads had a reason to click a smiley, so threads read as a
  // feature we hadn't built. The distinct glyph is what makes two neighbouring
  // reply verbs legible — see ICON_THREAD. The button is its own opener, so
  // closing the thread puts focus back on the icon that opened it. Inside the
  // thread view this button is hidden (style.css), the same self-pointing-row
  // rule as the quote card and the reply tally: the verb would resolve to the
  // thread you're already standing in.
  actions.appendChild(
    hoverBtn("thread-hover", "Reply in thread", icon("thread"), (e) => openReplyThread(m, ctx, e.currentTarget)),
  );
  const remaining = m.ts + EDIT_WINDOW_MS - Date.now();
  if (mine && m.text.trim() && remaining > 0) {
    const editBtn = hoverBtn("edit-hover", "Edit", icon("edit"), () => {
      const ctl = composerFor(wrap, ctx);
      if (ctl) ctl.startEdit(m);
    });
    actions.appendChild(editBtn);
    setTimeout(() => editBtn.remove(), remaining); // drop it when the window lapses
  }
  // The exact-time hover affordance doubles as a "Copy link" trigger (issue
  // #893) — the Slack/Discord convention. A <button> (not a bare span) so it's
  // keyboard-reachable and gets a real accessible name, not just visible text
  // that reads as a plain timestamp.
  const timeBtn = document.createElement("button");
  timeBtn.type = "button";
  timeBtn.className = "msg-time";
  timeBtn.textContent = formatTime(m.ts);
  timeBtn.title = "Copy link to this message";
  timeBtn.setAttribute("aria-label", `Copy link to this message, sent ${formatTime(m.ts)}`);
  timeBtn.onclick = (e) => {
    e.stopPropagation();
    copyMessageLink(ctx, m);
  };
  actions.appendChild(timeBtn);
  content.appendChild(actions);
  attachPressHold(wrap, m, ctx);
}

// The pending-send status footer: a spinner + "Sending…", kept out of the tab
// order and hidden by CSS until the bubble goes `.slow`. `role="status"` +
// aria-live so a screen reader announces the delay when it finally surfaces
// rather than the instant every message is sent.
function buildSendStatus() {
  const s = document.createElement("div");
  s.className = "send-status";
  s.setAttribute("role", "status");
  s.textContent = "Sending…";
  return s;
}

// The reactions row below a bubble (or null when there are none). Seeds the
// load-time "mine" flags first — add-only and idempotent (live frames carry
// counts only, never a mine flag), so it's safe to run from BOTH the initial
// render and the in-place reaction patch (patchBubble). Mirrors the original
// feed's renderReactions, minus the direct wrap mutation.
function buildReactionsRow(m, ctx) {
  for (const r of m.reactions || []) {
    if (r.mine) myReactions.add(`${m.sid}|${r.emoji}`);
  }
  const row = document.createElement("div");
  row.className = "reactions";
  for (const r of m.reactions || []) {
    if (!r.count) continue;
    const chip = document.createElement("button");
    chip.className = "reaction-chip" + (myReactions.has(`${m.sid}|${r.emoji}`) ? " mine" : "");
    chip.textContent = r.count > 1 ? `${r.emoji} ${r.count}` : r.emoji;
    chip.onclick = (e) => {
      e.stopPropagation();
      toggleReaction(m, r.emoji, ctx);
    };
    row.appendChild(chip);
  }
  return row.childElementCount ? row : null;
}

// The "N Replies" line inside a quote card, marking it as a way INTO a thread
// rather than just a quote. Only a thread reply rendered inline (its root
// paged out) ever wears one — see threadLinkCount, which is the whole gate —
// and then only while its thread holds more than it: the card carries the
// SAME wording the root wears, the vocabulary members already read as
// "there's a conversation through here", inside the card so the whole thing
// reads as one control. A plain quote reply's card never gets one; tapping it
// jumps to the message it quotes. Create / update / remove in one place —
// buildMessageEl calls it as the card is built, patchBubble when a sibling
// reply lands or is deleted.
function paintQuoteThreadLink(q, m) {
  const n = threadLinkCount(m);
  let line = q.querySelector(":scope > .reply-quote-thread");
  if (!n) {
    if (line) line.remove();
    q.removeAttribute("aria-label");
    return;
  }
  const label = replyCountLabel(n);
  if (!line) {
    line = document.createElement("div");
    line.className = "reply-quote-thread";
    q.appendChild(line);
  }
  line.textContent = label;
  // The card's own name says what tapping it does — "4 Replies" alone is a
  // number read aloud. It keeps the visible label inside the spoken one
  // (WCAG 2.5.3) and carries the quote it replaced.
  const quoted = [m.reply && m.reply.name, m.reply && m.reply.snippet].filter(Boolean).join(": ");
  q.setAttribute("aria-label", quoted ? `Open thread, ${label} — quoting ${quoted}` : `Open thread, ${label}`);
}

// The "N Replies" tally below a bubble, tappable to open the thread view. The
// tally only ever renders under a loaded root (it IS this message), so no
// paging is needed on this path. Old jump-to-first-reply kept as a belt for a
// mount without thread controls. A real <button> (style.css resets the pill
// chrome), like the quote card: the thread is keyboard-reachable, and it's
// the opener the view hands focus back to on close.
function buildReplyCount(m, wrap, ctx) {
  const rc = document.createElement("button");
  rc.type = "button";
  rc.className = "reply-count";
  rc.textContent = replyCountLabel(m.replyCount);
  rc.onclick = () => {
    const t = threads.get(ctx.threadId);
    if (t) {
      t.open(m.sid, { id: m.sid, name: m.name, snippet: replySnippet(m.raw) }, rc);
      return;
    }
    const feed = wrap.closest(".chatapp-feed");
    const first = feed && feed.querySelector(`.msg[data-reply-to="${m.sid}"]`);
    if (first) scrollToMessage(wrap, first.dataset.id);
  };
  return rc;
}

// Patch a retained bubble's SOFT parts in place — the reactions row and the reply
// tally, both siblings AFTER .content. keyedList calls this (never a rebuild) when
// only the soft rev changed, so it MUST NOT descend into .content: that subtree
// holds the decrypted <img> and the YouTube embed, and leaving it untouched is
// precisely what stops a photo reloading and a playing video resetting when a
// reaction lands or a reply tallies. Mirrors the original feed's renderReactions /
// paintReplyCount, which likewise only ever touched these two rows.
function patchBubble(node, m, ctx) {
  const wrap = node.querySelector(":scope > .msg");
  if (!wrap) return;
  const content = wrap.querySelector(":scope > .content");
  // Delivery state (soft rev). A bubble that rendered while pending either goes
  // `.slow` (5s unconfirmed) or gets PROMOTED here the moment its echo lands: drop
  // the pending chrome, adopt the real server id, and attach the interactive
  // actions it was withheld — all outside .content, so the bubble is never rebuilt.
  if (wrap.dataset.pending === "1") {
    if (m.pending) {
      wrap.classList.toggle("slow", !!m.slow);
    } else {
      wrap.dataset.pending = "0";
      wrap.classList.remove("pending", "slow");
      wrap.dataset.id = m.sid || "";
      const status = wrap.querySelector(":scope > .send-status");
      if (status) status.remove();
      attachActions(wrap, content, m, ctx);
    }
  }
  // The quote card's thread link: a sibling reply landing (or being deleted)
  // moves this reply's thread size, so repaint it. Surgical by design — the
  // card's own text node, nothing else in .content is read or replaced, so the
  // photo/embed rule above still holds.
  const quote = content && content.querySelector(":scope > .reply-quote");
  if (quote) paintQuoteThreadLink(quote, m);
  // Reactions: rebuild the row and reinsert it right after .content, so it stays
  // above the reply/edited tags regardless of which of them are present.
  const oldRow = wrap.querySelector(":scope > .reactions");
  if (oldRow) oldRow.remove();
  const newRow = buildReactionsRow(m, ctx);
  if (newRow && content) content.after(newRow);
  // Reply tally: create (0→N), update (N→M), or remove (N→0 — a reply can be
  // deleted, dropping the parent's tally on the next viewItems).
  let rc = wrap.querySelector(":scope > .reply-count");
  if (m.replyCount) {
    if (rc) rc.textContent = replyCountLabel(m.replyCount);
    else {
      rc = buildReplyCount(m, wrap, ctx);
      const edited = wrap.querySelector(":scope > .edited-tag");
      if (edited) edited.before(rc);
      else wrap.appendChild(rc);
    }
  } else if (rc) {
    rc.remove();
  }
}

function icon(name) {
  return (host && host.icons && host.icons[name]) || "";
}

function hoverBtn(className, label, svg, onclick) {
  const b = document.createElement("button");
  b.type = "button";
  b.className = className;
  b.innerHTML = svg; // static in-code SVG from the host (safe)
  b.setAttribute("aria-label", label);
  // Same label as a native tooltip (the picker's actions already do this): an
  // icon-only strip is only self-explanatory once you know the glyphs, and
  // "Reply" vs "Reply in thread" is exactly the distinction hovering settles.
  b.title = label;
  b.onclick = (e) => {
    e.stopPropagation();
    onclick(e);
  };
  return b;
}

function agentTag(kind) {
  const t = document.createElement("span");
  const ai = kind === "ai";
  t.textContent = ai ? "AI" : "BOT";
  t.title = ai
    ? "An AI helper — what you send it is sent to an AI provider to answer"
    : "An automated helper (bot), not a person — it runs on this server";
  // flex:none keeps it from shrinking, line-height:1 keeps the box tight — the
  // name line is a flex row with align-items:center (see the call site).
  t.style.cssText =
    "flex:none;margin-left:6px;font-size:0.7em;line-height:1;font-weight:600;letter-spacing:0.03em;padding:2px 5px;border-radius:6px;vertical-align:middle;" +
    "background:var(--border,#ddd);color:var(--muted,#666);";
  return t;
}

// The landing itself: bring a rendered bubble into view and wave it. Shared
// so every route to a message (the transcript, the thread view, the paged-in
// one) ends the same way.
function flashMessage(target) {
  target.scrollIntoView({ behavior: "smooth", block: "center" });
  target.classList.remove("flash");
  void target.offsetWidth; // restart the animation if it's still mid-flash
  target.classList.add("flash");
}

// Exported for the shell's search-result jump (#586): `near` is any node
// inside the target feed (the feed itself works).
export function scrollToMessage(near, sid) {
  const feed = near.closest(".chatapp-feed");
  const target = feed && feed.querySelector(`.msg[data-id="${sid}"]`);
  if (target) return flashMessage(target);
  const root = near.closest(".chatapp-root");
  const t = root && threads.get(root.dataset.thread);
  if (!t) return;
  // Not in the transcript, for one of two reasons.
  //
  // It's loaded but lives only in a thread (a reply made there — inMainFeed
  // false): open the thread on its root and land on the bubble inside the
  // view. The view renders synchronously on open, so its body already holds
  // the bubble.
  if (t.openForMessage(Number(sid))) {
    const inThread = root.querySelector(`.chatapp-thread-msgs .msg[data-id="${sid}"]`);
    if (inThread) flashMessage(inThread);
    return;
  }
  // Or it simply isn't loaded — older than the page we hold. Page history
  // back for it (revealMessage), which lands on it or says why it can't.
  // Doing nothing here is what made a plain reply's quote card a dead control
  // on a cold-opened chat.
  t.reveal(Number(sid));
}

// "Copy link" (issue #893): mint the permalink through the host (it holds
// session.token and the fetch to /api/messages/{id}/link — see shell.js
// mintMessageLink) and write it to the clipboard. Same await-and-toast
// pattern as the existing plain-text Copy action, just via the host for the
// network round-trip a link mint needs that a local clipboard copy doesn't.
async function copyMessageLink(ctx, m) {
  if (!host || !host.mintMessageLink || !host.toast) return;
  const url = await host.mintMessageLink(ctx.threadId, m.sid);
  if (!url) {
    host.toast("Couldn't copy link");
    return;
  }
  try {
    await navigator.clipboard.writeText(url);
    host.toast("Link copied");
  } catch {
    host.toast("Couldn't copy link");
  }
}

function toggleReaction(m, emoji, ctx) {
  if (!host) return;
  const sid = m.sid;
  const key = `${sid}|${emoji}`;
  const mine = myReactions.has(key);
  // Reactions are now encrypted events. Optimistically update local state, but
  // if the send fails, revert on the next render. host.react is now async.
  // m.uid (the reacted-to message's author) rides inside the encrypted payload
  // so push handlers can show the reaction only to the author; its snippet
  // rides along too so the chat list can say what was reacted to.
  // Through the markdown plain projection, like every other preview line —
  // quoting raw text would show the marks the bubble renders as styling, and
  // the composer's opt-out escapes as visible backslashes. Projected here, at
  // the stamp, so no payload ever carries them.
  const onVal = !mine;
  const quote = replySnippet({ ...m.raw, text: mdPlainText(m.raw.text || "") });
  host.react(ctx.threadId, sid, emoji, onVal, m.uid || "", quote).then((sent) => {
    if (!sent) {
      if (onVal) myReactions.delete(key);
      else myReactions.add(key);
    }
  });
  if (mine) myReactions.delete(key);
  else myReactions.add(key);
}

// The emoji picker over a message — the original .emoji-picker markup: the six
// reaction options, then icon actions (reply / edit / delete) and any actions
// other mini-apps contribute (e.g. "Save link"), glyphs as textContent.
function openMessagePicker(m, ctx, anchor) {
  document.querySelector(".emoji-picker")?.remove();
  const pop = document.createElement("div");
  pop.className = "emoji-picker";
  for (const emoji of REACTIONS) {
    const b = document.createElement("button");
    b.className = "emoji-opt";
    b.textContent = emoji;
    b.onclick = () => {
      toggleReaction(m, emoji, ctx);
      teardown();
    };
    pop.appendChild(b);
  }
  // Every button dismisses via teardown (below), never a bare pop.remove():
  // the picker's document listeners must go with it, or the digit/Escape
  // handler outlives the menu and a "1" typed into the composer the action
  // just focused toggles a reaction instead.
  const action = (svg, label, run) => {
    const b = document.createElement("button");
    b.className = "picker-action";
    b.innerHTML = svg; // static in-code SVG from the host (safe)
    b.setAttribute("aria-label", label);
    b.title = label;
    b.onclick = () => {
      run();
      teardown();
    };
    pop.appendChild(b);
  };
  action(icon("reply"), "Reply", () => {
    const ctl = composerFor(anchor, ctx);
    if (ctl) ctl.startReply(m);
  });
  // Reply in thread — opens the message's thread (docked beside the chat at
  // desktop widths, lifted over it on narrow ones) rather than staging a reply
  // below. Its own glyph, not a second reply arrow: this menu's rows are
  // icon-only, so twin arrows left the two verbs told apart by tooltip alone.
  // The anchor is the opener: the hover strip's button on that path, else the
  // bubble itself (unfocusable — openReplyThread drops it).
  action(icon("thread"), "Reply in thread", () => openReplyThread(m, ctx, anchor));
  // Convert to thread — offered only where there IS an inline chain to move
  // (convertChain), so it never shows on a message nobody answered, and never
  // inside the thread pane. Right after the thread verb: the two are about the
  // same place, one for what comes next and one for what already happened.
  if (convertChain(m, ctx, anchor).length) {
    action(icon("foldIn"), "Convert to thread", () => convertToThread(m, ctx, anchor));
  }
  // Copy — the original touch sheet's action; native selection is suppressed on
  // bubbles (long-press opens this menu), so Copy must live here.
  if (m.text.trim()) {
    action(icon("copy"), "Copy", async () => {
      // Mirror the classic feed's copyMessageText: await the write and confirm
      // via the host's status pill so success and failure both show up.
      try {
        await navigator.clipboard.writeText(m.text);
        if (host && host.toast) host.toast("Copied");
      } catch {
        if (host && host.toast) host.toast("Couldn't copy");
      }
    });
  }
  // Copy link (issue #893) — a shareable permalink that jumps a member
  // straight to this message; lives right after Copy.
  action(icon("link"), "Copy link", () => copyMessageLink(ctx, m));
  // Same uid-or-name attribution as the feed, so the Edit/Delete actions show up
  // on your own legacy (uid-less) messages too.
  const mine = ownMessage({ uid: m.uid, name: m.name }, ctx.me, ctx.meName);
  if (mine && m.text.trim() && Date.now() - m.ts < EDIT_WINDOW_MS) {
    action(icon("edit"), "Edit", () => {
      const ctl = composerFor(anchor, ctx);
      if (ctl) ctl.startEdit(m);
    });
  }
  if (mine) {
    action(icon("trash"), "Delete", () => {
      if (confirm("Delete this message for everyone? This can't be undone.") && host) host.del(ctx.threadId, m.sid, attachmentBlobIds(m));
    });
  }
  // Mute the sender (issue #578) — their messages fold to a quiet stub. Needs
  // a uid to key on (legacy uid-less messages can't be muted per-person).
  if (!mine && m.uid && host && host.mutedPerson && host.setPersonMuted) {
    const who = (host.memberName && host.memberName(m.uid)) || m.name || "them";
    const isMuted = host.mutedPerson(m.uid);
    action(icon("mute"), isMuted ? `Unmute ${who}` : `Mute ${who}`, () => {
      host.setPersonMuted(m.uid, !isMuted);
    });
  }
  // Report to the space's admins (issue #578) — the host owns the sheet (it
  // holds the roster + keys to seal the report to admin keys).
  if (!mine && m.uid && host && host.reportMessage) {
    action(icon("report"), "Report", () => host.reportMessage(ctx.threadId, m));
  }
  for (const act of messageActionsFor({ text: m.text, from: m.name })) {
    const b = document.createElement("button");
    b.className = "picker-action";
    b.textContent = act.glyph; // app-supplied — textContent, never innerHTML
    b.setAttribute("aria-label", act.label);
    b.title = act.label;
    b.onclick = () => {
      act.run();
      teardown();
    };
    pop.appendChild(b);
  }
  document.body.appendChild(pop);
  const r = anchor.getBoundingClientRect();
  pop.style.top = `${Math.max(8, r.top - pop.offsetHeight - 8)}px`;
  pop.style.left = `${Math.min(r.left, window.innerWidth - pop.offsetWidth - 8)}px`;
  const teardown = () => {
    pop.remove();
    document.removeEventListener("pointerdown", close, true);
    document.removeEventListener("keydown", onKey, true);
  };
  const close = (e) => {
    if (!pop.contains(e.target)) teardown();
  };
  // Keyboard: Escape dismisses; 1–6 toggles that reaction (mirrors the original
  // feed's cmd-T flow, where the menu opens from the keyboard).
  const onKey = (e) => {
    if (e.key === "Escape") {
      e.preventDefault();
      teardown();
      return;
    }
    const num = parseInt(e.key, 10);
    if (num >= 1 && num <= REACTIONS.length) {
      e.preventDefault();
      e.stopImmediatePropagation();
      toggleReaction(m, REACTIONS[num - 1], ctx);
      teardown();
    }
  };
  document.addEventListener("pointerdown", close, true);
  document.addEventListener("keydown", onKey, true);
}

// The actions in the touch long-press sheet, in the original feed's order: Reply,
// Reply in thread, Copy, Copy link, then app-contributed actions (Save link…),
// then your-own Edit (in-window) and Delete. Each is { label, icon | glyph,
// danger?, run } — mirrors messageActions in the original chat.js. `wrap` is
// the pressed bubble: Reply/Edit route to the composer it shares a pane with
// (the docked thread pane's own when it lives there), and it's the thread
// verb's opener.
function sheetActions(m, ctx, wrap) {
  const acts = [];
  acts.push({
    label: "Reply",
    icon: icon("reply"),
    run: () => {
      const ctl = composerFor(wrap, ctx);
      if (ctl) ctl.startReply(m);
    },
  });
  // Its own glyph (see the desktop picker) — the sheet's rows are labelled, so
  // this is about the two verbs looking as different as they behave.
  acts.push({ label: "Reply in thread", icon: icon("thread"), run: () => openReplyThread(m, ctx, wrap) });
  // Convert to thread — same gate as the desktop picker: only on a message
  // that actually has an inline chain under it.
  if (convertChain(m, ctx, wrap).length) {
    acts.push({ label: "Convert to thread", icon: icon("foldIn"), run: () => convertToThread(m, ctx, wrap) });
  }
  // Native selection is suppressed on bubbles (long-press opens this sheet), so
  // Copy must live here.
  if (m.text.trim()) {
    acts.push({
      label: "Copy",
      icon: icon("copy"),
      run: async () => {
        // Mirror the classic feed's copyMessageText: await the write and confirm
        // via the host's status pill so success and failure both show up.
        try {
          await navigator.clipboard.writeText(m.text);
          if (host && host.toast) host.toast("Copied");
        } catch {
          if (host && host.toast) host.toast("Couldn't copy");
        }
      },
    });
  }
  // Copy link (issue #893) — same permalink as the desktop picker's action.
  acts.push({ label: "Copy link", icon: icon("link"), run: () => copyMessageLink(ctx, m) });
  // Actions other mini-apps contribute (e.g. Bookmarks' "Save link") — each an
  // emoji glyph rendered as textContent, never innerHTML.
  for (const act of messageActionsFor({ text: m.text, from: m.name })) {
    acts.push({ label: act.label, glyph: act.glyph, run: act.run });
  }
  const mine = !!m.uid && m.uid === ctx.me;
  if (mine && m.text.trim() && Date.now() - m.ts < EDIT_WINDOW_MS) {
    acts.push({
      label: "Edit",
      icon: icon("edit"),
      run: () => {
        const ctl = composerFor(wrap, ctx);
        if (ctl) ctl.startEdit(m);
      },
    });
  }
  if (mine) {
    acts.push({
      label: "Delete",
      icon: icon("trash"),
      danger: true,
      run: () => {
        if (confirm("Delete this message for everyone? This can't be undone.") && host) host.del(ctx.threadId, m.sid, attachmentBlobIds(m));
      },
    });
  }
  // Mute the sender (issue #578) — same gate as the desktop picker.
  if (!mine && m.uid && host && host.mutedPerson && host.setPersonMuted) {
    const who = (host.memberName && host.memberName(m.uid)) || m.name || "them";
    const isMuted = host.mutedPerson(m.uid);
    acts.push({
      label: isMuted ? `Unmute ${who}` : `Mute ${who}`,
      icon: icon("mute"),
      run: () => host.setPersonMuted(m.uid, !isMuted),
    });
  }
  // Report to the space's admins (issue #578) — same gate as the picker.
  if (!mine && m.uid && host && host.reportMessage) {
    acts.push({
      label: "Report",
      icon: icon("report"),
      run: () => host.reportMessage(ctx.threadId, m),
    });
  }
  return acts;
}

// Touch long-press → the labelled message sheet (WhatsApp-style): a dim backdrop
// with the emoji reactions floating above the lifted message and a labelled
// Reply/Copy/Edit/Delete menu below it. Mirrors openMessageSheet in the original
// feed and reuses its .msg-sheet CSS.
function openMessageSheet(m, ctx, wrap) {
  document.querySelector(".msg-sheet")?.remove();
  const bubble = wrap.querySelector(".bubble") || wrap;
  const brect = bubble.getBoundingClientRect(); // for horizontal alignment
  const rect = wrap.getBoundingClientRect(); // the whole message (what we lift)
  const mine = !!m.uid && m.uid === ctx.me;

  const backdrop = document.createElement("div");
  backdrop.className = "msg-sheet";

  // A non-interactive copy of the message, lifted above the dim so it stays legible
  // while the reactions float above it and the menu below — the whole cluster is
  // repositioned vertically so both fit even when the message is at the screen edge.
  const clone = wrap.cloneNode(true);
  clone.classList.add("msg-sheet-clone");
  clone.classList.remove("appear");
  clone.style.transform = ""; // drop any residual swipe-to-reply translate
  clone.style.left = rect.left + "px";
  clone.style.width = rect.width + "px";

  const reactions = document.createElement("div");
  reactions.className = "msg-sheet-reactions";
  for (const emoji of REACTIONS) {
    const b = document.createElement("button");
    b.className = "sheet-emoji";
    b.textContent = emoji;
    b.onclick = () => {
      toggleReaction(m, emoji, ctx);
      close();
    };
    reactions.appendChild(b);
  }

  const menu = document.createElement("div");
  menu.className = "msg-sheet-menu";
  for (const a of sheetActions(m, ctx, wrap)) {
    const item = document.createElement("button");
    item.className = "msg-sheet-item" + (a.danger ? " danger" : "");
    const label = document.createElement("span");
    label.textContent = a.label;
    const ic = document.createElement("span");
    ic.className = "msg-sheet-icon";
    if (a.glyph) ic.textContent = a.glyph; // app action: emoji glyph (textContent)
    else ic.innerHTML = a.icon; // static in-code SVG from the host (safe)
    item.appendChild(label);
    item.appendChild(ic);
    item.onclick = () => {
      a.run();
      close();
    };
    menu.appendChild(item);
  }

  backdrop.appendChild(clone);
  backdrop.appendChild(reactions);
  backdrop.appendChild(menu);
  document.body.appendChild(backdrop);

  const M = 8;
  const GAP = 10;
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  const rH = reactions.offsetHeight;
  const mH = menu.offsetHeight;
  // Cap the lifted message so the reactions + menu always fit around it.
  const maxMsgH = Math.max(60, vh - 2 * M - rH - mH - 2 * GAP);
  const bH = Math.min(rect.height, maxMsgH);
  if (rect.height > bH) {
    clone.style.maxHeight = bH + "px";
    clone.style.overflow = "hidden";
  }
  // Keep the message near where it was, but slide it just enough that the reactions
  // fit above and the menu below.
  const minTop = M + rH + GAP;
  const maxTop = Math.max(minTop, vh - M - mH - GAP - bH);
  const msgTop = Math.max(minTop, Math.min(rect.top, maxTop));
  clone.style.top = msgTop + "px";

  const placeX = (el) => {
    const w = el.offsetWidth;
    const left = mine ? brect.right - w : brect.left;
    return Math.max(M, Math.min(left, vw - w - M));
  };
  reactions.style.top = msgTop - GAP - rH + "px";
  reactions.style.left = placeX(reactions) + "px";
  menu.style.top = msgTop + bH + GAP + "px";
  menu.style.left = placeX(menu) + "px";

  // Hide the original while its lifted copy is shown; restore on close.
  wrap.style.visibility = "hidden";

  function close() {
    wrap.style.visibility = "";
    backdrop.remove();
    document.removeEventListener("pointerdown", onDoc, true);
    document.removeEventListener("keydown", onEsc);
  }
  const onDoc = (e) => {
    if (!reactions.contains(e.target) && !menu.contains(e.target)) close();
  };
  const onEsc = (e) => {
    if (e.key === "Escape") {
      e.preventDefault();
      close();
    }
  };
  // Deferred so the press that opened the sheet doesn't immediately close it.
  setTimeout(() => {
    document.addEventListener("pointerdown", onDoc, true);
    document.addEventListener("keydown", onEsc);
  }, 0);
}

// Touch double-tap → a quick emoji-only reactions bar. Just the emojis: the actions
// (reply/copy/edit/delete) live in the long-press sheet. Reuses the compact
// .emoji-picker, mirrors openReactionBar in the original feed.
function openReactionBar(m, ctx, anchor) {
  document.querySelector(".emoji-picker")?.remove();
  const pop = document.createElement("div");
  pop.className = "emoji-picker";
  for (const emoji of REACTIONS) {
    const b = document.createElement("button");
    b.className = "emoji-opt";
    b.textContent = emoji;
    b.onclick = () => {
      toggleReaction(m, emoji, ctx);
      pop.remove();
    };
    pop.appendChild(b);
  }
  document.body.appendChild(pop);
  const r = anchor.getBoundingClientRect();
  pop.style.top = `${Math.max(8, r.top - pop.offsetHeight - 8)}px`;
  pop.style.left = `${Math.min(r.left, window.innerWidth - pop.offsetWidth - 8)}px`;
  const close = (e) => {
    if (!pop.contains(e.target)) {
      pop.remove();
      document.removeEventListener("pointerdown", close, true);
    }
  };
  setTimeout(() => document.addEventListener("pointerdown", close, true), 0);
}

// Desktop press-and-hold on the bubble opens the picker (the hover strip is
// the discoverable path; this mirrors the original gesture).
function attachPressHold(wrap, m, ctx) {
  let timer = null;
  wrap.addEventListener("pointerdown", (e) => {
    if (e.button !== 0) return;
    timer = setTimeout(() => openMessagePicker(m, ctx, wrap), 500);
  });
  const cancel = () => clearTimeout(timer);
  wrap.addEventListener("pointerup", cancel);
  wrap.addEventListener("pointerleave", cancel);
  wrap.addEventListener("pointermove", cancel);
}

// Touch: long-press (≈500ms) → the labelled message sheet; a quick double-tap →
// the emoji-only reactions bar. Mirrors attachReactionGesture's coarse branch in
// the original feed (a drag past 10px is a swipe/scroll, not a long-press).
function attachTouchPicker(wrap, m, ctx) {
  let timer = null;
  let sx = 0;
  let sy = 0;
  let lastTap = 0;
  let longFired = false;
  const cancel = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  wrap.addEventListener(
    "touchstart",
    (e) => {
      cancel();
      longFired = false;
      if (e.touches.length !== 1) return;
      sx = e.touches[0].clientX;
      sy = e.touches[0].clientY;
      timer = setTimeout(() => {
        timer = null;
        longFired = true;
        openMessageSheet(m, ctx, wrap);
      }, 500);
    },
    { passive: true },
  );
  wrap.addEventListener(
    "touchmove",
    (e) => {
      if (!timer) return;
      const t = e.touches[0];
      // A drag (swipe-to-reply or a scroll) isn't a long-press.
      if (Math.abs(t.clientX - sx) > 10 || Math.abs(t.clientY - sy) > 10) cancel();
    },
    { passive: true },
  );
  wrap.addEventListener("touchend", () => {
    const wasLong = longFired;
    cancel();
    if (wasLong) {
      lastTap = 0; // the long-press already opened the sheet — not a tap
      return;
    }
    const now = Date.now();
    if (now - lastTap < 300) {
      lastTap = 0;
      openReactionBar(m, ctx, wrap); // second quick tap
    } else {
      lastTap = now;
    }
  });
  wrap.addEventListener("touchcancel", () => {
    cancel();
    lastTap = 0;
  });
}

// Swipe a message right (touch) to reply — the original gesture: the message
// follows the finger, a reply arrow fades in, release past the threshold replies.
function attachSwipeReply(wrap, m, ctx) {
  const TRIGGER = 56;
  const MAX = 80;
  let startX = 0;
  let startY = 0;
  let dx = 0;
  let mode = ""; // "" undecided, "swipe", or "no"
  let iconEl = null;
  let raf = 0;

  // Write the transform once per frame (rAF-batched) using translate3d, which
  // keeps the bubble on a GPU compositor layer — no per-move repaint of the
  // subtree, so the drag stays smooth even in the iOS webview.
  const render = () => {
    raf = 0;
    const shift = Math.min(Math.max(dx, 0), MAX);
    wrap.style.transform = `translate3d(${shift}px,0,0)`;
    if (iconEl) iconEl.style.opacity = Math.min(shift / TRIGGER, 1);
  };
  const schedule = () => {
    if (!raf) raf = requestAnimationFrame(render);
  };

  const cleanup = () => {
    if (raf) {
      cancelAnimationFrame(raf);
      raf = 0;
    }
    if (iconEl) {
      iconEl.remove();
      iconEl = null;
    }
    wrap.style.transition = "transform 0.18s ease";
    wrap.style.transform = "";
    setTimeout(() => {
      wrap.style.transition = "";
      wrap.style.willChange = "";
    }, 200);
  };
  wrap.addEventListener(
    "touchstart",
    (e) => {
      if (e.touches.length !== 1) return;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
      dx = 0;
      mode = "";
    },
    { passive: true },
  );
  wrap.addEventListener(
    "touchmove",
    (e) => {
      const t = e.touches[0];
      dx = t.clientX - startX;
      const dy = t.clientY - startY;
      if (!mode) {
        // Mirror the original feed's axis-lock: ignore tiny jitter, then only
        // enter swipe when the horizontal drag clearly dominates the vertical
        // (by ~1.3×) — a diagonal drag the original reads as a scroll must not
        // trip the reply here either.
        if (Math.abs(dx) < 10 && Math.abs(dy) < 10) return;
        if (dx > 0 && Math.abs(dx) > Math.abs(dy) * 1.3) {
          mode = "swipe";
          wrap.style.willChange = "transform"; // promote the bubble to its own layer for the drag
        } else {
          mode = "no";
        }
      }
      if (mode !== "swipe") return;
      if (!iconEl) {
        iconEl = document.createElement("span");
        iconEl.className = "swipe-reply-icon";
        iconEl.innerHTML = icon("reply");
        wrap.appendChild(iconEl);
      }
      schedule();
    },
    { passive: true },
  );
  // A pointer swipe ends on touchend, but a system interruption (incoming
  // call, notification) fires touchcancel with no touchend — route both
  // through one path so an interrupted swipe still resets, instead of leaving
  // the bubble stuck mid-transform until the next touch. Only a real release
  // can trigger the reply; a cancel just resets.
  const onEnd = (interrupted) => {
    const trigger = !interrupted && mode === "swipe" && dx > TRIGGER;
    cleanup();
    mode = "";
    if (trigger) {
      const ctl = composerFor(wrap, ctx);
      if (ctl) ctl.startReply(m);
    }
  };
  wrap.addEventListener("touchend", () => onEnd(false));
  wrap.addEventListener("touchcancel", () => onEnd(true));
}

// Rich text through the allowlisted CommonMark subset (markdown.js, #531):
// parseMessage builds the vector-pinned semantic tree, renderTree walks it into
// DOM nodes, and @mentions are scanned inside the plain runs via the hook —
// same class names (.mention / .mention-link), textContent everywhere.
function escapeRegExp(s) {
  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
function renderRichText(el, text) {
  const labels = host && host.mentionNames ? host.mentionNames() : [];
  const mentionRe = labels.length
    ? new RegExp("@(?:" + labels.sort((a, b) => b.length - a.length).map(escapeRegExp).join("|") + ")(?![\\w])", "g")
    : null;
  const plain = (target, t) => {
    if (!mentionRe) {
      target.appendChild(document.createTextNode(t));
      return;
    }
    mentionRe.lastIndex = 0;
    let last = 0;
    let mt;
    while ((mt = mentionRe.exec(t))) {
      const prevCh = t[mt.index - 1];
      if (prevCh !== undefined && /[\w@.]/.test(prevCh)) continue; // mid-word / email → not a mention
      if (mt.index > last) target.appendChild(document.createTextNode(t.slice(last, mt.index)));
      const span = document.createElement("span");
      span.className = "mention";
      const label = mt[0].slice(1);
      // The chip shows the viewer's own name for the person when the host has
      // one (per-viewer names); the match above stays on the published name.
      // When the two differ, the published name waits under a hover title.
      const shown = (host && host.mentionDisplay && host.mentionDisplay(label)) || label;
      span.textContent = "@" + shown;
      if (shown !== label) span.title = `Goes by ${label}`;
      // Only OTHER members get the tappable link/menu; a self-mention (or an
      // unresolved name) stays a plain bold chip, matching the classic feed.
      if (host && host.mention && (!host.mentionable || host.mentionable(label))) {
        span.classList.add("mention-link");
        span.setAttribute("role", "button");
        span.tabIndex = 0;
        const open = (e) => {
          e.preventDefault();
          e.stopPropagation();
          host.mention(label, span);
        };
        span.addEventListener("click", open);
        span.addEventListener("keydown", (e) => {
          if (e.key === "Enter" || e.key === " ") open(e);
        });
      }
      target.appendChild(span);
      last = mt.index + mt[0].length;
    }
    if (last < t.length) target.appendChild(document.createTextNode(t.slice(last)));
  };
  renderTree(el, parseMessage(text), { plain });
}

// A download chip for a non-image attachment — the original .file-chip markup.
function buildFileCard(a, ctx) {
  const card = document.createElement("a");
  card.className = "file-chip";
  card.href = "#";
  card.download = a.name || "file";
  const ic = document.createElement("span");
  ic.className = "file-icon";
  ic.textContent = fileIcon(a.name);
  const meta = document.createElement("span");
  meta.className = "file-meta";
  const nm = document.createElement("span");
  nm.className = "file-name";
  nm.textContent = a.name || "file";
  meta.appendChild(nm);
  if (a.size) {
    const sz = document.createElement("span");
    sz.className = "file-sub";
    sz.textContent = formatBytes(a.size);
    meta.appendChild(sz);
  }
  card.append(ic, meta);
  card.addEventListener("click", (e) => {
    if (card.getAttribute("href") === "#") e.preventDefault();
  });
  if (host) {
    host.loadBlob(ctx.threadId, a).then((url) => {
      if (url) card.href = url;
    });
  }
  return card;
}

// A download glyph (static, in-code SVG — safe for innerHTML) for the unplayable
// video fallback. host.icons has no download icon, so it lives here.
const ICON_DOWNLOAD =
  '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16"/></svg>';

// Whole seconds as m:ss (or h:mm:ss) for the video duration badge.
function formatDuration(secs) {
  secs = Math.max(0, Math.round(secs));
  const h = Math.floor(secs / 3600), m = Math.floor((secs % 3600) / 60), s = secs % 60;
  const mm = h ? String(m).padStart(2, "0") : String(m);
  return (h ? h + ":" : "") + mm + ":" + String(s).padStart(2, "0");
}

// Download an object-URL'd blob under a filename — the video fallback when the
// browser can't play the format inline.
function triggerDownload(url, name) {
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

// A lazy, send-and-play video card: poster + play badge + duration, with NO bytes
// fetched until it's tapped (a thread full of clips must not auto-download). On
// tap we download+decrypt the clip (a radial ring shows progress) then play it
// full-screen in the lightbox. If the browser can't decode the format (e.g. an
// iPhone HEVC clip) we download it instead — the bytes are always retrievable.
function buildVideoCard(a, ctx) {
  const card = document.createElement("div");
  card.className = "msg-video";
  // Reserve the box before the poster loads so the feed doesn't jump; fall back to
  // 16/9 when we couldn't read the clip's dimensions (so it's never a collapsed or
  // oddly-shaped box).
  if (a.w && a.h) {
    // Reserve the box before the poster loads so the feed doesn't jump.
    card.style.aspectRatio = `${a.w} / ${a.h}`;
    const scale = Math.min(260 / a.w, 320 / a.h, 1);
    card.style.width = Math.round(a.w * scale) + "px";
  } else {
    // No stored dimensions (older upload, or a clip whose metadata didn't decode):
    // a sensible default box — NOT a 16px sliver from treating the 16:9 fallback
    // ratio as pixel dimensions.
    card.style.aspectRatio = "16 / 9";
    card.style.width = "260px";
  }

  // canPlayType is only a hint. "" means definitely-can't-play → the card is a
  // download from the start.
  const probe = document.createElement("video");
  const playable = !!(a.type && probe.canPlayType && probe.canPlayType(a.type) !== "");

  // The resting (poster) contents, reused if we have to revert after a failed play.
  const renderPoster = (downloadOnly) => {
    const poster = document.createElement("img");
    poster.className = "msg-video-poster";
    poster.alt = a.name || "video";
    if (host && a.poster) {
      host.loadBlob(ctx.threadId, { id: a.poster, type: "image/jpeg" }).then((url) => url && (poster.src = url));
    }
    const badge = document.createElement("span");
    badge.className = "msg-video-play";
    badge.innerHTML = downloadOnly ? ICON_DOWNLOAD : icon("play");
    const kids = [poster, badge];
    if (a.dur) {
      const dur = document.createElement("span");
      dur.className = "msg-video-dur";
      dur.textContent = formatDuration(a.dur);
      kids.push(dur);
    }
    card.replaceChildren(...kids);
    card.classList.toggle("unplayable", !!downloadOnly);
  };
  renderPoster(!playable);

  card.onclick = () => {
    if (!host || card.dataset.loading === "1") return;
    card.dataset.loading = "1";
    // Show the radial progress ring only if the download takes a beat — a cached
    // or fast load skips it, so there's no flash of an empty ring.
    let ring = null;
    const ringTimer = setTimeout(() => { ring = showVideoRing(card); }, 150);
    host.loadBlob(ctx.threadId, a, (p) => ring && ring.set(p)).then((url) => {
      clearTimeout(ringTimer);
      card.dataset.loading = "";
      if (ring) ring.remove();
      if (!url) return;
      if (!playable) { triggerDownload(url, a.name || "video"); return; }
      openVideoLightbox(url, () => triggerDownload(url, a.name || "video"));
    });
  };
  return card;
}

// A circular download-progress ring around the play button, shown while a clip
// downloads on tap. Returns { set(0..1), remove() }.
function showVideoRing(card) {
  const R = 20, C = 2 * Math.PI * R;
  const wrap = document.createElement("div");
  wrap.className = "msg-video-ring";
  wrap.innerHTML =
    '<svg viewBox="0 0 48 48"><circle class="ring-track" cx="24" cy="24" r="' + R + '"></circle>' +
    '<circle class="ring-fill" cx="24" cy="24" r="' + R + '"></circle></svg>';
  const fill = wrap.querySelector(".ring-fill");
  fill.style.strokeDasharray = String(C);
  fill.style.strokeDashoffset = String(C);
  card.appendChild(wrap);
  card.classList.add("downloading");
  return {
    set: (p) => { fill.style.strokeDashoffset = String(C * (1 - Math.max(0, Math.min(1, p)))); },
    remove: () => { wrap.remove(); card.classList.remove("downloading"); },
  };
}

// Play a decrypted clip full-screen in the lightbox (a small inline player isn't
// worth much). Backdrop tap / Escape closes; a decode error falls back to download.
function openVideoLightbox(url, onDownloadFallback) {
  const back = document.createElement("div");
  back.className = "lightbox video-lightbox";
  const backdrop = document.createElement("div");
  backdrop.className = "lightbox-backdrop";
  const vid = document.createElement("video");
  vid.className = "lightbox-video";
  vid.src = url;
  vid.controls = true;
  vid.autoplay = true;
  vid.playsInline = true;
  back.append(backdrop, vid);
  const close = () => {
    vid.pause();
    back.remove();
    document.removeEventListener("keydown", onKey);
  };
  const onKey = (e) => { if (e.key === "Escape") close(); };
  back.addEventListener("click", (e) => { if (e.target !== vid) close(); });
  vid.onerror = () => { close(); if (onDownloadFallback) onDownloadFallback(); };
  document.addEventListener("keydown", onKey);
  document.body.appendChild(back);
  vid.play().catch(() => {});
}

// The attachment blob ids a message references (clip + poster + images/files),
// reported to the host on delete so the server can GC them.
function attachmentBlobIds(m) {
  const ids = [];
  for (const a of (m && m.attachments) || []) {
    if (a && a.id) ids.push(a.id);
    if (a && a.poster) ids.push(a.poster);
  }
  return ids;
}

// An animated GIF plays in the feed, and a click pauses/resumes it in place —
// the click is the toggle, not a lightbox opener (the message menu still holds
// the other actions). Pausing swaps the img's src for a canvas-rendered still
// of the GIF's first frame (the "default image" drawImage yields for animated
// sources — no re-decode of the whole animation); resuming restores the blob
// URL. prefers-reduced-motion starts the GIF frozen.
function wireGifToggle(img, url) {
  let still = null; // the frozen frame's data URL, rendered once on first pause
  const freeze = () => {
    if (!still) {
      if (!img.naturalWidth) return; // not decoded yet — nothing to freeze
      const c = document.createElement("canvas");
      c.width = img.naturalWidth;
      c.height = img.naturalHeight;
      c.getContext("2d").drawImage(img, 0, 0);
      still = c.toDataURL();
    }
    img.src = still;
    img.classList.add("gif-paused");
  };
  img.onclick = () => {
    if (img.classList.contains("gif-paused")) {
      img.src = url;
      img.classList.remove("gif-paused");
    } else {
      freeze();
    }
  };
  if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
    if (img.complete && img.naturalWidth) freeze();
    else img.addEventListener("load", freeze, { once: true });
  }
}


// The original click-to-play YouTube card (.yt-card): thumbnail from the video
// id, swapped for the privacy-friendly nocookie embed on tap.
function buildYouTubeCard(yt) {
  const card = document.createElement("div");
  card.className = "yt-card";
  const btn = document.createElement("button");
  btn.type = "button";
  btn.className = "yt-poster";
  btn.setAttribute("aria-label", "Play video");
  const img = document.createElement("img");
  img.className = "yt-thumb";
  img.alt = "";
  img.loading = "lazy";
  img.src = `https://i.ytimg.com/vi/${yt.id}/hqdefault.jpg`;
  img.onload = () => {
    if (img.naturalWidth <= 120) card.classList.add("yt-bare"); // dead/private video placeholder
  };
  img.onerror = () => card.classList.add("yt-bare");
  const play = document.createElement("span");
  play.className = "yt-play";
  play.innerHTML = icon("play"); // static in-code SVG from the host (safe)
  btn.append(img, play);
  btn.onclick = () => {
    const frame = document.createElement("iframe");
    frame.className = "yt-frame";
    frame.src = `https://www.youtube-nocookie.com/embed/${yt.id}?autoplay=1&rel=0` + (yt.start ? `&start=${yt.start}` : "");
    frame.allow = "autoplay; encrypted-media; fullscreen; picture-in-picture";
    frame.allowFullscreen = true;
    // The app-wide Referrer-Policy is no-referrer, but YouTube rejects
    // referrer-less embeds (error 153, "Video player configuration error").
    // Send just the origin for this iframe -- never the page path.
    frame.referrerPolicy = "origin";
    frame.title = "YouTube video";
    btn.replaceWith(frame);
  };
  card.appendChild(btn);
  return card;
}

// The OpenGraph card (.link-preview), fetched through the host. A successful
// preview is cached per URL so a bubble re-render never refetches; a failed or
// empty unfurl is evicted below so a later render retries (the original never
// cached and refetched every time).
function addLinkPreview(content, url) {
  if (!host || !host.unfurl) return;
  if (!unfurls.has(url)) unfurls.set(url, host.unfurl(url).catch(() => null));
  unfurls.get(url).then((pv) => {
    // A rejection resolves to null here, and the host itself may return null or
    // {ok:false} for a transient failure. Don't cache that miss — drop it so a
    // later render (e.g. reopening the thread) refetches and may show the card.
    if (!pv || !pv.ok || (!pv.title && !pv.image)) {
      unfurls.delete(url);
      return;
    }
    // Usable preview but the bubble was torn down before it arrived: keep the
    // cache entry so the next render of this URL reuses it.
    if (!content.isConnected) return;
    const card = document.createElement("a");
    card.className = "link-preview";
    card.href = url;
    card.target = "_blank";
    card.rel = "noopener noreferrer";
    if (pv.image) {
      const img = document.createElement("img");
      img.className = "lp-image";
      img.alt = "";
      img.src = pv.image;
      img.onerror = () => img.remove();
      card.appendChild(img);
    }
    const body = document.createElement("div");
    body.className = "lp-body";
    if (pv.title) {
      const t = document.createElement("div");
      t.className = "lp-title";
      t.textContent = pv.title;
      body.appendChild(t);
    }
    if (pv.description) {
      const d = document.createElement("div");
      d.className = "lp-desc";
      d.textContent = pv.description;
      body.appendChild(d);
    }
    try {
      const h = document.createElement("div");
      h.className = "lp-host";
      // .host (not .hostname) so an explicit non-default port shows, matching
      // the original feed's link-preview label.
      h.textContent = new URL(url).host;
      body.appendChild(h);
    } catch {}
    card.appendChild(body);
    content.appendChild(card);
  });
}

// ---- composer block: banners, staging, typeahead, input, send ---------------

// buildComposerBlock builds one complete composer — the reply/edit banners,
// the floating preview/typeahead anchor, attach + upload staging, the
// plain/rich input facade, and send — as an instantiable unit. It exists so
// the docked reply-thread pane (next PR) can mount a SECOND composer beside
// the main one; today buildSkeleton is its only caller, and the extraction
// changes no behaviour. The block owns its own reply/edit/staging state;
// everything per-PANE — the command panel, the thread view, the feed and its
// follow behaviour, the composers registry, hotkeys, and the native bridge —
// stays with the caller, wired through the cfg hooks and the returned api.
//
// cfg:
//   fixedReply   null = the main composer: replies stage freely and banners
//                show. Or () => {id,name,snippet}: the block is pinned to a
//                thread root — the target derives fresh per send, no reply
//                banner or cancel ever shows, and the block stands down from
//                the primary-surface machinery (labelled asks, composer
//                hints, deliverAnswer), which targets the main composer only.
//   inEmbed      the native shell draws the visible composer (host.native
//                mirrors banners/staging; this block is hidden by CSS).
//   commands     false = no command routing at all (slash, /me, @app
//                mentions, default commands) — text sends verbatim.
//   onSent(payload)    a send reached the server (the caller's scroll pin +
//                      thread re-stage — see compose.onsubmit).
//   onEscape(hasEdit)  pane-owned Escape layers; return true when consumed.
//   onReplyCancel()    the reply banner's ✕; return true when the pane
//                      consumed it (closing an open thread view) — otherwise
//                      the block just drops its staged reply.
//   onEditCancelled()  an edit ended — the pane may re-stage a thread reply.
//   onFieldGrow()      the input grew this keystroke (caller re-pins its feed).
//   onStripChange()    the staging strip appeared/changed (caller keeps the
//                      feed's newest content in view).
//
// Returns { el, float, composer, api }. `el` is a fragment of the block's
// four top-level nodes — kept as SIBLINGS under the caller's root, never
// wrapped, because the .embed/.readonly rules hide composer surfaces with
// `.chatapp-root > .composer` child combinators. `float` is the zero-height
// anchor command panels insert before; `composer` is the input facade; `api`
// carries the verbs the caller wires outward (the composers registry, the
// thread view, hotkeys, the native bridge).
function buildComposerBlock(ctx, host, cfg) {
  const inEmbed = !!cfg.inEmbed;
  // The primary (main) composer is the one surface the labelled-ask/hint
  // machinery and scripted answers (deliverAnswer) target; a root-pinned
  // block never is.
  const primary = !cfg.fixedReply;

  const float = document.createElement("div");
  float.className = "composer-float";
  const preview = document.createElement("div");
  preview.className = "composer-preview hidden";
  float.appendChild(preview);

  // The typeahead is a drop-UP that OVERLAYS the feed (not a flex band that shoves
  // the messages up as you type), so it lives inside .composer-float — the
  // zero-height anchor at the top of the composer stack, exactly like the
  // attachment preview above. Positioned absolutely in CSS.
  const taBox = document.createElement("div");
  taBox.className = "typeahead hidden";
  taBox.setAttribute("role", "listbox");
  float.appendChild(taBox);

  const replyBanner = document.createElement("div");
  replyBanner.className = "composer-reply hidden";
  const editBanner = document.createElement("div");
  editBanner.className = "composer-edit hidden";

  const compose = document.createElement("form");
  compose.className = "composer";
  compose.autocomplete = "off";
  const attach = document.createElement("button");
  attach.type = "button";
  attach.className = "attach-btn";
  attach.setAttribute("aria-label", "Add a photo or file");
  attach.textContent = "＋";
  const fileInput = document.createElement("input");
  fileInput.type = "file";
  fileInput.multiple = true;
  fileInput.accept = "image/*,video/mp4,video/quicktime,video/webm,.pdf,.txt,.md,.markdown,.csv,.json,.doc,.docx,.xls,.xlsx,.ppt,.pptx";
  fileInput.hidden = true;
  const field = document.createElement("div");
  field.className = "composer-field";
  // The inset field label ("Your name:") — sits inside the input's box, pinned
  // to the first line, with the text indented past it. Decorative to a screen
  // reader (the textarea's aria-label carries the same words).
  const fieldLabel = document.createElement("span");
  fieldLabel.className = "composer-label";
  fieldLabel.setAttribute("aria-hidden", "true");
  fieldLabel.hidden = true;
  // The labelled ask's dismiss X (#1375): back to a regular input without
  // answering. It borrows the send button's slot while that's free (typing
  // swaps it for Send; Escape still dismisses). Dismissing disarms the
  // pending answer too, so a later plain message is an ordinary message, not
  // a swallowed reply to a question the user waved off — the parked step
  // re-arms on the next resume, exactly like a reload.
  const labelDismiss = document.createElement("button");
  labelDismiss.type = "button";
  labelDismiss.className = "composer-label-x";
  labelDismiss.setAttribute("aria-label", "Dismiss question");
  labelDismiss.hidden = true;
  labelDismiss.innerHTML =
    '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="18" y1="6" x2="6" y2="18"></line></svg>';
  const dismissComposerAsk = () => {
    cancelAnswer(ctx.threadId); // the hook clears the label + hint with it
    composer.focus();
  };
  labelDismiss.addEventListener("click", dismissComposerAsk);
  const refreshLabelDismiss = () => {
    labelDismiss.hidden = !primary || !(composerLabels.get(ctx.threadId) || "") || !send.hidden;
  };
  // When plain text runs the app's default command (typing into To-do adds a
  // to-do — see defaultCommandFor), the placeholder must SAY so: the implicit
  // routing is only honest if the composer advertises it before the first send.
  const defaultCmd = () => defaultCommandFor(ctx.threadId);
  const basePlaceholder = () => {
    const dc = defaultCmd();
    return (dc && dc.app.composerPlaceholder) || "Message";
  };
  // The message input itself lives behind the composer facade (composer.js) —
  // chat.js never touches an element's .value directly, so the rich backend
  // can slot in behind the same handle. The handler bodies are function
  // declarations further down (hoisted; they run long after the skeleton is
  // fully built, so the consts they close over are all live by then).
  const composerOpts = {
    placeholder: primary ? composerHints.get(ctx.threadId) || basePlaceholder() : "Reply…",
    formatAsYouType: formatAsYouTypePref(),
    onInput: () => onComposerInput(),
    onKeydown: (e) => {
      // Escape dismisses an active labelled ask (#1375) — the keyboard twin
      // of the X. Only while the pill shows; otherwise Escape keeps its
      // usual meanings (close typeahead, cancel edit…) downstream.
      if (e.key === "Escape" && primary && (composerLabels.get(ctx.threadId) || "")) {
        e.preventDefault();
        dismissComposerAsk();
        return;
      }
      onComposerKeydown(e);
    },
    // Caret moves (click / arrows) can enter or leave a token too — re-check.
    onKeyup: (e) => {
      if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) updateTypeahead();
    },
    onClick: () => updateTypeahead(),
    // The original keyboard-inset rule (.composer.editing on coarse pointers)
    // keys off focus — mirror it so the composer sits on the keyboard.
    onFocus: () => compose.classList.add("editing"),
    onBlur: () => {
      compose.classList.remove("editing");
      setTimeout(closeTypeahead, 100);
    },
    onPaste: (e) => onComposerPaste(e),
    // Rich-backend file routes (ProseMirror owns paste/drop on its element).
    onPasteFiles: (files) => stageFiles(files),
    onDropFiles: (files) => stageFiles(files),
    onOversizePaste: () => stageError("That's too long for a message — attach it as a file instead."),
  };
  const composer =
    pmModule && !inEmbed && !appChatReadOnly(ctx.threadId) && !classicComposerPref()
      ? adoptComposer(pmModule.createRichComposer(composerOpts))
      : createComposer(composerOpts);

  const applyFieldLabel = () => {
    const label = composerLabels.get(ctx.threadId) || "";
    fieldLabel.textContent = label;
    fieldLabel.hidden = !label;
    composer.setAriaLabel(label ? label.replace(/[:：]\s*$/, "") : "Message");
    refreshLabelDismiss();
    if (!label) {
      composer.setIndent(0);
      return;
    }
    // Indent the text past the pill — measured after layout so the width is real.
    requestAnimationFrame(() => {
      if (!fieldLabel.hidden) composer.setIndent(fieldLabel.offsetWidth + 12 + 8);
    });
  };
  // The labelled-ask / composer-hint machinery targets the PRIMARY surface
  // only — a second (root-pinned) block never registers, so a scripted
  // question can't relabel a thread pane's box.
  if (primary) {
    refreshComposerHint.set(ctx.threadId, () => {
      const attach = pending.length ? composerAttachHints.get(ctx.threadId) : "";
      composer.setPlaceholder(attach || composerHints.get(ctx.threadId) || basePlaceholder());
      applyFieldLabel();
    });
  }

  const send = document.createElement("button");
  send.type = "submit";
  send.className = "send-btn";
  send.setAttribute("aria-label", "Send");
  send.hidden = true;
  send.innerHTML =
    '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="6 11 12 5 18 11"></polyline></svg>';
  field.append(fieldLabel, composer.el, labelDismiss, send);
  compose.append(attach, fileInput, field);
  // A default-command thread takes text only — with no one to read a file, an
  // attachment is a dead end, so the affordance goes (stageFiles gates paste and
  // drop the same way).
  attach.hidden = !!defaultCmd();

  // ---- composer state (per block; a fresh open rebuilds it clean) ----
  let replyTo = null; // { id, name, snippet } — the original payload shape
  let editing = null; // the item being edited
  let editBaseline = ""; // getMarkdown() right after edit-load (the ↓-undo comparator)
  let pending = []; // staged attachments: { att | null (uploading), name, isImage }
  let sendQueued = false; // Enter landed mid-upload — auto-send once the uploads finish
  let staging = 0; // stageFiles batches in flight — a queued send waits for the whole batch
  // A remount mid-conversation must restore the inset label. The caller
  // appends the block in the same tick, and the one part that needs layout
  // (the width measure in applyFieldLabel) is rAF-deferred past that insert.
  if (primary) applyComposerHint(ctx.threadId);

  const refreshBanners = () => {
    // A root-pinned block derives its reply per send — no reply banner. The
    // EDIT banner still renders: entering edit mode without saying so would
    // let Enter silently overwrite an earlier message.
    replyBanner.textContent = "";
    replyBanner.classList.add("hidden");
    editBanner.textContent = "";
    editBanner.classList.add("hidden");
    if (editing) {
      editBanner.append("Editing message");
      const x = document.createElement("button");
      x.className = "banner-x";
      x.type = "button";
      x.textContent = "×";
      x.onclick = cancelEdit;
      editBanner.appendChild(x);
      editBanner.classList.remove("hidden");
    } else if (replyTo && !cfg.fixedReply) {
      const bar = document.createElement("div");
      bar.className = "reply-bar";
      const ic = document.createElement("span");
      ic.className = "reply-bar-icon";
      ic.innerHTML = icon("reply");
      const body = document.createElement("div");
      body.className = "reply-bar-body";
      const who = document.createElement("div");
      who.className = "reply-bar-name";
      who.textContent = "Replying to " + (replyTo.name || "");
      const txt = document.createElement("div");
      txt.className = "reply-bar-text";
      txt.textContent = replyTo.snippet || "";
      body.append(who, txt);
      const x = document.createElement("button");
      x.type = "button";
      x.className = "reply-bar-cancel";
      x.innerHTML = icon("x");
      x.setAttribute("aria-label", "Cancel reply");
      // The pane may own this gesture (an open thread view treats its staged
      // reply as the view's own state — see buildSkeleton's onReplyCancel);
      // otherwise it just drops the staged reply.
      x.onclick = () => {
        if (!(cfg.onReplyCancel && cfg.onReplyCancel())) cancelReply();
      };
      bar.append(ic, body, x);
      replyBanner.appendChild(bar);
      replyBanner.classList.remove("hidden");
    }
  };

  const cancelReply = () => {
    if (cfg.fixedReply) return; // nothing staged to cancel — the reply derives per send
    replyTo = null;
    refreshBanners();
    if (inEmbed) host.native({ replying: null });
  };
  const cancelEdit = () => {
    editing = null;
    refreshBanners();
    if (inEmbed) host.native({ editing: null });
    // The pane may need to re-arm state the edit displaced (an open thread
    // view's staged reply — see buildSkeleton's onEditCancelled).
    if (cfg.onEditCancelled) cfg.onEditCancelled();
  };

  // Staged attachments as original .preview-chip tiles: a spinner while
  // uploading, then a thumbnail (image) or a file chip, each with its remove.
  const refreshStaged = () => {
    if (inEmbed) host.native({ staged: pending.length > 0 }); // enables the native send button
    if (primary) applyComposerHint(ctx.threadId); // an attach-gated hint appears/disappears with the staged files
    // The strip takes real layout space — the caller keeps its feed pinned
    // (see buildSkeleton's onStripChange).
    if (cfg.onStripChange) cfg.onStripChange();
    preview.textContent = "";
    preview.classList.toggle("hidden", pending.length === 0);
    for (const p of pending) {
      const chip = document.createElement("div");
      chip.className = "preview-chip";
      if (!p.att) {
        const label = document.createElement("span");
        label.className = "preview-name";
        if (p.isVideo && typeof p.progress === "number") {
          // Determinate upload progress for the (large) clip: percentage + a bar,
          // updated in place by the onProgress callback (see stageFiles).
          chip.classList.add("preview-uploading");
          label.textContent = "Uploading " + Math.round(p.progress * 100) + "%";
          const bar = document.createElement("div");
          bar.className = "preview-progress";
          const fill = document.createElement("div");
          fill.className = "preview-progress-fill";
          fill.style.width = Math.round(p.progress * 100) + "%";
          bar.appendChild(fill);
          chip.append(label, bar);
          p._fill = fill;
          p._label = label;
        } else {
          const spin = document.createElement("span");
          spin.className = "preview-spinner";
          spin.setAttribute("aria-hidden", "true");
          label.textContent = p.isImage ? "Adding photo…" : p.isVideo ? "Adding video…" : "Adding file…";
          chip.append(spin, label);
        }
      } else if (p.isImage) {
        const img = document.createElement("img");
        img.alt = p.att.name || "photo";
        if (host) host.loadBlob(ctx.threadId, p.att).then((url) => url && (img.src = url));
        chip.appendChild(img);
      } else if (p.isVideo) {
        // Show the poster thumbnail with a small play glyph, so a staged clip
        // reads as a video rather than a generic file.
        chip.classList.add("preview-video");
        const img = document.createElement("img");
        img.alt = p.att.name || "video";
        if (host && p.att.poster) {
          host.loadBlob(ctx.threadId, { id: p.att.poster, type: "image/jpeg" }).then((url) => url && (img.src = url));
        }
        const play = document.createElement("span");
        play.className = "preview-play";
        play.innerHTML = icon("play");
        chip.append(img, play);
      } else {
        const ic = document.createElement("span");
        ic.className = "preview-file";
        ic.textContent = fileIcon(p.att.name);
        const nm = document.createElement("span");
        nm.className = "preview-name";
        nm.textContent = p.att.name || "file";
        chip.append(ic, nm);
      }
      const x = document.createElement("button");
      x.className = "preview-remove";
      x.type = "button";
      x.setAttribute("aria-label", "Remove attachment");
      x.innerHTML = icon("x");
      x.onclick = () => {
        pending = pending.filter((q) => q !== p);
        refreshStaged();
        refreshSend();
        // Removing a chip can resolve a queued send either way: nothing left to
        // send cancels it; removing the last still-uploading chip releases it.
        if (sendQueued && composer.isEmpty() && !pending.length) setSendQueued(false);
        else fireQueuedSend();
      };
      chip.appendChild(x);
      preview.appendChild(chip);
    }
  };
  // The send button shows with text or staged files, and disables while an
  // upload is in flight — the original rules exactly. It also greys while the
  // socket is down (a send would be dropped), mirroring the original composer.
  const refreshSend = () => {
    send.hidden = composer.isEmpty() && pending.length === 0;
    send.disabled = pending.some((p) => !p.att) || !connected;
    refreshLabelDismiss(); // the X borrows Send's slot — they never overlap
  };
  // Enter during an upload queues the send instead of dropping it: the button
  // swaps its arrow for a spinner (.send-waiting) and the message goes out the
  // moment the last upload lands. Typing again, a failed upload, or emptying
  // the composer cancels the queue — the auto-send must never fire on content
  // that no longer matches what was queued.
  const setSendQueued = (on) => {
    sendQueued = on;
    send.classList.toggle("send-waiting", on);
    refreshSend();
  };
  const fireQueuedSend = () => {
    if (!sendQueued || staging > 0 || pending.some((p) => !p.att)) return;
    setSendQueued(false);
    compose.requestSubmit();
  };

  // Matches maxUploadBytes (main.go) / the original composer's MAX_UPLOAD — used
  // only to word the "too big" message; the host bridge does the real limiting.
  const MAX_UPLOAD = 25 * 1024 * 1024;
  const MAX_VIDEO_UPLOAD = 50 * 1024 * 1024; // clips get a larger cap (see shell.js)
  // alert() would freeze an embedded webview (modal blocks the native message
  // channel) — route the error to the shell instead.
  const stageError = (msg) => {
    if (inEmbed) host.native({ error: msg });
    else alert(msg);
  };
  // One staging path — attach button, paste, and drag-drop all land here. The
  // wrapper counts in-flight batches so a queued send only fires once the whole
  // drop/paste has staged — mid-batch, later files aren't in `pending` yet, and
  // firing early would send the message without them.
  const stageFiles = async (files) => {
    if (!host || !host.upload) return;
    if (defaultCmd()) return; // text-only surface — see the hidden attach button
    staging++;
    try {
      await stageFilesBatch(files);
    } finally {
      staging--;
      fireQueuedSend();
    }
  };
  const stageFilesBatch = async (files) => {
    for (const file of files) {
      const isImage = !!(file.type && file.type.startsWith("image/"));
      const isVideo = !!(file.type && file.type.startsWith("video/"));
      // Any file type stages — size is the only gate (the bridge enforces it).
      const entry = { att: null, isImage, isVideo };
      pending.push(entry);
      refreshStaged();
      refreshSend();
      const att = await host.upload(ctx.threadId, file, (p) => {
        // First measurable byte → build the bar once (a refresh); after that update
        // it in place so we don't rebuild the whole strip on every progress tick.
        const first = typeof entry.progress !== "number";
        entry.progress = p;
        if (first || !entry._fill || !entry._fill.isConnected) refreshStaged();
        else {
          entry._fill.style.width = Math.round(p * 100) + "%";
          if (entry._label) entry._label.textContent = "Uploading " + Math.round(p * 100) + "%";
        }
      });
      if (!pending.includes(entry)) continue; // removed while uploading
      if (att && typeof att === "object") entry.att = att;
      else {
        pending = pending.filter((q) => q !== entry);
        // A rejected upload cancels any queued send — the message would go out
        // missing an attachment the sender believed was included.
        if (sendQueued) setSendQueued(false);
        // The bridge returns a reason string (not a bare null) so each rejection
        // gets the original composer's distinct wording.
        const msg = att === "photo" ? "Couldn't add that photo. Try a smaller one."
          : att === "size" ? `Couldn't add that file (max ${formatBytes(MAX_UPLOAD)}).`
          : att === "video" ? `Couldn't add that video (max ${formatBytes(MAX_VIDEO_UPLOAD)}).`
          : "Couldn't add that file.";
        stageError(msg);
      }
      refreshStaged();
      refreshSend();
    }
  };
  attach.onclick = () => fileInput.click();
  fileInput.onchange = () => {
    const files = [...(fileInput.files || [])];
    fileInput.value = "";
    stageFiles(files);
  };

  function onComposerPaste(e) {
    const files = [...((e.clipboardData && e.clipboardData.files) || [])];
    if (files.length) {
      e.preventDefault();
      stageFiles(files);
    }
    // Blockquote continuation: pasting multi-line text onto a bare "> " line
    // prefixes every line after the first with "> " so the whole quote stays a
    // quote — matches the original composer's paste behaviour.
    if (!files.length && composer.kind === "plain") {
      const textItem = [...(e.clipboardData?.items || [])].find((i) => i.type === "text/plain");
      if (textItem) {
        const start = composer.getCaret();
        const beforeCursor = composer.getText().substring(0, start);
        const currentLine = beforeCursor.split("\n").pop();
        if (/^>\s*$/.test(currentLine)) {
          e.preventDefault();
          textItem.getAsString((pastedText) => {
            const blockquoted = pastedText.split("\n").map((line, i) => i === 0 ? line : "> " + line).join("\n");
            composer.replaceRange(start, composer.getSelectionEnd(), blockquoted);
          });
        }
      }
    }
  }

  // ---- :emoji / @mention typeahead — the original menu, verbatim ----
  // composerToken (pure) detects the in-progress token at the caret; the host
  // ranks the candidates (host.typeaheadItems — the same function that feeds
  // the original menu and the native strip, so all three rank identically).
  let typeahead = null; // { kind, start, items, index } or null
  const closeTypeahead = () => {
    typeahead = null;
    taBox.classList.add("hidden");
    taBox.innerHTML = "";
  };
  const acceptTypeahead = () => {
    if (!typeahead) return;
    const it = typeahead.items[typeahead.index];
    const caret = composer.getCaret();
    const start = typeahead.start;
    closeTypeahead();
    // replaceRange notifies (resize + send-visibility + token re-check) and
    // restores focus — the original splice, behind the facade.
    composer.replaceRange(start, caret, it.insert);
  };
  const renderTa = () => {
    if (!typeahead) return;
    taBox.innerHTML = "";
    typeahead.items.forEach((it, i) => {
      const row = document.createElement("button");
      row.type = "button";
      row.className = "ta-item" + (i === typeahead.index ? " active" : "");
      row.setAttribute("role", "option");
      row.setAttribute("aria-selected", String(i === typeahead.index));
      if (typeahead.kind === "command") {
        const n = document.createElement("span");
        n.className = "ta-name";
        n.textContent = it.command + (it.args ? " " + it.args : "");
        row.appendChild(n);
        if (it.desc) {
          const d = document.createElement("span");
          d.className = "ta-desc";
          d.textContent = it.desc;
          row.appendChild(d);
        }
      } else if (typeahead.kind === "emoji") {
        const g = document.createElement("span");
        g.className = "ta-emoji";
        g.textContent = it.glyph;
        const c = document.createElement("span");
        c.className = "ta-code";
        c.textContent = ":" + it.code + ":";
        row.append(g, c);
      } else {
        // A group-added app in the @ typeahead wears its glyph avatar (there's
        // no roster photo to load); people keep the original avatar element.
        if (it.glyph) {
          const g = document.createElement("span");
          g.className = "avatar app-avatar";
          g.textContent = it.glyph;
          row.appendChild(g);
        } else if (host && host.taAvatar) row.appendChild(host.taAvatar(it.name, it.userId));
        const n = document.createElement("span");
        n.className = "ta-name";
        n.textContent = it.name;
        row.appendChild(n);
      }
      // pointerdown fires before the textarea blurs, so the tap isn't lost.
      row.addEventListener("pointerdown", (e) => {
        e.preventDefault();
        typeahead.index = i;
        acceptTypeahead();
      });
      taBox.appendChild(row);
    });
    taBox.classList.remove("hidden");
  };
  const moveTypeahead = (dir) => {
    if (!typeahead) return;
    const n = typeahead.items.length;
    typeahead.index = (typeahead.index + dir + n) % n;
    renderTa();
    taBox.children[typeahead.index]?.scrollIntoView({ block: "nearest" });
  };
  const updateTypeahead = () => {
    const tok = composerToken(composer.getText(), composer.getCaret());
    if (!tok || !host || !host.typeaheadItems) return closeTypeahead();
    // No command routing (cfg.commands off) means no command typeahead either:
    // a leading "/" in this block is ordinary text that sends verbatim (the
    // thread pane's composer), so offering completions would be a lie.
    if (tok.kind === "command" && !cfg.commands) return closeTypeahead();
    const items = host.typeaheadItems(tok);
    if (!items.length) return closeTypeahead();
    typeahead = { kind: tok.kind, start: tok.start, items, index: 0 };
    renderTa();
  };

  // Auto-grow + send-button reveal + typing beats. Emitting only on keystrokes
  // let the receiver's indicator lapse during a mid-message pause, so we mirror
  // the original composer: `lastBeat` tracks the last keystroke (while there's
  // text), and tickTyping — driven by a render-scoped interval (see render) —
  // re-emits a beat every TYPING_INTERVAL_MS through a pause and issues the idle
  // stop once the keystrokes dry up. Each beat carries TYPING_EXPIRY_S, so a
  // single one outlives the interval. An explicit expiry-0 beat clears the
  // indicator now on empty / send / idle.
  let lastBeat = 0; // ms timestamp of the last keystroke while text was present (0 = not typing)
  let lastEmit = 0; // ms timestamp of the last beat we actually sent
  let beating = false; // a beat receivers are currently showing
  const sendBeat = (expiry) => {
    lastEmit = Date.now();
    ctx.emitEphemeral({ type: N.ev("typing"), expiry });
  };
  const beatTyping = () => {
    lastBeat = Date.now();
    // First keystroke of a burst beats now (once per burst, not per keystroke —
    // the old 4s throttle's intent); the ticker sustains it through the pause.
    if (!beating) {
      beating = true;
      sendBeat(TYPING_EXPIRY_S);
    }
  };
  const stopTypingBeat = () => {
    lastBeat = 0;
    if (!beating) return; // nothing in flight — don't emit a spurious expiry-0
    beating = false;
    sendBeat(0);
  };
  // Keyed off absolute timestamps (not fire-count), so render() re-registering
  // this interval every draw can't break it — it just has to fire once past the
  // threshold to re-beat, or to stop once the keystrokes have gone idle.
  const tickTyping = () => {
    if (!beating) return;
    const now = Date.now();
    if (now - lastBeat >= TYPING_INTERVAL_MS) stopTypingBeat(); // idle since the last keystroke
    else if (now - lastEmit >= TYPING_INTERVAL_MS) sendBeat(TYPING_EXPIRY_S); // sustain the indicator
  };

  function onComposerInput() {
    // (Auto-grow already ran inside the facade.) The composer just grew,
    // shrinking the caller's flex feed — let it re-pin synchronously in this
    // same layout (see buildSkeleton's onFieldGrow for the WebKit why).
    if (cfg.onFieldGrow) cfg.onFieldGrow();
    if (sendQueued) setSendQueued(false); // still composing — don't auto-send under them
    refreshSend();
    updateTypeahead();
    // A "/command" in progress is private — never announce typing for it (and
    // clear any beat already sent if the text just became a command).
    const v = composer.getText();
    if (v && v[0] !== "/") beatTyping();
    else if (lastBeat) stopTypingBeat();
  }
  function onComposerKeydown(e) {
    // The typeahead grabs the nav keys first when it's open (original order).
    if (typeahead) {
      if (e.key === "ArrowDown") return e.preventDefault(), moveTypeahead(1);
      if (e.key === "ArrowUp") return e.preventDefault(), moveTypeahead(-1);
      if (e.key === "Enter" || e.key === "Tab") return e.preventDefault(), acceptTypeahead();
      if (e.key === "Escape") return e.preventDefault(), closeTypeahead();
    }
    // Desktop Enter sends (Shift+Enter newlines); touch Enter newlines. A
    // code fence is the one context that explicitly means "multi-line
    // content", so Enter newlines there too. The isComposing guard stops a
    // Japanese/Korean composition-confirm from sending early (a pre-existing
    // textarea quirk, fixed while we're here).
    if (shouldSend(e, coarse) && !composer.inCodeBlock() && !e.isComposing) {
      e.preventDefault();
      compose.requestSubmit();
      return;
    }
    if (e.key === "Escape" && sendQueued) {
      setSendQueued(false); // un-queue first; a second Escape cancels reply/edit
      e.preventDefault(); // handled — the document dispatcher must not also peel a layer
      return;
    }
    // Pane-owned layers (the command panel, the thread view) peel before the
    // block's own reply/edit below — the caller supplies the order and the
    // edit-in-flight exception (see buildSkeleton's onEscape). A consumed
    // Escape is marked handled: with two composer blocks live (the docked
    // thread pane), the document dispatcher can't tell "this block dealt with
    // it" from focus alone, and one Escape must peel exactly one layer.
    if (e.key === "Escape" && cfg.onEscape && cfg.onEscape(!!editing)) {
      e.preventDefault();
      return;
    }
    if (e.key === "Escape" && (editing || replyTo)) {
      e.preventDefault(); // same one-layer rule as above
      const wasEditing = !!editing;
      cancelReply();
      cancelEdit();
      if (wasEditing) {
        composer.setText("");
        refreshSend();
      }
    }
    // ↑ on an empty composer edits your latest still-editable message.
    if (e.key === "ArrowUp" && !composer.getText() && !editing && !cfg.fixedReply) {
      const state = ctx.getState();
      const msgs = (state && state.msgs) || [];
      const bySid = bySidIndex(msgs);
      const mine = msgs
        .filter((m) => inMainFeed(m, bySid) && ownMessage({ uid: m.uid, name: m.name }, ctx.me, ctx.meName) && m.text.trim() && Date.now() - m.ts < EDIT_WINDOW_MS) // main feed only — never an invisible thread reply
        .pop();
      if (mine) {
        e.preventDefault();
        // This block's own verb — the registry entry is the same function for
        // the main composer, and a second block must edit in ITS box, not the
        // registered one's.
        api.startEdit(mine);
      }
    }
    // ↓ undoes an accidental ↑-to-edit: only while unchanged and with no line
    // below the cursor to navigate to (the original rule).
    if (e.key === "ArrowDown" && editing) {
      const afterCursor = composer.getText().slice(composer.getSelectionEnd());
      if (composer.getMarkdown() === editBaseline && !afterCursor.includes("\n")) {
        e.preventDefault();
        composer.setText("");
        cancelEdit();
        refreshSend();
      }
    }
  }

  compose.onsubmit = (ev) => {
    ev.preventDefault();
    if (pending.some((p) => !p.att)) {
      setSendQueued(true); // still uploading — send as soon as it lands
      return;
    }
    // Two readings of the composer: commands parse the PLAIN text (a command
    // is not prose), the wire carries the serialized markdown. On the plain
    // backend the two are identical bytes, exactly as before.
    const plain = emojify(composer.getText().trim());
    const text = emojify(composer.getMarkdown().trim()); // :tada: → 🎉, like the original composer
    const resetInput = () => {
      composer.clear();
      refreshSend();
      stopTypingBeat(); // command / edit / send all clear the field — end the beat now
      if (primary) clearComposerHint(ctx.threadId); // the question was answered — back to "Message" now, not at the reply
    };
    // Command routing below is gated on cfg.commands — a block with commands
    // off sends every line verbatim, "/" text included (the pane composer).
    // /me is the one command that BROADCASTS a real message — an action-style
    // line ("Alice waves"), not a bubble — instead of answering privately, so
    // it's handled here rather than through runCommand (see parseMeCommand).
    if (cfg.commands && !editing) {
      const action = parseMeCommand(plain);
      if (action !== null) {
        if (!action) return resetInput(); // bare "/me" — nothing to say
        ctx.emit({ text: `${ctx.meName || "Someone"} ${action}`, action: true }).then((sent) => {
          if (!sent) return;
          pinNext.add(ctx.threadId);
          resetInput();
        });
        return;
      }
    }
    // A slash command (mini-app command, /help, or an unknown "/foo") is handled
    // instead of sending — it answers in place with a private "only visible to you"
    // reply that stacks in the feed and persists (addLocalNotice). Skipped while
    // editing, like the original composer.
    if (cfg.commands && !editing && runCommand(plain, ctx.threadId, (r) => addLocalNotice(ctx, r))) {
      resetInput();
      return;
    }
    // "@To-do buy milk" in a chat with apps added: the mention addresses the
    // app, the text runs its default command — an EVENT into this thread (shown
    // as an action line), not a message. Leading-@ only; a mention mid-text is
    // ordinary conversation. See runAppMention.
    if (cfg.commands && !editing && !replyTo && !pending.length && plain && plain[0] === "@" && runAppMention(plain, ctx.threadId, (r) => addLocalNotice(ctx, r))) {
      resetInput();
      return;
    }
    // Plain text in a default-command thread runs the app's default command
    // instead of sending a message nobody reads — typing "buy milk" into To-do
    // just adds it (defaultCommandFor gates this to app-threads with no bot;
    // slash text never falls through here, a "/" always means command).
    if (cfg.commands && !editing && !replyTo && plain && plain[0] !== "/" && !pending.length) {
      const dc = defaultCmd();
      if (dc) {
        const typed = plain;
        runCommand(dc.name + " " + typed, ctx.threadId, (r) => {
          addLocalNotice(ctx, r);
          // A reply with no `short` is the command PUSHING BACK ("when should
          // I remind you?"), not a confirmation — put the typed text back so
          // it can be fixed, not retyped (matches the native .rejected path).
          if (r && !r.short && !composer.getText()) {
            composer.setText(typed);
            refreshSend();
          }
        });
        resetInput();
        return;
      }
    }
    if (editing) {
      // An empty edit just cancels; otherwise only clear once the edit actually
      // reaches the server — host.edit resolves false on a down socket, so the
      // typed changes survive to be resent after reconnecting.
      if (!text || !host || !host.edit) {
        resetInput();
        cancelEdit();
        return;
      }
      Promise.resolve(host.edit(ctx.threadId, editing.sid, { ...editing.raw, text })).then((sent) => {
        if (!sent) return;
        resetInput();
        cancelEdit();
      });
      return;
    }
    if (!text && !pending.length) return;
    const payload = { text };
    if (pending.length) payload.attachments = pending.map((p) => p.att);
    // A root-pinned block derives its reply target fresh at send time (the
    // root may have loaded since); the main composer sends what's staged.
    if (cfg.fixedReply) {
      const target = cfg.fixedReply();
      if (target) payload.replyTo = target;
    } else if (replyTo) payload.replyTo = replyTo;
    // Only clear the composer once the send actually reaches the server: ctx.emit
    // resolves false when the socket is down/reconnecting, so keep the text, staged
    // files, and reply target intact to resend — never silently drop what was typed.
    ctx.emit(payload).then((sent) => {
      if (!sent) return;
      resetInput();
      pending = [];
      // The caller's post-send policy runs here — arming the next render's
      // scroll pin, re-staging an open thread view's reply — exactly where
      // the staged-reply/thread handoff always sat (before the strip repaint
      // and the refocus below).
      if (cfg.onSent) cfg.onSent(payload);
      refreshStaged();
      composer.focus();
      // A scripted conversation awaiting an answer in this thread is told what
      // was sent — text AND attachments (the setup photo step takes a picture as
      // its answer). The message itself already sent normally; it's in the
      // transcript either way. Primary-surface machinery, like the asks it
      // answers.
      if (primary) deliverAnswer(ctx.threadId, payload, (r) => addLocalNotice(ctx, r));
    });
  };

  // The block's outward face. startReply/startEdit/refreshSend/tickTyping are
  // the registry verbs (buildSkeleton publishes them in `composers`); the
  // rest are the narrow seams the pane chrome — thread view, hotkeys, native
  // bridge, command panel, drop targets — needs to drive this composer
  // without owning its state.
  const api = {
    refreshSend,
    startReply(m) {
      editing = null;
      // Plain Reply quotes the EXACT message tapped — never a root walk.
      // Replying to a reply stacks another quote in the feed; joining a thread
      // is the other verb's job ("Reply in thread"), and only that verb's.
      replyTo = quoteTarget(m);
      refreshBanners();
      // Embedded: the native shell draws the reply banner and focuses its own
      // composer (this one is hidden).
      if (inEmbed) host.native({ replying: { name: replyTo.name || "", snippet: replyTo.snippet || "" } });
      else composer.focus();
    },
    startEdit(m) {
      replyTo = null;
      editing = m;
      composer.setMarkdown(m.text, { notify: true }); // resize + reveal send
      editBaseline = composer.getMarkdown(); // ↓-undo compares against this, not raw bytes
      refreshBanners();
      if (inEmbed) host.native({ editing: { text: m.text } });
      if (!inEmbed) composer.focus();
    },
    // stageReply arms a reply target the caller derived itself (the thread
    // view's root, quoted-snapshot fallback included) — startReply's
    // resolve-and-focus stays for bubble actions; focus is the caller's call.
    stageReply(target) {
      editing = null;
      replyTo = target;
      refreshBanners();
      if (inEmbed) host.native({ replying: { name: replyTo.name || "", snippet: replyTo.snippet || "" } });
    },
    cancelReply,
    cancelEdit,
    stagedReply: () => replyTo,
    editing: () => !!editing,
    focus: () => composer.focus(),
    submit: () => compose.requestSubmit(),
    stageFiles,
    uploading: () => pending.some((p) => !p.att), // an upload still in flight
    staged: () => pending.length > 0,
    typing: (hasText) => (hasText ? beatTyping() : stopTypingBeat()),
    tickTyping, // render() re-arms the outbound-beat ticker each draw
  };
  // Four sibling nodes, not a wrapper: the .embed/.readonly rules hide the
  // composer surfaces with `.chatapp-root > .composer` child combinators, so
  // the block must land as direct children of the caller's root.
  const el = document.createDocumentFragment();
  el.append(float, replyBanner, editBanner, compose);
  return { el, float, composer, api };
}

// ---- skeleton: feed, panels, thread view, composer (original markup) --------

// buildSkeleton constructs the once-per-mount frame — the feed, the command
// panel, the reply-thread view, and (via buildComposerBlock above) the main
// composer with the original structure and class names: .composer-reply /
// .composer-edit banners, the floating .composer-preview staging strip, the
// .composer form — so style.css styles them identically to the original ones
// (which are hidden in app-mode). Send emits the original untyped payload;
// editing re-sends the full original payload with new text through the host
// bridge.
function buildSkeleton(el, ctx) {
  const root = document.createElement("div");
  root.className = "chatapp-root";


  const feed = document.createElement("div");
  feed.className = "feed chatapp-feed"; // .feed for original descendant rules; .chatapp-feed mirrors #feed's layout
  // The wrapper bounds the reply-thread overlay to exactly the feed's box (it
  // dims the transcript, never the composer). Feed selectors everywhere are
  // depth-independent (.chatapp-feed querySelectors, no child combinators), so
  // the extra level is invisible to the rest of the shell + native probes.
  const feedWrap = document.createElement("div");
  feedWrap.className = "chatapp-feedwrap";
  // The feed's inline status line, above the transcript and in flow (never a
  // floating toast). role="status" so a screen reader hears it politely when
  // it changes — a jump that has to page history back announces itself, and
  // one that can't reach its target says so instead of doing nothing.
  const feedNote = document.createElement("div");
  feedNote.className = "chatapp-feed-note";
  feedNote.setAttribute("role", "status");
  // The note answers something the reader just did, so it clears itself
  // rather than going stale across thread switches — the same transient-status
  // convention the native busy captions use (FEED_NOTE_MS). A note that's
  // still true while work is in flight ("Looking for that message…") passes
  // `sticky`: it's replaced by the outcome, never timed out from under it.
  const FEED_NOTE_MS = 6000;
  let feedNoteTimer = 0;
  const setFeedNote = (text, sticky) => {
    // Text only — the node stays put and stays in the accessibility tree; CSS
    // collapses it when empty (.chatapp-feed-note:empty).
    feedNote.textContent = text || "";
    clearTimeout(feedNoteTimer);
    if (text && !sticky) feedNoteTimer = setTimeout(() => setFeedNote(""), FEED_NOTE_MS);
  };
  feedWrap.append(feedNote, feed);

  // Jump-to-latest: the classic chat affordance for getting back to the
  // newest message without hunting for it — shown/hidden by the feed's
  // "scroll" listener below (and re-checked after each render, since new
  // messages can widen the gap without a scroll event).
  const jumpBtn = document.createElement("button");
  jumpBtn.type = "button";
  jumpBtn.className = "feed-jump-btn hidden";
  // aria-label carries the accessible name; title mirrors it as a mouse-hover
  // tooltip (icon-only button — see docs/accessibility.md's icon-label rule).
  jumpBtn.setAttribute("aria-label", "Jump to latest");
  jumpBtn.title = "Jump to latest";
  jumpBtn.innerHTML = icon("chevronDown");
  jumpBtn.onclick = () => feedGlideToBottom(feed, false);
  feedWrap.appendChild(jumpBtn);

  // The composer is built by buildComposerBlock so the docked thread pane
  // (next PR) can instantiate a second, root-pinned composer beside this one.
  // The cfg hooks below wire the block back into pane-owned chrome — the
  // command panel, the reply-thread view, the feed's follow behaviour — which
  // stays out here (per-pane, not per-composer). Hook closures reference
  // consts declared further down (panelOpen, closeThread, …): they only run
  // on user input, long after buildSkeleton completes, so every binding is
  // live by then (the same hoisted-handlers pattern the block itself uses).
  const inEmbed = !!(host && host.embed);
  const block = buildComposerBlock(ctx, host, {
    fixedReply: null, // the main composer stages replies freely (and owns the labelled-ask surface)
    inEmbed,
    commands: true,
    // Escape peels pane layers before the composer cancels its own reply/edit:
    // an open command panel is the most recently summoned layer, then the
    // thread view — unless an edit is in flight, which Escape must cancel
    // first (cancelEdit re-stages the thread reply, so a second Escape then
    // closes the view).
    onEscape: (hasEdit) => {
      if (panelOpen()) {
        hidePanel();
        return true;
      }
      // Docked, the main composer's staged reply is its OWN state (never the
      // thread's) — let the block cancel it below before an Escape reaches
      // for the pane; the next Escape then closes the pane. Overlay, the
      // staged reply IS the thread's, so closing the view clears it in one.
      if (threadSid && !hasEdit && !(threadDocked && block.api.stagedReply())) {
        closeThread();
        return true;
      }
      return false;
    },
    // While the thread view is open its staged reply IS the view's composer
    // state — cancelling it means leaving the thread, so close the whole view
    // (which clears the reply) rather than stranding an open thread whose
    // sends would land outside it. Docked, the pane carries its own composer
    // and the main composer's staged reply is unrelated — just drop it.
    onReplyCancel: () => {
      if (!threadSid || threadDocked) return false;
      closeThread();
      return true;
    },
    // An edit inside an open thread view borrowed the composer (startEdit
    // clears the staged reply); hand it back so the next send still continues
    // the thread. Docked, the main composer was never staged to the thread.
    onEditCancelled: () => {
      if (threadSid && !threadDocked) stageThreadReply();
    },
    // The composer just grew, shrinking the flex feed. Re-pin to the newest
    // message synchronously in the same layout — the ResizeObserver below also
    // re-pins, but only on a later frame, which leaves one painted frame
    // stranded a line short of the bottom (the visible "jump" on WebKit / the
    // Mac app). Guard on feedAtBottom so typing never yanks a reader who
    // scrolled up.
    onFieldGrow: () => {
      if (feedAtBottom) feed.scrollTop = feed.scrollHeight;
    },
    // The staging strip takes real layout space, so the feed shrinks when it
    // appears — keep the newest messages (and any action chips) in view, not
    // under the fold.
    onStripChange: () => {
      if (feedNearBottom(feed, 160)) requestAnimationFrame(() => feedGlideToBottom(feed, true));
    },
    // Post-send: snap the echo's re-render to the newest message (set now,
    // well before the server round-trip; render() clears it), and keep an open
    // OVERLAY thread view's reply staged — sending from it continues the same
    // thread, like iMessage — else the armed reply is spent. Docked, the pane
    // owns the thread's composer, so the main one always just spends its reply.
    // A thread reply (the overlay's staged root) never pins: it lands in the
    // thread view, not the transcript, and snapping the transcript would only
    // yank a reader who'd scrolled it for nothing they can see.
    onSent: (payload) => {
      if (!(payload.replyTo && payload.replyTo.thread)) pinNext.add(ctx.threadId);
      if (threadSid && !threadDocked) stageThreadReply();
      else block.api.cancelReply();
    },
  });
  const { composer, api } = block;

  root.append(feedWrap, block.el);
  el.appendChild(root);

  // Keep the feed pinned to the newest message when the composer, its staged
  // reply/edit banner, or the preview strip grows and steals vertical space —
  // they're in-flow siblings, so the flex feed shrinks and this observer fires.
  // (The original re-pins the same way; render() alone can't, since a resize
  // isn't a state change.) Track "at bottom" from real scrolls so the decision
  // reflects the state *before* the feed shrank — reading the gap inside the
  // callback would already show it past the threshold and wrongly bail. The
  // `< 60` matches render()'s pin check.
  let feedAtBottom = true;
  const updateFeedScrollState = () => {
    const gap = feed.scrollHeight - feed.scrollTop - feed.clientHeight;
    feedAtBottom = gap < 60;
    jumpBtn.classList.toggle("hidden", gap < JUMP_BUTTON_GAP);
  };
  feed.addEventListener("scroll", updateFeedScrollState, { passive: true });
  // render() re-checks after every message-list update too — new messages
  // widen the gap (or a glide-to-bottom closes it) without firing "scroll".
  root._updateJumpBtn = updateFeedScrollState;
  new ResizeObserver(() => {
    if (!feedAtBottom) return;
    // WebKit restores the pre-resize scrollTop at *layout* time — which lands
    // after this callback AND after a single rAF — so one re-assert loses the
    // race and strands the feed the growth-delta (~one composer line) above the
    // bottom (Chrome doesn't do this). Re-pin across a few frames so a
    // correction always lands after the restoration, whenever it happens. The
    // scroll listener keeps feedAtBottom true through the restoration (its gap
    // stays under the 60px threshold), so this bails only if the reader
    // genuinely scrolls up mid-window.
    let frame = 0;
    const pin = () => {
      if (!feedAtBottom) return; // reader scrolled away — stop fighting them
      feed.scrollTop = feed.scrollHeight;
      if (++frame < 4) requestAnimationFrame(pin);
    };
    pin();
  }).observe(feed);

  if (inEmbed) root.classList.add("embed"); // the native shell draws the composer
  // The owning app declared its chat a read-only stream — no composer to draw.
  if (appChatReadOnly(ctx.threadId)) root.classList.add("readonly");

  // Bubble actions (Reply, Edit) resolve their composer through this registry
  // — still exactly one entry per thread: the main composer's verbs, straight
  // off the block's api (tickTyping rides along for render()'s beat ticker).
  composers.set(ctx.threadId, {
    refreshSend: api.refreshSend,
    // Under the OVERLAY the main composer IS the open thread's reply box, so a
    // Reply tapped on a bubble inside the view (the root, or one of its thread
    // replies — threadTarget resolves both to this thread) stages the root
    // WITH the thread flag, the same staging the view's open uses. Without
    // this the plain verb would quote that bubble and land the reply in the
    // transcript, out of the thread the reader is standing in. Docked, pane
    // bubbles route to the pane's own composer (composerFor), so this only
    // ever sees the transcript's replies. Closures over consts declared
    // further down, run on user input only — buildSkeleton's hoisted pattern.
    startReply: (m) => {
      if (threadSid && !threadDocked && threadTarget(((ctx.getState() || {}).msgs) || [], m).id === threadSid) {
        stageThreadReply();
        if (!inEmbed) composer.focus(); // a deliberate Reply tap wants the caret, touch included (startReply's rule)
        return;
      }
      api.startReply(m);
    },
    startEdit: api.startEdit,
    tickTyping: api.tickTyping,
  });

  // ---- command panel: the transient results surface a command opens ----
  // (ctx.panel — see the command-panels section of apps.js.) In-flow, never
  // floating: it sits above the composer stack by default, or pinned above the
  // feed with position: "top", taking layout space either way. One per thread —
  // opening another replaces it; its ✕, Escape, or the app's panel.close()
  // dismisses it. Client-only chrome: nothing here is sent or folded.
  const panelBox = document.createElement("section");
  panelBox.className = "cmd-panel hidden";
  panelBox.setAttribute("role", "region");
  let panelSpec = null;
  const panelOpen = () => !!panelSpec;
  const renderPanelBody = (spec, body) => {
    body.replaceChildren();
    // The handle a panel renders against: dismiss it, redraw it, and act on
    // the composer it sits above — insert text at the caret, or stage
    // attachments through the same path the attach button / paste / drop use.
    const panel = {
      threadId: ctx.threadId,
      close: () => hidePanel(),
      refresh: () => {
        if (panelSpec === spec && body.isConnected) renderPanelBody(spec, body);
      },
      insertText: (t) => {
        const text = String(t == null ? "" : t);
        if (!text) return;
        // Embedded: the native shell owns the visible composer — forward the
        // insertion (a shell that doesn't handle composerInsert ignores it).
        if (inEmbed) return host.native({ composerInsert: text });
        composer.insertAtCaret(text);
      },
      attachFiles: (files) => api.stageFiles([...(files || [])]),
    };
    try {
      spec.render(body, panel);
    } catch (e) {
      // A panel must never take down the pane — contain the error in place.
      console.error(`command panel (${(spec.sender && spec.sender.name) || "app"}) render failed:`, e);
      body.replaceChildren();
      const p = document.createElement("p");
      p.textContent = "This panel hit an error and couldn't load.";
      body.appendChild(p);
    }
  };
  // Whether the panel eases open/shut: the app's call (animate: false opts
  // out), gated on reduced-motion — and skipped in the command-host embed,
  // where the panel is the whole page and the NATIVE shell animates the
  // frame instead (an in-page ease inside a just-revealed frame reads as a
  // flash, not a slide).
  // (The side column skips the ease outright — its reveal is horizontal, and
  // a height roll inside a full-height column reads as a glitch.)
  const panelEases = (spec) =>
    spec && spec.animate !== false && spec.position !== "side" && motionOK() && !document.body.classList.contains("command-host");
  const clearPanelEase = () => {
    panelBox.style.removeProperty("height");
    panelBox.style.removeProperty("overflow");
    panelBox.style.removeProperty("transition");
  };
  const showPanel = (spec) => {
    // A docked thread and a command panel can't share the right dock (and a
    // bottom band under an open thread reads as the thread's) — opening a
    // panel closes the thread, the mirror of openThread's hidePanel(). Gated
    // on `spec`: hidePanel's eased teardown lands here as showPanel(null),
    // possibly AFTER openThread already re-set threadSid (the 200ms roll-up),
    // and that must never close the thread it was cleared for.
    if (spec && threadSid && threadDocked) {
      // Never silently drop what was typed: a pane edit in flight keeps its
      // pane, and this panel takes the top band instead of the dock.
      if (paneBlock && paneBlock.api.editing()) spec = { ...spec, position: "top" };
      else closeThread();
    }
    const prev = panelSpec;
    panelSpec = spec && typeof spec.render === "function" ? spec : null;
    clearPanelEase(); // a mid-animation replace starts clean
    // Replacing (or closing) a panel tells the outgoing one — best-effort.
    if (prev && prev.onClose) {
      try {
        prev.onClose();
      } catch (e) {
        console.error(e);
      }
    }
    panelBox.replaceChildren();
    panelBox.classList.toggle("hidden", !panelSpec);
    panelBox.classList.toggle("cmd-panel--top", !!(panelSpec && panelSpec.position === "top"));
    panelBox.classList.toggle("cmd-panel--side", !!(panelSpec && panelSpec.position === "side"));
    // The side placement reserves a right-hand gutter on the root (padding,
    // so the column occupies real layout space and nothing renders under it).
    root.classList.toggle("has-side-panel", !!(panelSpec && panelSpec.position === "side"));
    if (!panelSpec) {
      notifyCommandPanel(ctx.threadId, null);
      return;
    }
    // Every placement is in-flow: "top" pins it above the feed (under the
    // shared-app surface); "side" is a full-height right column (a vertical
    // sidebar — list-shaped content wants a tall, narrow box, not a wide,
    // short band; on narrow screens its CSS falls back to the bottom band);
    // the default sits at the bottom of the pane, above the composer stack
    // (before the zero-height .composer-float anchor).
    root.insertBefore(panelBox, panelSpec.position === "top" ? feedWrap : block.float);
    const head = document.createElement("div");
    head.className = "cmd-panel-head";
    const s = panelSpec.sender || {};
    if (s.glyph) {
      const g = document.createElement("span");
      g.textContent = s.glyph;
      head.appendChild(g);
    }
    const title = document.createElement("span");
    title.className = "cmd-panel-title";
    title.textContent = panelSpec.title || s.name || "";
    const x = document.createElement("button");
    x.type = "button";
    x.className = "cmd-panel-x";
    x.setAttribute("aria-label", "Dismiss");
    x.innerHTML = icon("x");
    x.onclick = () => hidePanel();
    // headExtra: a spec-provided slot in the title row, between the title and
    // the dismiss — for a panel's one standing control (Memory's "Forget…"),
    // so it sits inline with the name instead of eating body space.
    if (typeof panelSpec.headExtra === "function") {
      const extra = document.createElement("span");
      extra.className = "cmd-panel-extra";
      try {
        panelSpec.headExtra(extra);
      } catch (e) {
        console.error(e);
      }
      head.append(title, extra, x);
    } else {
      head.append(title, x);
    }
    const body = document.createElement("div");
    body.className = "cmd-panel-body";
    panelBox.append(head, body);
    renderPanelBody(panelSpec, body);
    notifyCommandPanel(ctx.threadId, panelSpec);
    // Ease up from nothing to the panel's natural height (see panelEases).
    if (panelEases(panelSpec)) {
      const h = panelBox.offsetHeight;
      if (h) {
        panelBox.style.overflow = "hidden";
        panelBox.style.height = "0px";
        void panelBox.offsetHeight; // commit the start height
        panelBox.style.transition = "height 0.22s ease";
        panelBox.style.height = h + "px";
        panelBox.addEventListener("transitionend", clearPanelEase, { once: true });
        setTimeout(clearPanelEase, 350); // backstop if transitionend never fires
      }
    }
    // A bottom panel takes its space from the feed — keep the newest in view.
    if (feedNearBottom(feed, 160)) requestAnimationFrame(() => feedGlideToBottom(feed, true));
  };
  // Dismissal rolls the panel down before tearing it out, unless the app (or
  // the OS) asked for instant. panelClosing keeps a second Escape (or the ✕)
  // from re-arming the roll-up mid-flight; a NEW panel opening mid-animation
  // wins — showPanel resets the inline styles, and the captured spec check
  // keeps the stale finish() from tearing the newcomer down.
  let panelClosing = false;
  const hidePanel = () => {
    if (!panelSpec || panelClosing) return;
    if (!panelEases(panelSpec) || !panelBox.isConnected) return showPanel(null);
    panelClosing = true;
    const closing = panelSpec;
    let finished = false;
    const finish = () => {
      if (finished) return;
      finished = true;
      panelClosing = false;
      clearPanelEase();
      if (panelSpec === closing) showPanel(null);
    };
    const startH = panelBox.offsetHeight;
    if (!startH) return finish();
    panelBox.style.overflow = "hidden";
    panelBox.style.height = startH + "px";
    void panelBox.offsetHeight;
    panelBox.style.transition = "height 0.2s ease";
    panelBox.style.height = "0px";
    panelBox.addEventListener("transitionend", finish, { once: true });
    setTimeout(finish, 320);
  };
  // Programmatic closes (ctx.closePanel) take the same eased path as ✕/Escape.
  cmdPanels.set(ctx.threadId, (spec) => (spec ? showPanel(spec) : hidePanel()));

  // Drag-drop overlay affordance (.drop-overlay — the same class the original
  // pane uses, so it looks identical). The overlay element exists in *both* modes;
  // only the web drop *listeners* are web-only (see below).
  const dropOverlay = document.createElement("div");
  dropOverlay.className = "drop-overlay hidden";
  dropOverlay.textContent = "Drop a photo or file to send";
  root.appendChild(dropOverlay);
  // The native macOS shell (Eleven) drives the overlay during a Finder drag:
  // WebKit swallows the drag events natively (see the listener note below), so the
  // page's own dragenter/leave never fire in the app. Selector-based so it always
  // targets the connected root's overlay — survives thread switches / the
  // instant-restore path. (DropWebView in ChatFeedWebView.swift calls this.)
  window.__lchatDropOverlay = (show) => {
    const o = document.querySelector(".chatapp-root .drop-overlay");
    if (o) o.classList.toggle("hidden", !show);
  };
  // The native wrapper intercepts Finder file-drops itself — a WKWebView doesn't
  // hand the page the dropped files on macOS, and merely *registering* a web drop
  // handler makes WebKit claim the drop, bypassing the native path, so nothing
  // uploads. So skip the web drop listeners in the native app (html.native); there
  // the shell delivers files via __lchatAddFiles and shows the overlay via
  // __lchatDropOverlay above.
  if (!document.documentElement.classList.contains("native")) {
    let dragDepth = 0;
    root.addEventListener("dragenter", (e) => {
      if (!e.dataTransfer || ![...e.dataTransfer.types].includes("Files")) return;
      dragDepth++;
      dropOverlay.classList.remove("hidden");
    });
    root.addEventListener("dragleave", () => {
      if (--dragDepth <= 0) {
        dragDepth = 0;
        dropOverlay.classList.add("hidden");
      }
    });
    root.addEventListener("dragover", (e) => {
      if (e.dataTransfer && [...e.dataTransfer.types].includes("Files")) e.preventDefault();
    });
    root.addEventListener("drop", (e) => {
      dragDepth = 0;
      dropOverlay.classList.add("hidden");
      const files = [...((e.dataTransfer && e.dataTransfer.files) || [])];
      if (files.length) {
        e.preventDefault();
        api.stageFiles(files);
      }
    });
  }
  // The native macOS shell (LChatMac) can't hand Finder file-drops to the page —
  // a WKWebView doesn't deliver them and the web drop listeners above are skipped
  // in native mode — so it fills the page's static #file-input and dispatches
  // `change` (see ChatFeedWebView's __lchatAddFiles). The live composer uses its
  // own input, so expose a handler that pulls the files off that static input
  // into this thread's staging path; render() wires it to #file-input for the
  // thread on screen. (A plain browser never reaches this — its drops land on the
  // web listeners above.)
  root._dropFiles = () => {
    const el = document.getElementById("file-input");
    if (!el) return;
    const files = [...(el.files || [])];
    el.value = "";
    if (files.length) api.stageFiles(files);
  };

  // Scroll-back pagination: nearing the top folds the previous history page
  // (through the host, which owns tokens + decryption), then restores the
  // reader's place by anchoring the scroll offset across the prepend.
  let loadingOlder = false;
  let exhausted = false;
  feed.addEventListener("scroll", async () => {
    if (loadingOlder || exhausted || feed.scrollTop > 60) return;
    const state = ctx.getState();
    const oldest = state && state.msgs.length ? state.msgs[0].sid : 0;
    if (!oldest || !host || !host.loadOlder) return;
    loadingOlder = true;
    const prevHeight = feed.scrollHeight;
    try {
      // ONLY an empty page is the start of history. A failed fetch must not
      // latch `exhausted`, or one offline moment leaves scroll-back dead for
      // the rest of this mount (see pageResult).
      if (pageResult(await host.loadOlder(ctx.threadId, oldest)) === "end") exhausted = true;
    } catch { /* errored page — retryable, like -1 */ } finally {
      feed.scrollTop += feed.scrollHeight - prevHeight;
      loadingOlder = false;
    }
  });

  // ---- reply-thread view: tap a quote or a "N Replies" tally to lift that
  // thread over the transcript (narrow), or dock it as a right-hand column
  // beside it (desktop widths), Slack-style ----
  // Overlay: occupies the feed's box only (see .chatapp-feedwrap), so the
  // real composer below stays live with its reply state staged to the thread's
  // root — sending from it continues the thread. Docked: the panel parks in
  // the root's right gutter (the command panel's side-dock technique) and
  // carries its OWN root-pinned composer, leaving the main one alone. Either
  // way the new reply folds into the open view (render() → root._refreshThread
  // re-derives from current state each fold; the view never caches its list).
  //
  // ONE scrolling list, root first: the message a thread is about is simply the
  // thread's first message, not a pinned box above a second scroll region. A
  // thread reads as a small chat window — which is what it is — and an
  // unanswered one is a single bubble instead of a pinned message, a rule and
  // an empty pane.
  let threadSid = 0; // the open thread's root sid (0 = closed)
  let threadFallback = null; // { id, name, snippet } — the composer's reply target while the root isn't loaded
  let threadEl = null; // { ov, panel, count, note, body } while open (ov null when docked)
  let threadPaging = false; // paging history backward looking for the root
  let threadRootShown = false; // did the last fold render the root? (the one prepend the list ever sees)
  let threadDocked = false; // this open used the docked presentation (decided at open time, like every width check)
  let threadOpener = null; // the element that opened the view — focus returns there on close
  let paneBlock = null; // the docked pane's composer block (buildComposerBlock), docked only

  // The reply target for a message composed IN this thread: the root (a
  // fresh snapshot when loaded, the quoted fallback until then) plus the
  // thread flag — the wire marker that makes this a thread reply at all, and
  // keeps it out of the transcript (inMainFeed). The pure targets stay
  // flag-free; the flag is added here, at the one seam every thread-view send
  // passes through. quoteTarget of the loaded root IS the root's own ref (a
  // root is never itself in a thread), so no resolution is needed.
  const threadReplyTarget = () => {
    const msgs = ((ctx.getState() || {}).msgs) || [];
    const rootMsg = msgs.find((m) => m.sid === threadSid);
    const target = rootMsg
      ? quoteTarget(rootMsg)
      : { id: threadSid, name: (threadFallback && threadFallback.name) || "", snippet: (threadFallback && threadFallback.snippet) || "" };
    return { ...target, thread: true };
  };

  // Stage the composer's reply on the thread's root — the whole point of the
  // view's composer contract ("Replying to <root author>"). api.stageReply
  // mirrors startReply (a reply displaces an in-flight edit; native shells
  // mirror the banner); the focus is skipped on touch, where popping the
  // keyboard would cover the thread the reader just opened.
  const stageThreadReply = () => {
    api.stageReply(threadReplyTarget());
    if (!inEmbed && !coarse) composer.focus();
  };

  const closeThread = () => {
    const sid = threadSid;
    if (!sid && !threadEl) return;
    const docked = threadDocked;
    const opener = threadOpener;
    threadSid = 0;
    threadFallback = null;
    threadRootShown = false;
    threadDocked = false;
    threadOpener = null;
    if (threadEl) {
      if (docked) {
        threadEl.panel.remove();
        root.classList.remove("has-thread-pane");
      } else threadEl.ov.remove();
      threadEl = null;
    }
    paneBlock = null; // the pane composer dies with its panel — a re-open builds fresh
    // Overlay only: leaving the thread drops its staged reply — never an
    // unrelated one staged since (an edit clears the staged reply itself, so
    // that survives untouched). Docked, the main composer was never staged to
    // the thread, so a same-id reply the user armed themselves is theirs to keep.
    if (!docked) {
      const staged = api.stagedReply();
      if (sid && staged && staged.id === sid) api.cancelReply();
    }
    // Hand focus back where the view came from (the tally/quote that opened
    // it), the standard dialog return — but never to a node a re-render has
    // since replaced. Docked with no usable opener, fall back to the main
    // composer: closing removed the focused pane, and keyboard/AT users must
    // not be dropped onto <body>.
    if (opener && opener.isConnected && typeof opener.focus === "function") opener.focus();
    else if (docked && !inEmbed && !coarse) composer.focus();
    // The ▤ Views menu lists an open thread as a view (PR 3) — same repaint
    // signal the bot views use.
    document.dispatchEvent(new CustomEvent("lchat:views-changed"));
  };

  const buildThread = (docked) => {
    const panel = document.createElement("div");
    panel.className = "chatapp-thread-panel" + (docked ? " chatapp-thread-panel--docked" : "");
    // Docked it's an ordinary non-modal region beside the chat (a landmark,
    // no focus trap); the overlay presents as a dialog over the transcript.
    // No aria-modal on the overlay: its reply surface is the MAIN composer
    // below the dialog, and aria-modal would tell AT to ignore it.
    panel.setAttribute("role", docked ? "complementary" : "dialog");
    panel.setAttribute("aria-label", "Reply thread");
    const head = document.createElement("div");
    head.className = "chatapp-thread-head";
    const title = document.createElement("div");
    title.className = "chatapp-thread-title";
    title.textContent = "Thread";
    const count = document.createElement("div");
    count.className = "chatapp-thread-count";
    const x = document.createElement("button");
    x.type = "button";
    x.className = "chatapp-thread-x";
    x.innerHTML = icon("x"); // static in-code SVG from the host (safe)
    x.setAttribute("aria-label", "Close thread");
    x.onclick = () => closeThread();
    head.append(title, count, x);
    const note = document.createElement("div");
    note.className = "chatapp-thread-note hidden";
    const body = document.createElement("div");
    body.className = "chatapp-thread-msgs";
    panel.append(head, note, body);
    if (docked) {
      // The pane's own composer, pinned to the thread root: a SECOND
      // buildComposerBlock instance. fixedReply derives the target fresh per
      // send (the root may load mid-thread — the same threadReplyTarget the
      // overlay stages, thread flag included), so no banner ever shows and
      // nothing is staged on the main composer. Every pane send passes
      // through it — a Reply/swipe on a pane bubble only stages the block's
      // (ignored) replyTo, the send still derives from here — so no pane
      // reply can land in the transcript. commands off: "/" text sends verbatim, Slack-style (v1 —
      // a pane-summoned command panel has nowhere to dock; see the spec's
      // follow-ups). The whole 4-node fragment mounts INSIDE the wrapper —
      // including the block's float, which carries the attachment staging
      // strip and the emoji/@ typeahead drop-up (without it the typeahead
      // would arm invisibly and swallow Enter). That float is harmless here:
      // command panels anchor on the MAIN block's float captured in showPanel,
      // never this one — and nesting keeps the `.chatapp-root >` child
      // combinators (embed/readonly sweeps) deliberately blind to the pane.
      const composerWrap = document.createElement("div");
      composerWrap.className = "chatapp-thread-composer";
      paneBlock = buildComposerBlock(ctx, host, {
        fixedReply: threadReplyTarget,
        commands: false,
        // Escape in the pane's box: an in-flight edit cancels first (return
        // false — the block's own cancel path runs, then a second Escape
        // lands back here); otherwise the pane is the layer, so close it.
        onEscape: (hasEdit) => {
          if (hasEdit) return false;
          closeThread();
          return true;
        },
        // Refocus the pane's box so the next reply types straight away (the
        // factory's own post-send focus covers the common path; this keeps
        // the contract explicit). Deliberately NO pinNext: the reply shows in
        // the pane (whose body follows), and snapping the main transcript
        // would yank a reader who scrolled it while working the thread —
        // the overlay never had that problem because the dim covers the feed.
        onSent: () => {
          if (paneBlock) paneBlock.api.focus();
        },
      });
      composerWrap.appendChild(paneBlock.el);
      panel.appendChild(composerWrap);
      return { ov: null, panel, count, note, body };
    }
    const ov = document.createElement("div");
    ov.className = "chatapp-thread";
    const dim = document.createElement("div");
    dim.className = "chatapp-thread-dim";
    dim.onclick = () => closeThread(); // tapping the dimmed transcript leaves the thread
    ov.append(dim, panel);
    return { ov, panel, count, note, body };
  };

  // Thread rows reuse the feed's exact bubble machinery — renderItem +
  // patchBubble under keyedList — so reactions, attachments, long-press
  // actions, hover strips and edits all keep working inside the view (and a
  // reaction patches in place instead of reloading a photo).
  const threadKeyed = (container, items) =>
    keyedList(container, items, {
      key: (m) => m.id,
      rev: (m) => m.vrev + mutedRev(m, ctx) + mentionRev(m),
      srev: (m) => m.srev,
      render: (m) => renderItem(m, ctx),
      update: (node, m) => patchBubble(node, m, ctx),
    });

  const refreshThread = () => {
    if (!threadSid || !threadEl) return;
    const msgs = ((ctx.getState() || {}).msgs) || [];
    const items = threadItems(msgs, threadSid);
    // The whole thread got deleted under the open view — nothing left to show.
    // A loaded root with no replies is NOT that: items is [root], and a thread
    // someone just started must stay open to be replied to.
    if (!items.length && !threadPaging) return closeThread();
    // Length-guarded: the close above only fires on a SETTLED view, so an
    // empty list still reaches here while paging hunts for the root.
    const rootLoaded = !!(items.length && items[0].sid === threadSid);
    // The header counts the REPLIES, never the root — the one place the tally
    // still appears in this view, in the same words as the tally that opened it.
    threadEl.count.textContent = replyCountLabel(threadReplyCount(items, threadSid));
    // With the root in the list there's no snapshot header to stand in for it:
    // while it's missing the note carries that job alone and the list simply
    // starts at the oldest loaded reply. (The frozen quote lives on in
    // threadFallback, which is what the composer replies TO until the root
    // pages in.)
    const noteText = threadPaging
      ? "Loading the start of this thread…"
      : rootLoaded ? "" : "The original message isn't available — showing its replies.";
    threadEl.note.textContent = noteText;
    threadEl.note.classList.toggle("hidden", !noteText);
    // Follow the newest reply like the feed does, but only when already there —
    // a reader scrolled up a long thread isn't yanked down by a live arrival.
    const body = threadEl.body;
    const follow = body.scrollHeight - body.scrollTop - body.clientHeight < 80 || !body.childElementCount;
    const prevHeight = body.scrollHeight;
    // One keyed list, root first, straight through viewItems — so the root
    // gets the same separators, run-grouping and in-place reaction/edit
    // patching every other row has. Its own "N Replies" tally comes back
    // non-zero here and is hidden by CSS, like every other row's: inside the
    // view they'd all point at where the reader is already standing.
    threadKeyed(body, viewItems(items));
    if (follow) body.scrollTop = body.scrollHeight;
    else if (rootLoaded && !threadRootShown) {
      // The root just paged in ABOVE what the reader is looking at — the only
      // prepend this list ever sees. Re-anchor the way the feed's scroll-back
      // does, so the rows they're reading stay put instead of being shunted
      // down by the height the root (and its day separator) just added.
      body.scrollTop += body.scrollHeight - prevHeight;
    }
    threadRootShown = rootLoaded;
  };
  root._refreshThread = refreshThread;

  // Page history backward until message `sid` is in the loaded window. Two
  // callers want exactly this walk: the thread view fetching its root, and a
  // jump whose target is older than the loaded page (revealMessage). Bounded
  // by PAGE_BACK_CAP so a target deep in a huge history can't spin the loader
  // forever, and it shares the scroll-back path's loadingOlder/exhausted
  // guards while keeping the feed's scroll anchored across each prepend, like
  // scroll-back does. `stillWanted()` lets a caller abandon the walk (the
  // thread closed, another jump started).
  //
  // Terminates, always: every iteration either returns or performs exactly one
  // loadOlder, and `i` climbs unconditionally to the cap. Four more exits sit
  // inside it — the target turning up, paging PAST the target (pages are
  // contiguous, so a loaded window that starts below `sid` without holding it
  // means the message was deleted), a page coming back EMPTY (the start of
  // history, latched in `exhausted` for the whole mount), and a page that
  // FAILED to fetch.
  //
  // Empty and failed are deliberately different (see pageResult): an offline
  // blip or a 502 mid-deploy is not the start of history, so it must neither
  // latch `exhausted` — which would kill scroll-back for the rest of the mount
  // — nor answer "gone", which tells the reader a message was deleted when it
  // is merely unreachable this second. It answers "capped", the retryable one.
  //
  // Returns "found" | "gone" (deleted / history exhausted) | "capped" (still
  // more history — further back than one jump walks, or a fetch that failed).
  //
  // PAGE_BACK_CAP × the server's 100-row page is the REACH of one jump, and
  // it's pinned to the native walk's (ChatFeedModel.jumpPageCap) so the same
  // message gets the same answer everywhere: native passes no `limit` and
  // takes the same server default, so both sides walk ~800 messages.
  const PAGE_BACK_CAP = 8;
  const loaded = (sid) => (((ctx.getState() || {}).msgs) || []).some((m) => m.sid === sid);
  const pageBackTo = async (sid, stillWanted) => {
    for (let i = 0; i < PAGE_BACK_CAP; i++) {
      if (!stillWanted()) return "capped"; // abandoned — the caller decides what that means
      const msgs = ((ctx.getState() || {}).msgs) || [];
      if (msgs.some((m) => m.sid === sid)) return "found";
      const oldest = msgs.length ? msgs[0].sid : 0;
      if (exhausted || !oldest || oldest < sid) return "gone";
      if (!host || !host.loadOlder) return "capped";
      loadingOlder = true; // keep the feed's own scroll-back handler out
      const prevHeight = feed.scrollHeight;
      let n = -1;
      try {
        n = await host.loadOlder(ctx.threadId, oldest);
      } catch {
        n = -1; // a host that rejects is an errored page, not the end of history
      } finally {
        // Always re-anchor and release the flag: a throw here used to latch
        // loadingOlder forever, killing scroll-back AND every later walk.
        feed.scrollTop += feed.scrollHeight - prevHeight;
        loadingOlder = false;
      }
      const page = pageResult(n);
      if (page === "error") return loaded(sid) ? "found" : "capped"; // retryable — exhausted stays untouched
      if (page === "end") {
        exhausted = true;
        return loaded(sid) ? "found" : "gone";
      }
    }
    return loaded(sid) ? "found" : "capped";
  };

  const pageInRoot = async () => {
    if (threadPaging || loadingOlder) return;
    const sid = threadSid;
    threadPaging = true;
    refreshThread(); // show the inline loading note straight away
    await pageBackTo(sid, () => threadSid === sid);
    threadPaging = false;
    if (threadSid !== sid) return; // closed / re-opened elsewhere while paging
    refreshThread();
    // The root may have just loaded — refresh the banner to its live snapshot,
    // but only while the staged reply is still this thread's (not an edit).
    const staged = api.stagedReply();
    if (!api.editing() && staged && staged.id === sid) stageThreadReply();
  };

  // revealMessage(sid): a jump whose target isn't rendered anywhere — the
  // quote card above a plain reply whose parent is older than the loaded page
  // (the DEFAULT for every reply in existing history, since none of it
  // carries the thread flag), a search hit, a permalink. It used to be a
  // silent no-op: tap the card on a cold-opened chat and nothing happened at
  // all. Now the walk pages back for it and lands on it — and when it can't,
  // the reader is told, inline in the feed, rather than left tapping a dead
  // control.
  let revealSid = 0; // the target of the walk in flight (0 = none)
  const revealMessage = async (sid) => {
    if (!sid || revealSid === sid) return; // already walking for this one
    // A DIFFERENT target supersedes: the walk in flight sees stillWanted() go
    // false, drops out, and leaves the note to us (its own `revealSid !== sid`
    // check keeps it from writing one). Tapping a second card must not be
    // answered by flashing the first one's target.
    revealSid = sid;
    setFeedNote("Looking for that message…", true); // sticky: the outcome replaces it
    let outcome = "capped";
    try {
      // The reader may already have been scroll-loading history when they
      // tapped (or the superseded walk may still be mid-fetch). Both paths
      // drive host.loadOlder and each re-anchors scrollTop against its OWN
      // pre-prepend height, so overlapping them would jerk the feed — wait the
      // in-flight page out instead, bounded so a wedged fetch can't hold the
      // walk open. Still busy after that reads as "couldn't get there from
      // here", which is what the capped note already says.
      for (let i = 0; i < 20 && loadingOlder && revealSid === sid; i++) {
        await new Promise((r) => setTimeout(r, 100));
      }
      if (revealSid !== sid) return;
      if (!loadingOlder) outcome = await pageBackTo(sid, () => revealSid === sid);
      if (revealSid !== sid) return; // superseded; whoever took over owns the note
      // Found and rendered: land on it. The page folded through
      // host.loadOlder, which repaints before it resolves, so the bubble
      // exists by now. A hit that folded but still isn't in the transcript (it
      // turned out to live in a thread) hands off to the thread view, the same
      // as a loaded one.
      const target = outcome === "found" && feed.querySelector(`.msg[data-id="${sid}"]`);
      const t = threads.get(ctx.threadId);
      const inThread = !target && outcome === "found" && t && t.openForMessage(sid)
        ? root.querySelector(`.chatapp-thread-msgs .msg[data-id="${sid}"]`)
        : null;
      if (target || inThread) {
        setFeedNote("");
        // STOP THE FEED FOLLOWING BEFORE SCROLLING. Every page we just folded
        // re-rendered the feed, and render() decides "was at bottom" BEFORE
        // the prepend — so from the bottom of a busy chat each page started a
        // glide, and a live glide both overwrites scrollTop every frame
        // (cancelling the smooth scrollIntoView below on its very next frame)
        // and reports "at bottom" to the next render, re-arming itself. The
        // symptom was the note flashing and the feed never moving — and only
        // with Reduce Motion OFF, since the reduced-motion path jumps instead
        // of gliding. feedAtBottom goes with it so the ResizeObserver's
        // re-pin bails too (the note's row vanishing is a resize).
        feedCancelGlide(feed);
        feedAtBottom = false;
        flashMessage(target || inThread);
        return;
      }
      // Never silent. A "found" that still has nothing to land on reads the
      // same as gone from where the reader sits; "capped" is the one answer
      // that isn't final (further back than one jump walks, or a fetch that
      // failed), so it says so.
      setFeedNote(jumpReachNote(outcome === "capped" ? "capped" : "gone"));
    } finally {
      // Never leave the walk (or its sticky note) latched: without this a
      // throw anywhere above would block every future reveal for the mount.
      if (revealSid === sid) {
        revealSid = 0;
        if (feedNote.textContent === "Looking for that message…") setFeedNote(jumpReachNote("capped"));
      }
    }
  };

  const openThread = (rootSid, ref, opener) => {
    if (!rootSid) return;
    if (threadSid === rootSid && threadEl) {
      // Already open on this root — just put the caret back in the acting
      // composer (the pane's when docked, the main one under the overlay).
      if (threadDocked && paneBlock) paneBlock.api.focus();
      else if (!inEmbed && !coarse) composer.focus();
      return;
    }
    closeThread();
    // Presentation is decided per open, at open time — the codebase's width
    // idiom (point-in-time matchMedia, no live resize listeners). 721px is
    // the command panel side-dock's breakpoint; below it the overlay is
    // byte-for-byte today's.
    threadDocked = matchMedia("(min-width: 721px)").matches;
    // One right dock: an open command panel yields to a DOCKED thread
    // (showPanel does the mirror). The overlay never shared a dock with the
    // panel, so narrow widths keep both — exactly as before.
    if (threadDocked) hidePanel();
    threadSid = rootSid;
    threadFallback = ref || null;
    threadOpener = opener || null;
    threadEl = buildThread(threadDocked);
    if (threadDocked) {
      // The side-dock technique: the root reserves the gutter with padding
      // (real layout space), the panel parks absolutely in it — same slot the
      // command panel's side column uses. Appended LAST deliberately: the
      // pane carries its own ".composer", and every first-match query in the
      // tree (closed-DM paint, shell/search/onboarding focus hops) must keep
      // finding the MAIN composer first; last also puts the pane after the
      // transcript and composer in Tab order.
      root.classList.add("has-thread-pane");
      root.appendChild(threadEl.panel);
    } else {
      feedWrap.appendChild(threadEl.ov);
      // Overlay only: the main composer below IS the thread's reply box, so
      // stage it to the root. The docked pane's composer needs no staging —
      // it derives its fixedReply target per send.
      stageThreadReply();
    }
    // Render before any paging: the view must show what's loaded even when
    // pageInRoot bails (e.g. a scroll-back already in flight). When paging does
    // run, its own refresh follows synchronously, so no wrong-note flash.
    refreshThread();
    const msgs = ((ctx.getState() || {}).msgs) || [];
    if (!msgs.some((m) => m.sid === rootSid)) pageInRoot();
    // Move focus into the pane once it's laid out (the rAF lets the insert
    // paint first). Same touch guard as stageThreadReply's focus: popping the
    // keyboard over a just-opened pane helps nobody on coarse pointers.
    if (threadDocked && !inEmbed && !coarse) requestAnimationFrame(() => {
      if (paneBlock) paneBlock.api.focus();
    });
    document.dispatchEvent(new CustomEvent("lchat:views-changed"));
  };

  // ---- the ▤ Threads list: this chat's threads, newest activity first ----
  // The gap the pane left: "there's no way to see a list of threads — it's
  // hard to find a thread if I miss clicking the notification." A thread only
  // exists where someone chose it, so a chat has a handful, and they're
  // findable — if there's somewhere to look. This is that somewhere.
  //
  // It rides the SIDE COMMAND PANEL (the docked column Memory and bot views
  // already use) rather than inventing a surface. That reuse carries one
  // deliberate consequence: there is a single right dock, so a docked thread
  // and this list can't both be up. Tapping a row therefore closes the list
  // as the thread arrives — which is the behaviour we'd want anyway: you came
  // to find a thread, you found it. We close it here explicitly rather than
  // leaning on openThread's own hidePanel(), because that one is gated on the
  // DOCKED presentation — on a narrow screen the thread lifts as an overlay
  // and would otherwise leave the list's bottom band stranded beneath it.
  //
  // NO UNREAD DOT, deliberately. Read state in this product is per CHAT and
  // nothing else: one `read_marks(user_id, thread_id, last_read_at)` watermark
  // server-side, `readMarks` in shell.js, `ReadState.lastSeen` natively. Opening
  // the chat advances it past every thread reply in it — thread replies are
  // ordinary messages, so they move the chat's `last_at` even though the
  // transcript never shows them. A dot derived from that would read "all
  // caught up" the instant you glanced at the chat, which is exactly the lie
  // Paul is complaining about. Per-thread read state is a real feature (a
  // watermark per root, synced like the chat one); half-inventing it here
  // would put a wrong dot in front of members. Rows carry activity order
  // instead — the freshest thread is simply top.
  let threadListBody = null; // the open panel's body element (null = closed)
  let threadListSig = ""; // what that body last painted — see the fold hook

  const paintThreadList = (el) => {
    const rows = threadListItems(((ctx.getState() || {}).msgs) || []);
    threadListSig = threadListSignature(rows);
    el.replaceChildren();
    if (!rows.length) {
      // Only reachable with the list already open (the ▤ row hides at zero) —
      // every thread's replies were deleted while you were looking at them.
      const p = document.createElement("p");
      p.className = "thread-list-empty";
      p.textContent = "No threads in this chat. Choose “Reply in thread” on a message to start one.";
      el.appendChild(p);
      return;
    }
    const list = document.createElement("div");
    list.className = "thread-list";
    for (const r of rows) {
      const label = replyCountLabel(r.count); // the same string the root's tally wears
      const who = r.name ? r.name + ": " : "";
      // A CONVERTED chain whose root has scrolled out of the loaded window has
      // no truthful stand-in (threadListItems: only a flagged reply's ref is
      // its root's own snapshot), so the row would be a blank line above its
      // tally — and would read "Open thread, 3 Replies," to a screen reader.
      // Say what the thread view says in exactly the same case.
      const line0 = r.snippet || (r.rootLoaded ? "" : "The original message isn't available");
      const b = document.createElement("button");
      b.type = "button";
      b.className = "thread-list-row";
      b.dataset.root = String(r.rootSid); // how a repaint puts focus back on your row
      const line = document.createElement("span");
      line.className = "thread-list-line";
      const nameEl = document.createElement("span");
      nameEl.className = "thread-list-who";
      nameEl.textContent = who;
      const snip = document.createElement("span");
      snip.className = "thread-list-snippet";
      snip.textContent = line0;
      line.append(nameEl, snip);
      const count = document.createElement("span");
      count.className = "thread-list-count";
      count.textContent = label;
      b.append(line, count);
      // The accessible name says what the row DOES ("Open thread") before the
      // size and the line, so a screen reader announces a destination rather
      // than a fragment of someone's sentence. Both visible strings are
      // carried through verbatim, so voice control still matches on the words
      // a sighted user can see (WCAG 2.5.3).
      b.setAttribute("aria-label", `Open thread, ${label}, ${who}${line0}`);
      b.onclick = () => {
        hidePanel(); // one right dock — see the note above
        // No opener worth recording: the row dies with the list, so focus
        // return falls to closeThread's main-composer fallback.
        openThread(r.rootSid, { id: r.rootSid, name: r.name, snippet: r.snippet }, null);
      };
      list.appendChild(b);
    }
    el.appendChild(list);
  };

  // Two things follow the fold. (1) The ▤ menu's Threads row appears the
  // moment this chat gets its first thread and goes when its last one does —
  // so a thread someone else starts while you're reading surfaces the row
  // without a reload. That's the same repaint signal the pane's own row uses,
  // fired only on a real count change (a menu repaint per message would be
  // silly). (2) The open list itself repaints — a new reply re-sorts the rows
  // and moves a count — but only when what it SHOWS changed, because the rows
  // are BUTTONS: rebuilding them on every fold would yank focus out from under
  // someone tabbing the list. When a real change does land, focus goes back on
  // the row it was on (same root), so a live thread can't steal the keyboard.
  // Starts at 0 — the state the menu is already painted in when a chat opens,
  // so a chat with no threads never fires a pointless repaint on first render.
  let threadListSeen = 0; // last count the ▤ menu was told about
  root._refreshThreadList = () => {
    const rows = threadListItems(((ctx.getState() || {}).msgs) || []);
    if (rows.length !== threadListSeen) {
      threadListSeen = rows.length;
      document.dispatchEvent(new CustomEvent("lchat:views-changed"));
    }
    if (!threadListBody || !threadListBody.isConnected) return;
    if (threadListSignature(rows) === threadListSig) return;
    const active = document.activeElement;
    const keep = active && threadListBody.contains(active) ? active.dataset.root : "";
    paintThreadList(threadListBody);
    if (keep) {
      const back = threadListBody.querySelector(`.thread-list-row[data-root="${CSS.escape(keep)}"]`);
      if (back) back.focus();
    }
  };

  threads.set(ctx.threadId, {
    open: openThread,
    close: closeThread,
    isOpen: () => !!threadSid,
    // How many threads this chat has right now — the ▤ row's gate.
    listCount: () => threadListItems(((ctx.getState() || {}).msgs) || []).length,
    openList: () => {
      showPanel({
        title: "Threads",
        position: "side",
        render: (el) => {
          threadListBody = el;
          paintThreadList(el);
        },
        onClose: () => {
          threadListBody = null;
          threadListSig = "";
        },
      });
      return true;
    },
    // The docked pane's composer api, while one is mounted — how setConnected
    // (and PR 3's composerFor routing) reach the second composer.
    paneComposer: () => (threadDocked && paneBlock ? paneBlock.api : null),
    // openForMessage(sid): a message that lives only in its thread (a reply
    // made there — inMainFeed false) has no transcript bubble to scroll to,
    // so a jump to it opens the thread on its root instead
    // (scrollToMessage's fallback). False when the message isn't loaded or
    // belongs in the transcript — then it's a plain scroll miss, not ours.
    // (A thread reply whose root is paged out renders inline, so the
    // scroll finds it directly and never gets here.)
    openForMessage: (sid) => {
      const msgs = ((ctx.getState() || {}).msgs) || [];
      const m = msgs.find((x) => x.sid === sid);
      if (!m || inMainFeed(m, bySidIndex(msgs))) return false;
      const ref = threadTarget(msgs, m);
      if (!ref.id) return false;
      openThread(ref.id, ref, null);
      return true;
    },
    // reveal(sid): the other half of the same jump — a target that isn't
    // loaded at all. Pages history back for it and lands on it, or says
    // inline why it can't (revealMessage). Mount-scoped like openForMessage,
    // which is why it rides this registry rather than being a feed concern of
    // its own.
    reveal: revealMessage,
  });

  // Keyboard shortcuts, mirroring the original feed: with an empty composer,
  // cmd/ctrl-T opens the message menu on the latest message from someone else
  // (number keys then toggle reactions, Escape dismisses — openMessagePicker)
  // and cmd/ctrl-R starts a reply to the latest message. Escape also cancels
  // an armed reply/edit even when the composer isn't focused. "Latest" means
  // the latest in the TRANSCRIPT: a reply that lives only in its thread has
  // no bubble here to anchor a picker on, and the shortcuts act on the main
  // feed by definition.
  const latest = (othersOnly) => {
    const msgs = (ctx.getState() || {}).msgs || [];
    const bySid = bySidIndex(msgs);
    for (let i = msgs.length - 1; i >= 0; i--) {
      if (!inMainFeed(msgs[i], bySid)) continue;
      if (othersOnly && msgs[i].uid && msgs[i].uid === ctx.me) continue;
      return msgs[i];
    }
    return null;
  };
  // Stashed on the root so render() can re-point the shared dispatcher at
  // whichever mount is live now — including the instant-restore path, which
  // re-attaches this parked root without rebuilding the skeleton.
  root._hotkeys = (e) => {
    if (!root.isConnected) return;
    if ((e.metaKey || e.ctrlKey) && e.key === "t" && !composer.getText()) {
      e.preventDefault();
      const m = latest(true);
      if (m) openMessagePicker(m, ctx, feed.querySelector(`.msg[data-id="${m.sid}"]`) || feed);
    }
    if ((e.metaKey || e.ctrlKey) && e.key === "r" && !composer.getText()) {
      e.preventDefault();
      const m = latest(false);
      if (m) composers.get(ctx.threadId).startReply(m);
    }
    // Escape dismisses an open command panel when the composer isn't focused
    // (the focused case is in onComposerKeydown), with the same layer checks as
    // the thread-view close below — one Escape peels one layer, never two.
    if (e.key === "Escape" && panelOpen() && !e.defaultPrevented && !composer.hasFocus() && !document.querySelector(".emoji-picker, .msg-sheet, .lightbox")) {
      e.preventDefault();
      hidePanel();
      return;
    }
    // Escape closes an open thread view when the composer isn't focused (the
    // focused cases — main box and the docked pane's — are handled in each
    // block's onComposerKeydown, which marks a consumed Escape handled).
    // Skipped when a layer that owns Escape is up — the picker preventDefaults
    // before us (capture phase), the sheet/lightbox are still in the DOM when
    // we run — so one Escape peels one layer, never two. Docked, a staged
    // reply the user armed on the main composer is the newer layer: cancel it
    // (the branch below) before an Escape reaches the pane.
    // A pane edit in flight is the innermost layer of all: focus in neither
    // field, Escape cancels THAT — never the pane around it, which would
    // drop the typed edit (the pane's own field handles it when focused).
    const paneEditing = !!(threadDocked && paneBlock && paneBlock.api.editing());
    if (e.key === "Escape" && paneEditing && !e.defaultPrevented && !document.querySelector(".emoji-picker, .msg-sheet, .lightbox")) {
      e.preventDefault();
      paneBlock.api.cancelEdit();
      return;
    }
    // Keyboard Escape is never destructive (the Mac rule too): a docked pane
    // holding a typed draft or staged files stays put — the ✕ is the
    // deliberate close-with-content gesture.
    const paneHasContent = !!(threadDocked && paneBlock && (!paneBlock.composer.isEmpty() || paneBlock.api.staged()));
    if (e.key === "Escape" && threadSid && !paneHasContent && !api.editing() && !(threadDocked && api.stagedReply()) && !e.defaultPrevented && !composer.hasFocus() && !document.querySelector(".emoji-picker, .msg-sheet, .lightbox")) {
      e.preventDefault();
      closeThread();
      return;
    }
    if (e.key === "Escape" && !e.defaultPrevented && !composer.hasFocus() && (api.stagedReply() || api.editing()) && !document.querySelector(".emoji-picker")) {
      e.preventDefault();
      const wasEditing = api.editing();
      api.cancelReply();
      api.cancelEdit();
      if (wasEditing) {
        composer.setText("");
        api.refreshSend();
      }
    }
  };

  // Desktop opens ready to type, like the original feed.
  if (!coarse && !inEmbed) composer.focus();

  // Embedded: the native composer drives THIS composer through the shell's
  // window.lchatNative bridge (see installNativeBridge in chat.js) — text,
  // typing beats, staged photos, and reply cancels all land in the same code
  // paths the hidden web composer uses, so behaviour can't fork.
  //
  // Stashed on the root (like _hotkeys) rather than registered here: the host
  // keeps a SINGLE native dispatcher, so render() re-points it at whichever
  // mount is live now — including the instant-restore path that re-attaches a
  // parked root without rebuilding — so a stale thread never gets the events.
  if (inEmbed && host.registerNative) {
    root._native = {
      sendText(text) {
        if (api.uploading()) return false; // still uploading
        composer.setText(text || "");
        if (composer.isEmpty() && !api.staged()) return false;
        api.submit();
        api.typing(false);
        return true;
      },
      typing(hasText) {
        api.typing(hasText);
      },
      stage(file) {
        api.stageFiles([file]);
      },
      cancelReply() {
        // The native banner's ✕ means the same as the web one: leaving an open
        // thread view, not just dropping its staged reply.
        if (threadSid) closeThread();
        else api.cancelReply();
      },
      cancelEdit() {
        api.cancelEdit();
      },
      didAttach(force) {
        const atBottom = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 60;
        if (force || atBottom) feed.scrollTop = feed.scrollHeight;
      },
    };
  }

  return root;
}