// 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
//   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);
  // 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);
}

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.
const threads = new Map(); // threadId → { open(rootSid, ref), close(), isOpen() }

// 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();
}

// 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.
// rootRef walks a reply pointer to its thread's TOP message: new replies point
// straight at the root, so this is one hop; legacy chains (a reply quoting
// another reply) are chased through the loaded window. Returns the deepest ref
// reachable — its .id is the root's sid when the chain resolves, or the last
// known pointer when the parent scrolled out of the loaded window. Hop-capped
// so a hostile payload can't cycle forever.
function rootRef(bySid, reply) {
  let ref = reply;
  for (let hops = 0; hops < 100; hops++) {
    const parent = bySid.get(ref.id);
    if (!parent || !parent.reply || !parent.reply.id) return ref;
    ref = parent.reply;
  }
  return ref;
}

// replyTarget: the replyTo a reply to `m` should carry. Replying to any message
// in a thread continues that thread, so the ref always names the thread's TOP
// message — never the tapped reply. When the root is loaded, its name/snippet
// are snapshotted fresh; an unloaded root falls back to the deepest quoted ref
// we can see. Pure and exported for tests (mirrored natively by
// ChatFeedModel.replyTarget — pinned by the reply_thread_grouping vector).
export function replyTarget(msgs, m) {
  if (!m.reply || !m.reply.id) return { id: m.sid, name: m.name, snippet: replySnippet(m.raw) };
  const bySid = new Map(msgs.map((x) => [x.sid, x]));
  const ref = rootRef(bySid, m.reply);
  const root = bySid.get(ref.id);
  return root
    ? { id: root.sid, name: root.name, snippet: replySnippet(root.raw) }
    : { id: ref.id || 0, name: ref.name || "", snippet: ref.snippet || "" };
}

// threadItems: the reply thread rooted at `rootSid` — the root message (when
// loaded) followed by every message whose RESOLVED thread root is that sid, in
// server order. Legacy chains (a reply quoting another reply) resolve
// transitively via rootRef, so they land in the same thread as their ancestors;
// when the root itself has scrolled out of the loaded window the replies still
// fold (the view renders the quoted snapshot as its header instead). 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) {
  const bySid = new Map(msgs.map((m) => [m.sid, m]));
  const out = [];
  const root = bySid.get(rootSid);
  if (root) out.push(root);
  for (const m of msgs) {
    if (m.reply && m.reply.id && rootRef(bySid, m.reply).id === rootSid) out.push(m);
  }
  return out.sort((a, b) => a.sid - b.sid);
}

// 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;
}

export function viewItems(msgs) {
  // Reply threads group on the resolved ROOT message: every reply tallies on
  // its thread's top message (legacy chains resolve transitively), and each
  // reply carries its root sid (`replyRoot`) so taps/jumps land on the thread.
  const bySid = new Map(msgs.map((m) => [m.sid, m]));
  const replyCounts = new Map(); // thread root sid → messages in its thread
  const roots = new Map(); // reply sid → its thread's root sid
  for (const m of msgs) {
    if (m.reply && m.reply.id) {
      const root = rootRef(bySid, m.reply).id;
      roots.set(m.sid, root);
      replyCounts.set(root, (replyCounts.get(root) || 0) + 1);
    }
  }
  const out = [];
  let prev = null;
  for (const m of msgs) {
    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;
    // 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,
      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.
      srev: `${reactSig}|${replyCount}|${m.pending ? (m.slow ? "slow" : "send") : "ok"}|${m.sid ? 1 : 0}`,
    });
    prev = m;
  }
  return out;
}

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);
          return { 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 || [],
          reply: e.replyTo ? { id: e.replyTo.id || 0, name: e.replyTo.name || "", snippet: e.replyTo.snippet || "" } : 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);
      return { msgs };
    },
    // 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 { 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 { msgs };
    },
    [N.ev("edit")]: (s, e) => ({
      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 };
      }),
    }),
    [N.ev("delete")]: (s, e) => ({ 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; }
/* 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;
}
/* 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;
    const items = viewItems(msgs);
    // 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 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);
  },
});

// 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));
  const compose = root.querySelector(".composer");
  const float = root.querySelector(".composer-float");
  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");
    return;
  }
  if (compose) compose.classList.add("hidden");
  if (float) float.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 resolved thread root (not the quoted id) so the "N Replies"
  // jump on the root finds legacy chain replies too.
  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);
    q.onclick = () => {
      // A quote tap opens the whole thread, anchored on its resolved ROOT (the
      // quoted ref may name a mid-chain parent on a legacy reply). replyTarget
      // also hands us the root's name/snippet — the header fallback if the root
      // has scrolled out of the loaded window. Old scroll-jump kept as a belt
      // for a mount without thread controls.
      const t = threads.get(ctx.threadId);
      const ref = replyTarget(((ctx.getState() || {}).msgs) || [], m);
      if (t && ref.id) t.open(ref.id, ref);
      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 / 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 = composers.get(ctx.threadId);
      if (ctl) ctl.startReply(m);
    }),
  );
  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 = composers.get(ctx.threadId);
      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" 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.
function buildReplyCount(m, wrap, ctx) {
  const rc = document.createElement("div");
  rc.className = "reply-count";
  rc.textContent = m.replyCount === 1 ? "1 Reply" : m.replyCount + " Replies";
  rc.onclick = () => {
    const t = threads.get(ctx.threadId);
    if (t) {
      t.open(m.sid, { id: m.sid, name: m.name, snippet: replySnippet(m.raw) });
      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);
    }
  }
  // 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 = m.replyCount === 1 ? "1 Reply" : m.replyCount + " Replies";
    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);
  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;
}

// 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;
  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");
}

// "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);
      pop.remove();
    };
    pop.appendChild(b);
  }
  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();
      pop.remove();
    };
    pop.appendChild(b);
  };
  action(icon("reply"), "Reply", () => {
    const ctl = composers.get(ctx.threadId);
    if (ctl) ctl.startReply(m);
  });
  // 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 = composers.get(ctx.threadId);
      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();
      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 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,
// 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.
function sheetActions(m, ctx) {
  const acts = [];
  acts.push({
    label: "Reply",
    icon: icon("reply"),
    run: () => {
      const ctl = composers.get(ctx.threadId);
      if (ctl) ctl.startReply(m);
    },
  });
  // 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 = composers.get(ctx.threadId);
        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)) {
    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 = composers.get(ctx.threadId);
      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);
  });
}

// ---- skeleton: feed, banners, staging, composer (original markup) -----------

// buildSkeleton constructs the once-per-mount frame with the original composer
// structure and class names — .composer-reply / .composer-edit banners, the
// floating .composer-preview staging strip, and 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";
  feedWrap.appendChild(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);

  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 = !(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 inEmbed = !!(host && host.embed);
  const composerOpts = {
    placeholder: composerHints.get(ctx.threadId) || basePlaceholder(),
    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" && (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);
    });
  };
  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();


  root.append(feedWrap, float, replyBanner, editBanner, compose);
  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);

  // ---- composer state (per mount; 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; it needs layout
  // (the width measure) and `pending` above, so it runs here, post-append.
  applyComposerHint(ctx.threadId);

  const refreshBanners = () => {
    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) {
      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");
      // 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.
      x.onclick = () => (threadSid ? closeThread() : cancelReply());
      bar.append(ic, body, x);
      replyBanner.appendChild(bar);
      replyBanner.classList.remove("hidden");
    }
  };
  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");

  const cancelReply = () => {
    replyTo = null;
    refreshBanners();
    if (inEmbed) host.native({ replying: null });
  };
  const cancelEdit = () => {
    editing = null;
    refreshBanners();
    if (inEmbed) host.native({ editing: null });
    // An edit inside an open thread view borrowed the composer (startEdit clears
    // replyTo); hand it back so the next send still continues the thread.
    if (threadSid) stageThreadReply();
  };

  // 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
    applyComposerHint(ctx.threadId); // an attach-gated hint appears/disappears with the staged files
    // The 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.
    if (feedNearBottom(feed, 160)) requestAnimationFrame(() => feedGlideToBottom(feed, true));
    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();
  };

  composers.set(ctx.threadId, {
    refreshSend,
    startReply(m) {
      editing = null;
      // Replying to a reply continues its thread: target the TOP message.
      replyTo = replyTarget(((ctx.getState() || {}).msgs) || [], 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();
    },
  });

  // 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);
  };

  // ---- 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) => 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) => {
    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 : 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()));
  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);
          });
        }
      }
    }
  }
  // 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();
        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) stageFiles(files);
  };

  // ---- :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();
    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
  };
  composers.get(ctx.threadId).tickTyping = tickTyping; // render() re-arms the ticker each draw
  function onComposerInput() {
    // (Auto-grow already ran inside the facade.) The composer just grew,
    // shrinking the flex feed. Re-pin to the newest message *here*,
    // 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.
    if (feedAtBottom) feed.scrollTop = feed.scrollHeight;
    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
      return;
    }
    // An open command panel is the most recently summoned layer — Escape peels
    // it before the thread view / reply / edit below.
    if (e.key === "Escape" && panelOpen()) {
      hidePanel();
      return;
    }
    // An open thread view closes on Escape (dropping its staged reply) — unless
    // an edit is in flight, which the branch below cancels first (cancelEdit
    // re-stages the thread reply, so a second Escape then closes the view).
    if (e.key === "Escape" && threadSid && !editing) {
      closeThread();
      return;
    }
    if (e.key === "Escape" && (editing || replyTo)) {
      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) {
      const state = ctx.getState();
      const mine = ((state && state.msgs) || [])
        .filter((m) => ownMessage({ uid: m.uid, name: m.name }, ctx.me, ctx.meName) && m.text.trim() && Date.now() - m.ts < EDIT_WINDOW_MS)
        .pop();
      if (mine) {
        e.preventDefault();
        composers.get(ctx.threadId).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
      clearComposerHint(ctx.threadId); // the question was answered — back to "Message" now, not at the reply
    };
    // /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 (!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 (!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 (!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 (!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);
    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;
      // Snap to the newest on the echo's re-render — your message should land in
      // view even if you'd scrolled up to reply. Set now (well before the server
      // round-trip); render() clears it.
      pinNext.add(ctx.threadId);
      resetInput();
      pending = [];
      // Sending from an open thread view keeps it open and re-stages the reply
      // to its root — the new reply folds in live and the next send continues
      // the same thread, like iMessage.
      if (threadSid) stageThreadReply();
      else cancelReply();
      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.
      deliverAnswer(ctx.threadId, payload, (r) => addLocalNotice(ctx, r));
    });
  };

  // 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;
    const n = await host.loadOlder(ctx.threadId, oldest);
    if (n === 0) exhausted = true;
    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, iMessage-style ----
  // The 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, and the new reply folds into
  // the open view (render() → root._refreshThread re-derives from current
  // state each fold; the view never caches its list).
  let threadSid = 0; // the open thread's root sid (0 = closed)
  let threadFallback = null; // { id, name, snippet } — header stand-in while the root isn't loaded
  let threadEl = null; // { ov, count, rootBox, note, body } while open
  let threadPaging = false; // paging history backward looking for the root

  // Stage the composer's reply on the thread's root — the whole point of the
  // view's composer contract ("Replying to <root author>"). Mirrors startReply
  // (a reply displaces an in-flight edit; native shells mirror the banner) but
  // skips the focus on touch, where popping the keyboard would cover the
  // thread the reader just opened.
  const stageThreadReply = () => {
    editing = null;
    const msgs = ((ctx.getState() || {}).msgs) || [];
    const rootMsg = msgs.find((m) => m.sid === threadSid);
    replyTo = rootMsg
      ? replyTarget(msgs, rootMsg)
      : { id: threadSid, name: (threadFallback && threadFallback.name) || "", snippet: (threadFallback && threadFallback.snippet) || "" };
    refreshBanners();
    if (inEmbed) host.native({ replying: { name: replyTo.name || "", snippet: replyTo.snippet || "" } });
    else if (!coarse) composer.focus();
  };

  const closeThread = () => {
    const sid = threadSid;
    if (!sid && !threadEl) return;
    threadSid = 0;
    threadFallback = null;
    if (threadEl) {
      threadEl.ov.remove();
      threadEl = null;
    }
    // Leaving the thread drops its staged reply — never an unrelated one staged
    // since (an edit clears replyTo itself, so that survives untouched).
    if (sid && replyTo && replyTo.id === sid) cancelReply();
  };

  const buildThread = () => {
    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
    const panel = document.createElement("div");
    panel.className = "chatapp-thread-panel";
    panel.setAttribute("role", "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 rootBox = document.createElement("div");
    rootBox.className = "chatapp-thread-rootmsg";
    const note = document.createElement("div");
    note.className = "chatapp-thread-note hidden";
    const body = document.createElement("div");
    body.className = "chatapp-thread-msgs";
    panel.append(head, rootBox, note, body);
    ov.append(dim, panel);
    return { ov, count, rootBox, 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.
    if (!items.length && !threadPaging) return closeThread();
    const rootLoaded = !!(items.length && items[0].sid === threadSid);
    const replies = rootLoaded ? items.slice(1) : items;
    threadEl.count.textContent = replies.length === 1 ? "1 reply" : replies.length + " replies";
    if (rootLoaded) {
      const m = items[0];
      if (threadEl.rootBox.dataset.mode !== "msg") {
        threadEl.rootBox.textContent = ""; // swap out the snapshot fallback
        threadEl.rootBox.dataset.mode = "msg";
      }
      // The pinned root is a real keyed bubble, sans separator and sans its own
      // tally (the replies ARE the panel). Same soft-rev split as viewItems so
      // a reaction patches the row in place, never rebuilding the bubble.
      const reactSig = (m.reactions || []).map((r) => `${r.emoji}${r.count}`).join(",");
      threadKeyed(threadEl.rootBox, [{ ...m, timeSep: null, cont: false, replyCount: 0, replyRoot: 0, vrev: `${m.rev}|root`, srev: reactSig }]);
    } else if (threadEl.rootBox.dataset.mode !== "fall") {
      threadEl.rootBox.textContent = "";
      threadEl.rootBox.dataset.mode = "fall";
      // Root not loaded (yet): the quoted snapshot stands in as the header.
      const fall = document.createElement("div");
      fall.className = "chatapp-thread-rootfall";
      const who = document.createElement("div");
      who.className = "reply-quote-name";
      who.textContent = (threadFallback && threadFallback.name) || "";
      const txt = document.createElement("div");
      txt.className = "chatapp-thread-fallsnippet";
      txt.textContent = (threadFallback && threadFallback.snippet) || "";
      fall.append(who, txt);
      threadEl.rootBox.appendChild(fall);
    }
    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 follow = threadEl.body.scrollHeight - threadEl.body.scrollTop - threadEl.body.clientHeight < 80 || !threadEl.body.childElementCount;
    threadKeyed(threadEl.body, viewItems(replies));
    if (follow) threadEl.body.scrollTop = threadEl.body.scrollHeight;
  };
  root._refreshThread = refreshThread;

  // Page history backward until the thread's root is loaded — bounded, so a
  // reply deep in a huge history can't spin the loader forever. Shares the
  // scroll-back path's loadingOlder/exhausted guards and keeps the dimmed
  // transcript's scroll anchored across each prepend, like scroll-back does.
  const THREAD_PAGE_CAP = 5;
  const pageInRoot = async () => {
    if (threadPaging || loadingOlder) return;
    const sid = threadSid;
    threadPaging = true;
    refreshThread(); // show the inline loading note straight away
    for (let i = 0; i < THREAD_PAGE_CAP && threadSid === sid && !exhausted; i++) {
      const msgs = ((ctx.getState() || {}).msgs) || [];
      if (msgs.some((m) => m.sid === sid)) break;
      const oldest = msgs.length ? msgs[0].sid : 0;
      // Pages are contiguous: once we've loaded past the root's sid without
      // finding it, the root was deleted — more paging can't surface it.
      if (!oldest || oldest < sid || !host || !host.loadOlder) break;
      loadingOlder = true; // keep the feed's own scroll-back handler out
      const prevHeight = feed.scrollHeight;
      const n = await host.loadOlder(ctx.threadId, oldest);
      feed.scrollTop += feed.scrollHeight - prevHeight;
      loadingOlder = false;
      if (n === 0) {
        exhausted = true;
        break;
      }
    }
    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).
    if (!editing && replyTo && replyTo.id === sid) stageThreadReply();
  };

  const openThread = (rootSid, ref) => {
    if (!rootSid) return;
    if (threadSid === rootSid && threadEl) return; // already open on this root
    closeThread();
    threadSid = rootSid;
    threadFallback = ref || null;
    threadEl = buildThread();
    feedWrap.appendChild(threadEl.ov);
    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();
  };
  threads.set(ctx.threadId, { open: openThread, close: closeThread, isOpen: () => !!threadSid });

  // 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.
  const latest = (othersOnly) => {
    const msgs = (ctx.getState() || {}).msgs || [];
    for (let i = msgs.length - 1; i >= 0; i--) {
      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 case is handled in onComposerKeydown). 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.
    if (e.key === "Escape" && threadSid && !editing && !e.defaultPrevented && !composer.hasFocus() && !document.querySelector(".emoji-picker, .msg-sheet, .lightbox")) {
      e.preventDefault();
      closeThread();
      return;
    }
    if (e.key === "Escape" && !composer.hasFocus() && (replyTo || editing) && !document.querySelector(".emoji-picker")) {
      e.preventDefault();
      const wasEditing = !!editing;
      cancelReply();
      cancelEdit();
      if (wasEditing) {
        composer.setText("");
        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 (pending.some((p) => !p.att)) return false; // still uploading
        composer.setText(text || "");
        if (composer.isEmpty() && !pending.length) return false;
        compose.requestSubmit();
        stopTypingBeat();
        return true;
      },
      typing(hasText) {
        if (hasText) beatTyping();
        else stopTypingBeat();
      },
      stage(file) {
        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 cancelReply();
      },
      cancelEdit() {
        cancelEdit();
      },
      didAttach(force) {
        const atBottom = feed.scrollHeight - feed.scrollTop - feed.clientHeight < 60;
        if (force || atBottom) feed.scrollTop = feed.scrollHeight;
      },
    };
  }

  return root;
}