// The multi-thread chat app (see docs/threads-and-dms.md). One instance holds
// many threads — DMs, groups, and "Notes" (self). Each thread has its own AES
// key, wrapped to each member's user public key; this browser unwraps with the
// session's user private key. The server only ever relays opaque ciphertext.
//
// MVP scope: thread list + DMs/groups + text messaging + roster picker, with a
// master-detail layout (desktop) and list↔thread navigation (mobile). Reactions,
// attachments, edits, link cards, and push are deferred to a follow-up.
import {
  importKey,
  encrypt,
  decrypt,
  encryptBytes,
  decryptBytes,
  generateKey,
  generateUserKeypair,
  wrapThreadKey,
  unwrapThreadKey,
  sealForPub,
  openSealed,
  pkcePair,
  bytesToB64url,
  b64urlToBytes,
  randomSecret,
  deriveInvite,
  bindMac,
  verifyBindMac,
  mintBrandingKey,
  deriveBrandingKey,
} from "/static/crypto.js";
import {
  shouldSend,
  fileAllowed,
  fileMime,
  fileIcon,
  TEXT_SIZES,
  composerToken,
  pinnedFirst,
  ownMessage,
  sanitizeActions,
  memberCountLabel,
  onlineFilterKeeps,
  chatCategory,
  presenceLabel,
  displayNameFor,
  renameNotice,
  translateMentions,
  capAllows,
  appReloadMessage,
} from "/static/ui.js";
import { richTokens, blockTokens, firstLink, replySnippet, reactionLine, convertLine, formatBytes, autoGroupTitle, nameList, membershipLine, emojiOnlyCount, youtubeId, relTime, formatCountdown } from "/static/format.js";
import { emojify, emojiMatches } from "/static/emoji.js";
import { startBootScene, finishBootScene } from "/static/bootscene.js";
import { processImage, videoMeta } from "/static/media.js";
import { plainText as mdPlainText } from "/static/markdown.js";
import { createIntegrity } from "/static/integrity.js";
import {
  registerFloorCommand,
  setEmitTransport,
  setScheduleTransport,
  setEphemeralTransport,
  setStateSaver,
  setCurrentUser,
  setAppThreadResolver,
  setToast,
  setDefaultBot,
  setThreadHasBot,
  setThreadIsGroup,
  setThreadOwner,
  setThreadOpener,
  setHostBridge,
  setSpaceInfo,
  spaceInfo,
  setElevenTour,
  setSetupBridge,
  setupBridge,
  runCommand,
  parseCommand,
  commandCatalog,
  buildLocalNotice,
  isAppType,
  foldEvent,
  foldHostEvent,
  optimisticFold,
  deliverEphemeral,
  appPreview,
  appUnread,
  resetThread,
  seedThread as seedAppThread,
  takeSnapshot,
  notifyLive,
  renderApp as renderMiniApp,
  appByName,
  appCatalogReport,
  appIsQuiet,
  appForType,
  appWantsChatView,
  appDefaultView,
  appChatOnly,
  appStateFor,
  groupCapableApps,
  groupAppsFor,
  installGroupApp,
  installSpaceApp,
  spaceAppsFor,
  setSpaceThread,
  setSpaceThreadResolver,
  setSpaceInstallPolicy,
  setInstanceOpener,
  mentionableApps,
  emitAppEvent,
  messageActionsFor,
  renderInline as renderAppLine,
  setCommandPanelObserver,
  closeCommandPanel,
  setMemoryStore,
  appGlyphInto,
  addCommandPanelObserver,
  spaceRowTitle,
} from "/static/apps.js";
// Register the mini-apps (side-effect imports). Each is a single self-contained
// file (JS + its own CSS). Personal apps get their own sidebar thread; shared
// apps run inside a chat; system apps (the chat feed) are mounted explicitly.
import "/static/apps/todo.js";
import "/static/apps/remind.js";
import "/static/apps/bookmarks.js";
import "/static/apps/poll.js";
import "/static/apps/vault.js";
import "/static/apps/board.js";
import "/static/apps/agents.js"; // shared remote Claude Code sessions (fleet board; bridge = lchat agents run)
import "/static/apps/connect.js";
import "/static/apps/dnsimple.js";
import "/static/apps/stripe.js";
import "/static/apps/hubspot.js";
import "/static/apps/github.js";
import "/static/apps/linear.js";
import "/static/apps/webhook-monitor.js";
import { openThreadView } from "/static/apps/views.js"; // views: bot-created data surfaces (docs/views.md); also registers the app
import "/static/apps/emoji.js"; // /emoji — the command-panel reference app
import "/static/apps/gif.js"; // /gif — Giphy search in a command panel (bring-your-own key; posts via ctx.host.gif)
import { startTour } from "/static/tutorial.js"; // also registers the /tutorial floor command
import { startSetup } from "/static/apps/setup.js"; // the first-run setup conversation (also registers its app)
import { startWelcome } from "/static/apps/welcome.js"; // the joiner welcome conversation (also registers its app)
import { planQuickForm } from "/static/quickform.js"; // "Fill in a form instead" — values → verbs+records
import "/static/apps/admin.js"; // the admin panel (admin-only; opened via /admin or setup's chip)
import "/static/apps/webhooks.js"; // incoming-webhooks management (admin-only; /webhooks — docs/webhooks.md)
import "/static/apps/appstudio.js"; // make + manage your own member apps (docs/member-apps.md)
import { openMemoryPanel } from "/static/apps/memory.js"; // /memory — the AI-memory scratchpad (docs/eleven-memory.md)
import { setHost as setChatAppHost, setConnected as setChatAppConnected, appendNotice, setNoticeTyping, feedGlideToBottom, scrollToMessage, repaintMentionsOf, activeThreadPane, threadListCount, openThreadList, MAX_CONVERT_IDS } from "/static/apps/chat.js";
import { avatarFor, threadAvatarFor, paintAvatar, avatarEl } from "/static/avatars.js";
import { rosterLabel, publishedLabel, rosterMatches, rosterPresence, setPresenceLine, agentTag, pickerName, pickerSection } from "/static/rosterui.js";
import { INVITER_HINT_KEY, readInviterHint, inviterHintTarget } from "/static/invitehint.js";
import { editGroup, showMembers, viewProfile, confirmRemoveFromSpace, updateRenameBanner, showSpaceInfo, closeChat, endConversation, toggleMute, togglePin, addPeople, manageGroupApps, leaveGroup } from "/static/groupactions.js";
import { existingDM, showNewChat, showMembership, flash, showDiscover, showApps, createThread, pickerApps } from "/static/newchat.js";
import { addDevice, openInApp } from "/static/adddevice.js";
import { loadTiers, applyTiers, setTierShown, subscribeToLevel, cancelLevelSub, resumeLevelSub, changeLevelSub, levelPortal, billingDate, levelPrice, ensureTierKeys } from "/static/billingui.js";
import { sendScriptedBubble, sendTypedPayload, scriptedSaid, liveElevenAgent, maybeStartWelcome, openSetupQuickForm } from "/static/onboardingui.js";
import { verbs } from "/static/shellverbs.js"; // the behaviour seam (docs/shell-modules.md)
import { scheduleMessageSearch, wireSearch, searchIdx } from "/static/searchui.js"; // message search over the local store (#586)
import { wireMediaView, openMediaView, closeMediaView, mediaInvalidate, mediaModerationChanged } from "/static/mediaview.js"; // Media/Links/Docs overlay
import { loadMemberApps, setMemberSeeder, setSurfaceRefresh, setMemberAdmin, recentLocalDeploy, pushTheme } from "/static/sandbox.js"; // member-built apps, run sandboxed (docs/member-apps.md)
import { THEME_META, THEME_ORDER, currentTheme, currentAppearance, setTheme, setAppearance, currentTextSize, setTextSize, onThemeApplied } from "/static/theme.js"; // applies the saved theme/text-size on import
import { session, roster, myUserId, threads, threadKeys, activeId, ws, setSession, setRoster, setMyUserId, setThreads, setActiveId, setWs, nicknames, setNicknames, threadName, instanceKey, instanceKeyB64, setInstanceKey, threadKeyB64, unread, hidden, dmClosed, embed, ENABLE_AI, ENABLE_BOTS, ENABLE_APPS, PLACES_UI, threadApp, tiers, setTiers, tierKeys, tierKeyB64, pendingJoinThread, setPendingJoinThread, ACTIVE_KEY, MAX_UPLOAD, pinned, muted, sealedBranding, setSealedBranding, brandingB, setBrandingB } from "/static/shellstate.js"; // the shared shell state (docs/shell-modules.md)

import { openLightbox } from "/static/lightbox.js";
import { mutedPeople, blockedPeople, loadModPrefs, setPersonMuted, openReportSheet, loadBlocks, setPersonBlocked, onModerationChange } from "/static/moderation.js";
import { parseInviteFragment, buildInviteFragment } from "/static/invite.js";
import { qrCanvas } from "/static/qrcode.js";
import { initBackupBanner, canRestore, autoRestoreRequested, launchRestore, checkRestoreReturn, launchEnrol, isEnrolled, deferBackupNudges } from "/static/backup.js";
import {
  needsHomeScreen,
  pushAvailable,
  pushEnabled,
  pushDenied,
  registerSW,
  subscribePush,
  unsubscribePush,
  isSubscribed,
  idbSet,
} from "/static/push.js";
// The local message store (#457): raw server responses cached in IndexedDB so
// reloads and thread switches paint instantly (and, later, search works). See
// store.js's header for the trust-boundary rationale (ciphertext only).
import {
  SNAP_VERSION,
  snapshotUsable,
  staleThreadIds,
  getSnapshot as storeGetSnapshot,
  putSnapshot as storePutSnapshot,
  getRecentMessages as storeRecentMessages,
  putMessages as storePutMessages,
  applyEditRow as storeApplyEdit,
  deleteMessageRow as storeDeleteMessage,
  clearThread as storeClearThread,
  cachedThreadIds as storeCachedThreadIds,
  wipeStore,
  allMessages as storeAllMessages,
  getBackfillMark as storeBackfillMark,
  runBackfill as storeRunBackfill,
} from "/static/store.js";
import { anyComposerHasText, formatAsYouTypePref, setFormatAsYouType, classicComposerPref, setClassicComposer } from "/static/composer.js";

// Populate the behaviour seam: the core verbs extracted modules call through
// (function declarations hoist, so these references are valid here).
Object.assign(verbs, {
  openThread, loadThreads, renderThreadList, renderActiveSurfaces,
  paintThreadHeader, modal, toast, displayName, threadAvatarFor,
  announceJoin, announceLeave, announceRemove, sendChatText,
  loadBlobBytes, chatAppFor, chatAppLoadOlder, stashAppPane,
  resolveRename, showList, paintHeaderAvatar,
  loadTiers, setNickname, syncThreadKeysToSW,
  inviteSomeone, resolveAppThread, billingDate, levelPrice, inviteAllowed,
  decryptRosterLabels, openThreadById, seedAppState, welcomePending, isAdmin,
  removeFromSpace, banFromSpace,
  cacheTiersRaw,
  manageGroupApps, openSpaceApp,
});

onThemeApplied(pushTheme); // live-retint mounted sandbox frames on theme change
wireSearch({ openThread, chatAppFor, chatAppLoadOlder, threadAvatar: threadRowAvatarEl }); // navigation + thread predicate + scroll-back paging + row avatars
wireMediaView({ loadBlob: (threadId, att) => loadBlob(att.id, threadId, att.type), unfurl }); // Media/Links/Docs overlay: same blob loader + unfurl fetcher as the chat app's host bridge

// Ephemeral transport (ctx.emitEphemeral): same encryption as emit, but the
// envelope's `ephemeral` flag asks the server to relay-and-forget — no store,
// no push, no message id. Presence traffic only.
setEphemeralTransport((threadId, event) => {
  const key = threadKeys[threadId];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) return Promise.resolve(false);
  const payload = { ...event, name: session.name, ts: Date.now() };
  if (myUserId) payload.uid = myUserId;
  return encrypt(key, payload).then((blob) => {
    ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob, ephemeral: true }));
    return true;
  });
});

// A mute folds bubbles in the open thread; a block also re-badges the list.
onModerationChange((threadsToo) => {
  renderActiveSurfaces();
  if (threadsToo) renderThreadList();
  mediaModerationChanged(); // repaint an open Media/Links/Docs overlay too
});

const SESSION_KEY = "lchat_session";
const isCoarse = matchMedia("(pointer: coarse)").matches;
// Video clips get a larger ceiling (Signal-style send-and-play). Matches the
// server's default LCHAT_MAX_UPLOAD_BYTES; a lower per-instance cap just means
// the server rejects the upload and the composer shows a "couldn't add" message.
const MAX_VIDEO_UPLOAD = 50 * 1024 * 1024;

// ---- split view divider ----------------------------------------------------
// Desktop-only Chat|Interface split (see the [data-app-view="split"] CSS):
// #app-split-divider lets a member drag the boundary between #app-pane and
// #interface-pane. The ratio is a local preference, same pattern as the theme
// and text size — applied as a CSS custom property the split CSS reads.
const SPLIT_RATIO_KEY = "lchat_split_ratio";
const SPLIT_RATIO_MIN = 0.2;
const SPLIT_RATIO_MAX = 0.8;
const clampSplitRatio = (r) => Math.min(SPLIT_RATIO_MAX, Math.max(SPLIT_RATIO_MIN, r));
const currentSplitRatio = () => {
  const v = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY));
  return Number.isFinite(v) ? clampSplitRatio(v) : 0.5;
};
function applySplitRatio(ratio) {
  document.documentElement.style.setProperty("--split-ratio", String(ratio));
  const divider = document.getElementById("app-split-divider");
  if (divider) divider.setAttribute("aria-valuenow", String(Math.round(ratio * 100)));
}
function setSplitRatio(ratio) {
  ratio = clampSplitRatio(ratio);
  localStorage.setItem(SPLIT_RATIO_KEY, String(ratio));
  applySplitRatio(ratio);
}
// #app-split-divider lives inside #app-tpl (cloned into the DOM by renderApp,
// below), so it doesn't exist yet at module load — applySplitRatio's element
// lookup is a no-op until renderApp calls wireSplitDivider().
function wireSplitDivider() {
  const divider = document.getElementById("app-split-divider");
  const container = document.getElementById("app-split");
  if (!divider || !container) return;
  applySplitRatio(currentSplitRatio());
  const step = 0.02;
  let startX = 0;
  let startRatio = 0.5;
  divider.addEventListener("pointerdown", (e) => {
    divider.setPointerCapture?.(e.pointerId);
    startX = e.clientX;
    startRatio = currentSplitRatio();
    divider.classList.add("dragging");
  });
  divider.addEventListener("pointermove", (e) => {
    if (!divider.classList.contains("dragging")) return;
    const rect = container.getBoundingClientRect();
    if (rect.width) setSplitRatio(startRatio + (e.clientX - startX) / rect.width);
  });
  const endDrag = (e) => {
    divider.classList.remove("dragging");
    divider.releasePointerCapture?.(e.pointerId);
  };
  divider.addEventListener("pointerup", endDrag);
  divider.addEventListener("pointercancel", endDrag);
  divider.addEventListener("dblclick", () => setSplitRatio(0.5));
  divider.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") setSplitRatio(currentSplitRatio() - step);
    else if (e.key === "ArrowRight") setSplitRatio(currentSplitRatio() + step);
    else if (e.key === "Home") setSplitRatio(SPLIT_RATIO_MIN);
    else if (e.key === "End") setSplitRatio(SPLIT_RATIO_MAX);
    else if (e.key === "Enter") setSplitRatio(0.5);
    else return;
    e.preventDefault();
  });
}

// ---- action chips ---------------------------------------------------------
// One-tap buttons a helper attaches to its reply ("Switch to dark" etc.).
// Consent-based by design: nothing runs until the member taps — payloads
// aren't sender-signed, so a chip is a *suggestion*, and the whitelist in
// ui.js keeps every runnable action harmless and reversible.
const CHIP_RUNNERS = {
  set_theme: (a) => {
    setTheme(a.theme);
    return `${THEME_META[a.theme].name} ✓`;
  },
  set_appearance: (a) => {
    setAppearance(a.appearance);
    return { light: "Light ✓", dark: "Dark ✓", system: "Following your device ✓" }[a.appearance];
  },
  open_theme_picker: () => (showThemePicker(), null),
  open_profile: () => (editProfile(), null),
  // Start Eleven's guided tour in the thread the chip was tapped in (the welcome
  // DM). The tour renders as private notices via chat.js's appendNotice; the chip
  // stays as-is (returns null), since the tour appears below it in the feed.
  open_tutorial: () => (startTour((spec) => appendNotice(activeId, spec)), null),
  open_thread: (a) => (openThreadById(a.thread), null),
  // Open a bot-created view in this chat (docs/views.md): pins the view's
  // panel above the feed from state already folded here. Returns the in-place
  // line when the view isn't in the fold (yet) — never throws.
  open_view: (a) => openThreadView(activeId, a.view) || null,
  // The memory scratchpad, for the thread the chip was tapped in (the chip is
  // sidecar-attached on every remember/forget write — transparency + the door
  // in one tap). Returns null: the chip keeps its label for re-taps.
  open_memory: () => (openMemoryPanel(activeId), null),
  // Connected-service op: the tap IS the consent (a write chip's label carries
  // the manifest's confirm line). Lock the chip immediately so a double-tap
  // can't run the op twice; the run is async and its outcome lands as a private
  // notice in the thread the chip was tapped in.
  service_op: (a) => {
    const threadId = activeId;
    requestOp(a.service, a.op, a.args, a.access, 120000, "chip").then((res) =>
      // On failure: a plain-words line with the raw error QUOTED under it
      // (never dumped into the prose), and the bot follows up in-thread with
      // an explanation (the src:"chip" tag).
      appendNotice(
        threadId,
        res.ok ? { text: summarizeOpResult(a, res) } : { text: "That didn't work.", quote: res.error }
      )
    );
    return a.access === "write" ? "Confirmed ✓" : "Requested ✓";
  },
  // Run a slash command on THIS device — the tap is the permission ("add that
  // reminder"), and the command runs exactly where the member's apps live, so
  // /remind's time phrases parse in THEIR timezone. APP commands only: a bot
  // command or unknown verb is refused at the tap (parseCommand must resolve
  // to an owning app), and the app's own private reply ("I'll remind you…")
  // is the confirmation, rendered where the chip was tapped.
  run_command: (a) => {
    const threadId = activeId;
    const cmd = parseCommand(a.command, threadId);
    if (!cmd || !cmd.app) return "Not available here";
    runCommand(a.command, threadId, (r) => appendNotice(threadId, r));
    return "Done ✓";
  },
  // Research session: the tap consents to a short READ-ONLY look across the
  // named connected services; the bot's answer arrives as a normal reply in
  // this thread, so success needs no notice — only a failure to start does.
  service_research: (a) => {
    const threadId = activeId;
    requestResearch(a.services, a.goal).then((res) => {
      if (!res.ok) appendNotice(threadId, { text: "That didn't work.", quote: res.error });
    });
    return "Looking ✓";
  },
};

// A small, safe line for a completed service op. res.data can be a large JSON
// string from the provider — surface at most a name/id from it, never dump it.
function summarizeOpResult(a, res) {
  let text = `Done — ${a.op} on ${a.service} succeeded.`;
  if (typeof res.data === "string" && res.data) {
    try {
      const parsed = JSON.parse(res.data);
      const d = parsed && parsed.data ? parsed.data : parsed;
      const v = d && !Array.isArray(d) && (d.name || d.title || d.id);
      if (typeof v === "string" || typeof v === "number") text += ` (${String(v).slice(0, 200)})`;
      if (Array.isArray(d)) text = `Done — ${a.op} on ${a.service} returned ${d.length} item${d.length === 1 ? "" : "s"}.`;
    } catch {}
  }
  return text;
}
const chipLabel = (a) =>
  a.label ||
  {
    set_theme: `Switch to ${(THEME_META[a.theme] || {}).name || a.theme}`,
    set_appearance: { light: "Switch to light", dark: "Switch to dark", system: "Follow my device" }[a.appearance],
    open_theme_picker: "Open theme picker",
    open_profile: "Edit my profile",
    open_tutorial: "Take the tour",
    open_thread: "Open the chat",
    open_view: "Open the view",
    open_memory: "See what I remember",
    service_op: `Run ${a.op} on ${a.service}`,
    service_research: `Look at ${(a.services || []).join(" & ")} (read-only)`,
    // The command IS the label (ui.js strips any free label) — a run_command
    // chip can never claim one thing and run another.
    run_command: a.command,
  }[a.type];

function buildActionChips(actions) {
  const row = document.createElement("div");
  row.className = "chip-row";
  for (const a of actions) {
    const b = document.createElement("button");
    b.className = "action-chip";
    b.textContent = chipLabel(a);
    b.onclick = () => {
      const done = CHIP_RUNNERS[a.type](a);
      if (done) {
        b.textContent = done; // applied in place — show it stuck
        b.disabled = true;
      }
    };
    row.appendChild(b);
  }
  return row;
}

// Theme picker sheet (kebab → Theme): an appearance segmented control + a grid
// of colour swatches. Both apply live and persist; nothing leaves the browser.
function showThemePicker() {
  const backdrop = modal();
  const card = backdrop.querySelector(".sheet");

  const h = document.createElement("h2");
  h.textContent = "Theme";
  card.appendChild(h);

  const apLabel = document.createElement("label");
  apLabel.className = "field-label";
  apLabel.textContent = "Appearance";
  card.appendChild(apLabel);

  const seg = document.createElement("div");
  seg.className = "appearance-seg";
  const appBtns = {};
  for (const [val, lab] of [
    ["light", "Light"],
    ["system", "System"],
    ["dark", "Dark"],
  ]) {
    const b = document.createElement("button");
    b.type = "button";
    b.textContent = lab;
    b.setAttribute("aria-pressed", String(currentAppearance() === val));
    b.onclick = () => {
      setAppearance(val);
      for (const [v, el] of Object.entries(appBtns)) el.setAttribute("aria-pressed", String(v === val));
    };
    appBtns[val] = b;
    seg.appendChild(b);
  }
  card.appendChild(seg);

  const thLabel = document.createElement("label");
  thLabel.className = "field-label";
  thLabel.textContent = "Scheme";
  thLabel.style.marginTop = "14px";
  card.appendChild(thLabel);

  const grid = document.createElement("div");
  grid.className = "theme-grid";
  const swatches = {};
  for (const id of THEME_ORDER) {
    const b = document.createElement("button");
    b.type = "button";
    b.className = "theme-swatch" + (currentTheme() === id ? " active" : "");
    const disc = document.createElement("span");
    disc.className = "disc";
    disc.style.background = THEME_META[id].disc;
    const nm = document.createElement("span");
    nm.textContent = THEME_META[id].name;
    b.appendChild(disc);
    b.appendChild(nm);
    b.onclick = () => {
      setTheme(id);
      for (const [v, el] of Object.entries(swatches)) el.classList.toggle("active", v === id);
    };
    swatches[id] = b;
    grid.appendChild(b);
  }
  card.appendChild(grid);

  // Text size (desktop only — touch follows the system setting): the iMessage
  // slider, A…A over the sizes in ui.js. Applies live so the feed behind the
  // sheet previews the choice.
  if (!isCoarse) {
    const tsLabel = document.createElement("label");
    tsLabel.className = "field-label";
    tsLabel.textContent = "Text size";
    tsLabel.style.marginTop = "14px";
    card.appendChild(tsLabel);

    const row = document.createElement("div");
    row.className = "text-size-row";
    const small = document.createElement("span");
    small.className = "text-size-a small";
    small.textContent = "A";
    const slider = document.createElement("input");
    slider.type = "range";
    slider.min = "0";
    slider.max = String(TEXT_SIZES.length - 1);
    slider.step = "1";
    slider.value = String(TEXT_SIZES.indexOf(currentTextSize()));
    slider.setAttribute("aria-label", "Text size");
    slider.oninput = () => setTextSize(TEXT_SIZES[+slider.value]);
    const big = document.createElement("span");
    big.className = "text-size-a big";
    big.textContent = "A";
    row.append(small, slider, big);
    card.appendChild(row);
  }

  // Composer preferences (#531): "Format as you type" applies live to every
  // mounted composer; "Classic composer" (the plain-textarea escape hatch)
  // takes effect on the next thread open — reopening the current one here so
  // the choice is visible immediately.
  const composerLabel = document.createElement("label");
  composerLabel.className = "field-label";
  composerLabel.textContent = "Composer";
  composerLabel.style.marginTop = "14px";
  card.appendChild(composerLabel);
  const toggleRow = (labelText, checked, onchange, hintText) => {
    const row = document.createElement("label");
    row.className = "composer-pref-row";
    const box = document.createElement("input");
    box.type = "checkbox";
    box.checked = checked;
    box.onchange = () => onchange(box.checked);
    const txt = document.createElement("span");
    txt.textContent = labelText;
    row.append(box, txt);
    card.appendChild(row);
    if (hintText) {
      const hint = document.createElement("div");
      hint.className = "composer-pref-hint";
      hint.textContent = hintText; // literal markers on purpose — the hint teaches the syntax
      card.appendChild(hint);
    }
    return row;
  };
  toggleRow(
    "Convert common Markdown formatting as you type",
    formatAsYouTypePref(),
    (on) => setFormatAsYouType(on),
    "e.g. **bold**, *italic* (or _italic_) and ~strikethrough~",
  );
  toggleRow("Classic plain-text composer", classicComposerPref(), (on) => {
    setClassicComposer(on);
    // Remount the open thread's pane so the switch is immediate. Parked panes
    // rebuild on their next open (appPaneCache entries are dropped).
    for (const k of Object.keys(appPaneCache)) delete appPaneCache[k];
    const active = localStorage.getItem(ACTIVE_KEY);
    if (active && typeof openThreadById === "function") openThreadById(active);
  });

  const foot = document.createElement("div");
  foot.className = "sheet-foot";
  const done = document.createElement("button");
  done.textContent = "Done";
  done.onclick = () => backdrop.remove();
  foot.appendChild(done);
  card.appendChild(foot);
}

const preMountStaged = []; // native-staged files awaiting the chat app's composer (flushed by registerNative)
const blobURLs = {}; // blob id -> decrypted object URL (cache)

// ---- sealed branding (docs/no-plaintext.md) -------------------------------
// On a sealed instance the space's name/description/photo/admin identity live
// in one server-held ciphertext blob, opened with the link-carried branding
// key B. Members hold B here (localStorage after a link or an instance-key
// unwrap); every minted invite link carries it in the #fragment.
let brandingSalt = ""; // PBKDF2 salt for deriving from B (not secret)
let serverBrandingSealed = false;

// bootstrapBranding: after keys are up, learn whether this instance is sealed
// and open the blob. B comes from localStorage (a link stashed it), else from
// the copy sealed under the instance key — so members never re-visit a link.
async function bootstrapBranding() {
  let g;
  try {
    g = await (await fetch(`/api/group?token=${encodeURIComponent(session.token)}`)).json();
  } catch {
    return;
  }
  if (!g) return;
  // The space's chosen name + photo also brand the sidebar's space rows (the
  // space band names each copy after the space — spaceRowTitle — and its tile
  // wears the space photo). Stash them here in the unsealed case; the sealed
  // path below stashes from the opened blob instead. name_set separates a
  // chosen name from the compiled-in default: a default never brands a row.
  if (!g.sealed) {
    if (g.name_set && g.name) spaceBrandName = g.name;
    if (g.avatar) spaceAvatarSrc = "/api/server-avatar";
    return;
  }
  if (!g.branding_blob) return;
  serverBrandingSealed = true;
  brandingSalt = g.branding_salt || "";
  try {
    setBrandingB(localStorage.getItem("lchat_branding_b") || null);
  } catch {}
  if (!brandingB && g.branding_key_sealed && instanceKey) {
    try {
      const opened = await decrypt(instanceKey, g.branding_key_sealed);
      if (opened && opened.b) {
        setBrandingB(opened.b);
        try {
          localStorage.setItem("lchat_branding_b", brandingB);
        } catch {}
      }
    } catch {}
  }
  if (!brandingB) return;
  try {
    const bKey = await deriveBrandingKey(brandingB, brandingSalt);
    setSealedBranding(await decrypt(bKey, g.branding_blob));
  } catch {
    // Stale cached B — an unseal→re-seal mints a fresh key, and a device
    // still holding the old one would otherwise render generic forever (and
    // an admin device couldn't edit or unseal). The instance-key copy always
    // holds the CURRENT B: fall back to it and repair the cache.
    setSealedBranding(null);
    if (g.branding_key_sealed && instanceKey) {
      try {
        const opened = await decrypt(instanceKey, g.branding_key_sealed);
        if (opened && opened.b && opened.b !== brandingB) {
          setBrandingB(opened.b);
          try {
            localStorage.setItem("lchat_branding_b", brandingB);
          } catch {}
          const bKey = await deriveBrandingKey(brandingB, brandingSalt);
          setSealedBranding(await decrypt(bKey, g.branding_blob));
        }
      } catch {
        setSealedBranding(null); // still undecryptable — surfaces stay generic
      }
    }
  }
  if (sealedBranding && sealedBranding.name) document.title = sealedBranding.name;
  paintSpaceName();
  // The sealed counterparts of the plaintext stash above (the space band's
  // name + photo). The seal captured whatever name the space had, chosen or
  // not, so there's no name_set gate to apply here.
  if (sealedBranding) {
    if (sealedBranding.name) spaceBrandName = sealedBranding.name;
    spaceAvatarSrc = (await sealedServerAvatarURL()) || "";
  }
}

// paintSpaceName: the sidebar heading IS the space's name (it ellipsizes, so
// the sidebar width never depends on it). document.title is the one source of
// the name on this page (served substituted, corrected at runtime when sealed
// branding decrypts), so the heading just mirrors it — call after every
// document.title update.
function paintSpaceName() {
  const el = document.getElementById("side-space-name");
  if (el) el.textContent = document.title;
}

// The space's display name + photo, stashed by bootstrapBranding for the
// sidebar's space rows (before the space thread ever loads, so the band never
// paints generic first). Empty = unbranded: spaceRowTitle falls back to
// "Space <app>", the tile to the plain glyph.
let spaceBrandName = "";
let spaceAvatarSrc = "";

// resealBranding: the sealed counterpart of saveGroupSettings — merge the
// patch into the decrypted set, re-encrypt, and store. The plaintext setters
// 409 while sealed, so every edit routes through here.
async function resealBranding(patch) {
  if (!serverBrandingSealed || !sealedBranding || !brandingB || !instanceKey) return "error";
  // Mirror the plaintext setter's 1–60 rule — the server can't see inside the
  // blob to enforce it, so the sealed path validates here.
  if (patch.name !== undefined && (!patch.name.trim() || patch.name.length > 60)) return "invalid";
  const next = { ...sealedBranding, ...patch };
  try {
    const bKey = await deriveBrandingKey(brandingB, brandingSalt);
    const body = {
      branding_blob: await encrypt(bKey, next),
      branding_salt: brandingSalt,
      branding_key_sealed: await encrypt(instanceKey, { b: brandingB }),
    };
    const r = await fetch("/api/admin/branding/seal", {
      method: "POST",
      headers: { Authorization: "Bearer " + session.token, "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    if (r.ok) {
      setSealedBranding(next);
      if (next.name) {
        document.title = next.name;
        paintSpaceName();
      }
    }
    return r.ok ? "ok" : r.status === 400 ? "invalid" : "error";
  } catch {
    return "error";
  }
}

// sealServerPhoto: change the space photo while sealed — the plaintext upload
// endpoint 409s (deliberately), so the new bytes are encrypted under the
// branding key and ride a re-seal (which also carries the new mime + alt
// inside the blob). The sealed counterpart of pickServerPhoto's POST.
async function sealServerPhoto(bytes, mime, alt) {
  if (!serverBrandingSealed || !sealedBranding || !brandingB || !instanceKey) return false;
  try {
    const bKey = await deriveBrandingKey(brandingB, brandingSalt);
    const next = { ...sealedBranding, avatar_mime: mime || "image/jpeg" };
    if (alt !== undefined) next.avatar_alt = alt || "";
    const r = await fetch("/api/admin/branding/seal", {
      method: "POST",
      headers: { Authorization: "Bearer " + session.token, "Content-Type": "application/json" },
      body: JSON.stringify({
        branding_blob: await encrypt(bKey, next),
        branding_salt: brandingSalt,
        branding_key_sealed: await encrypt(instanceKey, { b: brandingB }),
        avatar_sealed: bytesToB64url(await encryptBytes(bKey, bytes)),
      }),
    });
    if (r.ok) sealedBranding = next;
    return r.ok;
  } catch {
    return false;
  }
}

// sealedServerAvatarURL: a displayable URL for the space photo when sealed —
// /api/server-avatar serves ciphertext, so fetch + decrypt to an object URL.
// Returns null when there's no photo or no key to open it.
async function sealedServerAvatarURL() {
  if (!serverBrandingSealed || !sealedBranding || !brandingB) return null;
  try {
    const resp = await fetch("/api/server-avatar");
    if (!resp.ok) return null;
    const bKey = await deriveBrandingKey(brandingB, brandingSalt);
    const photo = await decryptBytes(bKey, b64urlToBytes(await resp.text()));
    return URL.createObjectURL(new Blob([photo], { type: sealedBranding.avatar_mime || "image/jpeg" }));
  } catch {
    return null;
  }
}

// sealBrandingNow: flip this instance to sealed branding. Mints B, gathers the
// current plaintext set (including the photo bytes, re-encrypted under B),
// stores the blob + the instance-key-sealed copy of B, and the server clears
// every plaintext counterpart in the same request. Admin-gated server-side.
async function sealBrandingNow() {
  if (!instanceKey) return "error";
  try {
    const g = await (await fetch(`/api/group?token=${encodeURIComponent(session.token)}`)).json();
    if (g.sealed) return "ok";
    const b = mintBrandingKey();
    const salt = bytesToB64url(crypto.getRandomValues(new Uint8Array(16)));
    const bKey = await deriveBrandingKey(b, salt);
    const branding = {
      name: g.name || "",
      description: g.description || "",
      admin_name: g.admin_name || "",
      admin_email: g.admin_email || "",
      avatar_alt: g.avatar_alt || "",
      avatar_mime: "",
    };
    const body = {
      branding_salt: salt,
      branding_key_sealed: await encrypt(instanceKey, { b }),
    };
    if (g.avatar) {
      // The photo must ride the seal: the server clears a plaintext photo it
      // gets no sealed replacement for (it must never serve readable bytes
      // behind the sealed flag). So a failed fetch aborts — nothing has been
      // written yet, and the admin just retries.
      const resp = await fetch("/api/server-avatar");
      if (!resp.ok) return "error";
      branding.avatar_mime = resp.headers.get("Content-Type") || "image/jpeg";
      const bytes = new Uint8Array(await resp.arrayBuffer());
      body.avatar_sealed = bytesToB64url(await encryptBytes(bKey, bytes));
    }
    body.branding_blob = await encrypt(bKey, branding);
    const r = await fetch("/api/admin/branding/seal", {
      method: "POST",
      headers: { Authorization: "Bearer " + session.token, "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    if (!r.ok) return r.status === 409 ? "ok" : "error";
    setBrandingB(b);
    brandingSalt = salt;
    setSealedBranding(branding);
    serverBrandingSealed = true;
    try {
      localStorage.setItem("lchat_branding_b", b);
    } catch {}
    return "ok";
  } catch {
    return "error";
  }
}

// unsealBrandingNow: back to plaintext branding — the server can't decrypt, so
// we hand it the values we just decrypted. The sealed photo is cleared
// server-side (its bytes are useless in plaintext mode); the admin re-uploads.
async function unsealBrandingNow() {
  if (!serverBrandingSealed || !sealedBranding) return "error";
  try {
    const r = await fetch("/api/admin/branding/unseal", {
      method: "POST",
      headers: { Authorization: "Bearer " + session.token, "Content-Type": "application/json" },
      body: JSON.stringify({
        name: sealedBranding.name || "",
        description: sealedBranding.description || "",
        admin_name: sealedBranding.admin_name || "",
        admin_email: sealedBranding.admin_email || "",
        avatar_alt: sealedBranding.avatar_alt || "",
      }),
    });
    if (!r.ok) return "error";
    serverBrandingSealed = false;
    setSealedBranding(null);
    setBrandingB(null);
    try {
      localStorage.removeItem("lchat_branding_b");
    } catch {}
    return "ok";
  } catch {
    return "error";
  }
}
// Tiers — "access levels" in every UI surface: admin-curated member sets,
// each with its own key on the instance-key pattern (docs/community-and-tiers.md).

// The fixed reaction set (mirrors allowedReactions in hub.go).
const REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🎉"];
const EDIT_WINDOW_MS = 15 * 60 * 1000; // mirrors editWindow (hub.go); server enforces it

// Open a burst with a centered time separator when consecutive messages are more
// than this far apart (or land on a different day), rather than stamping each one.
// An exact per-message time is still available on hover (desktop).
const TIME_SEPARATOR_GAP_MS = 15 * 60 * 1000;

// The UI icon set (web/static/icons.js — Lucide idiom, docs/icons.md).
import { ICON_REPLY, ICON_THREAD, ICON_FOLD_IN, ICON_X, ICON_EDIT, ICON_REACT, ICON_TRASH, ICON_PLAY, ICON_PIN, ICON_MUTE, ICON_REPORT, ICON_COPY, ICON_LINK, ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_MORE_VERTICAL, ICON_BRAIN, ICON_WRENCH } from "/static/icons.js";


const app = document.getElementById("app");
// The native shell (iOS/macOS) injects window.__lchatEmbed at documentStart with
// everything needed to render ONE thread: {token, name, myUserId, threadId,
// threadKey, instanceKey?}. In embed mode we render just that thread's feed — the
// app draws its own sidebar, title bar and composer. The user *private* key is
// never handed to the webview: native unwraps the thread key and passes only it,
// so a single thread's page can't reach any other thread's content.
setSession(embed ? { token: embed.token, name: embed.name } : loadSession());

// Post a message back to the native shell's "lchat" handler (no-op in a browser).
function nativePost(msg) {
  try {
    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.lchat) {
      window.webkit.messageHandlers.lchat.postMessage(msg);
    }
  } catch {}
}
// Surface a problem to the user. In the webview an alert() would freeze the page
// (a modal dialog blocks the native message channel), so route errors to the shell.
function notifyError(msg) {
  if (embed) nativePost({ error: msg });
  else alert(msg);
}

// Native dropdown menus (macOS app only). The Mac shell registers an "lchatMenu"
// handler; when present, a kebab renders as a real NSMenu instead of the in-page
// HTML menu. We mirror the live DOM menu — each visible .menu-item becomes a
// native item — and picking one just .click()s the real button, so there's a
// single source of truth for what every option does and says.
const nativeMenu =
  (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.lchatMenu) || null;
let nativeMenuSeq = 0;
const nativeMenuPending = new Set();

// Pop up `menuEl`'s items as a native menu, anchored under `anchorEl`. Skips
// items the web layer has hidden — inline display:none (group-only entries,
// the notifications toggle where push is unusable) or the `hidden` attribute
// (Open in the app, Upgrade) — so the native menu matches exactly what the
// HTML one would show. Missing the `hidden` half of this used to leak
// Upgrade into the native NSMenu, which the caller deliberately keeps out of
// native for App Store rules (see the Upgrade wiring below).
function openNativeMenu(menuEl, anchorEl) {
  const items = [...menuEl.querySelectorAll(".menu-item")]
    .filter((el) => el.style.display !== "none" && !el.hidden)
    .map((el) => ({ id: el.id, label: el.textContent.trim(), danger: el.classList.contains("danger") }));
  if (!items.length) return;
  const token = ++nativeMenuSeq;
  nativeMenuPending.add(token);
  const r = anchorEl.getBoundingClientRect();
  nativeMenu.postMessage({ token, items, anchor: { x: r.left, y: r.top, w: r.width, h: r.height } });
}

// Called by the Mac shell after the user picks an item (id) or dismisses the
// menu (id null). Clicking the real button runs the identical handler the HTML
// item would have. Idempotent: an unknown/spent token is ignored.
window.__lchatMenuPick = (token, id) => {
  if (!nativeMenuPending.delete(token) || !id) return;
  const item = document.getElementById(id);
  if (item) item.click();
};

// App state.
// A thread's chosen VIEW. "chat" (a DM-style conversation) is always the default
// view; an app-thread also offers the "interface" view (its interactive UI). More
// views (custom, per-thread) are planned — a view dropdown, not just this toggle.
// Sticks per thread for the session. Only meaningful when threadApp[id] is set.
const appThreadView = {}; // thread id -> "chat" | "interface"
// For a GROUP chat with apps added (see groupAppsFor): which added app its
// Interface pane shows. Sticks per thread for the session, like appThreadView.
const groupAppView = {}; // thread id -> app name
const threadPreview = {}; // thread id -> last-message snippet
// The decrypted payload each snippet came from, so previews can re-derive when
// names arrive/change (boot computes them before labels + nicknames decrypt).
const previewPayload = {};
// Pending-invite links, keyed by the (pending DM) thread id. Only known in the
// session that minted them — the secret never reaches the server, so it can't be
// recovered after a reload (the pending chat offers "re-send" to mint a fresh one).
const inviteLinks = {};
// thread id -> read watermark (the newest message time we've read, in server
// seconds). Synced from the server so "read on one device" clears the dot on
// the others; advanced locally first so the UI never waits on the POST.
const readMarks = {};
let chatFilter = ""; // lowercased substring filtering the thread list (search box)
// The funnel menu beside search: online-only plus category checkboxes. All
// categories on + online off = the unfiltered default (funnel unhighlighted).
const chatFilters = { online: false, people: true, bots: true, apps: true };
let everConnected = false; // has the socket ever opened? (distinguishes reconnect from first connect)
let wsConnected = false; // is the socket open right now? (gates the send button while reconnecting)
let pingTimer = null; // keepalive ping interval while the socket is open
let reconnectStatusTimer = null; // delays the "Reconnecting…" pill past a brief blip

// Custom-app import race: this const must initialize BEFORE route() below runs
// boot() synchronously, or loadCustomApps hits its own const in the temporal
// dead zone and every custom app silently skips on a same-tick boot.
const CUSTOM_APPS_TIMEOUT_MS = 4000;

// The boot loading scene (smoke, dust, and an unseen meter climbing to
// eleven) lives in bootscene.js — boot() starts it, hideLoading() finishes it.
// Paths that never start it (embed, signed-out, A2HS) get 0 back and just fade.

// If we've just returned from the home server's /restore page, adopt the
// recovered session before routing (checkRestoreReturn writes it to storage).
// Otherwise route straight away — the extra tick only happens on a real return.
if (!embed && !session && location.hash.includes("lchat_restore=")) {
  checkRestoreReturn().then((restored) => {
    if (restored) setSession(loadSession());
    route();
  });
} else {
  route();
}

function consumeAutoRestoreMarker() {
  const clean = new URL(location.href);
  clean.searchParams.delete("restore");
  history.replaceState(null, "", clean.pathname + clean.search + clean.hash);
}

function route() {
  if (embed) return bootEmbed();
  if (!session) return showNoInvite();
  // An already-signed-in space needs no handoff, but still consumes home's
  // one-shot marker so signing out later cannot unexpectedly trigger one.
  if (autoRestoreRequested(location.search)) consumeAutoRestoreMarker();
  if (needsHomeScreen() && localStorage.getItem("lchat_a2hs") !== "done") {
    return showA2HS(boot);
  }
  boot();
}

// Custom apps: modules the server sideloads (LCHAT_APPS_DIR) register through
// the same defineApp() the compiled-in apps use — the /api/apps manifest lists
// them and each is dynamic-imported here, BEFORE the first render, so
// registration (typeOwner, personalApps) is complete when folding starts. A
// broken or slow custom app must never block or white-screen boot: every
// import failure is contained to a console.error, and the whole phase races a
// short timeout so boot proceeds regardless. (Its timeout const is declared up
// by route()'s invocation — see the TDZ note there.)
async function loadCustomApps() {
  try {
    const load = (async () => {
      const r = await fetch("/api/apps");
      if (!r.ok) return;
      const { apps } = await r.json();
      await Promise.all(
        (apps || []).map((a) =>
          import(a.url).catch((e) => console.error(`custom app "${a.name}" failed to load:`, e)),
        ),
      );
    })();
    await Promise.race([load, new Promise((res) => setTimeout(res, CUSTOM_APPS_TIMEOUT_MS))]);
  } catch (e) {
    console.error("custom apps skipped:", e);
  }
}

// Member-built apps (sandbox.js): fetch + decrypt + register the sandboxed
// proxies. Time-boxed like loadCustomApps — registration is a boot dependency
// (thread rendering + live folds need the proxies), but a slow fetch must
// never hold the whole app hostage. No-op until the instance key is here.
// Give the sandbox host what it needs from the shell: seed an app-thread's
// snapshot before an off-thread command runs (so the frame's getState is
// accurate), and repaint surfaces after companion chat projections fold in.
setMemberSeeder(seedAppState);
setSurfaceRefresh((tid) => {
  if (tid === activeId) renderActiveSurfaces();
});
// App Studio's privileged context: the token + instance key it needs to
// encrypt/deploy member apps, plus the openers its place-aware "Open" button
// routes through (appOpenPlan in ui.js). An accessor, so it always reads the
// live instance key (which arrives after boot).
setMemberAdmin(() => ({
  token: session.token,
  instanceKey,
  uid: myUserId,
  name: session.name,
  // In a native embed this page IS one thread's pane — navigating it here
  // would render the app inside App Studio's own window. Flagged so the
  // studio offers only what works, and openApp hands the gesture to the
  // native shell instead ({openAppThread}), which opens — or creates — the
  // app's thread as its own native surface.
  embedded: !!embed,
  openApp: async (name) => {
    if (embed) {
      nativePost({ openAppThread: { app: name, title: (appByName(name) || {}).title || name } });
      return;
    }
    const id = await resolveAppThread(name);
    if (id) openThread(id);
  },
  // The group chats this member could add an app to (the studio's "which
  // group?" picker). Groups whose key hasn't arrived can't take the install
  // event yet, so they're left out rather than offered and failed.
  groups: () =>
    threads
      .filter((t) => t.kind === "group" && threadKeys[t.id])
      .map((t) => ({ id: t.id, title: threadName[t.id] || "Group" })),
  // Add a shared copy to a group chat and land there — the same groupapps.add
  // every Apps sheet emits, so the add is an event in the group's own log.
  openAppInGroup: async (name, tid) => {
    const app = appByName(name);
    if (!app || !threadKeys[tid]) return false;
    if (!(await installGroupApp(tid, app))) return false;
    openThread(tid);
    return true;
  },
  // Open the space-wide copy (its sidebar home), installing it first when it
  // isn't there yet. installSpaceApp enforces the install policy — false
  // means "admins only" here, and the studio says so instead of half-opening.
  openAppForSpace: async (name) => {
    const app = appByName(name);
    if (!app || !app.render) return false;
    if (!spaceAppsFor().some((a) => a.name === name) && !(await installSpaceApp(app))) return false;
    openSpaceApp(name);
    return true;
  },
}));

async function loadMemberAppsNow() {
  try {
    const load = loadMemberApps({
      token: session.token,
      instanceKey,
      authorName: (uid) => {
        const l = rosterLabel(uid);
        return l === "Someone" ? "" : l;
      },
    });
    await Promise.race([load, new Promise((res) => setTimeout(res, CUSTOM_APPS_TIMEOUT_MS))]);
  } catch (e) {
    console.error("member apps skipped:", e);
  }
}

// ---- the space thread: space-wide apps (docs/space-apps.md) ----------------
// One hidden, all-members thread backs every "installed for everyone" app: the
// installs registry and each installed app's shared instance fold from ITS
// encrypted log. The thread never appears in /api/threads (no membership rows
// — membership is implicit server-side) and has no chat surface at all: each
// space app surfaces as its own SIDEBAR ROW (the space band, renderThreadList)
// opening the app full-pane — place = location, so the space's copies never
// ride other chats' widget bars. Its key rides open_key — encrypted under the
// instance key, like an open group's — so this no-ops until the instance key
// arrives (onInstanceKeyReady retries).
let spaceThreadId = null;
let spaceAppOpen = null; // the space app rendered full-pane (while activeId === spaceThreadId)
const spaceAppPreview = {}; // appName → last activity line, for its sidebar row
const spaceAppUnread = {}; // appName → unseen activity (local, like the rows it badges)

// loadSpaceThread fetches + unwraps the space thread and folds its state
// (registry + every space app), so command routing and the sidebar's space
// band see the installs. Safe to call repeatedly — re-seeding + catch-up
// converge.
async function loadSpaceThread() {
  // Embeds included, when the native shell seeded the instance key (the
  // phase-4 lift, docs/native-apps.md): a command host that knows the space
  // thread routes space-installed apps' commands correctly — /gif works
  // natively where installed. Without the key (not granted, or an old
  // native shell), the bail stands and space commands answer "isn't
  // available here yet", exactly as before.
  if (!instanceKey) return;
  try {
    const r = await (await fetch(`/api/space-thread?token=${encodeURIComponent(session.token)}`)).json();
    if (!r.id || !r.open_key) return; // no space installs yet
    if (!threadKeys[r.id]) {
      const b64 = (await decrypt(instanceKey, r.open_key)).k;
      threadKeys[r.id] = await importKey(b64);
      threadKeyB64[r.id] = b64;
    }
    spaceThreadId = r.id;
    await seedAppState(r.id, { full: true }); // snapshot + catch-up → installs + app states
    renderThreadList(); // the space band reflects the installs
    renderSpaceAppPane(); // a reconnect while the space home is open repaints it
  } catch (e) {
    console.error("space thread skipped:", e);
  }
}

// resolveSpaceThread finds-or-creates the space thread — the first space-wide
// install creates it: mint a fresh AES key, wrap it under the instance key
// (the server can't open it), and POST. A racing creator wins harmlessly: the
// server returns the stored row and we unwrap THEIR key. In-flight guard like
// resolveAppThread, so a double-tap can't post twice.
let spaceThreadCreating = null;
function resolveSpaceThread() {
  if (spaceThreadId) return Promise.resolve(spaceThreadId);
  if (!instanceKey) return Promise.resolve(null); // keys still syncing — callers answer honestly
  if (!spaceThreadCreating) {
    spaceThreadCreating = (async () => {
      try {
        const { b64 } = await generateKey();
        const open_key = await encrypt(instanceKey, { k: b64 });
        const r = await (
          await fetch("/api/space-thread", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ token: session.token, open_key }),
          })
        ).json();
        if (!r.id || !r.open_key) return null;
        // The STORED open_key is authoritative (a racing creator's key, when we
        // lost) — never assume our candidate key was the one that stuck.
        const stored = (await decrypt(instanceKey, r.open_key)).k;
        threadKeys[r.id] = await importKey(stored);
        threadKeyB64[r.id] = stored;
        spaceThreadId = r.id;
        await seedAppState(r.id, { full: true });
        return r.id;
      } catch (e) {
        console.error("space thread create failed:", e);
        return null;
      } finally {
        spaceThreadCreating = null;
      }
    })();
  }
  return spaceThreadCreating;
}
setSpaceThread(() => spaceThreadId);
setSpaceThreadResolver(resolveSpaceThread);
// The space-install policy (docs/space-apps.md § controls): a plaintext admin
// setting — served as page meta, default "everyone" — plus roster roles. Read
// fresh on every call: roles and the roster move under a live session. Note
// the raw meta read (not gateMeta): this flag defaults OFF.
setSpaceInstallPolicy(() => {
  const adminsOnly = ((document.querySelector('meta[name="space-installs-admins"]') || {}).content || "0") === "1";
  const roleOf = (uid) => ((roster || []).find((e) => e.user_id === uid) || {}).role || "";
  return {
    adminsOnly,
    canInstall: !adminsOnly || roleOf(myUserId) === "admin",
    adderOK: (uid) => roleOf(uid) === "admin",
  };
});

// ---- local-store boot cache (#457) ----------------------------------------
// The raw server responses the last boot saw, cloned at fetch time (before any
// apply-side decryption touches them) and persisted as one snapshot. On the
// next load, hydrateFromCache() replays them through the same apply pipeline —
// instant paint, zero network — then the real fetches reconcile.
const bootRaw = { threads: null, roster: null, nick: null, tiers: null, instance: null };
// Cache the raw tier rows into the boot store (billingui calls this via the
// verbs seam — the store cache is shell's, not billing's).
function cacheTiersRaw(rows) {
  bootRaw.tiers = structuredClone(rows);
  scheduleStoreSnapshot();
}
let cachePainted = false; // a cached paint happened; network failures must not blank it
let snapTimer = null;
function scheduleStoreSnapshot() {
  if (embed || !bootRaw.threads || !bootRaw.roster) return;
  clearTimeout(snapTimer);
  snapTimer = setTimeout(() => {
    storePutSnapshot({
      v: SNAP_VERSION,
      ts: Date.now(),
      // Bind the snapshot to this session's identity: a claim flow can replace
      // lchat_session without a sign-out (add-device, paste-to-join), and the
      // next boot must not hydrate the previous person's cache.
      owner: session.userPub || "",
      threads: bootRaw.threads,
      roster: bootRaw.roster,
      nick: bootRaw.nick,
      tiers: bootRaw.tiers,
      instance: bootRaw.instance,
    }).catch(() => {});
  }, 1500);
}

// Paint the whole app from the cached snapshot: same apply pipeline, no
// network. Returns true when the shell painted (the boot scene then stays
// down and the reveal has already happened). Any failure means "no cache" —
// boot proceeds exactly as it always has.
async function hydrateFromCache() {
  if (embed) return false;
  let snap = null;
  try {
    snap = await storeGetSnapshot();
  } catch {}
  if (!snapshotUsable(snap)) return false;
  // A different member's leftovers (session replaced by a claim flow, no
  // sign-out): their ciphertext is useless to this key anyway — wipe, don't
  // hydrate a cache that can only render undecryptable rows.
  if (snap.owner !== (session.userPub || "")) {
    wipeStore().catch(() => {});
    return false;
  }
  try {
    await applyRoster(snap.roster);
    if (snap.instance && snap.instance.wrapped) {
      try {
        const b64 = await unwrapThreadKey(snap.instance.wrapped, session.userPriv);
        setInstanceKey(await importKey(b64), b64);
      } catch {}
    }
    if (snap.nick) {
      const n = await applyNicknamesBody(snap.nick).catch(() => null);
      if (n) setNicknames(n);
    }
    if (Array.isArray(snap.tiers)) await applyTiers(snap.tiers, false);
    await applyThreads(snap.threads);
    await decryptRosterLabels();
    await recomputeThreadNames();
    const opened = renderApp(); // the initial thread's feed folds from the store
    connectWS(); // live frames flow into the cached paint immediately
    // A failed initial open (e.g. offline + a never-cached thread) still leaves
    // a usable shell — reveal rather than fall back to the boot scene.
    await Promise.resolve(opened).catch(() => {});
    cachePainted = true;
    hideLoading();
    return true;
  } catch (e) {
    console.error("hydrate from cache", e);
    return cachePainted;
  }
}

async function boot() {
  try {
    // An instant paint from the local snapshot, when one exists. The boot
    // scene is first-run theatre: it only shows when there's nothing to paint.
    const painted = await hydrateFromCache();
    if (!painted) startBootScene();
    if (navigator.storage && navigator.storage.persist) navigator.storage.persist().catch(() => {});
    await loadCustomApps();
    await ensurePubkey();
    // Role + first-run state, fetched in parallel with the heavy loads:
    // maybeStartSetup awaits it at the end, and on first run the loading cover
    // holds until Eleven's conversation is open (no flash of an empty home).
    // Time-boxed: a stalled /api/me must never hold the reveal hostage for
    // everyone — on timeout the app opens normally and setup retries next load.
    const mePromise = Promise.race([
      fetch(`/api/me?token=${encodeURIComponent(session.token)}`)
        .then((r) => r.json())
        .catch(() => null),
      new Promise((resolve) => setTimeout(() => resolve(null), 4000)),
    ]);
    await loadRoster();
    // Nicknames need only our own keypair (not the instance key), so they load
    // alongside — before thread titles are derived below. Time-boxed: a stalled
    // /api/nicknames must not hold the reveal hostage — on timeout the app
    // opens with published names, and repaints when the fetch finally lands
    // (the thread-list check skips the repaint when it landed pre-paint).
    const nickLoad = loadNicknames().then(() => {
      if (document.getElementById("thread-list")) refreshNamesUI();
    });
    // Muted people ride the same sealed-blob shape; a late arrival just means
    // a few bubbles unfold on the repaint that follows.
    loadModPrefs().then(() => {
      syncThreadKeysToSW();
      renderActiveSurfaces();
    });
    loadBlocks(); // the profile card's Block/Unblock state

    await Promise.all([setupInstanceKey(), loadThreads(), Promise.race([nickLoad, new Promise((res) => setTimeout(res, 3000))])]);
    await bootstrapBranding(); // sealed instances: open the branding blob (needs the instance key for first-time B)
    await loadTiers(); // before the re-fold: gated groups unwrap via tier keys
    // The loads race: when the thread list landed first, any open group (key
    // under the instance key or a tier key) was skipped — fold it in now.
    if (threads.some((t) => t.open_key && !threadKeys[t.id])) await loadThreads();
    // Member-built apps are sealed under the instance key, so they can only
    // register now (a late-arriving key retries from onInstanceKeyReady).
    // Before renderApp + connectWS on purpose: their threads and live events
    // need the proxies in the registry.
    await loadMemberAppsNow();
    // The space thread (space-wide apps) unwraps via the instance key too —
    // after the member apps, so their proxies exist before their space state
    // folds. Before connectWS, so live space events find the key in place.
    await loadSpaceThread();
    // Names are encrypted under the instance key, which is only ready now — decrypt
    // the roster and publish our own (new joiner, or migrating an old plaintext name).
    await decryptRosterLabels();
    await recomputeThreadNames(); // titles were cached (by loadThreads) before the key was ready
    syncThreadKeysToSW(); // and so were the SW's notification titles
    await publishMyLabel();
    if (!painted) {
      const opened = renderApp(); // paints the shell; opens the initial thread (async)
      connectWS();
      // Reveal only once the initial feed is loaded + scrolled — so the first
      // paint is the finished layout, not an empty feed that then jumps to the
      // bottom.
      await opened;
    } else {
      // The shell painted from the snapshot before these loads ran — refresh
      // its surfaces with server truth (folds dedupe; renders are idempotent).
      // No catch-up here: the cached open already reconciled the active feed
      // (openAppThreadView fires one on its cache path, and its network path
      // IS a fresh fetch) — a second identical fetch would be pure waste.
      renderThreadList();
      refreshNamesUI();
      // Member/custom apps register only in the loads above — a cached open of
      // one of their threads mounted BEFORE registration and drew nothing
      // (renderMiniApp on an unknown app is a no-op over a cleared pane).
      // An empty pane with an active thread is exactly that case: mount it
      // again now the registry is complete.
      const pane = document.getElementById("app-pane");
      if (activeId && pane && !pane.childNodes.length && renderAppFor(activeId)) {
        delete appPaneCache[activeId];
        await openAppThreadView(activeId, ++openSeq, renderAppFor(activeId), threadApp[activeId] || null);
      }
    }
    registerSW(session); // best-effort; subscribes if notifications already on
    startHeartbeat();
    // The backup banner is initialised inside maybeStartSetup (below): while the
    // setup conversation runs, backup messaging is Eleven's — one voice.
    // Tapping a notification while a tab is already open posts us the thread to
    // open (the SW can't navigate a live SPA) — jump straight to it.
    if (navigator.serviceWorker) {
      navigator.serviceWorker.addEventListener("message", (e) => {
        if (e.data && e.data.type === "open-thread" && e.data.thread) openThreadById(e.data.thread);
      });
    }
    // First-run: open the admin's setup conversation before the reveal, so the
    // first thing an admin ever sees IS the chat with Eleven (no-op otherwise).
    await maybeStartSetup(mePromise);
    // A freshly-joined member gets Eleven's welcome instead (mutually exclusive
    // with admin setup — a setup claim never sets the welcome marker).
    await maybeStartWelcome();
    // A tapped "Copy link" permalink (#l=, issue #893): resolve + jump last, so
    // it always wins over whatever thread the normal boot flow landed in.
    await openInitialMessageLink();
  } catch (e) {
    console.error(e);
    // A failed network boot over a successful cached paint is the OFFLINE case
    // working as designed — the app stays readable; never blank it.
    if (!cachePainted) {
      app.innerHTML =
        `<div class="center"><div class="card"><h1>Something went wrong</h1>` +
        `<p>Couldn't load your chats. Try reloading.</p></div></div>`;
    }
  } finally {
    hideLoading();
  }
}

// Fade out and remove the full-screen loading cover (shown until the app's first
// meaningful paint). Idempotent — safe to call from any entry path. The cover
// assembles in stages (bootscene.js), and the reveal waits out whatever it had
// time to show: a posed brand gets its beat, a quote its read, the full scene
// its punch to eleven.
function hideLoading() {
  const el = document.getElementById("app-loading");
  if (!el) return;
  const clicked = finishBootScene(); // the dwell the staged cover is owed — let it land
  setTimeout(() => {
    // cover-out, NOT the global .hidden — that's display:none !important and
    // would snap the cover off with no cross-fade.
    el.classList.add("cover-out");
    setTimeout(() => el.remove(), 400); // after the CSS fade (0.35s with .scene-out)
  }, clicked);
}

// Embed bootstrap: render a single thread's feed for the native shell. Skips the
// normal roster/instance/thread *unwrap* path (the webview has no user private key)
// — native already unwrapped this thread's key and handed it over. Everything past
// that (feed render, send, reactions, edits, typing, attachments) is reused as-is.
async function bootEmbed() {
  document.body.classList.add("native-embed");
  // Command-host pages collapse to just the panel (style.css .command-host
  // rules) — classed before the first render so the feed never flashes.
  if (embed.mode === "command") document.body.classList.add("command-host");
  try {
    setMyUserId(embed.myUserId || "");
    setCurrentUser(myUserId, session.name || "New member");
    // The instance key first (a local unwrap, no network): applyRoster can
    // then decrypt labels in its first pass, and member apps below never hit
    // their no-key no-op.
    if (embed.instanceKey) {
      try {
        setInstanceKey(await importKey(embed.instanceKey), embed.instanceKey);
      } catch {}
    }
    // The boot round-trips are independent of each other, so they run
    // together rather than as a waterfall — this pane is behind the native
    // loading veil, and every serialized fetch here holds the veil longer.
    // The native shell can land straight in a custom app's thread, so
    // registration must still be complete before the render below.
    const customAppsLoad = loadCustomApps();
    const rosterLoad = loadRoster(); // token-only; gives sender labels + profile photos
    // Thread objects for kind/members/name_blob, but only the active thread
    // has a key — the others can't be unwrapped here without the private key.
    const threadsLoad = fetch(`/api/threads?token=${encodeURIComponent(session.token)}`)
      .then((r) => r.json())
      .catch(() => ({}));
    // Per-viewer names (#577): the embed never holds userPriv, so it can't
    // open the nicknames blob — the native shell (which can) hands the
    // RESOLVED uid → name map over the bridge instead. Fold it in as
    // display-only overrides (seen = name: names render; the rename prompt
    // stays native chrome's job — updateRenameBanner bails in embeds).
    const applyEmbedNames = (map) => {
      for (const [uid, name] of Object.entries(map || {})) {
        if (name) nicknames[uid] = { name, seen: name };
      }
    };
    applyEmbedNames(embed.names);
    // The seed is baked at webview creation and parked webviews outlive a
    // rename — the native shell pushes fresh maps here after each fold.
    window.__lchatSetNames = (map) => applyEmbedNames(map);
    const tid = embed.threadId;
    threadKeyB64[tid] = embed.threadKey;
    threadKeys[tid] = await importKey(embed.threadKey);
    // Member apps read roster labels for their bylines, so they start once
    // the roster lands — still overlapping the custom-app phase, so the two
    // load timeouts run in the same window instead of back to back. The
    // native shell can land straight in a member app's thread too — the
    // sandboxed proxies must be registered before the render below.
    await rosterLoad;
    await Promise.all([customAppsLoad, loadMemberAppsNow()]);
    const r = await threadsLoad;
    setThreads(r.threads || []);
    if (!threads.find((t) => t.id === tid)) threads.push({ id: tid, kind: "dm", members: [] });
    threadName[tid] = await displayName(threads.find((t) => t.id === tid));
    // 🤖 The native shell can ask for a specific view — its companion split
    // renders chat NATIVELY and embeds this page purely as the app's
    // interface, so without this the pane would default to the chat view and
    // show a second, redundant web chat beside the native one. Chat-only apps
    // (the welcome conversation) have no Interface — the chat view stands.
    if (embed.view && threadApp[tid] && !appChatOnly(threadApp[tid])) appThreadView[tid] = embed.view;
    // 🤖 A GROUP's shared app pane: the native shell names which added app to
    // show (its own header switch renders chat natively, so this page is
    // purely that app's interface). Assigned directly — the groupapps fold
    // hasn't run yet, so setAppThreadView's guard would reject it here; the
    // open below folds state and refreshGroupAppsUI applies the view.
    if (embed.app && !embed.space) {
      groupAppView[tid] = embed.app;
      appThreadView[tid] = "interface";
    }
    renderApp();
    if (embed.space && embed.app) {
      // 🤖 A SPACE APP's surface (docs/native-apps.md phase 4): this page is
      // that app rendered full-pane over the space thread — the web's own
      // openSpaceApp path, never a chat (the space thread has no chat
      // surface; without the flag the dm-fallback row above would mount the
      // conversation feed). The seed's thread IS the space thread, so its
      // key is already in place; fold its state, then open the app.
      spaceThreadId = tid;
      await seedAppState(tid, { full: true });
      openSpaceApp(embed.app);
    } else {
      await openThread(tid);
    }
    connectWS();
    installNativeBridge();
    // Space-installed apps' commands route in this host too (phase 4): learn
    // the space thread when the native shell seeded the instance key.
    // Deliberately not awaited — {ready} must not wait on it; a command
    // racing the load still answers honestly ("isn't available here yet").
    if (!embed.space) loadSpaceThread();
    // Cross-thread command routing (docs/native-apps.md phase 3): resolving
    // an app's personal thread needs decrypted name_blobs this page can't
    // open — route the resolution through the native shell instead of the
    // shell.js resolver (which would create a duplicate thread here).
    setAppThreadResolver(embedResolveAppThread);
    // Command-host mode (the Mac shell's panel webview): this page exists to
    // RUN slash commands and show their panels — the native feed renders the
    // chat itself. See installCommandHost.
    if (embed.mode === "command") installCommandHost(tid);
    startHeartbeat();
    // The pane has real content now — the native shell drops its loading
    // veil on this (didFinish fires long before the app has painted).
    nativePost({ ready: true });
  } catch (e) {
    console.error(e);
    nativePost({ error: "Couldn't open this chat." });
  } finally {
    hideLoading();
  }
}

// ---- app-host key requests (docs/native-apps.md phase 3) -------------------
// A command typed in one thread can legitimately land in another — a personal
// /todo typed in a group routes to the todo app-thread (instanceThread). The
// embed page holds a single thread's key, so that emit would silently fail;
// instead it asks the NATIVE shell, which can unwrap exactly the threads this
// member is in and hands back one narrow thread key — never the private key.
// Two requests: {needKey: threadId} when the id is known, and
// {needAppThread: {app, title}} when the app→thread resolution itself needs
// native (the embed can't decrypt other threads' name_blobs, so resolving
// here would mint a DUPLICATE app thread). Native answers by calling
// __lchatProvideKey / __lchatProvideAppThread; a missing answer times out to
// the same graceful failure as today.
const nativeKeyWaits = new Map(); // threadId -> [resolve(bool)]
const nativeAppThreadWaits = new Map(); // appName -> [resolve(threadId|null)]
window.__lchatProvideKey = async (threadId, keyB64) => {
  try {
    if (threadId && keyB64 && !threadKeys[threadId]) {
      threadKeys[threadId] = await importKey(keyB64);
      threadKeyB64[threadId] = keyB64;
    }
  } catch {}
  const waits = nativeKeyWaits.get(threadId) || [];
  nativeKeyWaits.delete(threadId);
  waits.forEach((r) => r(!!threadKeys[threadId]));
};
window.__lchatProvideAppThread = async (appName, threadId, keyB64) => {
  await window.__lchatProvideKey(threadId, keyB64);
  if (threadId && threadKeys[threadId]) threadApp[threadId] = appName;
  const waits = nativeAppThreadWaits.get(appName) || [];
  nativeAppThreadWaits.delete(appName);
  waits.forEach((r) => r(threadId && threadKeys[threadId] ? threadId : null));
};
function requestNativeKey(threadId) {
  if (!embed || !threadId) return Promise.resolve(false);
  if (threadKeys[threadId]) return Promise.resolve(true);
  return new Promise((resolve) => {
    const waits = nativeKeyWaits.get(threadId) || [];
    if (!waits.length) nativePost({ needKey: threadId }); // first asker posts; the rest share the answer
    let done = false;
    const once = (ok) => {
      if (!done) {
        done = true;
        resolve(ok);
      }
    };
    waits.push(once);
    nativeKeyWaits.set(threadId, waits);
    setTimeout(() => once(false), 4000);
  });
}
function requestNativeAppThread(appName, title) {
  if (!embed || !appName) return Promise.resolve(null);
  return new Promise((resolve) => {
    const waits = nativeAppThreadWaits.get(appName) || [];
    if (!waits.length) nativePost({ needAppThread: { app: appName, title: title || appName } });
    let done = false;
    const once = (id) => {
      if (!done) {
        done = true;
        resolve(id);
      }
    };
    waits.push(once);
    nativeAppThreadWaits.set(appName, waits);
    // Creation is server round-trips on the native side — wait longer than needKey.
    setTimeout(() => once(null), 8000);
  });
}
// The embed's app→thread resolver: the active thread if it IS the app, else
// ask native (which opens-or-creates and answers with id + key). Never create
// from here — a duplicate app thread is worse than an honest miss.
async function embedResolveAppThread(appName) {
  for (const id in threadApp) {
    if (threadApp[id] === appName && threadKeys[id]) return id;
  }
  const title = (appByName(appName) || {}).title || appName;
  return requestNativeAppThread(appName, title);
}

// The bridge the native composer drives: forward typed text and staged photos into
// the one crypto/WebSocket path (shell.js). Mirrors the hooks ChatView's WebBridge
// calls; staged-attachment state + errors are posted back on the "lchat" handler.
function installNativeBridge() {
  window.lchatNative = {
    // Returns whether the text was accepted (socket open + something to send), so
    // the native field knows whether to clear itself. When the chat app drives
    // this thread, the app's composer handlers take over (same contract).
    sendText(text) {
      if (!ws || ws.readyState !== WebSocket.OPEN) return false;
      if (chatAppNative) return chatAppNative.sendText(text);
      return false;
    },
    // The native composer's keystrokes: beat "typing" to the thread while there's
    // text, stop when it empties. The chat app owns the beats (chat.typing,
    // relay-only ephemeral); before it has mounted there's no one to show a
    // beat to, so pre-mount keystrokes are simply dropped.
    typing(hasText) {
      if (chatAppNative) chatAppNative.typing(hasText);
    },
    // Stage a photo picked by the native + button (base64, standard alphabet). The
    // web composer only handles images; anything else is rejected with an error.
    stageAttachment(att) {
      try {
        if (!att || !att.type || !att.type.startsWith("image/")) {
          nativePost({ error: "Only photos can be attached." });
          return;
        }
        const bin = atob(att.b64);
        const bytes = new Uint8Array(bin.length);
        for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
        const file = new File([bytes], att.name || "photo.jpg", { type: att.type });
        if (chatAppNative) chatAppNative.stage(file);
        // Pre-mount: hold the file until the chat app registers — the legacy
        // staging this used to fall back to had no send path left (a black
        // hole). registerNative flushes the queue.
        else preMountStaged.push(file);
      } catch {
        nativePost({ error: "Couldn't attach that photo." });
      }
    },
    // The native reply banner's ✕ — clears the staged reply on both sides
    // (cancelReply posts {replying: null} back).
    cancelReply() {
      if (chatAppNative) return chatAppNative.cancelReply();
    },
    // The native edit banner's ✕ — drops edit mode (cancelEdit posts
    // {editing: null} back so the native banner + prefilled composer clear).
    cancelEdit() {
      if (chatAppNative) chatAppNative.cancelEdit();
    },
    // Switch a companion app-thread between its Chat and Interface views —
    // the native header's toggle drives this (the web's own header toggle
    // isn't rendered in embed, so without it the second view is unreachable
    // on iOS). No-op for non-app threads (setAppThreadView guards).
    setAppView(view) {
      const tid = embed && embed.threadId;
      if (!tid) return;
      setAppThreadView(tid, view === "interface" ? "interface" : "chat");
    },
    // Swap which of a GROUP's added apps the Interface pane shows — the native
    // header's app dropdown drives this without a page reload (the pane
    // re-renders from already-folded state). Unknown names stay inert:
    // renderGroupAppPane resolves via groupAppsFor, which filters to the
    // catalog of group-capable apps.
    setGroupApp(app) {
      const tid = embed && embed.threadId;
      if (!tid || typeof app !== "string" || !app) return;
      groupAppView[tid] = app;
      appThreadView[tid] = "interface";
      refreshGroupAppsUI(tid);
    },
    // The app-host protocol (docs/native-apps.md): the native shell pulls the
    // registered-app catalogue — every app this page loaded across all three
    // tiers (built-in, admin custom, member), with places / presentation /
    // commands — to drive its own registry, pickers, and surface routing.
    // Pull-based on purpose: an evaluateJavaScript call returns the plain
    // JSON directly, and native re-pulls on {catalogChanged} posts.
    appCatalog() {
      return appCatalogReport();
    },
    // This thread's command rows — the same commandCatalog(threadId) that
    // feeds the web "/" typeahead and /help, place-stamped and with the
    // install-flag alt rows, so the native composer can list and rank exactly
    // what the web would. Rows change as installs fold, so native re-pulls
    // per composer session rather than caching long.
    commandItems() {
      return embed && embed.threadId !== undefined ? commandCatalog(embed.threadId) : commandCatalog();
    },
    // The app-host protocol, phase 5 (docs/native-apps.md): project ONE app
    // event into its chat line for the NATIVE feed — the web's chatMessage /
    // groupFeedMessage answered by the engine that owns them. The event is
    // the decrypted payload (native already holds the thread key; no key
    // material rides here). Ownership resolves via appForType — the same
    // registry the web folds use, so families like webhooks.* land on their
    // app. Mirrors foldGroupAppEventBubble/foldAppEventBubble: a group feed
    // prefers groupFeedMessage, else chatMessage({group:true}); a personal
    // companion projects through chatMessage. null = silent by the app's own
    // choice, an unknown type, or a member app (its hook runs only in the
    // sandbox, never here). `title` rides along so native names the bubble
    // without re-deriving it.
    // The app-host protocol, voice surfaces: the sidebar line for one app
    // event — the app's own preview hook (opts.you = the actor is the
    // reader), defaulting to the actor-prefixed chat projection (appPreview's
    // chain). null = leave the row's line alone.
    previewEvent(event, you) {
      try {
        if (!event || typeof event.type !== "string") return null;
        const text = appPreview(event, { you: !!you });
        return text ? { text } : null;
      } catch {
        return null;
      }
    },
    projectEvent(event, group) {
      try {
        if (!event || typeof event.type !== "string") return null;
        const app = appForType(event.type);
        if (!app) return null;
        let line = null;
        if (group) {
          if (typeof app.groupFeedMessage === "function") line = app.groupFeedMessage(event);
          else if (typeof app.chatMessage === "function") line = app.chatMessage(event, { group: true });
        } else if (typeof app.chatMessage === "function") {
          line = app.chatMessage(event);
        }
        if (!line) return null;
        const text = typeof line === "string" ? line : typeof line.text === "string" ? line.text : "";
        if (!text) return null;
        return {
          text,
          action: typeof line === "object" && !!line.action,
          title: app.title || app.name,
        };
      } catch {
        return null;
      }
    },
    // Composer typeahead for the native input: same token detection + ranking
    // as the web menu (composerToken + typeaheadItems). caret is a UTF-16
    // offset, matching JS string indexing. Returns {start, items} or null.
    typeahead(text, caret) {
      const tok = composerToken(text, caret);
      if (!tok) return null;
      const items = typeaheadItems(tok).map((it) => ({
        label: it.glyph ? `${it.glyph} :${it.code}:` : it.name,
        insert: it.insert,
      }));
      return items.length ? { start: tok.start, items } : null;
    },
    // Called when this thread's (possibly cached) webview lands on screen —
    // a notification tap, foregrounding the app, or returning from another
    // chat. A parked page keeps receiving messages, but with rendering
    // suspended their smooth-scroll pinning never runs, so the feed resumes
    // shy of the newest message. Re-pin via the settle loop — a one-shot
    // scrollTop write here gets clamped by WebKit's resume-time layout —
    // unless the user had deliberately scrolled up into history.
    //
    // `force` (a notification tap) overrides that hold: the message you were
    // pinged about is the newest one, so jump to it even if the parked feed
    // had been scrolled up.
    didAttach(force) {
      if (chatAppNative) chatAppNative.didAttach(force);
    },
  };
}

// ---- command host (embed.mode === "command") -------------------------------
//
// The native Mac shell renders chat NATIVELY, so it has no JS command engine —
// this page is that engine, one per thread: the shell keeps it hidden, forwards
// a typed slash command to window.lchatNative.runCommand, and reveals the
// webview only while a panel is showing (body.command-host CSS collapses
// everything except the .cmd-panel, so the webview IS the panel). Private
// replies post back as {notice} for the shell to render inline; panel
// visibility and height post as {panel}; a panel's insertText already posts
// {composerInsert} (chat.js) for the shell's own composer.
function installCommandHost(tid) {
  // Content height for the shell's frame. scrollHeight is the content EXTENT,
  // immune to the max-height clamp and to the webview being 0-tall while
  // hidden — the one measurement that works before the shell reveals it.
  const measure = () => {
    const body = document.querySelector(".cmd-panel-body");
    const head = document.querySelector(".cmd-panel-head");
    return Math.min(600, (body ? body.scrollHeight : 200) + (head ? head.offsetHeight : 26) + 12);
  };
  const postPanel = (spec) => {
    if (!spec) return nativePost({ panel: null });
    // Measure synchronously — scrollHeight forces layout, and this page is
    // DETACHED from the native view hierarchy until the shell reveals it, so
    // a requestAnimationFrame here never fires (WebKit suspends rendering
    // callbacks for unparented webviews) and the panel would deadlock hidden.
    // Timers still run detached, so the late re-measure (fonts, images, and
    // the real width once the shell attaches the frame) uses setTimeout.
    nativePost({
      panel: {
        title: spec.title || (spec.sender && spec.sender.name) || "",
        height: measure(),
        // The app's animation choice (animate: false = appear instantly) —
        // in command-host mode the NATIVE shell owns the reveal, so the flag
        // rides the post instead of easing in-page (see panelEases, chat.js).
        animate: spec.animate !== false,
      },
    });
    setTimeout(() => nativePost({ panelHeight: measure() }), 350);
  };
  setCommandPanelObserver((threadId, spec) => {
    if (threadId === tid) postPanel(spec);
  });
  // The shell can't see this page's console, so surface page-side failures as
  // {error} posts — they land in the native unified log (CommandHost).
  window.addEventListener("error", (e) => nativePost({ error: "page: " + (e.message || "error") }));
  window.addEventListener("unhandledrejection", (e) =>
    nativePost({ error: "page: " + ((e.reason && (e.reason.message || e.reason)) || "unhandled rejection") }));
  const origConsoleError = console.error.bind(console);
  console.error = (...args) => {
    origConsoleError(...args);
    try {
      nativePost({ error: "console: " + args.map((a) => (a && a.message) || String(a)).join(" ").slice(0, 300) });
    } catch {}
  };
  // Returns whether the text was a command this engine answered (panel or
  // reply) — false lets the shell send it as a normal message (bot commands).
  window.lchatNative.runCommand = (text) =>
    runCommand(text, tid, (r) =>
      nativePost({ notice: { from: (r && r.sender && r.sender.name) || "", text: (r && r.text) || "" } }));
  // Escape in the native composer (and the shell's own chrome) dismisses.
  window.lchatNative.dismissPanel = () => closeCommandPanel(tid);
  nativePost({ commandHostReady: true });
}

// ---- data ---------------------------------------------------------------

function ensurePubkey() {
  return fetch("/api/pubkey", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: session.token, public_key: session.userPub }),
  });
}

async function loadRoster() {
  const r = await (await fetch(`/api/roster?token=${encodeURIComponent(session.token)}`)).json();
  // Snapshot the response BEFORE apply: decryptRosterLabels writes decrypted
  // names onto these entries, and plaintext must never reach the store.
  if (Array.isArray(r.roster)) bootRaw.roster = structuredClone(r);
  await applyRoster(r);
  scheduleStoreSnapshot();
}

// The apply half of loadRoster — also run over the cached response on boot.
async function applyRoster(r) {
  setRoster(r.roster || []);
  // In embed mode the shell tells us our user id up front (it can't be matched by
  // public key — the webview never holds one). Otherwise find ourselves by pubkey.
  if (!myUserId) {
    const me = roster.find((e) => e.public_key === session.userPub);
    setMyUserId(me ? me.user_id : "");
  }
  // The "New member" fallback (here and on every outbound payload): setup and
  // welcome claimers are signed in nameless until Eleven's first question — if
  // they send anything before answering, recipients never see a blank sender.
  setCurrentUser(myUserId, session.name || "New member"); // let apps do per-user logic (e.g. poll "your vote")
  if (instanceKey) await decryptRosterLabels();
  applyInviterNameHint();
  verifyInviteBindings(); // KT: check any invitees we hold bind keys for (#573)
}

// The joiner's first paint (#1436): their invite's sealed payload carried the
// inviter's display name. While the instance key (and so the inviter's real
// label) hasn't reached this fresh device, fill the hinted DM's other member
// with that name instead of "Someone" — and the moment the real label has
// decrypted, drop the hint for good. Scoping (only that one member, never a
// bot, never over a decrypted label) lives in inviterHintTarget.
function applyInviterNameHint() {
  let hint = null;
  try { hint = readInviterHint(localStorage.getItem(INVITER_HINT_KEY) || "", Date.now()); } catch {}
  if (!hint) return;
  const t = inviterHintTarget(hint, threads, roster, myUserId);
  if (!t) return;
  if (t.resolved) {
    try { localStorage.removeItem(INVITER_HINT_KEY); } catch {}
    return;
  }
  const e = roster.find((x) => x.user_id === t.userId);
  if (e) e.label = t.name;
}

// ---- key transparency: verify-before-wrap (advisory, #573) ----------------
// The inviter is the one member who holds T for a joiner, so only they can
// check the bind-MAC. We stash each invitee's bind key at invite time, and
// once they've joined + published a key, confirm the roster key is the one
// THEY published — not a substitute the server slipped in. Advisory by design
// (Paul's call): a mismatch records an integrity alert (raising the banner),
// never blocks a wrap. A verified binding is dropped (the key can't change —
// setUserPublicKey never overwrites it). Absence of a bind-MAC (a pre-KT
// member) is "unverified", not an alarm.
// Only 1:1 single-use invites (inviteSomeone) stash a bind key: their T is
// known to exactly the inviter + joiner, so the MAC is unforgeable. Reusable
// admin/cohort invites share T among every link holder, so their bind-MAC
// proves nothing — NEVER call rememberInviteBindKey for those.
const INVITE_BINDS_KEY = "lchat_invite_binds";
const INVITE_BINDS_MAX = 500;
let bindUnverifiedCount = 0; // invited members keyed WITHOUT a MAC (rollout / downgrade); shown in /integrity
function loadInviteBinds() {
  try {
    return JSON.parse(localStorage.getItem(INVITE_BINDS_KEY) || "{}") || {};
  } catch {
    return {};
  }
}
function rememberInviteBindKey(uid, bindKey) {
  if (!uid || !bindKey) return;
  const m = loadInviteBinds();
  m[uid] = bindKey;
  localStorage.setItem(INVITE_BINDS_KEY, JSON.stringify(m));
}
async function verifyInviteBindings() {
  const m = loadInviteBinds();
  const uids = Object.keys(m);
  if (!uids.length) return;
  let unverified = 0;
  const next = {}; // rebuilt so members who've LEFT the roster are pruned (bounded growth)
  for (const uid of uids) {
    const e = roster.find((x) => x.user_id === uid);
    if (!e) continue; // member gone (removed) — drop the stale stash
    // Keep the bind key as long as the member is present and re-verify on EVERY
    // roster load, NOT once: a compromised server can substitute the key at any
    // later wrap (a new group, a tier re-key), so a one-shot check would miss it.
    next[uid] = m[uid];
    if (!e.public_key) continue; // hasn't published a key yet — check next time
    if (!e.bind_mac) {
      // Keyed but no MAC. Benign during rollout (a pre-KT joiner), but for
      // someone WE invited post-rollout it's a possible downgrade — surface it
      // in /integrity (advisory), don't banner (rollout would be too noisy).
      unverified++;
      continue;
    }
    let ok = false;
    try {
      ok = await verifyBindMac(m[uid], e.public_key, e.bind_mac);
    } catch {
      continue;
    }
    if (!ok) {
      integrity.recordAlert("key-substitution", uid);
      renderIntegrityBanner();
    }
  }
  // Hard backstop on growth (object keeps insertion order → drop the oldest).
  const keep = Object.keys(next);
  if (keep.length > INVITE_BINDS_MAX) {
    for (const k of keep.slice(0, keep.length - INVITE_BINDS_MAX)) delete next[k];
  }
  bindUnverifiedCount = unverified;
  localStorage.setItem(INVITE_BINDS_KEY, JSON.stringify(next));
}

// People's display names arrive encrypted under the instance key (label_blob).
// Decrypt them into .label so the synchronous rosterLabel() can read them. Bots
// carry a plaintext .label and no blob; a not-yet-migrated person keeps whatever
// plaintext .label they still have as a fallback.
async function decryptRosterLabels() {
  if (!instanceKey) return;
  const before = new Set(roster.map((e) => e.label).filter(Boolean));
  await Promise.all(
    roster.map(async (e) => {
      if (e.label_blob) {
        try {
          e.label = await decrypt(instanceKey, e.label_blob);
        } catch {}
      }
      if (e.avatar_alt_blob) {
        try {
          e.avatarAlt = await decrypt(instanceKey, e.avatar_alt_blob);
        } catch {}
      }
      if (e.description_blob) {
        try {
          e.about = await decrypt(instanceKey, e.description_blob);
        } catch {}
      }
    }),
  );
  backfillLegacyLabels();
  // A chat message is scanned for @mentions against host.mentionNames() only
  // once, when it first renders (chat.js's keyedList never revisits an
  // unchanged row) — so a message mentioning someone who wasn't yet
  // mentionable at render time stays plain, unbolded text forever unless
  // something repaints it. A roster label newly resolving here — a fresh
  // joiner, or a name that just finished decrypting — is exactly that
  // moment; hand the newly-known names to chat.js so it can repaint just the
  // messages that actually reference one (issue #249).
  const newNames = [];
  for (const e of roster) if (e.label && !before.has(e.label)) newNames.push(e.label);
  if (newNames.length) repaintMentionsOf(newNames);
}

// Seal legacy plaintext names (docs/no-plaintext.md): a person whose name
// predates label_blob still has it readable at rest until THEY next load the
// app — which an inactive member never does. We hold the instance key, so seal
// it for them; the server's gate is strictly fill-once (people only, plaintext
// still present, no existing blob), so this client only re-encodes the name
// the server already stored. (The server can't verify blob content — the
// honest-member assumption here is stated at postLabelBackfill in main.go.)
// Fire-and-forget.
const labelBackfillSent = new Set();
function backfillLegacyLabels() {
  if (!instanceKey) return;
  for (const e of roster) {
    if (e.is_agent || e.label_blob || !e.label || labelBackfillSent.has(e.user_id)) continue;
    labelBackfillSent.add(e.user_id);
    encrypt(instanceKey, e.label)
      .then((blob) =>
        fetch("/api/label/backfill", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: session.token, user_id: e.user_id, label_blob: blob }),
        }),
      )
      .catch(() => {});
  }
}

// The name outgoing payloads stamp. session.name is THIS DEVICE's copy, and it
// is routinely empty: the chat-first join claims nameless and lets Eleven ask
// in-chat (loadSession says so), and a member who answered on another device
// leaves this one blank forever. Everything stamped in that window reads as
// "Someone" wherever the payload's own name is the only source (sidebar
// previews, push copy). So fall back to my PUBLISHED roster label — never a
// nickname: this rides where other members read it. Local name first, so a
// rename takes effect before its label finishes publishing.
function stampName() {
  if (session.name) return session.name;
  const me = roster.find((e) => e.user_id === myUserId);
  return (me && me.label) || "";
}

// Publish our own display name, encrypted under the instance key — for a fresh
// joiner, and to migrate anyone whose name is still stored in plaintext. The
// server only ever stores the blob.
async function publishMyLabel() {
  if (!instanceKey || !myUserId || !session.name) return;
  const me = roster.find((e) => e.user_id === myUserId);
  if (me && me.label_blob && me.label === session.name) return; // already correct
  try {
    const blob = await encrypt(instanceKey, session.name);
    await fetch("/api/label", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, label_blob: blob }),
    });
    if (me) {
      me.label = session.name;
      me.label_blob = blob;
    }
  } catch {}
}

// Publish our "about me" text, encrypted under the instance key ("" clears it).
// The server stores only the blob and serves it to our connections, who decrypt
// it like the display name.
async function publishMyDescription(text) {
  if (!instanceKey || !myUserId) return;
  try {
    const blob = text ? await encrypt(instanceKey, text) : "";
    await fetch("/api/description", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, description_blob: blob }),
    });
    const me = roster.find((e) => e.user_id === myUserId);
    if (me) {
      me.about = text;
      me.description_blob = blob;
    }
  } catch {}
}

// ---- per-viewer names (#577) ---------------------------------------------
// What *I* call people, independent of the name they publish: uid → { name,
// seen } (see ui.js displayNameFor/renameNotice for the two rules). The whole
// map is one blob sealed to MY OWN public key (sealForPub) — deliberately
// stricter than the instance-key blobs: my names for people are mine, not the
// group's, so other members can't open it. Devices share the keypair, so it
// syncs across my devices for free. The native embed never holds userPriv, so
// there this stays empty and published names render (native parity follows).
// Ops this device has made that the server copy may not have yet: uid → the
// entry to write, or null for "cleared". Saves re-read the server blob and
// replay only these on top — so a stale tab never clobbers names set on
// another device, and a boot whose load failed can't turn the next save into
// a wipe of everything stored. Ops stay queued (and retry) until a save lands.
const nicknameOps = new Map();
let nickRetryTimer = 0;
// The server blob's version at our last read — sent back with each save so a
// stale write 409s (compare-and-swap) instead of racing another device.
let nicknamesVersion = 0;

// The server's current map, or null when it can't be known right now (fetch
// failed, blob won't open, no key). null means "don't write" — never guess.
async function fetchServerNicknames() {
  if (!session.userPriv) return null;
  try {
    const r = await fetch(`/api/nicknames?token=${encodeURIComponent(session.token)}`);
    if (!r.ok) return null;
    const body = await r.json();
    bootRaw.nick = { version: body.version || 0, nicknames_blob: body.nicknames_blob || "" };
    scheduleStoreSnapshot();
    return await applyNicknamesBody(body);
  } catch {
    return null;
  }
}

// Decode a /api/nicknames body (sealed to our own key) — shared with the
// cached-snapshot hydrate.
async function applyNicknamesBody(body) {
  nicknamesVersion = body.version || 0;
  if (!body.nicknames_blob) return {};
  const obj = await openSealed(body.nicknames_blob, session.userPriv);
  return (obj && obj.names) || {};
}

async function loadNicknames() {
  const server = await fetchServerNicknames();
  if (server) setNicknames(server);
}

// Read-modify-write: re-read the server copy and replay only this device's
// pending ops on top, then seal + store. Returns false — leaving the ops
// queued and a retry scheduled — when the read or the write fails. Saves are
// serialized on a chain: two quick renames must not interleave their
// fetch/POST pairs (the second's op would be dropped by the first's cleanup).
let nickSaveChain = Promise.resolve(true);
function saveNicknames() {
  nickSaveChain = nickSaveChain.then(saveNicknamesNow, saveNicknamesNow);
  return nickSaveChain;
}

async function saveNicknamesNow() {
  if (!session.userPriv || !session.userPub) return true;
  if (!nicknameOps.size) return true;
  const included = [...nicknameOps.entries()];
  const base = await fetchServerNicknames();
  if (!base) return queueNickRetry();
  const baseVersion = nicknamesVersion; // pin the version this merge is built on
  const merged = { ...base };
  for (const [uid, entry] of included) {
    if (entry) merged[uid] = entry;
    else delete merged[uid];
  }
  try {
    const blob = await sealForPub(session.userPub, { v: 1, names: merged });
    const r = await fetch("/api/nicknames", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, nicknames_blob: blob, version: baseVersion }),
    });
    // A 409 means another device wrote between our read and this write — the
    // queued ops retry over a fresh read (read-modify-write converges).
    if (!r.ok) return queueNickRetry();
    nicknamesVersion = ((await r.json()) || {}).version || baseVersion + 1;
    setNicknames(merged); // adopt anything another device stored meanwhile too
    // Clear only what this save wrote — an op re-set mid-save stays queued.
    for (const [uid, entry] of included) if (nicknameOps.get(uid) === entry) nicknameOps.delete(uid);
    return true;
  } catch {
    return queueNickRetry();
  }
}

// A failed save must not be a silent loss: keep trying while ops are queued.
// Always returns false so saveNicknames' failure paths read as one-liners.
function queueNickRetry() {
  clearTimeout(nickRetryTimer);
  nickRetryTimer = setTimeout(async () => {
    if (nicknameOps.size && (await saveNicknames())) await refreshNamesUI();
  }, 5000);
  return false;
}

// Set (or with "" clear) my name for someone, stamping `seen` with their
// current published label so a later rename of theirs prompts me exactly once.
// Returns whether the save has landed (false = applied locally, still syncing).
async function setNickname(uid, name) {
  const e = roster.find((x) => x.user_id === uid);
  const entry = name ? { name, seen: (e && e.label) || "" } : null;
  if (entry) nicknames[uid] = entry;
  else delete nicknames[uid];
  nicknameOps.set(uid, entry);
  const ok = await saveNicknames();
  await refreshNamesUI();
  return ok;
}

// Acknowledge a rename: keep my name but stop prompting (keep=true), or drop
// my name and follow theirs from now on (keep=false).
async function resolveRename(uid, keep) {
  const e = roster.find((x) => x.user_id === uid);
  const nick = nicknames[uid];
  if (!nick) return true;
  const entry = keep ? { name: nick.name, seen: (e && e.label) || nick.seen } : null;
  if (entry) nicknames[uid] = entry;
  else delete nicknames[uid];
  nicknameOps.set(uid, entry);
  const ok = await saveNicknames();
  await refreshNamesUI();
  return ok;
}


// The instance key is a single AES key shared by all members, used only for
// all-members content (profile photos). It's wrapped to each member's user
// pubkey (server-blind, reusing the thread-key wrap). On boot: adopt our copy if
// granted; bootstrap it if nobody has it yet; and grant it to any member missing
// it (so it propagates as people join). Never used for messages.
// Holder liveness from the last keyless /api/instance-key read (#785): are
// any key holders online, and when was one last around. Feeds the honest
// invite copy below; null until a keyless read reports it.
let keyHolderState = null;

async function setupInstanceKey() {
  let r;
  try {
    r = await (await fetch(`/api/instance-key?token=${encodeURIComponent(session.token)}`)).json();
  } catch {
    return;
  }
  if ("holders_online" in r) keyHolderState = { online: !!r.holders_online, lastActive: r.holders_last_active || 0 };
  if (r.wrapped) {
    bootRaw.instance = { wrapped: r.wrapped };
    scheduleStoreSnapshot();
    try {
      const b64 = await unwrapThreadKey(r.wrapped, session.userPriv);
      setInstanceKey(await importKey(b64), b64);
    } catch {
      return;
    }
    await grantInstanceKeyTo(r.have || []);
  } else if (!(r.have || []).length) {
    const k = await generateKey(); // first member: bootstrap the instance key
    setInstanceKey(k.key, k.b64);
    await grantInstanceKeyTo([]);
  } else {
    // It exists but we don't hold a copy yet. Nudge any online holder to wrap it
    // to us, then poll to pick up the grant — and KEEP re-nudging (on focus, and
    // on a slow timer) until it lands: the first holder to see a nudge may come
    // online long after the first poll would have expired, and a keyless member
    // renders everyone as "Someone" until this succeeds.
    const nudge = () => {
      fetch(`/api/instance-key/nudge?token=${encodeURIComponent(session.token)}`, { method: "POST" }).catch(() => {});
      pollForInstanceKey(4);
    };
    const onFocus = () => (instanceKey ? stopRetry() : nudge());
    const timer = setInterval(() => (instanceKey ? stopRetry() : nudge()), 60000);
    const stopRetry = () => {
      clearInterval(timer);
      removeEventListener("focus", onFocus);
    };
    addEventListener("focus", onFocus);
    fetch(`/api/instance-key/nudge?token=${encodeURIComponent(session.token)}`, { method: "POST" }).catch(() => {});
    pollForInstanceKey(24);
  }
}

// After nudging holders, poll for a wrapped instance key; once granted, unwrap it
// and re-render avatars. (The open Edit-profile sheet picks it up on next open.)
async function pollForInstanceKey(tries = 24) {
  for (let i = 0; i < tries && !instanceKey; i++) {
    await new Promise((res) => setTimeout(res, 2500));
    if (instanceKey) return;
    let r;
    try {
      r = await (await fetch(`/api/instance-key?token=${encodeURIComponent(session.token)}`)).json();
    } catch {
      continue;
    }
    if ("holders_online" in r) keyHolderState = { online: !!r.holders_online, lastActive: r.holders_last_active || 0 };
    if (r.wrapped) {
      try {
        const b64 = await unwrapThreadKey(r.wrapped, session.userPriv);
        setInstanceKey(await importKey(b64), b64);
        await onInstanceKeyReady();
      } catch {}
      return;
    }
  }
}

// ---- thread data, instance key & app lifecycle ----------------------------
// Flip the open Edit-profile sheet's photo control from "Photo syncing…" to
// "Change photo" the moment the instance key arrives (live, no reload needed).
function refreshProfilePhotoBtn() {
  const b = document.getElementById("me-photo-btn");
  if (b && instanceKey) {
    b.disabled = false;
    b.textContent = "Change photo";
  }
  // The "About you" field in the same sheet waits on the key too.
  const a = document.getElementById("me-about");
  if (a && instanceKey && a.disabled) {
    a.disabled = false;
    a.placeholder = "A line or two about yourself";
    const e = roster.find((x) => x.user_id === myUserId);
    if (!a.value) a.value = (e && e.about) || "";
  }
}

// Wrap the instance key to every roster member not already in `have`.
async function grantInstanceKeyTo(have) {
  if (!instanceKeyB64) return;
  const haveSet = new Set(have);
  const grants = [];
  for (const e of roster) {
    // Skip keyless members — a pending invitee who hasn't joined yet has no
    // public key to wrap to (connections() returns them for pending-DM names).
    // Without this guard wrapThreadKey's importKey throws DataError and aborts
    // boot for *everyone*; they pick up the key from a holder's backfill once
    // they join and publish one.
    if (e.public_key && !haveSet.has(e.user_id)) {
      grants.push({ user_id: e.user_id, wrapped: await wrapThreadKey(instanceKeyB64, e.public_key) });
    }
  }
  if (grants.length) {
    await fetch("/api/instance-key", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, grants }),
    });
  }
}

async function loadThreads() {
  const r = await (await fetch(`/api/threads?token=${encodeURIComponent(session.token)}`)).json();
  if (Array.isArray(r.threads) && !embed) {
    // Snapshot before apply mutates entries (e.g. the open_key "set" gate fix).
    bootRaw.threads = structuredClone(r);
    scheduleStoreSnapshot();
    // Threads we've left / been removed from must not keep readable local rows
    // beyond what this device's keys already imply — prune the store to the
    // live list (an error body never reaches here, so it can't wipe the cache).
    storeCachedThreadIds()
      .then((ids) => Promise.all(staleThreadIds(ids, r).map((id) => storeClearThread(id))))
      .catch(() => {});
  }
  await applyThreads(r);
}

// The apply half of loadThreads (unwrap keys → titles → previews → dots) —
// also run over the cached response on boot, so hydration and the network
// path are one code path.
async function applyThreads(r) {
  setThreads(r.threads || []);
  // Threads may land after the roster on a fresh boot — re-apply the
  // inviter-name hint (#1436) now that the hinted DM's members are known,
  // BEFORE titles compute below, so the DM lists under the inviter's name.
  applyInviterNameHint();
  for (const t of threads) {
    if (!threadKeys[t.id] && (t.wrapped || t.open_key)) {
      // Two key sources: the per-member wrapped copy, then — for open groups —
      // open_key (the thread key encrypted under the instance key). open_key is
      // a true fallback, not an else: a bad wrapped blob must not hide an open
      // group the instance key can decrypt. If the instance key hasn't arrived
      // yet, skip for now; boot / onInstanceKeyReady re-fold the list.
      let b64 = null;
      if (t.wrapped) {
        try {
          b64 = await unwrapThreadKey(t.wrapped, session.userPriv);
        } catch (e) {
          console.error("unwrap thread", t.id, e);
        }
      }
      if (!b64 && t.open_key) {
        // The open_key's wrapping key depends on the gate: a level-gated
        // group's rides under that tier's key, an ungated one under the
        // instance key. Either may not have arrived yet — boot and the
        // key-granted prods re-fold when it does.
        const src = t.open_tier ? tierKeys[t.open_tier] : instanceKey;
        if (src) {
          try {
            b64 = (await decrypt(src, t.open_key)).k;
          } catch (e) {
            console.error("unwrap open thread", t.id, e);
          }
        }
      }
      if (!b64) continue;
      threadKeys[t.id] = await importKey(b64);
      threadKeyB64[t.id] = b64;
    }
    threadName[t.id] = await displayName(t);
    hidden[t.id] = !!t.hidden; // closed chats (server-synced) are dropped from the list
    pinned[t.id] = !!t.pinned; // pinned chats (server-synced) float to the top
    muted[t.id] = !!t.muted; // muted chats (server-synced) stay quiet
    dmClosed[t.id] = !!t.dm_closed; // ended DMs show the closed banner, not a composer
    // The server's watermark can trail a POST we just made — never regress ours.
    readMarks[t.id] = Math.max(readMarks[t.id] || 0, t.last_read_at || 0);
    if (t.last_blob && threadKeys[t.id]) {
      try {
        const payload = takeGossip(await decrypt(threadKeys[t.id], t.last_blob), false);
        // A typed app event (e.g. vault.add) has no .text — previewText would
        // read it as an empty chat message and render "Name: " with nothing
        // after the colon. Route it through the OWNING APP's preview hook
        // instead (same as the live path below), leaving the row's stale
        // preview in place when the app declares none (silent, not blank).
        if (isAppType(payload.type)) {
          const pv = appPreview(payload, { you: payload.uid && payload.uid === myUserId });
          if (pv) threadPreview[t.id] = pv;
        } else {
          // Anything else — a chat message, or a trailing reaction event, which
          // previewText speaks as "James reacted 👍 to …" rather than the blank
          // row it used to leave behind.
          previewPayload[t.id] = payload;
          threadPreview[t.id] = previewText(t, payload);
        }
        // Seed the unread dot from the synced watermark, applying the same
        // gates as a live frame: your own last message never lights it (you
        // sent it, or replying elsewhere means you read it), and app events
        // only light it if the app says so. A silent app event neither lights
        // nor clears — an earlier lit dot stays lit, matching the live path.
        if (t.id !== activeId) {
          if ((t.last_at || 0) <= readMarks[t.id] || ownMessage(payload, myUserId, session.name)) {
            unread[t.id] = false;
          } else if (payload.type === "reaction" || payload.type === "threadconvert") {
            // Someone reacting, or tidying a chain into a thread, never lights
            // the dot (matching the live path); an earlier lit dot stays lit.
          } else if (!isAppType(payload.type) || appUnread(payload)) {
            unread[t.id] = true;
          }
        }
      } catch {}
    }
  }
  syncThreadKeysToSW();
}

// Advance this user's read watermark for a thread to its newest message — the
// server relays it to their other devices so the dot clears everywhere, and
// remembers it so a reload doesn't resurrect it. Local-first and deduped: the
// mark moves before the POST, and an already-current mark makes this a no-op
// (so calling it on every live message while a thread is open stays cheap).
function markThreadRead(id) {
  const t = threads.find((x) => x.id === id);
  const at = (t && t.last_at) || 0;
  if (!at || at <= (readMarks[id] || 0)) return;
  readMarks[id] = at;
  fetch(`/api/threads/${encodeURIComponent(id)}/read`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: session.token, last_read_at: at }),
  }).catch(() => {});
}

// Hand the service worker the per-thread keys (+ name/kind) it needs to decrypt
// push payloads. Stored in IndexedDB (the SW can't read localStorage).
function syncThreadKeysToSW() {
  const map = {};
  for (const t of threads) {
    if (threadKeyB64[t.id]) {
      map[t.id] = { key: threadKeyB64[t.id], name: threadName[t.id] || "Chat", kind: t.kind };
    }
  }
  idbSet("threadKeys", map).catch(() => {});
  // The SW also needs to know who "me" is: reaction pushes are shown only to
  // the reacted-to message's author (see sw.js), decided after decryption.
  if (myUserId) idbSet("myUid", myUserId).catch(() => {});
  // Names for the SW's notification text (#577): a sender resolves by uid to
  // the name I show for them, and @mentions in the body rewrite to my names.
  // Pre-resolved here (the SW holds no keys for the nicknames blob) — kept
  // fresh by refreshNamesUI, which calls this on every name change.
  const byUid = {};
  for (const e of roster) {
    const n = displayNameFor(nicknames[e.user_id], e.label);
    if (n) byUid[e.user_id] = n;
  }
  idbSet("memberNames", { byUid, renames: nicknameRenames() }).catch(() => {});
  // Mute state for the SW's own notification gate. The server already skips
  // pushes for muted THREADS; muted PEOPLE are invisible to it by design, so
  // the sender check after decryption is the only place that one can run.
  const mutedThreads = Object.keys(muted).filter((id) => muted[id]);
  idbSet("muted", { threads: mutedThreads, people: [...mutedPeople] }).catch(() => {});
}

// The frontend build this page loaded with (server-injected into the HTML).
const APP_VERSION = (document.querySelector('meta[name="app-version"]') || {}).content || "";

// Whether ordinary members may invite people (server-injected admin setting). Gates
// the invite UI only; the server enforces it regardless. Kept live by
// "user_invites_changed" below (issue #346) — an admin flipping the toggle
// used to only take effect for connected members after a reload.
let USER_INVITES = ((document.querySelector('meta[name="user-invites"]') || {}).content || "") === "1";

// Per-instance feature gates (server-injected admin settings). Default ON — a
// missing meta (an older server) reads as enabled — and, like USER_INVITES,
// they only hide entry points; the server enforces each gate. ENABLE_AI has no
// web entry point to hide (the sidecar enforces it), but rides along so copy
// can consult it.

// Whether THIS member may invite: the toggle governs ordinary members, but an
// admin always can — otherwise the person who just set the space up couldn't
// bring anyone in without a trip to the admin console (a path we're
// sunsetting). Live read, so it's correct once the roster (which carries our
// role) has loaded.
function inviteAllowed() {
  if (USER_INVITES) return true;
  const me = roster.find((e) => e.user_id === myUserId);
  return !!(me && me.role === "admin");
}

// Whether THIS member holds the admin role — gates the Admin app's entry
// points in the pickers. A UI nicety, not security: the Admin app re-checks
// the role through its host bridge (/api/me) before doing anything.
function isAdmin() {
  const me = roster.find((e) => e.user_id === myUserId);
  return !!(me && me.role === "admin");
}

// True when a composer holds unsent text — reload paths check this so picking up
// an update never eats someone's draft. Covers every mounted chat-app composer
// (Split view shows two).
function hasUnsentDraft() {
  // The chat composer(s) live behind the composer.js facade — Split view can
  // mount two, and the rich backend isn't a textarea. Same semantics as the
  // old DOM query: only MOUNTED composers block (parked panes never did).
  return anyComposerHasText();
}

// On returning to the app, ask the server for the current build hash; if it shipped
// a newer frontend, reload to pick it up — unless that would clobber an unsent draft.
let updateChecking = false;
async function checkForUpdate() {
  if (!APP_VERSION || updateChecking) return;
  updateChecking = true;
  try {
    const r = await fetch("/api/version", { cache: "no-store" });
    if (r.ok) {
      const v = (await r.json()).version;
      if (v && v !== APP_VERSION && !hasUnsentDraft()) location.reload();
    }
  } catch {
  } finally {
    updateChecking = false;
  }
}

// Heartbeat so push is suppressed while the app is open: write a timestamp the SW
// checks, and tell the server this device is active (mutes its other devices).
function startHeartbeat() {
  const beat = () => {
    if (document.visibilityState !== "visible") return;
    idbSet("lastActiveAt", Date.now()).catch(() => {});
    if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "active" }));
  };
  beat();
  setInterval(beat, 30000);
  document.addEventListener("visibilitychange", beat);
  clearNotifications();
  // Returning to the app (tab/window visible again) → check for a newer build,
  // and catch up on any messages missed while hidden. This is what fixes a tapped
  // notification landing on a stale thread: the socket may still look OPEN (the OS
  // froze it without firing onclose), so a reconnect never fires — but refocus
  // always does, and re-fetches the missed messages.
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      checkForUpdate();
      resyncActive(); // its tail marks the active thread read once caught up
      focusChatComposer();
      clearNotifications();
    }
  });
  // ...and when the window itself regains focus (clicking back into the app from
  // another window/app, where the tab stayed "visible" so the handler above
  // doesn't fire). Both routes drop the caret into the composer so you're ready
  // to type — the Mac app does the same on didBecomeActive.
  window.addEventListener("focus", () => {
    focusChatComposer();
    onSawActiveThread();
  });
}

// Coming back to the app with a thread open means you've now seen whatever
// arrived in it while you were away — advance its synced read watermark
// (messages landing in the ACTIVE thread never set the local dot, so without
// this the user's other devices would keep showing one).
function onSawActiveThread() {
  if (activeId) markThreadRead(activeId);
}

// Being in the app means you've seen what the banners were shouting about: close
// any lchat notifications still sitting in the shade. Same sweep a notification
// tap does in sw.js — the shared "lchat-message" tag means there's at most one,
// covering whichever thread pushed last, so closing all loses nothing.
function clearNotifications() {
  if (!("serviceWorker" in navigator)) return;
  navigator.serviceWorker.getRegistration().then(async (reg) => {
    if (!reg) return;
    for (const n of await reg.getNotifications()) n.close();
  }).catch(() => {});
}

// Drop the caret into the live chat composer (the id-less chat.js <textarea>
// inside .chatapp-root) when the app regains focus. Desktop/Mac only: on touch,
// refocusing would pop the on-screen keyboard up on every foreground. Scoped by
// selector rather than a stashed reference so it always targets the currently
// connected root (survives the instant-restore path, which re-attaches a parked
// root without rebuilding). Exposed as a global so the Mac shell can call it too
// — it runs the full web UI, not the embed-only window.lchatNative bridge.
function focusChatComposer() {
  if (isCoarse) return;
  const ta = document.querySelector(".chatapp-root .composer .composer-input");
  if (!ta || ta === document.activeElement) return;
  // Don't yank the caret out of another field the user left mid-edit (search,
  // an inline rename, …) — only auto-focus when nothing editable holds focus.
  const active = document.activeElement;
  if (
    active &&
    active !== document.body &&
    (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable)
  )
    return;
  ta.focus();
}
window.lchatFocusComposer = focusChatComposer;

// ⌘K palette bridge (Mac app). The native command palette asks the web layer
// what it can offer — the chats on this server plus the actions available to
// this member — and calls back with a pick. Labels and behaviour live HERE
// (one source of truth, like the native-menu bridge); native only draws rows.
// Returns null until the app has booted, so a join/onboarding page offers
// nothing. Kept as data-out + id-back so no web internals leak across.
window.lchatPaletteItems = () => {
  if (!myUserId) return null;
  // Same set + order as the sidebar: closed chats dropped, pinned first, then
  // most-recent-first — so the palette's top hits mirror the list you know.
  const recencyOf = (t) => t.last_at || t.created_at || 0;
  const shown = pinnedFirst(
    threads.filter((t) => !hidden[t.id]),
    (t) => pinned[t.id],
    recencyOf,
  );
  const chats = shown.map((t) => ({
    id: t.id,
    name: threadName[t.id] || "Chat",
    glyph: threadApp[t.id] ? (appByName(threadApp[t.id]) || {}).glyph || "▦" : null,
    active: t.id === activeId,
  }));
  // Only actions that would actually work right now: a group needs someone to
  // add, invites need the admin's say-so, apps need at least one registered.
  const others = roster.some((e) => e.user_id !== myUserId && e.public_key);
  const actions = [{ id: "new-chat", label: "New chat" }];
  if (others) actions.push({ id: "new-group", label: "New group" });
actions.push({ id: "discover", label: "Discover groups" });
  // Membership: only when the space sells any level, or you already subscribe.
  if (tiers.some((t) => t.price_cents > 0 || t.status)) actions.push({ id: "membership", label: "Membership" });
  if (inviteAllowed()) actions.push({ id: "invite", label: "Invite someone" });
  if (ENABLE_APPS && pickerApps().length) actions.push({ id: "apps", label: "Open apps" });
  // Deliberately outside the apps gate: Admin is how an admin would switch
  // apps back on, so it must stay reachable when they're off.
  if (isAdmin()) actions.push({ id: "admin", label: "Open admin" });
  actions.push(
    { id: "add-device", label: "Add a device" },
    { id: "theme", label: "Theme" },
    { id: "edit-profile", label: "Edit profile" },
    { id: "leave", label: "Leave", danger: true },
  );
  return { chats, actions };
};
window.lchatPaletteRun = (kind, id) => {
  if (kind === "chat") return void openThreadById(id);
  const run = {
    "new-chat": () => showNewChat(),
    "new-group": () => showNewChat("group"),
    discover: showDiscover,
    membership: showMembership,
    invite: () => showNewChat("invite"),
    apps: showApps,
    admin: async () => {
      const id = await resolveAppThread("admin");
      if (id) openThread(id);
    },
    "add-device": addDevice,
    theme: showThemePicker,
    "edit-profile": editProfile,
    leave,
  }[id];
  if (run) run();
};

// A one-line snippet for the chat list: "Name: text" in groups, just text in DMs.
function previewText(t, data) {
  // The actor, resolved by uid like the bubble headers (#592) — my name for
  // them, their current name, then the payload's snapshot. Both the reaction
  // line and the group prefix below name them.
  const who = (data.uid && displayNameFor(nicknames[data.uid], (roster.find((x) => x.user_id === data.uid) || {}).label)) || data.name;
  // A reaction event: it has no text of its own, so say what happened —
  // "James reacted 👍 to “buy milk”" (#520 left this blank). It names the
  // actor itself, so it returns before the group prefix below.
  if (data.type === "reaction") return reactionLine(data.uid && data.uid === myUserId ? "You" : who, data);
  // A conversion has no text either. Saying what happened beats the blank row
  // it would otherwise leave — the server counts the event as the thread's
  // newest message, so this row is what a reload renders regardless. The count
  // is what the FOLD took, not what the payload asked for: a huge crafted list
  // is capped there, and the line must not claim more than moved.
  if (data.type === "threadconvert") return convertLine(data.uid && data.uid === myUserId ? "You" : who, Math.min((data.ids || []).length, MAX_CONVERT_IDS));
  // Through the markdown plain projection, never raw: raw text leaks the
  // composer's opt-out escapes as visible backslashes (\*lit\*), and shows
  // the marks the bubble renders as styling.
  let body = mdPlainText(data.text || "").replace(/\s+/g, " ").trim();
  // The feed shows @mentions as the viewer's own names for people (#577); the
  // plain-text preview says the same thing (also rides into native notify).
  body = translateMentions(body, nicknameRenames());
  const atts = data.attachments || [];
  if (!body && atts.length) {
    const n = atts.length;
    if (atts.every((a) => a.type && a.type.startsWith("image/"))) {
      body = n > 1 ? `📷 ${n} photos` : "📷 Photo";
    } else {
      body = n > 1 ? `📎 ${n} files` : "📎 " + ((atts[0] && atts[0].name) || "File");
    }
  }
  // An action line ("Alice waves") already names the actor — skip the group
  // prefix so it doesn't double up ("Alice: Alice waves").
  return t.kind === "group" && who && !data.action ? `${who}: ${body}` : body;
}

// Published label → my name for them, for every member I've renamed — the map
// translateMentions rewrites plain text with.
function nicknameRenames() {
  const map = {};
  for (const e of roster) {
    const nick = nicknames[e.user_id];
    if (nick && nick.name && e.label && nick.name !== e.label) map[e.label] = nick.name;
  }
  return map;
}

// Native (Eleven) local notification: inside the Mac wrapper, hand a decrypted
// preview to the app so it posts a system notification. No-op on the web (there the
// service worker handles push). Suppresses your own messages and the thread you're
// actively reading in a focused window.
function maybeNativeNotify(tid, data, preview) {
  const bridge = window.webkit?.messageHandlers?.lchatNotify;
  if (!bridge) return;
  if (ownMessage(data, myUserId, session.name)) return;
  if (tid === activeId && document.hasFocus()) return;
  try {
    bridge.postMessage({ title: threadName[tid] || "New message", body: preview, thread: tid });
  } catch (e) {}
}

async function displayName(t) {
  if (t.kind === "self") {
    // A self thread may be a mini-app: its app id rides encrypted in name_blob
    // (the server can't tell a todo from a poll from plain "Notes"). Decrypt to
    // find out which app to render; a bare self thread is "Notes".
    if (t.name_blob && threadKeys[t.id]) {
      try {
        const d = await decrypt(threadKeys[t.id], t.name_blob);
        if (d && d.app) {
          threadApp[t.id] = d.app;
          const a = appByName(d.app);
          return a ? a.title || a.name : d.app;
        }
      } catch {}
    }
    return "Notes";
  }
  if (t.kind === "dm") {
    const other = (t.members || []).find((id) => id !== myUserId);
    return rosterLabel(other);
  }
  // group: an explicit name is encrypted in name_blob under the thread key;
  // with no name (or if it won't decrypt), fall back to the member names —
  // "Paul, Ciara & Luan", collapsing to "Paul, Ciara & 24 more" past three.
  const fallback = autoGroupTitle((t.members || []).filter((id) => id !== myUserId).map(rosterLabel));
  if (t.name_blob && threadKeys[t.id]) {
    try {
      return (await decrypt(threadKeys[t.id], t.name_blob)).name || fallback;
    } catch {
      return fallback;
    }
  }
  return fallback;
}

// threadName[] is cached from the roster labels available at load time. Those
// names are encrypted under the instance key, so a new joiner who receives the
// key late (or anyone getting a live label update) has stale titles. Re-derive
// them from the current roster labels.
async function recomputeThreadNames() {
  await Promise.all(threads.map(async (t) => (threadName[t.id] = await displayName(t))));
  // Snippets bake names in too (sender prefix, @mentions) — re-derive them
  // from their retained payloads with the labels/nicknames now in hand.
  for (const t of threads) if (previewPayload[t.id]) threadPreview[t.id] = previewText(t, previewPayload[t.id]);
}

// Recompute titles and repaint everywhere a name shows — the chat list, the open
// thread header, and the service worker's notification titles. For use after the
// app shell exists (post-boot: the key arriving, or a live label event).
async function refreshNamesUI() {
  await recomputeThreadNames(); // also re-derives the baked-name snippets
  renderThreadList();
  if (activeId) {
    const el = document.getElementById("thread-title");
    if (el) el.textContent = threadName[activeId] || "Chat";
    // A label change may mean a DM partner renamed themself past my nickname
    // for them (#577) — offer the keep/adopt choice (or clear a settled one).
    updateRenameBanner(threads.find((x) => x.id === activeId));
  }
  syncThreadKeysToSW();
}

// The instance key just became available AFTER the app shell was up — a new
// joiner received it late (via poll, or a holder granting it over the socket).
// Everything gated on the key can now run: decrypt others' names, publish our
// own (so the people we're talking to stop seeing "Someone"), and repaint.
async function onInstanceKeyReady() {
  if (!instanceKey) return;
  await decryptRosterLabels();
  // Open groups joined on another device were skipped at boot (their key
  // travels under the instance key) — re-fold the list now the key is here.
  await loadThreads();
  renderThreadList();
  // Member apps couldn't decrypt at boot without the key — register them now.
  await loadMemberAppsNow();
  // Same for the space thread: its key travels under the instance key too.
  await loadSpaceThread();
  await publishMyLabel();
  await refreshNamesUI();
  refreshAvatars();
  refreshProfilePhotoBtn();
}

// ---- shell --------------------------------------------------------------

function renderApp() {
  app.innerHTML = "";
  app.appendChild(tpl("app-tpl"));
  paintSpaceName(); // the template carries the served name; sealed branding may already have corrected the title

  document.getElementById("new-chat").onclick = showNewChat;
  document.getElementById("back-btn").onclick = showList;
  wireSplitDivider();

  // Filter the chat list as you type (name match only; never sent anywhere) —
  // and search MESSAGES too (#586): matches from the local store render below
  // the (filtered) chat list. All local: nothing typed here leaves the device.
  const filter = document.getElementById("chat-filter");
  if (filter)
    filter.oninput = () => {
      chatFilter = filter.value.trim().toLowerCase();
      renderThreadList();
      scheduleMessageSearch(filter.value.trim());
    };

  // The funnel beside search: a small menu of list filters ("Show online
  // only" + People/Bots/Apps). Checkboxes apply live and the panel stays open
  // while ticking; it closes on outside click like the kebab. The funnel
  // highlights whenever any filter deviates from the show-everything default.
  const filterBtn = document.getElementById("filter-btn");
  const filterMenu = document.getElementById("filter-menu");
  if (filterBtn && filterMenu) {
    filterBtn.onclick = (e) => {
      e.stopPropagation();
      const open = filterMenu.classList.toggle("hidden");
      filterBtn.setAttribute("aria-expanded", String(!open));
    };
    document.addEventListener("click", (e) => {
      if (e.target !== filterBtn && !filterBtn.contains(e.target) && !filterMenu.contains(e.target)) {
        filterMenu.classList.add("hidden");
        filterBtn.setAttribute("aria-expanded", "false");
      }
    });
    for (const key of ["online", "people", "bots", "apps"]) {
      const cb = document.getElementById(`flt-${key}`);
      if (!cb) continue;
      cb.checked = chatFilters[key];
      cb.oninput = () => {
        chatFilters[key] = cb.checked;
        filterBtn.classList.toggle(
          "active",
          chatFilters.online || !chatFilters.people || !chatFilters.bots || !chatFilters.apps,
        );
        renderThreadList();
      };
    }
  }

  // Kebab menu (beside ＋): add device / rename / leave.
  const menu = document.getElementById("menu");
  const menuBtn = document.getElementById("menu-btn");
  const closeMenu = () => menu.classList.add("hidden");
  menuBtn.onclick = (e) => {
    e.stopPropagation();
    if (nativeMenu) return openNativeMenu(menu, menuBtn); // native NSMenu on the Mac app
    menu.classList.toggle("hidden");
  };
  document.addEventListener("click", (e) => {
    if (e.target !== menuBtn && !menu.contains(e.target)) closeMenu();
  });
  const wireItem = (id, fn) =>
    (document.getElementById(id).onclick = () => {
      closeMenu();
      fn();
    });
  wireItem("menu-about", showSpaceInfo);
  // The Apps directory from the SPACE's own menu — reachable without standing
  // in any particular chat. An OPEN chat still counts as "This chat" in the
  // sheet (you're looking at it); with none open, that place dims and says so.
  // Part of the places UI (§ The pullback): with it hidden, the ＋ picker
  // (personal copies) and each chat's ⋮ → Apps (this chat) are the only
  // doors, so the item hides entirely.
  if (PLACES_UI) wireItem("menu-apps", () => manageGroupApps({ space: true }));
  else document.getElementById("menu-apps").style.display = "none";
  wireItem("menu-theme", showThemePicker);
  wireItem("menu-add-device", addDevice);
  // Open in the Eleven app — the "Continue on web" regret path (an
  // add-device link fired over the app scheme; adddevice.js). Mac desktop
  // browsers only: the Mac app is the one scheme receiver today (iOS parity
  // tracked in the handoff plan), !isCoarse keeps iPads out (Safari there
  // reports MacIntel), and inside a native webview the item is noise.
  if (/Mac/i.test(navigator.platform || "") && !isCoarse
      && !document.documentElement.classList.contains("native")) {
    document.getElementById("menu-open-app").hidden = false;
    wireItem("menu-open-app", openInApp);
  }
  wireItem("menu-rename", editProfile);
  wireItem("menu-leave", leave);

  // Upgrade — revealed only on a free cloud-provisioned space in a real
  // browser. The checkout lives on the home page (this server has no billing
  // surface), and the native wrappers must not link out to external purchases
  // (App Store rules), so they stay quiet. Self-hosted instances have no
  // __entitlement and never see this.
  const inNativeWrapper =
    document.documentElement.classList.contains("native") ||
    !!(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.lchat);
  if (window.__entitlement === "free" && window.__homeOrigin && !inNativeWrapper) {
    // A real <a> (not a button + window.open): ad/privacy-blocker extensions
    // commonly swallow script-initiated window.open() popups silently — no
    // console error, no address-bar indicator — while leaving ordinary link
    // navigation alone. closeMenu() runs as a plain side effect; it never
    // calls preventDefault, so the browser still follows href natively.
    const upgradeLink = document.getElementById("menu-upgrade");
    upgradeLink.hidden = false;
    upgradeLink.href = window.__homeOrigin + "/#upgrade=" + encodeURIComponent(location.host);
    upgradeLink.onclick = closeMenu;
  }

  // Demo countdown band (docs/demo-spaces.md): a demo space wears its 24-hour
  // death across the top — disclosed from the first second, with the one happy
  // exit (claim it into an account, on the home page) a tap away. The boot-time
  // flag only says "born a demo": a claim flips the ledger WITHOUT restarting
  // this instance, so the HOME server's live status decides whether the band
  // shows at all, and hides it when the user comes back from claiming.
  if (window.__entitlement === "demo" && window.__homeOrigin && !embed) {
    const banner = document.getElementById("demo-banner");
    const text = document.createElement("span");
    text.className = "demo-banner-text";
    let ticker = 0;
    const dismiss = () => {
      banner.classList.add("hidden");
      if (ticker) clearInterval(ticker);
      ticker = 0;
    };
    const paint = (expiresAt) => {
      const left = expiresAt ? expiresAt * 1000 - Date.now() : NaN;
      if (Number.isNaN(left)) {
        text.textContent = "This is a demo space — it disappears 24 hours after it was created.";
      } else if (left <= 0) {
        text.textContent = "This demo has ended — the space will disappear shortly.";
        banner.classList.add("demo-over");
      } else {
        text.textContent = "This is a demo space — it disappears in " + formatCountdown(left) + ".";
      }
    };
    const check = async () => {
      let expiresAt = 0; // unix seconds; 0 = status unreachable (generic copy)
      try {
        const res = await fetch(
          window.__homeOrigin + "/api/spaces/demo-status?host=" + encodeURIComponent(location.host),
        );
        if (!res.ok) throw new Error();
        const body = await res.json();
        if (!body.demo) return dismiss(); // claimed — the space is safe now
        expiresAt = body.expires_at || 0;
      } catch {
        /* home unreachable — the death is still the contract; show the band */
      }
      if (!banner.contains(text)) {
        banner.append(text);
        // Claiming is free (not a purchase), but the native wrappers keep all
        // account plumbing out-of-app for now — same posture as Upgrade above.
        if (!inNativeWrapper) {
          const keep = document.createElement("a");
          keep.className = "demo-banner-keep";
          keep.textContent = "Keep this space";
          keep.href = window.__homeOrigin + "/#claim=" + encodeURIComponent(location.host);
          keep.target = "_blank";
          keep.rel = "noopener";
          banner.append(keep);
        }
      }
      paint(expiresAt);
      banner.classList.remove("hidden");
      if (ticker) clearInterval(ticker);
      if (expiresAt) ticker = setInterval(() => paint(expiresAt), 30_000);
    };
    check();
    // The claim happens in another tab; re-check when this one comes back into
    // view so the band vanishes the moment the space is actually theirs.
    // (renderApp can re-mount the template — a listener over a replaced band
    // retires itself via isConnected.)
    document.addEventListener("visibilitychange", () => {
      if (!banner.isConnected) return;
      if (document.visibilityState === "visible" && !banner.classList.contains("hidden")) check();
    });
  }

  // Notifications toggle (hidden where push isn't usable, e.g. iOS before install).
  const notif = document.getElementById("menu-notif");
  const refreshNotif = async () => {
    if (!pushAvailable()) {
      notif.style.display = "none";
      return;
    }
    notif.textContent =
      pushEnabled() && (await isSubscribed()) ? "Turn off notifications" : "Turn on notifications";
  };
  refreshNotif();
  notif.onclick = async () => {
    closeMenu();
    if (pushDenied()) {
      alert("Notifications are blocked for this site in your browser settings.");
      return;
    }
    if (pushEnabled() && (await isSubscribed())) await unsubscribePush();
    else await subscribePush(session);
    refreshNotif();
  };

  // "Me" avatar (top-left) → edit profile.
  paintAvatar(document.getElementById("me-avatar"), session.name, () => avatarFor(myUserId));
  document.getElementById("me-btn").onclick = editProfile;

  // The ▤ Views dropdown (beside the kebab): the chat's live views, plus
  // Memory as the persistent view of an AI DM. Rebuilt on every open, so it
  // always reflects the folded state of the thread you're looking at.
  const vmenu = document.getElementById("views-menu");
  const vmenuBtn = document.getElementById("views-menu-btn");
  const closeVMenu = () => vmenu.classList.add("hidden");
  vmenuBtn.onclick = (e) => {
    e.stopPropagation();
    closeTMenu(); // one header menu at a time
    if (!vmenu.classList.contains("hidden")) return closeVMenu();
    vmenu.replaceChildren();
    // The standing last item closes whatever the sidebar is showing — the
    // menu is the sidebar's home, so its off switch lives here too.
    const entries = [...viewsMenuEntries(activeId)];
    if (openPanelTitle[activeId]) entries.push({ label: "Close views sidebar", open: () => closeCommandPanel(activeId) });
    for (const entry of entries) {
      // A row is a DIV holding sibling buttons (open + remove) — a button
      // can't legally nest a button, and browsers eject the inner one.
      const row = document.createElement("div");
      row.className = "menu-item views-item";
      const b = document.createElement("button");
      b.className = "views-item-main";
      b.setAttribute("role", "menuitem");
      // A command row (Close) is plain text; view rows carry their glyph.
      if (entry.svg || entry.glyph) {
        const g = document.createElement("span");
        g.className = "views-item-glyph";
        if (entry.svg) g.innerHTML = entry.svg; // static in-code SVG, never data
        else g.textContent = entry.glyph;
        b.appendChild(g);
      }
      const l = document.createElement("span");
      l.className = "views-item-label";
      l.textContent = entry.label;
      b.appendChild(l);
      b.onclick = () => {
        closeVMenu();
        entry.open();
      };
      row.appendChild(b);
      // A bot view you're done with removes from here — the ✕ emits the
      // existing view.remove event, so it leaves for every member and device
      // (Memory and the close row aren't removable; they carry no remove).
      if (entry.remove) {
        const x = document.createElement("button");
        x.className = "views-item-x";
        x.setAttribute("aria-label", `Remove "${entry.label}"`);
        x.innerHTML = ICON_X; // static in-code SVG
        x.onclick = (e) => {
          e.stopPropagation();
          closeVMenu();
          entry.remove();
        };
        row.appendChild(x);
      }
      vmenu.appendChild(row);
    }
    vmenu.classList.remove("hidden");
  };
  document.addEventListener("click", (e) => {
    if (e.target !== vmenuBtn && !vmenu.contains(e.target)) closeVMenu();
  });
  // A view folding in (or out of) the open thread re-paints the button.
  document.addEventListener("lchat:views-changed", () => paintViewsMenu(activeId));
  // Mirror what the sidebar is showing: the button reads "Open" at rest and
  // the open view's own name while one is up (additive observer — the
  // command-host embed keeps the set-slot).
  addCommandPanelObserver((threadId, spec) => {
    openPanelTitle[threadId] = (spec && spec.title) || "";
    if (threadId === activeId) paintViewsMenu(threadId);
  });

  // Per-thread kebab (thread header): rename group / view members.
  const tmenu = document.getElementById("thread-menu");
  const tmenuBtn = document.getElementById("thread-menu-btn");
  tmenuBtn.innerHTML = ICON_MORE_VERTICAL; // static in-code SVG (icons.js)
  const backBtn = document.getElementById("back-btn");
  if (backBtn) backBtn.innerHTML = ICON_CHEVRON_LEFT;
  const closeTMenu = () => tmenu.classList.add("hidden");
  tmenuBtn.onclick = (e) => {
    e.stopPropagation();
    closeVMenu(); // one header menu at a time
    if (nativeMenu) return openNativeMenu(tmenu, tmenuBtn); // native NSMenu on the Mac app
    tmenu.classList.toggle("hidden");
  };
  document.addEventListener("click", (e) => {
    if (e.target !== tmenuBtn && !tmenu.contains(e.target)) closeTMenu();
  });
  document.getElementById("thread-add").onclick = () => {
    closeTMenu();
    addPeople();
  };
  document.getElementById("thread-edit").onclick = () => {
    closeTMenu();
    editGroup();
  };
  document.getElementById("thread-members").onclick = () => {
    closeTMenu();
    showMembers();
  };
  document.getElementById("thread-media").onclick = () => {
    closeTMenu();
    openMediaView(activeId);
  };
  document.getElementById("thread-apps").onclick = () => {
    closeTMenu();
    manageGroupApps();
  };
  document.getElementById("thread-pin").onclick = () => {
    closeTMenu();
    togglePin();
  };
  document.getElementById("thread-mute").onclick = () => {
    closeTMenu();
    toggleMute();
  };
  document.getElementById("thread-close").onclick = () => {
    closeTMenu();
    closeChat();
  };
  document.getElementById("thread-end").onclick = () => {
    closeTMenu();
    endConversation();
  };
  document.getElementById("thread-block").onclick = (e) => {
    closeTMenu();
    const uid = e.currentTarget.dataset.uid;
    if (uid) viewProfile(uid); // the profile's Block button + its consequence note
  };
  document.getElementById("thread-remove").onclick = (e) => {
    closeTMenu();
    const uid = e.currentTarget.dataset.uid;
    if (uid) confirmRemoveFromSpace(uid); // its dialog carries the whole-space warning
  };
  document.getElementById("thread-leave").onclick = () => {
    closeTMenu();
    leaveGroup();
  };

  renderThreadList();
  // Embed mode opens its one thread explicitly (bootEmbed); don't auto-pick here.
  if (embed) return Promise.resolve();
  // Choose the thread to land in, in priority order: a tapped-notification
  // deep-link (#thread=), the one we were last in (so a refresh reloads where you
  // were), else — desktop only — the first visible chat. Returns the open promise
  // so boot() can drop the loading cover once the feed is in place (no jump).
  const deep = initialThreadId();
  let target = null;
  // A fresh join (set by the join flow) wins — land straight in that new chat.
  const justJoined = localStorage.getItem("lchat_open_thread");
  if (justJoined) localStorage.removeItem("lchat_open_thread");
  setPendingJoinThread(justJoined || pendingJoinThread); // the welcome conversation's "Say hi" chip needs it later
  if (justJoined && threads.some((t) => t.id === justJoined)) {
    target = justJoined;
  } else if (deep && threads.some((t) => t.id === deep)) {
    history.replaceState(null, "", location.pathname + location.search); // consume the deep link
    target = deep;
  } else {
    const saved = localStorage.getItem(ACTIVE_KEY);
    if (saved && threads.some((t) => t.id === saved) && !hidden[saved]) target = saved;
    else if (!isCoarse) target = (threads.find((t) => !hidden[t.id]) || {}).id || null;
  }
  return target ? openThread(target) : Promise.resolve();
}

// The thread id from a deep-link fragment (#thread=<id>), or null. Kept in the
// fragment (not a query) so it never reaches the server — see sw.js.
function initialThreadId() {
  const m = /(?:^|[#&])thread=([^&]+)/.exec(location.hash || "");
  return m ? decodeURIComponent(m[1]) : null;
}

// The opaque message-link token from a "Copy link" permalink fragment
// (#l=<token>) — issue #893. Whether we arrived directly or via an
// https://11ch.at/l/<host> redirect, the fragment survives (redirects with no
// fragment of their own reattach the original), so this is the one landing
// spot for both. Kept in the fragment for the same reason as #thread=: never
// sent to this server, let alone 11ch.at's.
function initialMessageLinkToken() {
  const m = /(?:^|[#&])l=([^&]+)/.exec(location.hash || "");
  return m ? decodeURIComponent(m[1]) : null;
}

// Consumes a pending #l= permalink fragment, if any: resolves the token via
// this instance's own server (the only place that holds the key to open it —
// links.go) and jumps to the message. The resolve call itself enforces CURRENT
// thread membership, so a stale link a since-removed member held onto simply
// stops working — nothing here trusts the fragment's contents on faith.
async function openInitialMessageLink() {
  const tok = initialMessageLinkToken();
  if (!tok) return;
  history.replaceState(null, "", location.pathname + location.search); // consume it, like #thread=
  try {
    const r = await fetch(`/api/resolve-link?token=${encodeURIComponent(session.token)}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: tok }),
    });
    if (!r.ok) return;
    const { thread_id, message_id } = await r.json();
    if (thread_id && message_id) await jumpToMessage(thread_id, message_id);
  } catch {
    // Offline / server unreachable: the app still opens normally, just without
    // the jump — same graceful degradation as a broken #thread= deep link.
  }
}

// Open a thread by id, tolerating one we haven't loaded yet (e.g. a notification
// for a thread created while this tab was asleep). Used by the SW deep-link.
async function openThreadById(id) {
  if (!threads.some((t) => t.id === id)) {
    await loadThreads();
    renderThreadList();
  }
  if (threads.some((t) => t.id === id)) openThread(id);
}

// A thread's avatar node, as the chat list paints it: DM/self rows show the
// person's profile photo, groups their thread photo, app-threads the app's
// glyph (or its shipped image — Eleven wears the app icon). Shared with the
// search dropdown's Conversations rows so the two surfaces can't drift.
function threadRowAvatarEl(t) {
  const appName = threadApp[t.id];
  if (appName) {
    const app = appByName(appName);
    const av = document.createElement("span");
    av.className = "avatar app-avatar";
    // An app can ship an avatar image (Eleven wears the app icon); the glyph
    // stays the fallback. In-code URLs only — never user content.
    if (app && app.avatar) {
      av.style.backgroundImage = `url(${app.avatar})`;
      av.style.backgroundSize = "cover";
      av.setAttribute("role", "img");
      av.setAttribute("aria-label", (app && app.title) || appName);
    } else {
      appGlyphInto(av, app);
    }
    return av;
  }
  let loader = null;
  if (t.kind === "group") loader = () => threadAvatarFor(t.id);
  else {
    const u = t.kind === "self" ? myUserId : (t.members || []).find((id) => id !== myUserId);
    loader = () => avatarFor(u);
  }
  return avatarEl(threadName[t.id] || "?", loader);
}

function renderThreadList() {
  const list = document.getElementById("thread-list");
  if (!list) return;
  list.innerHTML = "";
  // The search box only earns its space once there's a list to filter.
  const search = document.getElementById("chat-search");
  if (search) search.classList.toggle("hidden", !threads.length);
  if (!threads.length) {
    const empty = document.createElement("p");
    empty.className = "thread-empty-note";
    empty.textContent = "No chats yet. Tap the compose button to start one.";
    list.appendChild(empty);
    return;
  }
  // A search reveals everything that matches (so a closed chat can be found and
  // reopened); the default list hides closed chats. Both bands (pinned, then the
  // rest) are ordered most-recent-first: last_at is the last message's time, with
  // created_at as the fallback so a brand-new empty chat sorts by when it was made
  // (mirrors the server's ORDER BY). This is what floats a chat to the top the
  // moment it has new activity — the active chat and your own sends included.
  const recencyOf = (t) => t.last_at || t.created_at || 0;
  let base = chatFilter
    ? threads.filter((t) => (threadName[t.id] || "").toLowerCase().includes(chatFilter))
    : threads.filter((t) => !hidden[t.id]);
  // The funnel menu: category checkboxes (People/Bots/Apps), then online-only.
  const filtering = chatFilters.online || !chatFilters.people || !chatFilters.bots || !chatFilters.apps;
  if (filtering) {
    const others = (t) =>
      (t.members || [])
        .filter((id) => id !== myUserId)
        .map((id) => roster.find((x) => x.user_id === id))
        .map((e) => ({ agent: !!(e && e.is_agent), presence: (e && e.presence) || "" }));
    base = base.filter((t) => {
      const o = others(t);
      if (!chatFilters[chatCategory(!!threadApp[t.id], o)]) return false;
      return !chatFilters.online || onlineFilterKeeps(o);
    });
  }
  const shown = pinnedFirst(base, (t) => pinned[t.id], recencyOf);
  // ---- the space band: one row per space-wide install ----------------------
  // The row IS the app's home — its interface opens full-pane from here, and
  // only here (space copies never ride other chats' widget bars: place =
  // location, docs/space-apps.md). Registry (install) order; filtered like
  // chats — the search by title, the funnel's Apps category. Activity previews
  // + the unread dot ride the owning app's own preview/unread hooks, folded
  // live off the space thread's log.
  let spaceRows = 0;
  // Apps standing as space rows this pass — the personal-thread loop below
  // reads it to spot the twins (same app, two rows) and label its side.
  const spaceRowApps = new Set();
  if (spaceThreadId && (!filtering || chatFilters.apps) && !chatFilters.online) {
    for (const app of spaceAppsFor()) {
      if (!app.render) continue; // a command-only install has no surface to open
      // The row is named after the SPACE ("Lazyatom To-do") so it never reads
      // as a twin of the personal "To-do" beside it; search matches what the
      // row shows (the app title is always inside it).
      const rowTitle = spaceRowTitle(app.title || app.name, spaceBrandName);
      if (chatFilter && !rowTitle.toLowerCase().includes(chatFilter)) continue;
      spaceRows++;
      spaceRowApps.add(app.name);
      const row = document.createElement("button");
      row.className = "thread-row space-row" + (activeId === spaceThreadId && spaceAppOpen === app.name ? " active" : "");
      const av = document.createElement("span");
      av.className = "avatar app-avatar";
      if (spaceAvatarSrc) {
        // The tile pairs the space's photo and the app glyph as EQUAL halves
        // (two same-sized circles on the diagonal) — the twins stop being
        // visual twins (words still carry the state: title, badge, resting
        // line). The URL is in-code or an object URL from the sealed
        // decrypt — never user content.
        av.classList.add("space-app-avatar");
        av.setAttribute("role", "img");
        av.setAttribute("aria-label", rowTitle);
        const photo = document.createElement("span");
        photo.className = "space-app-photo";
        photo.style.backgroundImage = `url(${spaceAvatarSrc})`;
        av.appendChild(photo);
        const chip = document.createElement("span");
        chip.className = "space-app-glyph";
        appGlyphInto(chip, app);
        av.appendChild(chip);
      } else {
        appGlyphInto(av, app);
      }
      row.appendChild(av);
      const body = document.createElement("span");
      body.className = "thread-row-body";
      const name = document.createElement("span");
      name.className = "thread-row-name";
      const nameText = document.createElement("span");
      nameText.className = "thread-row-name-text";
      nameText.textContent = rowTitle; // space + member-app names are user content — textContent
      name.appendChild(nameText);
      const badge = document.createElement("span");
      badge.className = "app-badge space-badge";
      badge.textContent = "space";
      name.appendChild(badge);
      body.appendChild(name);
      const prev = document.createElement("span");
      prev.className = "thread-row-preview";
      // The resting line is the orientation itself — the words every other
      // surface uses for this place.
      prev.textContent = spaceAppPreview[app.name] || "For everyone in this space";
      body.appendChild(prev);
      row.appendChild(body);
      const meta = document.createElement("span");
      meta.className = "thread-row-meta";
      const dot = document.createElement("span");
      dot.className = "unread-dot" + (spaceAppUnread[app.name] ? " on" : "");
      meta.appendChild(dot);
      row.appendChild(meta);
      row.onclick = () => openSpaceApp(app.name);
      list.appendChild(row);
    }
  }
  if (!shown.length) {
    // With space rows standing, an empty chat list needs no "no matches" note.
    if (!spaceRows) {
      const empty = document.createElement("p");
      empty.className = "thread-empty-note";
      empty.textContent = chatFilters.online
        ? "No one's online right now."
        : filtering
          ? "No chats match your filters."
          : "No chats match your search.";
      list.appendChild(empty);
    }
    return;
  }
  for (const t of shown) {
    const row = document.createElement("button");
    row.className = "thread-row" + (t.id === activeId ? " active" : "");
    row.dataset.id = t.id;
    row.appendChild(threadRowAvatarEl(t));
    const appName = threadApp[t.id]; // the badge + blurb below still key off it

    const body = document.createElement("span");
    body.className = "thread-row-body";
    const name = document.createElement("span");
    name.className = "thread-row-name";
    // Text in its own span so it keeps ellipsis-truncating while the row is a
    // flex line (which vertically centers the name with any badge).
    const nameText = document.createElement("span");
    nameText.className = "thread-row-name-text";
    nameText.textContent = threadName[t.id] || "Chat";
    name.appendChild(nameText);
    // Badge a DM whose other member is a helper, so the chat index shows AI/BOT
    // like the picker and message senders do (muted — it repeats per row).
    if (t.kind === "dm") {
      const other = (t.members || []).find((id) => id !== myUserId);
      const e = roster.find((x) => x.user_id === other);
      if (e && e.is_agent) name.appendChild(agentTag(true, e.kind));
    }
    body.appendChild(name);
    if (appName) {
      // An app may present as a persona rather than a tool (the setup thread is
      // "Eleven", badged BOT) — senderKind overrides the generic APP chip.
      const a = appByName(appName);
      if (a && a.senderKind) {
        name.appendChild(agentTag(true, a.senderKind));
      } else {
        // When the same app also stands as a space row (the twins), the
        // generic "app" chip gives way to the place words — both rows then
        // name their side (the space row's badge + title already do), in the
        // Apps sheet's own selector vocabulary.
        const collide = spaceRowApps.has(appName);
        const badge = document.createElement("span");
        badge.className = collide ? "place-badge" : "app-badge";
        badge.textContent = collide ? "Just for you" : "app";
        name.appendChild(badge);
      }
    }
    // An app thread with no activity yet falls back to its one-line blurb, so
    // the name doesn't sit alone, vertically centred (matches the native rows).
    const blurb = appName ? (appByName(appName) || {}).blurb : "";
    const previewLine = threadPreview[t.id] || blurb;
    if (previewLine) {
      const prev = document.createElement("span");
      prev.className = "thread-row-preview";
      prev.textContent = previewLine;
      body.appendChild(prev);
    }
    row.appendChild(body);

    const meta = document.createElement("span");
    meta.className = "thread-row-meta";
    const time = document.createElement("span");
    time.className = "thread-row-time";
    time.textContent = relTime(t.last_at);
    meta.appendChild(time);
    if (pinned[t.id]) {
      const pin = document.createElement("span");
      pin.className = "thread-row-pin";
      pin.innerHTML = ICON_PIN; // static in-code SVG (safe)
      meta.appendChild(pin);
    }
    if (muted[t.id]) {
      const mu = document.createElement("span");
      mu.className = "thread-row-mute";
      mu.innerHTML = ICON_MUTE; // static in-code SVG (safe)
      mu.setAttribute("role", "img");
      mu.setAttribute("aria-label", "Muted");
      meta.appendChild(mu);
    }
    // A muted chat never escalates: no unread dot (the mute icon marks the
    // state instead — state is never color alone).
    const dot = document.createElement("span");
    dot.className = "unread-dot" + (unread[t.id] && !muted[t.id] ? " on" : "");
    meta.appendChild(dot);
    row.appendChild(meta);

    row.onclick = () => openThread(t.id);
    list.appendChild(row);
  }
}

// ---- time separators + sender-name collapse (feed grouping) -------------

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 (within the past week) / a date, for the
// time-separator day 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" } : { month: "short", day: "numeric", year: "numeric" }
  );
}

// A centered separator that opens a burst. `withDay` prepends a bold day label
// ("Today 9:41 AM"); a within-day gap shows just the time ("2:15 PM").
function buildTimeSeparator(ms, withDay) {
  const sep = document.createElement("div");
  sep.className = "time-sep";
  if (withDay) {
    const day = document.createElement("strong");
    day.textContent = dayLabel(ms);
    sep.appendChild(day);
    sep.appendChild(document.createTextNode(" " + formatTime(ms)));
  } else {
    sep.textContent = formatTime(ms);
  }
  return sep;
}

// Nearest .msg sibling above `el`, skipping any .time-sep between messages.
function prevMsgOf(el) {
  let p = el && el.previousElementSibling;
  while (p && !p.classList.contains("msg")) p = p.previousElementSibling;
  return p;
}

// Nearest .msg sibling below `el`, skipping any .time-sep between messages.
function nextMsgOf(el) {
  let n = el && el.nextElementSibling;
  while (n && !n.classList.contains("msg")) n = n.nextElementSibling;
  return n;
}

// Ensure the right separator (or none) sits before `el`, based on the gap to the
// previous message. `el.dataset.t` is the message time (ms). The feed only grows
// at the bottom here (no history paging), so refreshing the appended message is
// enough.
function refreshSeparator(el) {
  if (!el || !el.classList || !el.classList.contains("msg")) return;
  const prev = prevMsgOf(el);
  const existing =
    el.previousElementSibling && el.previousElementSibling.classList.contains("time-sep")
      ? el.previousElementSibling
      : null;
  const curT = Number(el.dataset.t);
  let show, withDay;
  if (!prev) {
    show = true; // the oldest message always opens with a dated separator
    withDay = true;
  } else {
    const newDay = !sameDay(curT, Number(prev.dataset.t));
    show = newDay || curT - Number(prev.dataset.t) > TIME_SEPARATOR_GAP_MS;
    withDay = newDay;
  }
  if (show) {
    const sep = buildTimeSeparator(curT, withDay);
    if (existing) existing.replaceWith(sep);
    else el.parentNode.insertBefore(sep, el);
  } else if (existing) {
    existing.remove();
  }
}

// Collapse repeated sender names: a "them" message shows its name only when the
// sender differs from the message above, or a separator precedes it — so a run
// from one person is labelled once. Call after refreshSeparator (it reads whether
// a .time-sep now sits directly above).
function refreshSenderName(el) {
  const prevSib = el.previousElementSibling;
  const afterSeparator = !!prevSib && prevSib.classList.contains("time-sep");
  const prev = prevMsgOf(el);
  const sameSender = !!prev && prev.dataset.sender === el.dataset.sender;
  // Continuation of a same-sender run (no separator between) → tighter top gap
  // (.cont), so quick-succession messages aren't spaced like separate bursts.
  el.classList.toggle("cont", sameSender && !afterSeparator);
  const name = el.querySelector(":scope > .name");
  if (name) name.style.display = !afterSeparator && sameSender ? "none" : "";
}

function showList() {
  document.getElementById("tt").classList.remove("show-thread");
  // Back to the list is the state to restore on refresh (mobile), not the thread.
  localStorage.removeItem(ACTIVE_KEY);
}

// Header avatar: a group's photo, or the DM/self person's profile photo.
function paintHeaderAvatar(id) {
  const el = document.getElementById("thread-avatar");
  if (!el) return;
  const t = threads.find((x) => x.id === id);
  // The space home heads with the OPEN space app's mark; a personal
  // app-thread with its own app's.
  const ownerName = spaceThreadId && id === spaceThreadId ? spaceAppOpen : threadApp[id];
  const ownerApp = ownerName && appByName(ownerName);
  // A logo- or glyph-bearing app heads its thread with the mark itself — no
  // photo loader, no initials fallback (paintAvatar can't draw an inline SVG,
  // and the space thread has no name to take initials from).
  if (ownerApp && !ownerApp.avatar && (ownerApp.logo || ownerApp.glyph)) {
    el.classList.add("avatar", "app-avatar");
    el.classList.remove("zoomable");
    el.onclick = null;
    appGlyphInto(el, ownerApp);
    return;
  }
  let loader;
  if (ownerApp && ownerApp.avatar) loader = () => Promise.resolve(ownerApp.avatar); // e.g. Eleven's app icon
  else if (t && t.kind === "group") loader = () => threadAvatarFor(id);
  else {
    const u = t && t.kind === "self" ? myUserId : t && (t.members || []).find((x) => x !== myUserId);
    loader = () => avatarFor(u);
  }
  // Tap the header avatar to see the full (400px) photo in a lightbox — only
  // when there is one; an initials placeholder isn't clickable.
  el.onclick = null;
  el.classList.remove("zoomable");
  paintAvatar(el, threadName[id] || "?", loader).then((url) => {
    if (url) {
      el.classList.add("zoomable");
      el.onclick = () => openLightbox(url, el);
    }
  });
}

// Re-paint avatars across the UI (after a live avatar-change event).
function refreshAvatars() {
  renderThreadList();
  const me = document.getElementById("me-avatar");
  if (me) paintAvatar(me, session.name, () => avatarFor(myUserId));
  if (activeId) paintHeaderAvatar(activeId);
}

let openSeq = 0; // bumped each openThread so a slow history load bails if you switch away

// Per-thread full-pane app cache. A chat-app
// or personal-app thread renders full-pane into #app-pane; opening one used to wipe
// the pane and re-fetch + re-fold its whole history before anything painted, so
// every open flashed blank for the network round-trip (the "rebuilt/reduced every
// time" regression). Instead we park each opened app-thread's rendered root when you
// leave, and on return re-attach it and reconcile from the already-folded state —
// which live WS keeps current even for backgrounded threads — so the reopen is
// instant, then a background catch-up folds anything missed while the socket was down.
const appPaneCache = {}; // threadId -> { root, scrollTop, loaded }

// Detach the open app-thread's rendered root into its cache entry (saving the feed's
// scroll offset, which detaching would otherwise zero) so another thread can take the
// #app-pane slot. No-op unless the outgoing thread was a loaded app-thread — a normal
// chat leaves #app-pane empty.
function stashAppPane(id) {
  // The interface pane is re-rendered on open (not parked), so clear it here — a
  // normal chat opened next relies on #interface-pane:empty to hide/full-width.
  const iface = document.getElementById("interface-pane");
  if (iface) iface.textContent = "";
  const pane = document.getElementById("app-pane");
  const entry = appPaneCache[id];
  if (!pane || !entry) return;
  const root = pane.firstElementChild;
  if (!root) return;
  const feed = root.querySelector(".chatapp-feed");
  entry.scrollTop = feed ? feed.scrollTop : pane.scrollTop;
  entry.root = root;
  root.remove();
}

// The space home's header: the open space app's identity plus the one line
// that IS the orientation ("For everyone in this space"). No kebab and no
// views menu — there's nothing to mute, pin, or leave: membership is the
// space itself — and no view toggle (the home is single-pane by design).
function paintSpaceHeader() {
  const app = appByName(spaceAppOpen || "") || {};
  const title = document.getElementById("thread-title");
  // Same name the sidebar row wears (spaceRowTitle), so tapping a row never
  // lands on a differently-titled pane.
  title.textContent = spaceRowTitle(app.title || app.name || "app", spaceBrandName); // user content — textContent
  title.onclick = null;
  title.style.cursor = "";
  const sub = document.getElementById("thread-sub");
  sub.textContent = "For everyone in this space";
  sub.onclick = null;
  sub.style.cursor = "";
  document.getElementById("thread-menu-wrap").style.display = "none";
  paintViewsMenu(null);
  const toggle = document.getElementById("view-toggle");
  if (toggle) toggle.remove();
  paintHeaderAvatar(spaceThreadId);
}

// Paint the thread header (title, member-count subtitle, kebab). Separate from
// openThread so membership changes (add/remove people) can refresh it in place —
// openThread now early-returns for the already-open thread (feed cache), so it
// can't be reused to re-render the header.
// threadHasAIPeer: is this a DM whose other member is an AI agent? Gates the
// memory surfaces (docs/eleven-memory.md) — the ⋮ Memory item and the Views
// dropdown's persistent Memory entry.
function threadHasAIPeer(id) {
  const t = threads.find((x) => x.id === id);
  if (!t || t.kind !== "dm") return false;
  return (t.members || []).some((uid) => {
    const e = roster.find((x) => x.user_id === uid);
    return e && e.is_agent && e.kind === "ai";
  });
}

// viewsMenuEntries: what the ▤ Views dropdown offers for a thread — an open
// reply thread first (it's the view you're in), then Memory (the persistent
// view of an AI DM), then every live bot view, newest first (the same order
// /views shows). Empty = the button hides.
function viewsMenuEntries(id) {
  const entries = [];
  // The reply thread is chat.js's (apps/chat.js `threads`), not a folded
  // view: its row is there exactly while one is open — open/close dispatch
  // lchat:views-changed — and carries no remove, since closing happens in
  // the pane itself (✕ / Escape). Opening it puts focus back in the thread:
  // the docked pane's own composer at desktop widths, else the lifted
  // overlay's panel (the narrow presentation; its reply box is the main
  // composer, already staged to the thread).
  if (activeThreadPane(id)) {
    entries.push({
      svg: ICON_REPLY,
      label: "Thread",
      open: () => {
        const t = activeThreadPane(id); // re-resolved: the menu may outlive a close
        if (!t) return;
        const pane = t.paneComposer && t.paneComposer();
        if (pane) return pane.focus();
        const panel = document.querySelector("#app-pane .chatapp-thread-panel");
        if (!panel) return;
        panel.tabIndex = -1; // programmatic focus only — never a Tab stop of its own
        panel.focus();
      },
    });
  }
  // …then the list of this chat's OTHER threads (chat.js's threadListItems,
  // rendered as a side panel there): the view you're in comes before the
  // index of the rest. Absent when the chat has no threads, so a chat where
  // nobody has ever used "Reply in thread" is exactly as it was — and the ▤
  // button stays hidden unless something else offers a view.
  if (threadListCount(id)) entries.push({ svg: ICON_THREAD, label: "Threads", open: () => openThreadList(id) });
  if (threadHasAIPeer(id)) entries.push({ svg: ICON_BRAIN, label: "Memory", open: () => openMemoryPanel(id) });
  const st = appStateFor(id, "views");
  const views = st && Array.isArray(st.views) ? st.views : [];
  for (const v of views.slice().reverse()) {
    entries.push({
      glyph: v.glyph || "▤",
      label: v.title,
      open: () => openThreadView(id, v.id),
      remove: () => {
        // If the sidebar is showing this very view, close it with the removal.
        if (openPanelTitle[id] === v.title) closeCommandPanel(id);
        emitAppEvent(id, { type: "view.remove", id: v.id });
      },
    });
  }
  return entries;
}

// paintViewsMenu shows the ▤ button only where the dropdown has something to
// offer. Called from paintThreadHeader and whenever a view folds (views.js
// pokes lchat:views-changed), so a view arriving mid-conversation surfaces
// the button without a reload.
const openPanelTitle = {}; // threadId → title of the open command panel ("" = none)

function paintViewsMenu(id) {
  const wrap = document.getElementById("views-menu-wrap");
  if (!wrap) return;
  wrap.classList.toggle("hidden", !id || (viewsMenuEntries(id).length === 0 && !openPanelTitle[id]));
  // At rest the button offers "Open"; while a view is up it names it — the
  // header tells you where you are, not just what exists. An open reply
  // thread names itself the same way; a command panel wins when one is up
  // (docked, the two can't share the dock, so that's only ever the narrow
  // overlay + a bottom band).
  const label = document.getElementById("views-menu-label");
  if (label) label.textContent = (id && openPanelTitle[id]) || (id && activeThreadPane(id) ? "Thread" : "Open");
}

function paintThreadHeader(id) {
  // The space thread has no chat header to paint — its home paints the open
  // app's identity instead (and every refresh path funnels through here).
  if (spaceThreadId && id === spaceThreadId) return paintSpaceHeader();
  const t = threads.find((x) => x.id === id);
  const isGroup = t && t.kind === "group";
  const title = document.getElementById("thread-title");
  title.textContent = threadName[id] || "Chat";
  // In a DM, the name in the header opens the other person's profile card
  // (photo + "about me") — the counterpart of a group's tappable member count.
  const other = !isGroup && t ? (t.members || []).find((uid) => uid !== myUserId) : null;
  title.onclick = other ? () => viewProfile(other) : null;
  title.style.cursor = other ? "pointer" : "";
  const sub = document.getElementById("thread-sub");
  // Count people, deterministic bots, and AI agents separately (roster is_agent
  // + kind), so the subtitle reads "2 members, 2 bots, 1 AI agent" — mirroring
  // the BOT/AI badges rather than lumping helpers in as members.
  const members = t ? t.members || [] : [];
  let bots = 0;
  let agents = 0;
  for (const id of members) {
    const e = roster.find((x) => x.user_id === id);
    if (!e || !e.is_agent) continue;
    if (e.kind === "ai") agents++;
    else bots++;
  }
  if (isGroup) {
    // "· N online" counts people only — bots hold sockets around the clock, so
    // counting them would pin every room at its bot count and say nothing.
    let online = 0;
    for (const id of members) {
      if (id === myUserId) continue;
      const e = roster.find((x) => x.user_id === id);
      if (e && !e.is_agent && e.presence === "online") online++;
    }
    sub.textContent =
      memberCountLabel(members.length - bots - agents, bots, agents) + (online ? ` · ${online} online` : "");
  } else if (t && t.kind === "dm") {
    // The status line under the person's name: dot + Online/Away/Offline.
    // Bots read Online while their sidecar is connected — an honest health
    // light. Blank only when the state is unknown (keyless invitee).
    const other = members.find((id) => id !== myUserId);
    setPresenceLine(sub, rosterPresence(other));
  } else {
    sub.textContent = "";
  }
  sub.onclick = isGroup ? () => showMembers() : null; // tap "N members" → member list
  sub.style.cursor = isGroup ? "pointer" : "";
  // The kebab is always available (every chat can be closed); the group-only
  // items (add / edit / members / leave) show only for groups. With the full
  // places UI, Apps shows for DMs too — the sheet's space-wide section
  // applies to every conversation; with it hidden (the default — § The
  // pullback) the item's one job is adding to THIS chat, so groups only.
  document.getElementById("thread-menu-wrap").style.display = "";
  for (const gid of ["thread-add", "thread-edit", "thread-members", "thread-leave"]) {
    const el = document.getElementById(gid);
    if (el) el.style.display = isGroup ? "" : "none";
  }
  const appsItem = document.getElementById("thread-apps");
  if (appsItem) appsItem.style.display = isGroup || (PLACES_UI && t && t.kind === "dm") ? "" : "none";
  // Media/links/docs shows for every chat-feed thread (DMs included, unlike
  // the group-only items above) and hides on app-threads, which have no feed.
  const mediaItem = document.getElementById("thread-media");
  if (mediaItem) mediaItem.style.display = chatAppFor(id) ? "" : "none";
  document.getElementById("thread-pin").textContent = pinned[id] ? "Unpin chat" : "Pin chat";
  document.getElementById("thread-mute").textContent = muted[id] ? "Unmute chat" : "Mute chat";
  paintViewsMenu(id);
  // End conversation is a DM-only act (issue #578) — and once ended, the
  // banner's Reopen is the way back, so the item hides on a closed DM too.
  document.getElementById("thread-end").style.display = t && t.kind === "dm" && !dmClosed[id] ? "" : "none";
  // Block lives in the DM kebab too (a person can be blocked from their profile,
  // but the menu is where people look). DMs with a real member only — not bots,
  // not a keyless invitee. It opens their profile, where Block carries its
  // ends-your-DMs consequence note.
  const blockEl = document.getElementById("thread-block");
  if (blockEl) {
    const dmOther = t && t.kind === "dm" ? members.find((x) => x !== myUserId) : null;
    const pe = dmOther && roster.find((x) => x.user_id === dmOther);
    const canBlock = !!(pe && !pe.is_agent && pe.public_key);
    blockEl.style.display = canBlock ? "" : "none";
    if (canBlock) {
      blockEl.textContent = blockedPeople.has(dmOther)
        ? `Unblock ${rosterLabel(dmOther)}`
        : `Block ${rosterLabel(dmOther)}`;
      blockEl.dataset.uid = dmOther;
    }
    // Admins also get the remove rung here — a short label; the dialog it
    // opens carries the whole-space warning (the card keeps the ban option).
    const removeEl = document.getElementById("thread-remove");
    if (removeEl) {
      const canRemove = canBlock && isAdmin();
      removeEl.style.display = canRemove ? "" : "none";
      if (canRemove) {
        removeEl.textContent = `Remove ${rosterLabel(dmOther)}`;
        removeEl.dataset.uid = dmOther;
      }
    }
  }
  paintViewToggle(id);
  paintHeaderAvatar(id);
}

// The [Chat | Split | Interface] view toggle sits beside the kebab, for two
// kinds of thread. A COMPANION app-thread gets Chat = the conversation; Split =
// both side by side (desktop only — there's no room to split on mobile);
// Interface = the app's interactive UI (its glyph, ⏰ for Reminders). A GROUP
// chat with apps added (⋮ → Add apps) gets the same bar with one button per
// added app — the shared widget bar every member sees. Seed of a fuller view
// picker (a dropdown) later.
function paintViewToggle(id) {
  const head = document.querySelector(".thread-head");
  const menuWrap = document.getElementById("thread-menu-wrap");
  let toggle = document.getElementById("view-toggle");
  const owner = threadApp[id];
  // Only a companion app-thread has more than one view to switch between; a
  // takeover app (no chatMessage) owns the whole surface, and a chat-only app
  // (the setup conversation) has just its chat — neither gets a toggle.
  const companion = !!owner && appWantsChatView(owner) && !appChatOnly(owner);
  const groupApps = !owner && chatAppFor(id) ? groupAppsFor(id) : [];
  if (!head || (!companion && !groupApps.length)) {
    if (toggle) toggle.remove();
    return;
  }
  if (!toggle) {
    toggle = document.createElement("div");
    toggle.id = "view-toggle";
    toggle.className = "view-toggle";
    toggle.setAttribute("role", "group");
    toggle.setAttribute("aria-label", "View");
    head.insertBefore(toggle, menuWrap);
  }
  const view = appThreadView[id] || (companion ? appDefaultView(owner) : "chat");
  // On a narrow layout there's no split — it collapses to Chat, so Chat reads as
  // active and the (desktop-only) Split button is hidden.
  const narrow = matchMedia("(max-width: 720px)").matches;
  const active = narrow && view === "split" ? "chat" : view;
  toggle.textContent = "";
  const mk = (label, sym, isActive, splitOnly, onTap) => {
    const b = document.createElement("button");
    b.type = "button";
    b.className = "view-toggle-btn" + (isActive ? " active" : "") + (splitOnly ? " split-only" : "");
    b.title = label;
    b.setAttribute("aria-label", label);
    b.setAttribute("aria-pressed", String(isActive));
    b.textContent = sym;
    b.onclick = onTap;
    return b;
  };
  toggle.append(
    mk("Chat", "💬", active === "chat", false, () => setAppThreadView(id, "chat")),
    mk("Split", "◫", active === "split", true, () => setAppThreadView(id, "split")),
  );
  if (companion) {
    const glyph = (appByName(owner) || {}).glyph || "▦";
    toggle.append(mk("Interface", glyph, active === "interface", false, () => setAppThreadView(id, "interface")));
    return;
  }
  // Group chat: one button per added app. Tapping one shows THAT app — beside
  // the chat first (desktop), and a SECOND tap gives it the full pane; mobile
  // has no split, so it goes straight to full-pane. Tapping a DIFFERENT app's
  // button keeps the current view and just swaps which app the pane shows.
  const sel = groupAppSelection(id);
  for (const a of groupApps) {
    toggle.append(
      mk(a.title || a.name, a.glyph || "▦", active === "interface" && sel === a.name, false, () => {
        const cur = appThreadView[id] || "chat";
        const wasSel = groupAppSelection(id);
        groupAppView[id] = a.name;
        if (cur === "chat") setAppThreadView(id, narrow ? "interface" : "split");
        else if (cur === "split" && (narrow || wasSel === a.name)) setAppThreadView(id, "interface");
        else if (cur === "interface" && wasSel === a.name) return; // already the active segment
        else {
          // Same view, different app — swap the pane in place.
          renderGroupAppPane(id);
          paintViewToggle(id);
        }
      }),
    );
  }
}

// Switch an app-thread's (or group-with-apps chat's) view (chat | split |
// interface). Both panes are already mounted, so this only flips the layout —
// instant, no re-render or re-fetch (a group's app pane re-renders from
// already-folded state).
function setAppThreadView(id, view) {
  const cur = appThreadView[id] || (threadApp[id] ? appDefaultView(threadApp[id]) : "chat");
  if (cur === view) return;
  if (!threadApp[id] && !groupAppsFor(id).length) return;
  appThreadView[id] = view;
  applyAppThreadView(id);
  renderGroupAppPane(id);
  paintViewToggle(id);
}

// The added app a group chat's Interface pane shows: the sticky per-session
// choice while that app is still added, else the first added app (or null).
// (Only THIS chat's own adds — a space-wide install surfaces in the sidebar's
// space band, never in another chat's widget bar: place = location.)
function groupAppSelection(id) {
  const added = groupAppsFor(id);
  if (!added.length) return null;
  const pick = groupAppView[id];
  return added.some((a) => a.name === pick) ? pick : added[0].name;
}

// Render a group chat's selected added app into the Interface pane — the same
// pane a companion app-thread uses, so the split CSS applies unchanged. ctx is
// bound to the GROUP thread: the app's emits land in the group's encrypted log,
// folded by every member. Cleared in the chat view so #interface-pane:empty
// collapses it and the conversation takes the full width.
function renderGroupAppPane(id) {
  if (threadApp[id]) return; // a companion app-thread's pane isn't ours to touch
  const iface = document.getElementById("interface-pane");
  if (!iface || id !== activeId) return;
  const sel = groupAppSelection(id);
  if (!sel || (appThreadView[id] || "chat") === "chat") {
    iface.textContent = "";
    delete iface.dataset.app;
    return;
  }
  // The pane holds host chrome above the app's own root — the one-time
  // "shared in this chat" orientation card — so the app's render can never
  // wipe the card. Rebuilt only when the selected app changes; incremental
  // apps (member-app iframes) keep their root across renders as before.
  if (iface.dataset.app !== sel) {
    iface.textContent = "";
    iface.dataset.app = sel;
    const orientation = buildPlaceCard(sel, id);
    if (orientation) iface.appendChild(orientation);
    const root = document.createElement("div");
    root.className = "group-app-root";
    iface.appendChild(root);
  }
  renderMiniApp(id, sel, iface.querySelector(".group-app-root"));
}

// buildPlaceCard: the one-time orientation line atop a CHAT copy's Interface
// pane — "shared with everyone in this chat, and only here". Once dismissed
// for a given copy it never comes back (per app + thread, this device).
// Returns null when already seen. Titles go through textContent — a
// member-built app's title is user content. (Space copies need no card: the
// sidebar row and its header say the place — the row IS the orientation.)
function buildPlaceCard(appName, instanceTid) {
  const key = `lchat-place-seen:${appName}:${instanceTid}`;
  try {
    if (localStorage.getItem(key)) return null;
  } catch {
    return null;
  }
  const app = appByName(appName);
  const card = document.createElement("div");
  card.className = "place-card";
  const who = document.createElement("b");
  who.textContent = (app && (app.title || app.name)) || appName;
  const what = document.createElement("span");
  what.textContent =
    "— shared with everyone in this chat, and only here." + (app && app.places.includes("you") ? " Your own copy stays separate." : "");
  const done = document.createElement("button");
  done.type = "button";
  done.textContent = "✕";
  done.setAttribute("aria-label", "Got it");
  done.onclick = () => {
    try {
      localStorage.setItem(key, "1");
    } catch {}
    card.remove();
  };
  card.append(who, what, done);
  return card;
}

// After a group thread's fold reveals or changes its added apps (open, live
// event, reconnect catch-up), refresh the three places that reflect them: the
// header widget bar, the split layout, and the Interface pane itself.
function refreshGroupAppsUI(id) {
  if (id !== activeId || threadApp[id] || !chatAppFor(id)) return;
  if (!groupAppsFor(id).length) delete appThreadView[id]; // last app removed → back to plain chat
  applyAppThreadView(id);
  paintViewToggle(id);
  renderGroupAppPane(id);
}

async function openThread(id) {
  closeMediaView(); // navigating threads dismisses any open Media/Links/Docs overlay (no-op if none is open)
  // The space thread has no chat surface — a stray navigation to it (an old
  // deep link, a stale saved id) opens its home instead of a ghost chat.
  if (spaceThreadId && id === spaceThreadId) {
    return openSpaceApp(spaceAppOpen || (spaceAppsFor().filter((a) => a.render)[0] || {}).name);
  }
  // Re-tapping the thread that's already open must not rebuild it — just reveal
  // the pane (mobile navigates list → thread). No flash, no wiped draft.
  if (id === activeId) {
    document.getElementById("tt").classList.add("show-thread");
    focusChatComposer(); // self-guards: no-op on touch / when another field holds focus
    return;
  }
  if (activeId) stashAppPane(activeId); // park the outgoing app-thread's full-pane root
  if (spaceAppOpen) {
    // Leaving the space home: its pane never parks (folded state re-renders in
    // one call), so just drop the marker — the incoming render replaces the pane.
    spaceAppOpen = null;
    const sp = document.getElementById("app-pane");
    if (sp) delete sp.dataset.spaceApp;
  }

  const myOpen = ++openSeq;
  setActiveId(id);
  localStorage.setItem(ACTIVE_KEY, id); // remember where we are, to restore on refresh
  unread[id] = false;
  markThreadRead(id); // …and tell the server, so your other devices clear too
  // Opening a closed chat reopens it (locally + server, synced to your devices).
  if (hidden[id]) {
    hidden[id] = false;
    fetch(`/api/threads/${encodeURIComponent(id)}/hidden`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, hidden: false }),
    }).catch(() => {});
  }
  document.getElementById("thread-empty").classList.add("hidden");
  document.getElementById("thread-view").classList.remove("hidden");
  applyAppThreadView(id); // set/clear the split's .iface class for this thread (never let it linger)
  paintThreadHeader(id);
  // A pending DM (invitee not joined yet) shows a waiting-to-join banner with the
  // share link; a normal chat clears any stale banner.
  updatePendingBanner(threads.find((x) => x.id === id));
  updateRenameBanner(threads.find((x) => x.id === id));
  document.getElementById("tt").classList.add("show-thread");
  renderThreadList();

  // A personal app-thread (chat or interface view) or a chat-app thread renders
  // full-pane (no original feed / composer). An app-thread defaults to its chat
  // view — a DM with its bot — with the header toggle switching to the interface view.
  // Mount the thread's surface. renderAppFor → chatAppFor looks the thread up
  // in `threads`, so a thread that isn't loaded yet (opened programmatically
  // during onboarding, or right after a Discover/auto join) resolves to
  // "no feed". Fetch once and retry rather than falling through — otherwise
  // the block below would leave the PREVIOUS thread's pane showing.
  let renderApp = renderAppFor(id);
  if (!renderApp && !threads.some((t) => t.id === id)) {
    await loadThreads();
    if (myOpen !== openSeq) return; // a newer open superseded us
    renderThreadList();
    renderApp = renderAppFor(id);
  }
  if (renderApp) {
    await openAppThreadView(id, myOpen, renderApp, threadApp[id] || null);
    // Land ready to type. The fresh-mount path focuses in chat.js as it
    // builds; the instant-restore path re-attaches a parked root without
    // rebuilding, so it needs this nudge. focusChatComposer self-guards
    // (touch, another editable focused); embed's focus belongs to the
    // native composer.
    if (myOpen === openSeq && !embed) focusChatComposer();
    return;
  }
  // No feed to mount for this thread. Never leave the outgoing thread's feed
  // sitting under the new header (the onboarding-then-join bug: Eleven's
  // messages showing "in" the just-opened group) — clear the pane. stashAppPane
  // above only detaches the old root when it was cached, so an uncached pane
  // (e.g. the onboarding conversation) would otherwise linger here.
  const pane = document.getElementById("app-pane");
  if (pane) pane.textContent = "";
  setAppThreadMode(false);
}

// ---- the space home: a space app rendered full-pane -----------------------
// A space-wide install opens from its SIDEBAR ROW in the space band — its
// "home", and the only surface its interface has: place = location, so the
// pane you're in always says whose data you're touching. The space thread has
// no chat surface (no feed, no composer, no member list) — this is a
// takeover-style render bound to the space thread's already-folded state
// (loadSpaceThread seeds it; live WS folds keep it current).
function openSpaceApp(appName) {
  const app = appByName(appName || "");
  if (!spaceThreadId || !app || !app.render) return;
  if (activeId === spaceThreadId && spaceAppOpen === appName) {
    document.getElementById("tt").classList.add("show-thread"); // mobile: reveal the pane
    return;
  }
  if (activeId && activeId !== spaceThreadId) stashAppPane(activeId);
  ++openSeq; // supersede any in-flight thread open so it can't repaint over us
  spaceAppOpen = appName;
  setActiveId(spaceThreadId);
  // Deliberately NOT saved to ACTIVE_KEY: restoring the home on refresh would
  // need the space thread resolved before the first paint — a refresh lands
  // on the last real chat instead, and the row is one tap away.
  delete spaceAppUnread[appName];
  document.getElementById("thread-empty").classList.add("hidden");
  document.getElementById("thread-view").classList.remove("hidden");
  applyAppThreadView(spaceThreadId); // clears any stale split-view state
  paintThreadHeader(spaceThreadId); // → paintSpaceHeader (guarded at the top)
  updatePendingBanner(undefined); // clear a previous DM's waiting card
  updateRenameBanner(undefined);
  document.getElementById("tt").classList.add("show-thread");
  renderThreadList(); // the row lights up as active; its unread dot clears
  setAppThreadMode(true);
  const pane = document.getElementById("app-pane");
  if (pane) {
    // Always a fresh mount on open (the pane may hold another surface);
    // renderSpaceAppPane's dataset check then keeps live re-renders
    // incremental (member-app iframes survive them).
    pane.textContent = "";
    pane.dataset.spaceApp = appName;
  }
  renderSpaceAppPane();
}

// Repaint the open space app — on open and on each live space-thread fold.
function renderSpaceAppPane() {
  if (activeId !== spaceThreadId || !spaceAppOpen) return;
  const pane = document.getElementById("app-pane");
  if (!pane) return;
  if (pane.dataset.spaceApp !== spaceAppOpen) {
    pane.textContent = "";
    pane.dataset.spaceApp = spaceAppOpen;
  }
  renderMiniApp(spaceThreadId, spaceAppOpen, pane);
}

// A brief status pill (reuses the #toast element).
let toastTimer;
function toast(msg) {
  const t = document.getElementById("toast");
  if (!t) return;
  t.textContent = msg;
  t.classList.add("show");
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove("show"), 1600);
}

// The app set changed (a bot build, App Studio, a custom-app install/update/
// removal). Rather than reload the page out from under someone, surface a
// subtle, dismissible offer in the sidebar — inline, never a floating toast.
// "Later" hides it; the next apps_changed re-offers. Reloading is the reliable
// pickup for every tier (member apps also register live, so they already work).
// `kind` ("created" / "updated" / "removed") picks more specific copy than a
// blanket "New app available" (#406).
function offerAppReload(kind) {
  const b = document.getElementById("app-update-banner");
  if (!b) return;
  b.textContent = "";
  b.classList.remove("hidden");
  const msg = document.createElement("div");
  msg.className = "update-banner-msg";
  msg.textContent = appReloadMessage(kind);
  const row = document.createElement("div");
  row.className = "update-banner-row";
  const reload = document.createElement("button");
  reload.className = "update-banner-btn primary";
  reload.textContent = "Reload";
  reload.onclick = () => location.reload();
  const later = document.createElement("button");
  later.className = "update-banner-btn";
  later.textContent = "Later";
  later.onclick = () => b.classList.add("hidden");
  row.append(reload, later);
  b.append(msg, row);
}

// ---- tamper evidence (docs/tamper-evidence.md, integrity.js) -------------
// The client verifies the instance's signed checkpoint chain and gossips its
// verified head inside encrypted payloads — the server can't read the gossip,
// so it can't selectively strip it, and two members shown different histories
// betray the fork to each other. Detection only: alerts surface via the
// /integrity command, never a banner (that UX needs its own pass).
const integrity = createIntegrity({
  store: localStorage,
  fetchPage: (after) =>
    fetch(`/api/checkpoints?token=${encodeURIComponent(session.token)}&after=${after}`).then((r) => (r.ok ? r.json() : null)),
  // A new integrity FAILURE raises the banner (a pulled self-check via
  // /integrity is enough for "all clear"; a failure has to come find you).
  onAlert: () => renderIntegrityBanner(),
});
let integrityTimer = null; // slow poll while the socket is open

// sampleIntegrity proves a few messages this device holds are committed to the
// verified chain (docs/tamper-evidence.md client sampling). Picks random
// cached messages, hashes their stored ciphertext the way the server did
// (ciphertextHash = sha256 hex of the blob string), and asks integrity.js to
// check the inclusion proofs against roots it trusts. Cheap + best-effort;
// runs after each poll (so roots exist to check against).
async function sampleIntegrity() {
  try {
    const ids = storeCachedThreadIds();
    if (!ids.length) return;
    const samples = [];
    // A couple of threads, a few messages each — enough that, across many
    // members over time, the whole DB is covered probabilistically.
    for (const tid of shuffleTake(ids, 2)) {
      for (const row of shuffleTake(storeRecentMessages(tid, 60), 3)) {
        if (row && row.id && row.blob) {
          samples.push({ msgId: row.id, blobHash: await sha256Hex(row.blob) });
        }
      }
    }
    if (!samples.length) return;
    await integrity.sampleAndVerify(samples, (msgId) =>
      fetch(`/api/checkpoint-proof?token=${encodeURIComponent(session.token)}&msg=${msgId}`).then((r) => (r.ok ? r.json() : null)),
    );
    renderIntegrityBanner(); // a bad-proof would have raised an alert
  } catch {
    /* best-effort: a failed sample never disrupts the app */
  }
}

// sha256Hex of a string's UTF-8 bytes — matches the server's ciphertextHash
// (sha256 hex of the stored blob string).
async function sha256Hex(str) {
  const d = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
  return [...new Uint8Array(d)].map((b) => b.toString(16).padStart(2, "0")).join("");
}

// shuffleTake returns up to n random elements (Fisher–Yates on a copy).
function shuffleTake(arr, n) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a.slice(0, n);
}

// Plain-language line per alert kind — members, not developers. Every kind
// here is a server misbehaviour the E2E rule is meant to make impossible to
// hide; the wording says what it means and what to do, without jargon.
function integrityAlertMessage(kind) {
  switch (kind) {
    case "gossip-fork":
      return "Your record of this space's history disagrees with another member's. A trustworthy server shows everyone the same history — this one may not have.";
    case "rollback":
      return "This space's server served an older version of its history than your device had already verified.";
    case "withheld":
      return "Another member has verified activity in this space that this space's server won't show you.";
    case "bad-signature":
    case "malformed":
      return "This space's activity record failed its cryptographic check — it may have been altered.";
    case "broken-link":
    case "bad-chain-hash":
    case "gap":
    case "row-drift":
      return "This space's activity record doesn't hold together as it should — a sign it may have been altered.";
    case "bad-proof":
      return "The server couldn't prove one of your messages is in this space's activity record — a sign the record may have been altered.";
    case "key-substitution":
      return "The key shown for someone you invited isn't the one they set up with. The server may have swapped in its own key to read your messages — don't share anything sensitive, and check with them on another channel.";
    default:
      return "This space failed an integrity check.";
  }
}

// renderIntegrityBanner shows/updates the top failure band from the monitor's
// unresolved alerts. Called on every new alert and once on boot (a failure
// recorded in a past session must greet you). Never shown for "all clear".
function renderIntegrityBanner() {
  const el = document.getElementById("integrity-banner");
  if (!el) return;
  const alerts = integrity.unresolvedAlerts();
  if (!alerts.length) {
    el.classList.add("hidden");
    el.replaceChildren();
    return;
  }
  const latest = alerts[alerts.length - 1];
  el.replaceChildren();
  const icon = document.createElement("span");
  icon.className = "ib-icon";
  icon.textContent = "⚠️";
  icon.setAttribute("aria-hidden", "true");
  const text = document.createElement("div");
  text.className = "ib-text";
  const title = document.createElement("div");
  title.className = "ib-title";
  title.textContent = alerts.length > 1 ? `Integrity check failed (${alerts.length} alerts)` : "Integrity check failed";
  const body = document.createElement("div");
  body.textContent = `${integrityAlertMessage(latest.kind)} Keep this device — its records are the evidence — and contact your space's admin.`;
  text.append(title, body);
  const actions = document.createElement("div");
  actions.className = "ib-actions";
  const details = document.createElement("button");
  details.type = "button";
  details.className = "ib-primary";
  details.textContent = "What's this?";
  details.addEventListener("click", () => {
    // Answer in place: run /integrity so the full read-out lands in the open
    // feed as a private notice (same sink the composer uses for commands).
    if (activeId) runCommand("/integrity", activeId, (r) => appendNotice(activeId, r));
  });
  const dismiss = document.createElement("button");
  dismiss.type = "button";
  dismiss.textContent = "Dismiss";
  dismiss.addEventListener("click", () => {
    integrity.acknowledge();
    renderIntegrityBanner();
  });
  actions.append(details, dismiss);
  el.append(icon, text, actions);
  el.classList.remove("hidden");
}

// takeGossip inspects and strips a decrypted payload's `_ckpt` before anything
// downstream (folds, previews, app snapshots, the sandbox) sees it. Applied at
// EVERY message-decrypt site, live and history alike — the host chooses which
// path a message arrives by, so gossip that only counted when live would let
// it route damning messages through catch-up. countPeer guards the stats:
// own echoes and history refolds compare (evidence is evidence) but don't
// inflate "peer heads compared".
function takeGossip(payload, countPeer) {
  if (payload && payload._ckpt) {
    try {
      integrity.gossipIn(payload._ckpt, { countPeer: !!countPeer });
    } catch {}
    delete payload._ckpt;
  }
  return payload;
}

registerFloorCommand("/integrity", {
  desc: "Check this space's tamper-evidence chain (only visible to you)",
  run: (_args, _threadId, reply) => {
    const st = integrity.state();
    const lines = [];
    if (!st.head) {
      lines.push("No verified checkpoints yet — the chain starts with this space's first activity.");
    } else {
      lines.push(`Verified head: entry ${st.head.seqTo}, chain ${st.head.chain.slice(0, 12)}…`);
      if (st.stats.lastPollAt) lines.push(`Last checked: ${new Date(st.stats.lastPollAt).toLocaleString()}`);
      lines.push(st.sigOk ? "Signatures: verified (Ed25519)" : "Signatures: not checked (this browser lacks WebCrypto Ed25519); hash chain still verified");
      const seen = st.stats.gossipSeen || 0;
      if (seen) lines.push(`Peer heads compared: ${seen} (${st.stats.gossipMatch || 0} matched)`);
      const verified = st.stats.sampleVerified || 0;
      if (verified) lines.push(`Your messages proven in the record: ${verified.toLocaleString()}`);
      // KT: members you invited who are keyed but published no bind-MAC — an
      // older client (normal during rollout) or, post-rollout, a possible
      // downgrade worth a second look.
      if (bindUnverifiedCount) {
        lines.push(
          bindUnverifiedCount === 1
            ? "1 member you invited couldn't be key-verified (older client, or worth checking)."
            : `${bindUnverifiedCount.toLocaleString()} members you invited couldn't be key-verified (older clients, or worth checking).`,
        );
      }
    }
    if (st.alerts && st.alerts.length) {
      lines.push(`⚠️ ${st.alerts.length} integrity alert(s) — latest: ${st.alerts.at(-1).kind}. Keep this device's records and contact your admin.`);
    } else {
      lines.push("No integrity alerts.");
    }
    reply({ text: lines.join("\n") });
  },
});

// ---- mini-apps ----------------------------------------------------------
// Mini-app events ride the exact same encrypted-message path as chat: the app
// only produces a typed payload, and the transport wraps it with the same
// envelope (name/uid/ts) chat uses, encrypts to the thread key, and sends it.
setEmitTransport(async (threadId, event) => {
  let key = threadKeys[threadId];
  // An embed emitting into a thread it wasn't seeded with (a personal command
  // typed in a group): ask the native shell for that one thread's key before
  // giving up — the web app proper never hits this (it unwraps every thread).
  if (!key && embed && (await requestNativeKey(threadId))) key = threadKeys[threadId];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) return false;
  // A client id for this event: it rides inside the ciphertext (the server never
  // sees it), and the server relays the SAME blob back, so the echo carries it
  // verbatim — that's how we pair our optimistic local copy with its
  // authoritative confirmation and replace it silently (see optimisticEmit).
  const cid = newCid();
  const payload = { ...event, name: stampName(), ts: Date.now(), _cid: cid };
  if (myUserId) payload.uid = myUserId;
  // Tuck our verified chain head into the encrypted payload (tamper-evidence
  // gossip) — peers compare it against their own view; apps never see it.
  const head = integrity.gossipOut();
  if (head) payload._ckpt = head;
  optimisticEmit(threadId, payload, cid);
  return encrypt(key, payload).then((blob) => {
    ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
    return true;
  });
});

// A fresh client id for an outgoing event (crypto.randomUUID where available; a
// cheap unique fallback otherwise — it only needs to be unique within this tab).
let cidSeq = 0;
function newCid() {
  if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID();
  return "c" + Date.now() + "-" + (cidSeq++);
}

// Optimistic local echo: fold our own event straight into its surface so a send
// appears with no network wait, then let the server's broadcast quietly replace
// it. A CHAT message becomes a pending bubble (and, if unconfirmed after 5s, a
// subtle "sending…" state via markSlow); a typed app event folds only when its
// app opted in (optimistic: true) with an id-idempotent reducer, so the echo
// re-fold lands on the same entity rather than duplicating it.
function optimisticEmit(threadId, payload, cid) {
  if (payload.type) {
    if (optimisticFold(threadId, payload, cid) && threadId === activeId) renderActiveSurfaces();
    return;
  }
  if ((chatAppFor(threadId) || threadApp[threadId]) && (payload.text || payload.attachments)) {
    foldHostEvent(threadId, "chat", chatMsgEvent(payload), { cid, ts: payload.ts, pending: true });
    if (threadId === activeId) renderActiveSurfaces();
    markSlow(threadId, cid);
  }
}

// Pending optimistic sends, keyed by client id → a timer that, 5s after emit and
// still unconfirmed, flips the bubble to a subtle "sending…" state (delivery is
// taking a while and might not have gone through). The echo clears it. We never
// remove the optimistic copy on failure — stay-pending — only surface the delay.
const slowTimers = new Map();
function markSlow(threadId, cid) {
  const t = setTimeout(() => {
    slowTimers.delete(cid);
    foldHostEvent(threadId, "chat", { type: "chat.pending", _cid: cid });
    if (threadId === activeId) renderActiveSurfaces();
  }, 5000);
  slowTimers.set(cid, t);
}
function clearSlow(cid) {
  const t = slowTimers.get(cid);
  if (t) {
    clearTimeout(t);
    slowTimers.delete(cid);
  }
}

// Connected third-party services (docs/connected-services.md). The privileged
// half of the connect app — the parts an app can't do itself because they need
// the session keypair, roster public keys, and the socket. Two moves:
//  • store: seal a credential to your OWN key and PUT the opaque blob (the server
//    stores ciphertext it can't read);
//  • request: reopen it locally and hand a bot a SHORT-LIVED grant sealed to that
//    bot's public key. The bot never gets your long-lived token — only a copy
//    that self-expires, sealed so only it can open it.
// Web-only: the native embed never holds userPriv, so both no-op there.
// Find a chat that has a bot in it (prefer a DM) — the bot is the actor that does
// connected-service work (docs/connected-services.md).
// Find the best thread to hand a connected-service op to. Only the default agents
// (Eleven/Claude) run the connect handler, so rank agents: the always-present
// assistant Eleven first, then Claude, then any AI bot; never the write-only
// Announcer, and prefer a lower-ranked custom bot only if nothing better exists.
// (A proper per-bot "handles connect" capability flag is the real fix — see
// docs/connected-services.md — this heuristic covers the default fleet.)
function agentRank(e) {
  if (!e || !e.is_agent || !e.public_key) return -1;
  if (/announcer/i.test(e.label || "")) return -1;
  if (/eleven/i.test(e.label || "")) return 3;
  if (/claude/i.test(e.label || "")) return 2;
  if (e.kind === "ai") return 1;
  return 0;
}

function findBotThread() {
  let best = null;
  for (const t of threads) {
    for (const id of t.members || []) {
      if (id === myUserId) continue;
      const e = roster.find((x) => x.user_id === id);
      const r = agentRank(e);
      if (r < 0) continue;
      const score = r * 2 + (t.kind === "dm" ? 1 : 0); // prefer higher-ranked bot, then a DM
      if (!best || score > best.score) best = { thread: t, bot: e, score };
    }
  }
  return best ? { thread: best.thread, bot: best.bot } : null;
}

// Poll a thread for the bot's sealed connect.token reply (the OAuth result).
async function awaitConnectToken(threadId, key, service, tries = 24) {
  for (let i = 0; i < tries; i++) {
    await new Promise((r) => setTimeout(r, 500));
    const r = await fetch(`/api/messages?thread=${encodeURIComponent(threadId)}&token=${encodeURIComponent(session.token)}&limit=20`);
    const { messages = [] } = r.ok ? await r.json() : {};
    for (const m of messages) {
      try {
        const p = await decrypt(key, m.blob);
        if (p.type === "connect.token" && p.service === service) return p.sealed;
      } catch {}
    }
  }
  return null;
}

// Poll a thread for the bot's connect.result reply to one op, matched by the
// request id we minted (rid) so a stale/older result for the same service can't
// be mistaken for this one. Returns the whole payload ({ domains } or { error }).
async function awaitConnectResult(threadId, key, rid, tries = 24) {
  for (let i = 0; i < tries; i++) {
    await new Promise((r) => setTimeout(r, 500));
    const r = await fetch(`/api/messages?thread=${encodeURIComponent(threadId)}&token=${encodeURIComponent(session.token)}&limit=20`);
    const { messages = [] } = r.ok ? await r.json() : {};
    for (const m of messages) {
      try {
        const p = await decrypt(key, m.blob);
        if (p.type === "connect.result" && p.rid === rid) return p;
      } catch {}
    }
  }
  return null;
}

let oauthPending = null; // { service, state }
const oauthCfgCache = {}; // service -> { client_id, authorize_url, redirect_uri }
// ---- fetch-service doorway (docs/fetch.md) --------------------------------
// One GET against the shared fetch service, handling its optional hashcash
// admission: a 401 carries {pow:{challenge,bits}} — grind SHA-256(challenge
// ":" nonce) to `bits` leading zeros (async digests yield, so the UI keeps
// breathing), retry with the solution, and keep the returned ticket for every
// call after (one solve per ~hour, not per request). Query params, not
// headers — a custom header would cost a CORS preflight per call.
let fetchServiceTicket = "";

function fsLeadingZeroBits(bytes) {
  let bits = 0;
  for (const b of bytes) {
    if (b === 0) { bits += 8; continue; }
    for (let mask = 128; mask; mask >>= 1) {
      if (b & mask) return bits;
      bits++;
    }
  }
  return bits;
}

async function fetchServiceGET(path) {
  const base = window.__fetchURL;
  if (!base) return null;
  const sep = path.includes("?") ? "&" : "?";
  const get = (extra) => fetch(base + path + extra, { signal: AbortSignal.timeout(15000) });
  let r = await get(fetchServiceTicket ? `${sep}ticket=${encodeURIComponent(fetchServiceTicket)}` : "");
  if (r.status === 401) {
    const c = ((await r.json().catch(() => ({}))).pow) || null;
    if (!c || !c.challenge) return r;
    const enc = new TextEncoder();
    for (let n = 0; ; n++) {
      const d = new Uint8Array(await crypto.subtle.digest("SHA-256", enc.encode(`${c.challenge}:${n}`)));
      if (fsLeadingZeroBits(d) >= c.bits) {
        r = await get(`${sep}pow=${encodeURIComponent(c.challenge)}&nonce=${n}`);
        fetchServiceTicket = r.headers.get("X-Fetch-Ticket") || fetchServiceTicket;
        break;
      }
    }
  }
  return r;
}

let oauthCompleting = false; // true while a returned code is being exchanged (drives the "Connecting…" state)

// Fetch + cache the broker's public OAuth config. The connect surface warms this
// on render so the Connect click can open the popup DIRECTLY at the authorize URL:
// a blank popup navigated afterwards (window.open("") then .location=) is rejected
// by DNSimple (the blob/access-control 400), a direct top-level nav is not.
async function loadOAuthCfg(service) {
  if (oauthCfgCache[service]) return oauthCfgCache[service];
  try {
    const r = await fetch(`/api/oauth/config?service=${encodeURIComponent(service)}&token=${encodeURIComponent(session.token)}`);
    const cfg = r.ok ? await r.json() : null;
    if (cfg && cfg.client_id) oauthCfgCache[service] = cfg;
    return cfg;
  } catch {
    return null;
  }
}

// Send the whole tab to the provider's authorize page. DNSimple rejects popup /
// programmatic-window navigations (the blob/access-control 400); only a top-level
// tab navigation works — and this is also what the native app wants (consent in
// the system browser). `state` carries this instance's origin (base64url) so the
// broker relays the code back here, plus a nonce for CSRF matching; we stash the
// pending {service,state} in sessionStorage because module state is lost across
// the full-tab round-trip. The browser never holds a secret.
function openAuthorize(service, cfg, cap) {
  if (!session.userPriv) return { ok: false, error: "connecting services isn't supported in the native app yet" };
  if (!cfg || !cfg.client_id || !cfg.authorize_url || !cfg.redirect_uri)
    return { ok: false, error: `${service} isn't set up for OAuth on this server yet` };
  const nonce = bytesToB64url(crypto.getRandomValues(new Uint8Array(16)));
  const state = bytesToB64url(new TextEncoder().encode(location.origin)) + "." + nonce;
  // The access cap the member chose rides the round-trip so the completion can
  // seal it into the stored credential — least privilege is picked BEFORE the
  // provider is ever visited.
  sessionStorage.setItem("lchat_oauth", JSON.stringify({ service, state, cap: cap || "read" }));
  let url =
    `${cfg.authorize_url}?response_type=code&client_id=${encodeURIComponent(cfg.client_id)}` +
    `&redirect_uri=${encodeURIComponent(cfg.redirect_uri)}&state=${encodeURIComponent(state)}`;
  // Providers whose manifests declare OAuth scopes get them on the authorize
  // URL, matched to the chosen cap (scopes_write only when the member asked
  // for read & write) — the provider-side token is then no broader than the
  // cap it will live under. Scope-less manifests (DNSimple, GitHub Apps —
  // which scope at install time) send no scope param, exactly as before.
  const scopes = cap === "write" && Array.isArray(cfg.scopes_write) && cfg.scopes_write.length ? cfg.scopes_write : cfg.scopes;
  if (Array.isArray(scopes) && scopes.length) url += `&scope=${encodeURIComponent(scopes.join(" "))}`;
  location.assign(url);
  return { ok: true };
}

// The billing variant of openAuthorize: a space ADMIN connects the space's
// Stripe account for paid access levels. Same broker + consent trip, but the
// state's "billing." marker asks the broker to finish the exchange itself and
// hand back ONLY the connected-account id — no token ever reaches the browser
// or the server. Direct charges authenticate with the platform key + that id,
// which is the same non-secret string admins used to paste by hand.
function openBillingAuthorize(cfg) {
  if (!session.userPriv) return { ok: false, error: "connecting Stripe isn't supported in the native app yet" };
  if (!cfg || !cfg.client_id || !cfg.authorize_url || !cfg.redirect_uri)
    return { ok: false, error: "Stripe isn't set up for OAuth on this server yet" };
  const nonce = bytesToB64url(crypto.getRandomValues(new Uint8Array(16)));
  const state = bytesToB64url(new TextEncoder().encode(location.origin)) + ".billing." + nonce;
  sessionStorage.setItem("lchat_oauth", JSON.stringify({ service: "stripe", state, billing: true }));
  let url =
    `${cfg.authorize_url}?response_type=code&client_id=${encodeURIComponent(cfg.client_id)}` +
    `&redirect_uri=${encodeURIComponent(cfg.redirect_uri)}&state=${encodeURIComponent(state)}`;
  if (Array.isArray(cfg.scopes) && cfg.scopes.length) url += `&scope=${encodeURIComponent(cfg.scopes.join(" "))}`;
  location.assign(url);
  return { ok: true };
}

// On the way back (the app booted at "/" after the callback stashed the code),
// finish the exchange. Runs on ws.onopen when roster/threads are loaded; no-ops
// unless there's a returned code waiting. Idempotent — clears the pending entry.
async function completeOAuthReturn() {
  // Billing return first: nothing to exchange (the broker already did) — just
  // link the account id under THIS admin session. postBillingAccount is
  // tierAdmin-gated, so a non-admin session can't complete a link.
  {
    let pend;
    try {
      pend = JSON.parse(sessionStorage.getItem("lchat_oauth") || "null");
    } catch {
      pend = null;
    }
    if (pend && pend.billing) {
      sessionStorage.removeItem("lchat_oauth");
      let text;
      if (pend.error || !pend.billingAccount) {
        text = "Stripe connection cancelled.";
      } else {
        try {
          const r = await fetch("/api/admin/billing/account", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ token: session.token, account: pend.billingAccount }),
          });
          text = r.ok
            ? "Stripe account connected — you can price your levels now."
            : `Couldn't save the Stripe account (${(await r.json().catch(() => ({}))).error || r.status}).`;
        } catch {
          text = "Couldn't save the Stripe account — try again.";
        }
      }
      window.dispatchEvent(new CustomEvent("lchat:billing-changed", { detail: { text } }));
      return;
    }
  }
  let pend;
  try {
    pend = JSON.parse(sessionStorage.getItem("lchat_oauth") || "null");
  } catch {
    pend = null;
  }
  if (!pend) return;
  if (pend.error) {
    sessionStorage.removeItem("lchat_oauth");
    window.dispatchEvent(new CustomEvent("lchat:connected-changed", { detail: { text: `${pend.service || "Connection"} cancelled.` } }));
    return;
  }
  if (!pend.code || oauthCompleting) return; // no code yet (still at consent), or already completing
  oauthCompleting = true;
  window.dispatchEvent(new CustomEvent("lchat:connected-changed")); // repaint into "Connecting…"
  let text;
  try {
    await completeOAuth(pend, pend.code);
    text = `${pend.service} connected — the server never saw your token.`;
  } catch (err) {
    text = `Couldn't connect ${pend.service}: ${err.message}`;
  }
  // Clear pending state BEFORE the repaint (dispatchEvent is synchronous — clearing
  // in a finally after the dispatch would leave the surface stuck on "Connecting…").
  oauthCompleting = false;
  sessionStorage.removeItem("lchat_oauth");
  window.dispatchEvent(new CustomEvent("lchat:connected-changed", { detail: { text } }));
}

// After the popup relays the one-time code (the verifier stayed here in memory),
// hand code+verifier to the bot; it exchanges (no client secret) and returns the
// token sealed to us; we store it client-encrypted. The browser never does the
// exchange (CORS) and never holds a secret.
async function completeOAuth(pend, code) {
  const target = findBotThread();
  if (!target) throw new Error("start a chat with a bot first — it does the work");
  const key = threadKeys[target.thread.id];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) throw new Error("not connected right now");
  const msg = { type: "connect.oauth", service: pend.service, code, state: pend.state, name: session.name, ts: Date.now() };
  if (myUserId) msg.uid = myUserId;
  ws.send(JSON.stringify({ type: "msg", thread_id: target.thread.id, blob: await encrypt(key, msg) }));
  const sealed = await awaitConnectToken(target.thread.id, key, pend.service);
  if (!sealed) throw new Error("the bot didn't hand back a token — is it running?");
  const opened = await openSealed(sealed, session.userPriv);
  // Expiring-token providers hand back {secret, refresh, expires_at}; store
  // the whole pair (absent fields drop out of the JSON) so ops can rotate it.
  // The access cap chosen before the consent trip rides into the credential,
  // as does the credential's kind — mixed-scheme providers (Linear) send an
  // OAuth token as Bearer where a pasted key goes in the header bare.
  await storeCredential(pend.service, { ...opened, cap: pend.cap, kind: "oauth" });
}

// Seal a credential object to the member's OWN key and store the opaque blob —
// the storage half of connecting, shared by the OAuth completion and the
// renewed-pair path (a bot rotating an expired token mid-op). `cap` is the
// member's connect-time access choice ("read" | "write"); it lives inside the
// sealed blob, so the server never learns it and only this member's devices
// can read or change it.
async function storeCredential(service, cred) {
  const me = roster.find((e) => e.user_id === myUserId);
  const blob = await sealForPub(me.public_key, { secret: cred.secret, refresh: cred.refresh, expires_at: cred.expires_at, cap: cred.cap, kind: cred.kind });
  const r = await fetch(`/api/connected/${encodeURIComponent(service)}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: session.token, blob }),
  });
  if (!r.ok) throw new Error(`couldn't save the connection (${r.status})`);
}

// The shared preamble of every connected-service op: locate the bot channel and
// reopen the member's stored credential. Returns { target, key, opened } on
// success, { error } otherwise. The reopened secret never leaves this module —
// callers reseal it into a short-lived grant addressed to the bot's own key.
async function openOpChannel(service) {
  if (!session.userPriv) return { error: "connecting services isn't supported in the native app yet" };
  const target = findBotThread();
  if (!target) return { error: "start a chat with a bot first — it does the work" };
  const key = threadKeys[target.thread.id];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) return { error: "not connected right now" };
  const r = await fetch(`/api/connected/${encodeURIComponent(service)}?token=${encodeURIComponent(session.token)}`);
  const got = r.ok ? await r.json() : {};
  if (!got.connected || !got.blob) return { error: `you haven't connected ${service} yet` };
  let opened;
  try {
    opened = await openSealed(got.blob, session.userPriv);
  } catch {
    return { error: "couldn't reopen your stored credential" };
  }
  return { target, key, opened };
}

// Run one registry op through the bot (the generalized sibling of the legacy
// dnsimple-shaped requestData below): seal a short-lived, ACCESS-SCOPED grant
// to the bot's key — a "read" grant cannot run a write op — send `connect.op`
// with the manifest's named args, and await the structured `connect.result`
// matched by rid. Used by the service_op consent chip and exposed to apps as
// ctx.host.connected.requestOp.
async function requestOp(service, op, args, access, ttlMs = 120000, src = "") {
  const ch = await openOpChannel(service);
  if (ch.error) return { ok: false, error: ch.error };
  // The connection's cap is the ceiling the member set when they connected:
  // a read-only connection never mints a write grant, whatever asked for it —
  // the refusal happens HERE, before any grant exists, so a tampered chip or
  // an over-eager proposal has nothing to escalate.
  if (!capAllows(ch.opened.cap, access)) {
    return { ok: false, error: `you connected ${service} read-only — change its access in Integrations to allow writes` };
  }
  const rid = bytesToB64url(crypto.getRandomValues(new Uint8Array(12)));
  const grant = await sealForPub(ch.target.bot.public_key, {
    service,
    token: ch.opened.secret,
    exp: Date.now() + ttlMs,
    access: access || "read",
    // Expiring-token providers: the refresh token + expiry ride in the grant
    // so the bot can rotate a stale pair mid-op (absent fields drop out).
    refresh: ch.opened.refresh,
    token_expires_at: ch.opened.expires_at,
    // The credential's kind rides too: mixed-scheme providers (Linear) need
    // the executor to send an OAuth token as Bearer where a pasted key goes
    // in the header bare.
    kind: ch.opened.kind,
  });
  const payload = { type: "connect.op", service, op, args: args || {}, grant, rid, name: session.name, ts: Date.now() };
  // Chip-originated ops are the bot's own proposals: tagging them lets the
  // sidecar answer a FAILURE in the bot's voice (a plain-language explanation
  // in-thread) — app-surface fetches stay untagged and render their own errors.
  if (src) payload.src = src;
  if (myUserId) payload.uid = myUserId;
  ws.send(JSON.stringify({ type: "msg", thread_id: ch.target.thread.id, blob: await encrypt(ch.key, payload) }));
  const res = await awaitConnectResult(ch.target.thread.id, ch.key, rid);
  if (!res) return { ok: false, error: "the bot didn't respond — is it running?" };
  if (res.error) return { ok: false, error: res.error };
  // The bot rotated the pair mid-op and sealed the fresh one to us: re-store
  // it (best-effort — the op itself already succeeded) so the next op starts
  // from the live pair. Providers' refresh tokens are single-use, so this
  // device (the one that triggered the rotation) is the one that persists it.
  if (res.renewed) {
    try {
      // The rotated pair inherits the connection's cap — rotation refreshes
      // the token, never the member's access choice. A rotated pair is an
      // OAuth pair by construction (only they carry refresh tokens).
      await storeCredential(service, { ...(await openSealed(res.renewed, session.userPriv)), cap: ch.opened.cap, kind: "oauth" });
    } catch {}
  }
  return { ok: true, ...res };
}

// Start a read-only research session (the service_research chip): seal a
// short-lived READ grant per service to the bot — reads are within every cap,
// so a read-only connection joins a research session freely — send ONE
// connect.research with the goal, and wait for the quick ack (the answer
// itself arrives as a normal bot reply in the thread). Renewed token pairs
// (a provider rotation mid-research) come back on `<rid>.renew`; a background
// poll re-stores them so the connection outlives the rotation.
async function requestResearch(services, goal) {
  const ttlMs = 10 * 60 * 1000;
  const grants = {};
  const caps = {};
  let target = null;
  let key = null;
  for (const service of services) {
    const ch = await openOpChannel(service);
    if (ch.error) return { ok: false, error: ch.error };
    target = ch.target;
    key = ch.key;
    caps[service] = ch.opened.cap;
    grants[service] = await sealForPub(ch.target.bot.public_key, {
      service,
      token: ch.opened.secret,
      exp: Date.now() + ttlMs,
      access: "read",
      refresh: ch.opened.refresh,
      token_expires_at: ch.opened.expires_at,
      kind: ch.opened.kind,
    });
  }
  const rid = bytesToB64url(crypto.getRandomValues(new Uint8Array(12)));
  const payload = { type: "connect.research", goal, grants, rid, name: session.name, ts: Date.now() };
  if (myUserId) payload.uid = myUserId;
  ws.send(JSON.stringify({ type: "msg", thread_id: target.thread.id, blob: await encrypt(key, payload) }));
  const ack = await awaitConnectResult(target.thread.id, key, rid);
  if (!ack) return { ok: false, error: "the bot didn't respond — is it running?" };
  if (ack.error) return { ok: false, error: ack.error };
  pollResearchRenewals(target.thread.id, key, rid, caps);
  return { ok: true, bot: target.bot.label || "the bot" };
}

// After a research session, quietly watch (~2 min) for a `<rid>.renew` result
// carrying rotated token pairs, and re-store each under its connection's cap.
// Best-effort: the session already answered; this only keeps expiring-token
// connections (GitHub Apps) alive past the rotation their research consumed.
async function pollResearchRenewals(threadId, key, rid, caps) {
  for (let i = 0; i < 40; i++) {
    await new Promise((r) => setTimeout(r, 3000));
    const res = await awaitConnectResult(threadId, key, rid + ".renew", 1);
    if (!res || !res.renewed) continue;
    for (const [service, sealed] of Object.entries(res.renewed)) {
      try {
        // Rotated pairs are OAuth pairs by construction.
        await storeCredential(service, { ...(await openSealed(sealed, session.userPriv)), cap: caps[service], kind: "oauth" });
      } catch {}
    }
    return;
  }
}

setHostBridge({
  connected: {
    // cap is the member's access choice for this connection ("read" |
    // "write"); it's sealed into the credential blob alongside the token.
    async store(service, secret, cap) {
      if (!session.userPriv) return { ok: false, error: "connecting services isn't supported in the native app yet" };
      const me = roster.find((e) => e.user_id === myUserId);
      if (!me || !me.public_key) return { ok: false, error: "your encryption key isn't ready yet" };
      // A pasted token is a personal key — kind "pat" keeps the manifest's
      // header scheme (Linear: bare) where OAuth tokens force Bearer.
      const blob = await sealForPub(me.public_key, { secret, cap: cap || "read", kind: "pat" });
      const r = await fetch(`/api/connected/${encodeURIComponent(service)}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, blob }),
      });
      return r.ok ? { ok: true } : { ok: false, error: `couldn't save (${r.status})` };
    },
    // Re-seal the stored credential under a different access cap — the member
    // changing their mind in Integrations without re-pasting or re-consenting
    // at the provider. Requires their presence (userPriv) like every open.
    async setCap(service, cap) {
      if (!session.userPriv) return { ok: false, error: "connecting services isn't supported in the native app yet" };
      try {
        const r = await fetch(`/api/connected/${encodeURIComponent(service)}?token=${encodeURIComponent(session.token)}`);
        const got = r.ok ? await r.json() : {};
        if (!got.connected || !got.blob) return { ok: false, error: `you haven't connected ${service} yet` };
        const opened = await openSealed(got.blob, session.userPriv);
        await storeCredential(service, { ...opened, cap: cap === "write" ? "write" : "read" });
        return { ok: true };
      } catch (e) {
        return { ok: false, error: (e && e.message) || "couldn't update the connection" };
      }
    },
    // The connected service names, so the surface can show what's linked.
    async list() {
      const r = await fetch(`/api/connected?token=${encodeURIComponent(session.token)}`);
      return r.ok ? (await r.json()).services || [] : [];
    },
    // The service whose returned OAuth code is being exchanged (or waiting to
    // be), else "" — so the surface can show that row as "Connecting…" instead
    // of flashing "Not connected". Truthy/falsy for old callers.
    pending() {
      try {
        const p = JSON.parse(sessionStorage.getItem("lchat_oauth") || "null");
        if (oauthCompleting) return (p && p.service) || "dnsimple";
        return p && p.code ? p.service || "dnsimple" : "";
      } catch {
        return "";
      }
    },
    async disconnect(service) {
      const r = await fetch(`/api/connected/${encodeURIComponent(service)}?token=${encodeURIComponent(session.token)}`, { method: "DELETE" });
      window.dispatchEvent(new CustomEvent("lchat:connected-changed", { detail: { text: r.ok ? `Disconnected ${service}.` : "" } }));
      return { ok: r.ok };
    },
    // Warm the OAuth config so the Connect click can open the popup directly.
    prepare(service) {
      loadOAuthCfg(service);
    },
    // Whether the broker has an OAuth app for this service — the catalog only
    // renders a "Connect with X" button when the flow can actually start
    // (otherwise the row offers paste-a-token alone).
    async oauthReady(service) {
      const cfg = await loadOAuthCfg(service);
      return !!(cfg && cfg.client_id && cfg.authorize_url && cfg.redirect_uri);
    },
    // Open the authorize popup. If config is already warm (the surface prefetched
    // it), open synchronously so the click's user-gesture is kept and the popup
    // navigates DIRECTLY to the URL. Uncached (a very fast click) falls back to a
    // fetch-then-open, which the browser may block — rare, given the prefetch.
    startOAuth(service, cap) {
      const cached = oauthCfgCache[service];
      if (cached) return Promise.resolve(openAuthorize(service, cached, cap));
      return loadOAuthCfg(service).then((cfg) => openAuthorize(service, cfg, cap));
    },
    request(service, op, arg, ttlMs = 120000) {
      return (async () => {
        const ch = await openOpChannel(service);
        if (ch.error) return { ok: false, error: ch.error };
        const grant = await sealForPub(ch.target.bot.public_key, { service, token: ch.opened.secret, exp: Date.now() + ttlMs });
        const payload = { type: "connect.op", service, op, domain: arg, grant, name: session.name, ts: Date.now() };
        if (myUserId) payload.uid = myUserId;
        ws.send(JSON.stringify({ type: "msg", thread_id: ch.target.thread.id, blob: await encrypt(ch.key, payload) }));
        return { ok: true, bot: ch.target.bot.label || "the bot" };
      })();
    },
    // Like request(), but a request/response round-trip: the bot answers with a
    // structured, non-rendering `connect.result` (matched by rid) that we return
    // to the caller — so an app (e.g. the DNSimple companion) can render the data
    // itself instead of it just landing as a chat message. Same grant model: the
    // token is sealed to the bot for one op, opened only in its trust domain.
    requestData(service, op, arg, ttlMs = 120000) {
      return (async () => {
        // Legacy dnsimple wire shape (`domain: arg`, un-scoped grant) — kept
        // byte-identical for the existing DNSimple companion; new callers use
        // requestOp with named args + an access-scoped grant.
        const ch = await openOpChannel(service);
        if (ch.error) return { ok: false, error: ch.error };
        const rid = bytesToB64url(crypto.getRandomValues(new Uint8Array(12)));
        const grant = await sealForPub(ch.target.bot.public_key, { service, token: ch.opened.secret, exp: Date.now() + ttlMs });
        const payload = { type: "connect.op", service, op, domain: arg, grant, rid, name: session.name, ts: Date.now() };
        if (myUserId) payload.uid = myUserId;
        ws.send(JSON.stringify({ type: "msg", thread_id: ch.target.thread.id, blob: await encrypt(ch.key, payload) }));
        const res = await awaitConnectResult(ch.target.thread.id, ch.key, rid);
        if (!res) return { ok: false, error: "the bot didn't respond — is it running?" };
        if (res.error) return { ok: false, error: res.error };
        return { ok: true, ...res };
      })();
    },
    // The registry-driven op runner: manifest-named args + an access-scoped
    // grant. Same request/response round-trip as requestData.
    requestOp,
    // The integrations catalog the instance serves (the manifest registry):
    // [{ id, name, category, auth, ops }, …]. null when the fetch fails, so the
    // surface can fall back rather than render an empty catalog.
    async catalog() {
      try {
        const r = await fetch(`/api/integrations?token=${encodeURIComponent(session.token)}`);
        if (!r.ok) return null;
        const j = await r.json();
        return Array.isArray(j.services) ? j.services : null;
      } catch {
        return null;
      }
    },
    // Whether one service has a stored credential, plus its access cap when a
    // key is present to open the blob locally ("read" | "write"; undefined =
    // a legacy, cap-less connection). The blob itself never leaves this module.
    async status(service) {
      try {
        const r = await fetch(`/api/connected/${encodeURIComponent(service)}?token=${encodeURIComponent(session.token)}`);
        const got = r.ok ? await r.json() : {};
        const out = { connected: !!got.connected };
        if (out.connected && got.blob && session.userPriv) {
          try {
            out.cap = (await openSealed(got.blob, session.userPriv)).cap;
          } catch {}
        }
        return out;
      } catch {
        return { connected: false };
      }
    },
  },
  // The Vault app's scoped doorway to the roster + session key (docs/locked-vaults.md).
  // A locked vault hands its key to members by SEALING it to each member's roster
  // public key; opening that handoff needs the session PRIVATE key. Both live
  // here, in shell.js, never in the app — the seam stays narrow (two calls, no
  // raw keys ever cross it).
  vault: {
    // The other human members of a thread, each with their roster public key —
    // so a lock (or a give) can seal the vault key to them as a `member` handoff.
    // Excludes ME (the locker/giver already holds a durable wrap) and BOTS
    // (is_agent): a locked vault must NEVER hand its key to a machine member,
    // whose private key lives on a sidecar box (CLAUDE.md). Keyless members
    // (a pending invitee) are skipped — an insider gives them access once they
    // join. Names are the PUBLISHED label (rides into the emitted wrap, so it
    // must not carry my private nickname). Empty for a personal vault → the lock
    // seals to my passkey alone. Synchronous (a plain read over in-memory state).
    members(threadId) {
      const t = threads.find((x) => x.id === threadId);
      if (!t) return [];
      return (t.members || [])
        .filter((uid) => uid && uid !== myUserId)
        .map((uid) => roster.find((x) => x.user_id === uid))
        .filter((e) => e && e.public_key && !e.is_agent)
        .map((e) => ({ uid: e.user_id, name: publishedLabel(e.user_id), pub: e.public_key }));
    },
    // Open a handoff (an ECIES blob sealed to MY roster public key) with my
    // session private key — the vault key sealed to me at lock time, or by a
    // give. Returns the decrypted JSON (the app reads the key out of `.k`), or
    // null if it wasn't sealed to me / I have no key here (native embed).
    async openMine(blob) {
      if (!session.userPriv) return null;
      try {
        return await openSealed(blob, session.userPriv);
      } catch {
        return null;
      }
    },
  },
  // The /gif app's scoped Giphy doorway (apps never fetch — the host does, and
  // only to *.giphy.com, which the CSP pins). This is the client-side sibling
  // of the unfurl exception: the SERVER never sees the search, the pick, or
  // the bytes — Giphy sees the query from the member's own client.
  //
  // The doorway holds NO key and no storage: the key is the SPACE's, folded into
  // the space thread's log, and the app reads it off its own state and hands it
  // in. All the host does is the two things an app can't — the pinned fetch, and
  // posting into the chat the member is actually looking at.
  gif: {
    // Search returns the raw data[] page — or a reason string: "key" (the space
    // has no key yet), "auth" (Giphy rejected it), null (network/other), so the
    // panel can ask for a key exactly when one is the problem.
    async search(q, key, limit = 24) {
      // The shared fetch service searches with the platform's key (docs/fetch.md
      // § Giphy) — no space key needed, and its results come back with every
      // media URL already signed onto the service's own /img proxy, so the
      // browser never talks to Giphy at all. 404 = the service has no upstream
      // key; that and any transport failure fall through to the space's
      // bring-your-own-key path below.
      if (window.__fetchURL) {
        try {
          const r = await fetchServiceGET(`/api/gif?q=${encodeURIComponent(q || "")}&limit=${limit}`);
          if (r && r.ok) return (await r.json()).data || [];
        } catch (e) {
          console.error("gif search via fetch service failed:", e);
        }
      }
      if (!key) return "key";
      const base = "https://api.giphy.com/v1/gifs/";
      const url = q
        ? `${base}search?api_key=${encodeURIComponent(key)}&q=${encodeURIComponent(q)}&limit=${limit}&rating=pg-13`
        : `${base}trending?api_key=${encodeURIComponent(key)}&limit=${limit}&rating=pg-13`;
      try {
        const r = await fetch(url, { signal: AbortSignal.timeout(15000) });
        if (r.status === 401 || r.status === 403) return "auth";
        if (!r.ok) return null;
        return (await r.json()).data || [];
      } catch (e) {
        console.error("gif search failed:", e);
        return null;
      }
    },
    // Download one rendition's bytes — Giphy hosts only, size-capped (checked
    // again after download; Content-Length can be absent). Failures log the
    // step, so a native shell's unified log shows WHERE a post died.
    async bytes(url, maxBytes) {
      try {
        const u = new URL(url);
        // Two allowed sources, matching the two search paths: the fetch
        // service's signed /img proxy, or Giphy directly (space-key path).
        const viaFetch = window.__fetchURL && u.origin === new URL(window.__fetchURL).origin;
        const giphy = u.protocol === "https:" && (u.hostname === "giphy.com" || u.hostname.endsWith(".giphy.com"));
        if (!viaFetch && !giphy) {
          console.error("gif bytes refused url outside giphy/fetch-service");
          return null;
        }
        const r = await fetch(u, { signal: AbortSignal.timeout(30000) });
        if (!r.ok) {
          console.error("gif bytes fetch not ok:", r.status);
          return null;
        }
        const buf = new Uint8Array(await r.arrayBuffer());
        if (maxBytes && buf.length > maxBytes) {
          console.error("gif bytes over cap:", buf.length);
          return null;
        }
        return buf;
      } catch (e) {
        console.error("gif bytes failed:", e);
        return null;
      }
    },
    // Encrypt + upload bytes AS-IS (no image re-encode — an animated GIF must
    // survive; the caller already bounded the size) and post them as an ordinary
    // message into the chat the member is looking at.
    //
    // "Here" is the HOST's to know, not the app's: /gif's ctx addresses the
    // SPACE (where its key lives), so the app has no handle on the conversation
    // — and shouldn't. It gets no say in the destination: activeId is read here,
    // exactly as the composer would.
    //
    // Reading activeId at TAP time (rather than capturing it when the command
    // ran) is safe because a command panel is not free-floating chrome: it is
    // mounted INSIDE its own thread's pane (chat.js keys cmdPanels by threadId,
    // and each pane registers its controller), and only the active thread's pane
    // is on screen. So a panel you can tap is necessarily the active thread's,
    // and activeId is necessarily the chat it was opened in. If panels ever
    // become detachable from their pane, this must capture the thread at open
    // time instead — a GIF in the wrong conversation is a leak, not a glitch.
    async post(bytes, meta = {}) {
      const threadId = activeId;
      const key = threadKeys[threadId];
      if (!key || !bytes || !bytes.length || bytes.length > MAX_UPLOAD) return false;
      try {
        const enc = await encryptBytes(key, bytes);
        const id = await uploadEncrypted(threadId, enc);
        const att = { id, name: meta.name || "gif.gif", type: meta.type || "image/gif", size: bytes.length };
        if (meta.w) att.w = meta.w;
        if (meta.h) att.h = meta.h;
        // The same transport ctx.emit uses, so the message carries the usual
        // name/ts/uid and reads as an ordinary attachment from the member.
        return await emitAppEvent(threadId, { text: "", attachments: [att] });
      } catch (e) {
        console.error("gif post failed:", e);
        return false;
      }
    },
  },
});

// The OAuth popup lands on /oauth/<service>/callback, which postMessages the
// one-time code back here; we hold the matching verifier. Complete on receipt.
window.addEventListener("message", (e) => {
  if (e.origin !== location.origin || !e.data || e.data.source !== "lchat-oauth") return;
  const pend = oauthPending;
  if (!pend || e.data.state !== pend.state) return;
  oauthPending = null;
  const done = (text) => window.dispatchEvent(new CustomEvent("lchat:connected-changed", { detail: { text } }));
  if (e.data.error || !e.data.code) return done(`${pend.service} connection cancelled.`);
  completeOAuth(pend, e.data.code)
    .then(() => done(`${pend.service} connected — the server never saw your token.`))
    .catch((err) => done(`Couldn't connect ${pend.service}: ${err.message}`));
});

// Scheduling transport (ctx.schedule / ctx.unschedule): encrypt the event NOW —
// the server holds only ciphertext + (thread, time) — and let it deliver the
// blob into the thread at the due moment, where it arrives as a normal message.
setScheduleTransport({
  schedule: async (threadId, event, whenMs) => {
    const key = threadKeys[threadId];
    if (!key) return null;
    const payload = { ...event, name: session.name, ts: Date.now() };
    if (myUserId) payload.uid = myUserId;
    const blob = await encrypt(key, payload);
    try {
      const r = await fetch("/api/schedule", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          token: session.token,
          thread_id: threadId,
          deliver_at: Math.floor(whenMs / 1000),
          blob,
        }),
      });
      if (!r.ok) return null;
      return (await r.json()).id || null;
    } catch {
      return null;
    }
  },
  cancel: async (sid) => {
    try {
      const r = await fetch(`/api/schedule/${encodeURIComponent(sid)}?token=${encodeURIComponent(session.token)}`, {
        method: "DELETE",
      });
      return r.ok;
    } catch {
      return false;
    }
  },
});

// Fetch a link preview card, named (not inline) so the Media/Links/Docs
// overlay's Links tab (mediaview.js) can reuse the exact same fetcher the
// chat app's host bridge hands out below — one unfurl path, two callers.
async function unfurl(url) {
  // Prefer the shared fetch service when this instance points at one (docs/fetch.md):
  // identity-free — no token rides along — and the card's image comes back
  // as the service's signed proxy URL. Any transport failure falls through to
  // the instance's own unfurler, so a fetch-service outage degrades to today's path
  // (an ok:false answer is a real answer — the page had nothing — not
  // a reason to re-ask the instance).
  if (window.__fetchURL) {
    try {
      const r = await fetchServiceGET(`/api/unfurl?url=${encodeURIComponent(url)}`);
      if (r && r.ok) return await r.json();
    } catch {}
  }
  try {
    return await (
      await fetch(`/api/unfurl?token=${encodeURIComponent(session.token)}&url=${encodeURIComponent(url)}`)
    ).json();
  } catch {
    return null;
  }
}

// The chat app's host bridge: everything that is a server mechanism or needs
// the keys/token rather than an event. Reactions/unsend/edit ride the exact WS
// frames the original feed sends (so author-verification and per-user dedupe
// apply identically); blobs, uploads, unfurls, and history pages reuse the
// original machinery — the app itself never touches crypto or tokens.
setChatAppHost({
  // A thread with no other members (self threads — the setup conversation, app
  // threads): notices there are implicitly private, so no "Only visible to you".
  soloThread: (threadId) => {
    const t = threads.find((x) => x.id === threadId);
    return !!t && t.kind === "self";
  },
  react: async (threadId, targetSid, emoji, on, targetUid, targetText) => {
    const key = threadKeys[threadId];
    if (!key || !ws || ws.readyState !== WebSocket.OPEN) return false;
    const payload = {
      type: "reaction",
      targetSid,
      emoji,
      on,
      name: stampName(),
      uid: myUserId,
      ts: Date.now(),
    };
    // The fold (chat.js "chat.reaction") keys reactions by (emoji, uid) and
    // drops uid-less events — without an identity the reaction can't render
    // or be un-reacted, so don't send one.
    if (!myUserId) return false;
    // The reacted-to message's author, riding inside the ciphertext: push
    // handlers (sw.js, the iOS NSE) use it to show the reaction only to the
    // author — the server never learns whose message it was. Absent for
    // legacy uid-less messages (then no one is notified).
    if (targetUid) payload.targetUid = targetUid;
    // A snippet of the reacted-to message, likewise inside the ciphertext: the
    // chat list needs it to say "reacted 👍 to “buy milk”" for a thread it has
    // never opened (the row is built from last_blob alone, so there is nothing
    // to look the target up in). A snapshot, like a reply quote's — it outlives
    // an edit or a delete of the original.
    if (targetText) payload.targetText = targetText;
    try {
      const blob = await encrypt(key, payload);
      ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
      return true;
    } catch {
      return false;
    }
  },
  // "Convert to thread": an inline reply chain becomes a thread rooted at
  // `root`. Like a reaction, it's an ordinary encrypted message carrying a
  // typed payload — the server stores one more opaque blob and never learns
  // that a thread exists, let alone which messages are in it. Every client
  // folds it (chat.js's chat.convert); one too old to know the type drops it
  // and keeps showing the chain inline, which is exactly the old behaviour.
  convert: async (threadId, root, ids) => {
    const key = threadKeys[threadId];
    if (!key || !root || !ids.length || !ws || ws.readyState !== WebSocket.OPEN) return false;
    const payload = { type: "threadconvert", root, ids, name: stampName(), uid: myUserId, ts: Date.now() };
    try {
      const blob = await encrypt(key, payload);
      ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
      return true;
    } catch {
      return false;
    }
  },
  del: (threadId, messageId, blobIds) => {
    if (!ws || ws.readyState !== WebSocket.OPEN) return;
    const frame = { type: "delete", thread_id: threadId, message_id: messageId };
    // The server can't see which blobs a message referenced (they're inside the
    // ciphertext), so the app — which can — reports them for GC on delete.
    if (blobIds && blobIds.length) frame.blob_ids = blobIds;
    ws.send(JSON.stringify(frame));
  },
  // Status pill for app-side actions (e.g. Copy) — reuses the classic feed's
  // toast so confirmations look identical to the original chat.
  toast: (msg) => toast(msg),
  // Re-encrypt the full payload (the app passes { ...orig, text }, exactly like
  // the original edit path) and send the original edit frame.
  edit: (threadId, messageId, payload) => {
    const key = threadKeys[threadId];
    if (!key || !ws || ws.readyState !== WebSocket.OPEN) return Promise.resolve(false);
    return encrypt(key, payload).then((blob) => {
      ws.send(JSON.stringify({ type: "edit", thread_id: threadId, message_id: messageId, blob }));
      return true;
    });
  },
  // Fetch + decrypt an attachment blob (cached object URL — same path the
  // original feed uses for thumbnails and downloads).
  loadBlob: (threadId, att, onProgress) => loadBlob(att.id, threadId, att.type, onProgress),
  upload: (threadId, file, onProgress) => chatAppUpload(threadId, file, onProgress),
  unfurl,
  loadOlder: (threadId, beforeSid) => chatAppLoadOlder(threadId, beforeSid),
  // A member's current (client-decrypted) roster name by uid, "" when unknown —
  // the bubble-header lookup, my own name for them winning (#577). Deliberately
  // no "Someone" fallback, so the renderer can fall through to the payload's
  // name snapshot.
  memberName: (uid) => {
    const e = roster.find((x) => x.user_id === uid);
    return displayNameFor(nicknames[uid], e && e.label);
  },
  // Mentions: the roster's (client-decrypted) display names. Deliberately the
  // PUBLISHED names, not my nicknames — a mention travels as text every member
  // must resolve, so "@Dermo" would highlight for no one else. Tapping one
  // opens the member's profile card (Message them, mute, block, …).
  mentionNames: () => roster.map((e) => e.label).filter(Boolean),
  mention: (label) => {
    const entry = roster.find((e) => e.label === label);
    if (entry && entry.user_id !== myUserId) viewProfile(entry.user_id);
  },
  // Renderers gate the tappable @mention affordance on this so a self-mention
  // stays a plain bold chip (no link, no menu) — matching the classic feed.
  mentionable: (label) => {
    const entry = roster.find((e) => e.label === label);
    return !!entry && entry.user_id !== myUserId;
  },
  // The chip text for a matched @mention: my name for them when I have one
  // (#577). Read-side only — matching, the menu, and the wire text all stay
  // on published names; only what THIS viewer sees on the chip changes.
  mentionDisplay: (label) => {
    const entry = roster.find((e) => e.label === label);
    return (entry && displayNameFor(nicknames[entry.user_id], entry.label)) || label;
  },
  // Presentation facts the app needs to render the CLASSIC markup exactly:
  // sender names show only in groups; helper senders get the AI/BOT badge; the
  // hover icons are the same static in-code SVGs the original feed uses.
  isGroup: (threadId) => {
    const t = threads.find((x) => x.id === threadId);
    return !!t && t.kind === "group";
  },
  // Returns "ai" / "bot" for a helper sender's display name, null for a person.
  agentKind: (name) => {
    const e = roster.find((x) => x.is_agent && x.label === name);
    return e ? e.kind || "bot" : null;
  },
  // The empty-state intro for an app-thread's chat ("This is the start of your
  // chat history with To-do…") — the owning app's chatIntro, or null for a normal
  // chat (no intro).
  chatIntro: (threadId) => {
    const owner = threadApp[threadId];
    if (owner) {
      const a = appByName(owner);
      return (a && a.chatIntro) || null;
    }
    // A person-to-person DM gets one too, so a brand-new chat isn't a blank
    // void before the first message (or while a typing indicator runs).
    const t = threads.find((x) => x.id === threadId);
    if (t && t.kind === "dm") {
      const other = (t.members || []).find((uid) => uid !== myUserId);
      const name = other && rosterLabel(other);
      if (name) return `This is the start of your chat with ${name}.`;
    }
    // An open community group opens with a start marker that invites the first
    // hello — a stranger arriving from Discover lands in a room that greets
    // them rather than a blank feed. Persists as the history's first row (it
    // scrolls up as the conversation grows); the count stays current as people
    // join (the intro re-renders when its text changes — see chat.js).
    if (t && t.kind === "group" && t.visibility === "open") {
      const name = threadName[threadId] || "this group";
      const n = (t.members || []).length;
      const who = n === 1 ? "There's 1 person here." : `There are ${n} people here.`;
      return `This is the start of the conversation in ${name}. ${who} Say hi!`;
    }
    return null;
  },
  icons: { reply: ICON_REPLY, thread: ICON_THREAD, foldIn: ICON_FOLD_IN, edit: ICON_EDIT, react: ICON_REACT, trash: ICON_TRASH, x: ICON_X, play: ICON_PLAY, copy: ICON_COPY, link: ICON_LINK, mute: ICON_MUTE, report: ICON_REPORT, chevronDown: ICON_CHEVRON_DOWN },
  // Helper-proposed one-tap action chips ("Switch to dark" …): whitelisted,
  // labelled, and run by the host — the app just mounts the returned row.
  actionChips: (actions) => {
    const chips = sanitizeActions(actions);
    return chips.length ? buildActionChips(chips) : null;
  },
  // Typeahead: the original candidate ranking (emoji + roster mentions) and the
  // original avatar element for mention rows — one source, identical results.
  typeaheadItems: (tok) => typeaheadItems(tok),
  taAvatar: (name, userId) => avatarEl(name, () => avatarFor(userId)),
  // Native shell (iOS/macOS webview) integration: whether we're embedded, the
  // channel back to the shell (reply banner / staged / error state), and the
  // registration point for the app's composer handlers — installNativeBridge
  // routes window.lchatNative through these when the lab is active.
  embed: !!embed,
  native: (msg) => nativePost(msg),
  registerNative: (handlers) => {
    chatAppNative = handlers;
    for (const f of preMountStaged.splice(0)) handlers.stage(f);
  },
  // Moderation (issue #578): the muted-people set lives here in the shell
  // (sealed prefs blob, synced across devices); the app folds a muted member's
  // messages into a quiet stub and offers Mute/Unmute in the message menu.
  mutedPerson: (uid) => mutedPeople.has(uid),
  setPersonMuted: (uid, on) => setPersonMuted(uid, on),
  // Report a message (issue #578): the sheet lives in the shell — it holds
  // the roster and the keys that seal the report to each admin.
  reportMessage: (threadId, m) => openReportSheet({ uid: m.uid, threadId, message: m }),
  // Message permalinks ("Copy link", issue #893): mints an opaque, server-
  // sealed token (links.go — never a thread/instance key, so decoding a link
  // always re-checks CURRENT thread membership) and returns a shareable URL,
  // or null on failure. The app writes it to the clipboard and toasts, same
  // as the plain-text Copy action.
  //
  // This instance's own origin for now (openInitialMessageLink reads #l= from
  // the fragment regardless of how it got there). The design target is a
  // shared https://11ch.at/l/<host>#l=<token> redirector so the link opens
  // natively on every device via one Associated Domain instead of one per
  // instance host (see #893) — but that redirector isn't deployed yet, so
  // emitting it today would produce dead links. Swap the template below for
  // it once the service exists; nothing else here changes.
  mintMessageLink: async (threadId, messageId) => {
    try {
      const r = await fetch(`/api/messages/${encodeURIComponent(messageId)}/link?token=${encodeURIComponent(session.token)}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ thread_id: threadId }),
      });
      if (!r.ok) return null;
      const { token } = await r.json();
      return token ? `${location.origin}/#l=${encodeURIComponent(token)}` : null;
    } catch {
      return null;
    }
  },
  // Closed DMs (issue #578): the app swaps its composer for the closed banner
  // and offers Reopen; the server owns the state, the shell mirrors it.
  dmClosed: (threadId) => !!dmClosed[threadId],
  reopenDM: async (threadId) => {
    try {
      const r = await fetch(`/api/threads/${encodeURIComponent(threadId)}/reopen-dm`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token }),
      });
      if (r.ok) {
        dmClosed[threadId] = false;
        hidden[threadId] = false;
        renderThreadList();
        renderActiveSurfaces(); // swap the banner back to the composer
        return { ok: true };
      }
      const body = await r.json().catch(() => ({}));
      return { ok: false, error: body.error || "server" };
    } catch {
      return { ok: false, error: "network" };
    }
  },
});

// The lab app's native-composer handlers (registered via the bridge when the
// app mounts in an embedded webview); null while original drives.
let chatAppNative = null;

// chatAppUpload stages one file for the chat app: the same downscale / extension
// allow-list / client-side encryption path as the original composer. On success
// it returns the attachment metadata that rides inside the encrypted payload; on
// failure it returns a reason string ("type" / "photo" / "size" / "generic") so
// the app can restore the original composer's three distinct error messages.
// POST encrypted bytes to the blob store, reporting upload progress (0..1) via
// onProgress. Uses XHR because fetch() can't observe request-body upload progress
// (and streaming request bodies aren't supported on Safari/iOS).
function uploadEncrypted(threadId, bytes, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(
      "POST",
      `/api/upload?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(threadId)}`,
    );
    if (onProgress && xhr.upload) {
      xhr.upload.onprogress = (e) => { if (e.lengthComputable) onProgress(e.loaded / e.total); };
    }
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        try { resolve(JSON.parse(xhr.responseText).id); } catch { reject(new Error("bad upload response")); }
      } else {
        reject(new Error("upload " + xhr.status));
      }
    };
    xhr.onerror = () => reject(new Error("upload network error"));
    xhr.send(bytes);
  });
}

async function chatAppUpload(threadId, file, onProgress) {
  const key = threadKeys[threadId];
  if (!key || !file) return "generic";
  const isImage = !!(file.type && file.type.startsWith("image/"));
  const isVideo = !!(file.type && file.type.startsWith("video/"));
  // Any file type uploads — it's an opaque encrypted blob to the server, and
  // the name/MIME ride inside the payload. Size stays the only gate.
  try {
    // Every blob is tagged with its thread so the server can GC it with the
    // thread / when the referencing message is deleted — it never sees the blob
    // id (it's inside the encrypted payload). The thread id isn't secret to it.
    const post = async (bytes, onProg) => {
      const enc = await encryptBytes(key, bytes);
      return uploadEncrypted(threadId, enc, onProg);
    };
    if (isImage) {
      const { bytes, type, w, h, bh } = await processImage(file);
      if (bytes.length > MAX_UPLOAD) return "photo";
      const id = await post(bytes);
      const att = { id, name: (file.name || "photo").replace(/\.[^.]+$/, "") + ".jpg", type, w, h };
      if (bh) att.bh = bh;
      return att;
    }
    if (isVideo) {
      // Send-and-play: encrypt the clip whole + upload it, plus a client-extracted
      // poster frame (the server can't make one — it only holds ciphertext). Dims
      // and duration ride inside the encrypted payload as attachment metadata.
      const bytes = new Uint8Array(await file.arrayBuffer());
      if (bytes.length > MAX_VIDEO_UPLOAD) return "video";
      // Extract the poster concurrently with the clip upload (independent work),
      // so it doesn't delay the progress bar starting to move.
      const metaPromise = videoMeta(file);
      const id = await post(bytes, onProgress);
      const att = { id, name: file.name || "video", type: file.type || "video/mp4", size: bytes.length };
      const meta = await metaPromise;
      if (meta) {
        if (meta.w) att.w = meta.w;
        if (meta.h) att.h = meta.h;
        if (meta.dur) att.dur = Math.round(meta.dur);
        if (meta.posterBytes) {
          try { att.poster = await post(meta.posterBytes); } catch { /* poster is optional */ }
        }
      }
      return att;
    }
    const bytes = new Uint8Array(await file.arrayBuffer());
    if (bytes.length > MAX_UPLOAD) return "size";
    const id = await post(bytes);
    return { id, name: file.name || "file", type: fileMime(file.name, file.type), size: bytes.length };
  } catch {
    return "generic";
  }
}

// chatAppLoadOlder folds one older history page into the chat app (scroll-back
// pagination). Messages arrive ascending; each folds with its reactions and
// edited flag, and any mini-app events in the page fold to their own apps too.
//
// Returns how many messages the page held: 0 means the SERVER said there are
// none left (the start of history), and **-1 means the fetch failed**. Callers
// latch "exhausted" on 0 and must not on -1 — an offline blip or a 502 mid
// deploy is not the start of history, and treating it as one both kills
// scroll-back for the rest of the mount and lets a jump tell the reader a
// message was deleted when it's simply unreachable right now.
async function chatAppLoadOlder(threadId, beforeSid) {
  const key = threadKeys[threadId];
  if (!key) return 0;
  let msgs = [];
  try {
    const res = await fetch(
      `/api/messages?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(threadId)}&before=${beforeSid}&limit=100`,
    );
    if (!res.ok) return -1; // 5xx during a deploy, 401 on a stale token, …
    const r = await res.json();
    msgs = r.messages || [];
  } catch {
    return -1; // offline, DNS, aborted, malformed JSON
  }
  if (!embed) storePutMessages(threadId, msgs).catch(() => {});
  for (const m of msgs) await chatAppFoldMessage(threadId, m);
  if (threadId === activeId) renderActiveSurfaces();
  return msgs.length;
}


// ---- app state snapshots (thread_state) ----------------------------------
// The fold source is the encrypted event log, but the client only holds the
// last ~100 messages — so folded app state is periodically saved as ONE
// encrypted blob per thread (slot "apps": { states, upTo }) and re-seeded on
// open. Version-checked writes stop two devices clobbering each other; on a
// conflict we just drop ours (the winner's snapshot + a refold converge).

const appStateVersion = {}; // threadId → last seen thread_state version

async function loadAppSnapshot(threadId) {
  const key = threadKeys[threadId];
  if (!key) return null;
  try {
    const r = await fetch(
      `/api/threads/${encodeURIComponent(threadId)}/state?token=${encodeURIComponent(session.token)}&slot=apps`,
    );
    if (!r.ok) return null;
    const { blob, version } = await r.json();
    appStateVersion[threadId] = version || 0;
    if (!blob) return null;
    return await decrypt(key, blob);
  } catch {
    return null;
  }
}

// seedAppState loads a thread's snapshot and folds forward from its horizon, so
// app state covers the FULL history even when the feed window doesn't. Fold-only
// (no DOM): the feed build that follows re-reads recent messages, and foldEvent's
// per-message-id dedup makes the overlap harmless. Called on each fresh fold
// build (right after resetThread); seedThread itself is a no-op if the thread
// already has live folded state.
// With no snapshot yet it normally does nothing — an ordinary thread's open
// folds its window anyway. `opts.full` folds the whole log from 0 in that case,
// for the SPACE thread: nobody ever "opens" it (no feed build folds for it),
// and its first snapshot may not have been saved yet (saves debounce), so
// without this a fresh boot would miss every install (loadSpaceThread).
async function seedAppState(threadId, opts = {}) {
  if (!threadKeys[threadId]) return;
  const snap = await loadAppSnapshot(threadId);
  if (snap && snap.states) {
    seedAppThread(threadId, snap.states, snap.upTo || 0);
  } else if (!opts.full) {
    return;
  }
  // Catch up: fold events the snapshot doesn't cover. Pages of 200, bounded —
  // a thread that somehow accrued more unfolded pages just waits for next open.
  let after = (snap && snap.states && snap.upTo) || 0;
  for (let page = 0; page < 20; page++) {
    let msgs = [];
    try {
      const r = await (
        await fetch(
          `/api/messages?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(threadId)}&after=${after}&limit=200`,
        )
      ).json();
      msgs = r.messages || [];
    } catch {
      return;
    }
    for (const m of msgs) {
      after = Math.max(after, m.id);
      try {
        const data = takeGossip(await decrypt(threadKeys[threadId], m.blob), false);
        if (isAppType(data.type)) foldEvent(threadId, data, { id: m.id, ts: data.ts });
      } catch {}
    }
    if (msgs.length < 200) break;
  }
}

// Persist a fresh snapshot when folds made new state (debounced by apps.js).
// The memory scratchpad's store (apps/memory.js): the "memory" slot of the
// thread's state store, encrypted under the thread key — E2EE to exactly this
// DM's two participants. Same endpoint + versioning as the app snapshots
// above; a different slot, so the two never contend.
setMemoryStore({
  load: async (threadId) => {
    const key = threadKeys[threadId];
    if (!key) return null;
    const r = await fetch(
      `/api/threads/${encodeURIComponent(threadId)}/state?token=${encodeURIComponent(session.token)}&slot=memory`,
    );
    if (!r.ok) return null;
    const { blob, version } = await r.json();
    let memory = null;
    if (blob) {
      try {
        memory = await decrypt(key, blob);
      } catch {} // undecryptable → treat as empty (the panel starts fresh)
    }
    return { memory, version: version || 0 };
  },
  save: async (threadId, memory, version) => {
    const key = threadKeys[threadId];
    if (!key) throw new Error("no key");
    const blob = await encrypt(key, memory);
    const r = await fetch(`/api/threads/${encodeURIComponent(threadId)}/state`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, slot: "memory", blob, version: version || 0 }),
    });
    if (!r.ok) throw new Error(`save ${r.status}`);
    return (await r.json()).version || 0;
  },
});

setStateSaver(async (threadId) => {
  const key = threadKeys[threadId];
  if (!key) return;
  const snap = takeSnapshot(threadId);
  if (!snap) return;
  try {
    const blob = await encrypt(key, snap);
    const r = await fetch(`/api/threads/${encodeURIComponent(threadId)}/state`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, slot: "apps", blob, version: appStateVersion[threadId] || 0 }),
    });
    if (r.ok) {
      appStateVersion[threadId] = (await r.json()).version || 0;
    } else if (r.status === 409) {
      // Another device saved first. Refresh our version so the NEXT save (after
      // future folds) wins; their snapshot + our refold converge regardless.
      const g = await fetch(
        `/api/threads/${encodeURIComponent(threadId)}/state?token=${encodeURIComponent(session.token)}&slot=apps`,
      );
      if (g.ok) appStateVersion[threadId] = (await g.json()).version || 0;
    }
  } catch {}
});

setToast((msg) => toast(msg));
// An unknown command ("/blahblah") is answered by a bot, private + in place.
// Attribute it to Eleven if present, else any AI agent, else any bot; null when
// there's no bot to name (the reply then reads as a plain "only visible to you").
setDefaultBot(() => {
  const e =
    roster.find((x) => x.is_agent && /eleven/i.test(x.label || "")) ||
    roster.find((x) => x.is_agent && x.kind === "ai") ||
    roster.find((x) => x.is_agent);
  return e ? { name: e.label, kind: e.kind || "bot" } : null;
});
// Lets /help list the bot's commands only where a bot can answer them (same gate
// as the "/" typeahead).
setThreadHasBot((id) => threadHasBot(id));
setThreadOwner((id) => threadApp[id] || null); // scopes local + default commands to an app's own thread
// Which threads can host shared app instances — gates "@here" and the typeahead's
// shared/personal hints to group chats.
setThreadIsGroup((id) => {
  const t = threads.find((x) => x.id === id);
  return !!t && t.kind === "group";
});
// Space info for Eleven's guided tour: the group name plus the optional
// administrator identity. The admin fields are member-gated, so read /api/group
// with our token; the tour degrades to just the name if it's unset or fails.
setSpaceInfo(async () => {
  try {
    const g = await (await fetch(`/api/group?token=${encodeURIComponent(session.token)}`)).json();
    if (g.sealed && sealedBranding) {
      return {
        name: sealedBranding.name || "",
        nameSet: true,
        adminName: sealedBranding.admin_name || "",
        adminEmail: sealedBranding.admin_email || "",
      };
    }
    return { name: g.name || "", nameSet: !!g.name_set, adminName: g.admin_name || "", adminEmail: g.admin_email || "" };
  } catch {
    return {};
  }
});
// The tour lives in your DM with Eleven: when "Show me around" is tapped elsewhere,
// find-or-create that DM, open it, and hand the tour a sink bound to it so the rest
// renders there. createThread dedupes DMs server-side, so this never spawns a
// second one. Null if there's no Eleven to DM → the tour just stays put.
setElevenTour(async () => {
  const eleven = roster.find((x) => x.is_agent && x.public_key && /eleven/i.test(x.label || ""));
  if (!eleven) return null;
  const dm = existingDM(eleven.user_id);
  const id = dm ? dm.id : await createThread([eleven.user_id], { group: false });
  if (!id) return null;
  if (!dm) {
    await loadThreads();
    renderThreadList();
  }
  await openThread(id);
  // notice: append a private tour step here. ask: send a real chat message as the
  // user, so Eleven's AI actually replies (the tour's "Tell me about Eleven" chip).
  return {
    notice: (spec) => appendNotice(id, spec),
    ask: (text) => sendChatText(id, text),
  };
});

// The setup conversation's host bridge (docs/conversational-onboarding.md): the
// script is a host-level feature like the tour, and these are the real-world
// capabilities it drives. Admin writes authenticate with the member's own device
// token — the server accepts it because their user holds the admin role.
const adminAuth = () => ({ Authorization: "Bearer " + session.token, "Content-Type": "application/json" });
// hookIngestURL: where a webhook's requests land — the in.<host> ingest origin
// (docs/webhooks.md), derived from the page host so custom domains follow.
// The server can override the derivation via ingest_base on /api/hooks/service
// (LCHAT_HOOKS_BASE — local dev runs the sidecar on a bare port, no router),
// cached here by fetchHooksService, which every webhook surface calls first.
let hooksIngestBase = "";
let hooksServiceFetched = false;
const hookIngestURL = (secret) => `${hooksIngestBase || `https://in.${location.host}`}/h/${secret}`;
// fetchHooksService: the hooks sidecar's service identity ({user_id, public_key},
// {} when none is provisioned) — the seal target for webhook definitions.
async function fetchHooksService() {
  try {
    const r = await fetch(`/api/hooks/service?token=${encodeURIComponent(session.token)}`);
    if (!r.ok) return null;
    const svc = await r.json();
    if (svc && typeof svc.ingest_base === "string") hooksIngestBase = svc.ingest_base;
    hooksServiceFetched = true;
    return svc;
  } catch {
    return null;
  }
}
// setGroup clears any field it isn't sent, so writes always carry the full
// current trio (name + admin name + contact email) with one field changed.
// Returns "ok" | "invalid" (the server rejected the value) | "error" (auth /
// network / anything else) — so the conversation can be honest about which.
async function saveGroupSettings(patch) {
  // Sealed instances never write plaintext branding (the endpoint 409s) —
  // the same edit re-seals the blob instead.
  if (serverBrandingSealed) return resealBranding(patch);
  try {
    const g = await (await fetch(`/api/group?token=${encodeURIComponent(session.token)}`)).json();
    const body = {
      name: g.name || "",
      admin_name: g.admin_name || "",
      admin_email: g.admin_email || "",
      ...patch,
    };
    const r = await fetch("/api/admin/group", { method: "POST", headers: adminAuth(), body: JSON.stringify(body) });
    if (r.ok && patch.name) {
      document.title = patch.name;
      paintSpaceName();
    }
    return r.ok ? "ok" : r.status === 400 ? "invalid" : "error";
  } catch {
    return "error";
  }
}
// Remove / remove-and-ban a member (issue #578) — shared by the Admin app's
// report queue (via the bridge below) and the profile card's admin rungs (via
// the verbs seam). Both endpoints are admin-gated server-side; r.ok is the
// caller's only signal.
async function removeFromSpace(uid) {
  try {
    const r = await fetch(`/api/admin/users/${encodeURIComponent(uid)}/remove`, {
      method: "POST",
      headers: adminAuth(),
    });
    if (r.ok) await loadRoster();
    return r.ok;
  } catch {
    return false;
  }
}
async function banFromSpace(uid) {
  try {
    const r = await fetch(`/api/admin/users/${encodeURIComponent(uid)}/ban`, {
      method: "POST",
      headers: adminAuth(),
    });
    if (r.ok) await loadRoster();
    return r.ok;
  } catch {
    return false;
  }
}
setSetupBridge({
  myName: () => session.name || "",
  setMyName: async (name) => {
    session.name = name.slice(0, 32);
    localStorage.setItem(SESSION_KEY, JSON.stringify(session));
    setCurrentUser(myUserId, session.name || "New member"); // emitted events carry the new name
    const me = document.getElementById("me-avatar");
    if (me) paintAvatar(me, session.name, () => avatarFor(myUserId));
    await publishMyLabel();
  },
  // ---- Incoming webhooks (#610, docs/webhooks.md) ----
  // The Webhooks app is pure UI; everything key-shaped happens here. Creation
  // is the whole client half of the design: mint the webhook's keypair, wrap
  // the target thread's key to it, register it, then seal its private key +
  // token + URL secret to the SIDECAR's service identity — the server stores
  // only ciphertext, and the URL is known (and shown) instantly.
  hooksService: fetchHooksService,
  // The threads a webhook can feed: groups I'm in whose key I hold (I must
  // wrap it), with the space thread offered separately by the app.
  hooksTargets: async () =>
    threads
      .filter((t) => t.kind === "group" && threadKeyB64[t.id])
      .map((t) => ({ id: t.id, name: threadName[t.id] || "Unnamed group" })),
  hooksCreate: async ({ name, ns, threadId, space }) => {
    try {
      const svc = await fetchHooksService();
      if (!svc || !svc.public_key) return { error: "Webhooks aren't set up on this space yet." };
      if (!instanceKey) return { error: "Your keys are still syncing — try again in a moment." };
      let tid = threadId;
      if (space) {
        tid = await resolveSpaceThread();
        if (!tid) return { error: "The space thread isn't ready yet — try again in a moment." };
      }
      const keyB64 = threadKeyB64[tid];
      if (!keyB64) return { error: "You need that chat's key loaded to point a webhook at it — open the chat once first." };
      const kp = await generateUserKeypair();
      const wrapped = await wrapThreadKey(keyB64, kp.publicKey);
      const r = await fetch("/api/hooks", {
        method: "POST",
        headers: adminAuth(),
        body: JSON.stringify({ name, public_key: kp.publicKey, thread_id: tid, wrapped }),
      });
      if (!r.ok) return { error: `The server refused the webhook (status ${r.status}).` };
      const created = await r.json();
      const secret = randomSecret();
      // Field names are wire format with the Go sidecar (internal/hooks
      // Definition) — change them only together.
      const def_blob = await sealForPub(svc.public_key, {
        v: 1,
        id: created.id,
        user_id: created.user_id,
        name,
        ns,
        thread_id: tid,
        secret,
        token: created.token,
        priv: kp.privateKey,
      });
      const meta_blob = await encrypt(instanceKey, { v: 1, name, ns, thread_id: tid, secret, space: !!space });
      const r2 = await fetch(`/api/hooks/${encodeURIComponent(created.id)}/blobs`, {
        method: "PUT",
        headers: adminAuth(),
        body: JSON.stringify({ def_blob, meta_blob }),
      });
      if (!r2.ok) return { error: "Created, but storing its definition failed — remove it and try again." };
      return { ok: true, url: hookIngestURL(secret) };
    } catch (e) {
      console.error("webhook create failed:", e);
      return { error: "Couldn't create the webhook." };
    }
  },
  hooksList: async () => {
    try {
      // URLs below need the (possibly overridden) ingest base — warm it once.
      if (!hooksServiceFetched) await fetchHooksService();
      const r = await fetch("/api/hooks", { headers: adminAuth() });
      if (!r.ok) return null;
      const { hooks } = await r.json();
      const out = [];
      for (const h of hooks || []) {
        const row = { id: h.id, deployed: (h.deployed_at || 0) > 0 };
        if (h.meta_blob && instanceKey) {
          try {
            const meta = await decrypt(instanceKey, h.meta_blob);
            row.name = meta.name;
            row.ns = meta.ns;
            row.url = hookIngestURL(meta.secret);
            row.target = meta.space ? "the whole space" : threadName[meta.thread_id] || "a group chat";
          } catch {
            row.name = "(unreadable webhook)";
          }
        }
        out.push(row);
      }
      return out;
    } catch {
      return null;
    }
  },
  hooksRemove: async (id) => {
    try {
      const r = await fetch(`/api/hooks/${encodeURIComponent(id)}`, { method: "DELETE", headers: adminAuth() });
      return r.ok;
    } catch {
      return false;
    }
  },
  // ---- Moderation (issue #578): report queue + audit log ----
  // The Admin app is pure UI; everything key- or name-shaped happens here.
  // Each queue row's content blob is sealed to THIS admin's key — openSealed
  // with our private key is the only place it ever becomes words.
  reports: async () => {
    try {
      const r = await fetch("/api/admin/reports", { headers: adminAuth() });
      if (!r.ok) return null;
      const { reports } = await r.json();
      for (const rep of reports) {
        rep.reporter_name = rosterLabel(rep.reporter_id) || "A former member";
        rep.reported_name = rosterLabel(rep.reported_id) || "A former member";
        rep.resolved_name = rep.resolved_by ? rosterLabel(rep.resolved_by) || "an admin" : "";
        rep.thread_name = rep.thread_id ? threadName[rep.thread_id] || "" : "";
        rep.invited_by_name = rep.invited_by ? rosterLabel(rep.invited_by) || "a former member" : "";
        rep.reported_gone = !roster.some((x) => x.user_id === rep.reported_id);
        if (rep.blob && session.userPriv) {
          try {
            rep.content = await openSealed(rep.blob, session.userPriv);
          } catch {
            rep.content = null; // wasn't sealed to me at filing time — unknown cause
          }
        }
        delete rep.blob;
      }
      return reports;
    } catch {
      return null;
    }
  },
  resolveReport: async (id, action) => {
    try {
      const r = await fetch(`/api/admin/reports/${encodeURIComponent(id)}/resolve`, {
        method: "POST",
        headers: adminAuth(),
        body: JSON.stringify({ action }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  audit: async (before) => {
    try {
      const r = await fetch(`/api/admin/audit${before ? `?before=${encodeURIComponent(before)}` : ""}`, {
        headers: adminAuth(),
      });
      if (!r.ok) return null;
      const { entries } = await r.json();
      for (const e of entries) {
        e.actor_name = e.actor_id === "console" ? "Admin console" : rosterLabel(e.actor_id) || "A former admin";
        e.subject_name = e.subject_id ? rosterLabel(e.subject_id) || "a former member" : "";
      }
      return entries;
    } catch {
      return null;
    }
  },
  // Warn: the words travel as an ordinary E2EE DM from THIS admin with a
  // `warn` flag inside the ciphertext; the server records only that the rung
  // was used (the audit entry) — never what was said.
  warnUser: async (uid, text, reportId) => {
    try {
      const dm = existingDM(uid);
      const tid = dm ? dm.id : await createThread([uid], { group: false });
      if (!threadKeys[tid]) await loadThreads();
      const key = threadKeys[tid];
      if (!key || !ws || ws.readyState !== WebSocket.OPEN) return false;
      const payload = { name: session.name || "", uid: myUserId, ts: Date.now(), text, warn: true };
      const blob = await encrypt(key, payload);
      ws.send(JSON.stringify({ type: "msg", thread_id: tid, blob }));
      const r = await fetch("/api/admin/warn", {
        method: "POST",
        headers: adminAuth(),
        body: JSON.stringify({ user_id: uid, report_id: reportId || "" }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  banFromSpace,
  removeFromSpace,
  removeFromThread: async (threadId, uid) => {
    try {
      const r = await fetch(`/api/threads/${encodeURIComponent(threadId)}/remove`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, user_id: uid }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  // The demote rung (the access-levels tie-in): which levels the member
  // holds, and taking one away. Level names are policy every member already
  // sees via /api/tiers — no new disclosure.
  memberLevels: async (uid) => {
    await loadTiers();
    return tiers.filter((tt) => (tt.members || []).includes(uid)).map((tt) => ({ id: tt.id, name: tt.name }));
  },
  removeFromLevel: async (tierId, uid) => {
    try {
      const r = await fetch(`/api/tiers/${encodeURIComponent(tierId)}/remove`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, user_id: uid }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  setGroupName: (name) => saveGroupSettings({ name }),
  setContactEmail: (email) => saveGroupSettings({ admin_email: email }),
  // The admin panel saves name + contact together (one Save for the section);
  // the description rides along to its own endpoint (also fed by the /admin
  // console and the About-this-space sheet). Omitting it leaves it unchanged.
  saveSpace: async ({ name, email, description }) => {
    // Sealed: one re-seal carries the whole set — there is no separate
    // plaintext description endpoint to hit (it 409s while sealed).
    if (serverBrandingSealed) {
      const patch = { name, admin_email: email };
      if (description !== undefined) patch.description = description;
      return resealBranding(patch);
    }
    const r = await saveGroupSettings({ name, admin_email: email });
    if (description === undefined) return r;
    try {
      const d = await fetch("/api/group-description", {
        method: "POST",
        headers: adminAuth(),
        body: JSON.stringify({ description }),
      });
      if (r !== "ok") return r; // the trio's failure is the headline
      return d.ok ? "ok" : d.status === 400 ? "invalid" : "error";
    } catch {
      return "error";
    }
  },
  // Adopt a photo the admin just SENT in the chat as the server photo: fetch +
  // decrypt the attachment (it's an ordinary E2E blob) straight to bytes — NOT
  // via an object URL; the page CSP's connect-src 'self' blocks fetch(blob:) —
  // then re-post to the plaintext branding endpoint, deliberately so; the
  // server photo must render where no key exists yet (join/welcome cards).
  // `alt` (the text typed alongside the photo) rides as the photo's alt text.
  adoptServerPhoto: async (threadId, att, alt) => {
    try {
      const plain = await loadBlobBytes(att.id, threadId);
      if (!plain) return false;
      const { bytes } = await processImage(new Blob([plain], { type: att.type || "image/jpeg" }), 400);
      // Sealed: the plaintext endpoint 409s — the photo rides a re-seal instead.
      if (serverBrandingSealed) return sealServerPhoto(bytes, "image/jpeg", alt);
      const r = await fetch("/api/admin/server-avatar?alt=" + encodeURIComponent(alt || ""), {
        method: "POST",
        headers: { Authorization: "Bearer " + session.token },
        body: bytes,
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  // The server photo is plaintext branding by design (it must render where no
  // key exists yet — the join/welcome cards). Same downscale as the admin
  // console. `alt` accompanies the upload so a photo change never silently
  // wipes the stored alt text (the server resets it on every upload).
  pickServerPhoto: (alt) =>
    new Promise((resolve) => {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "image/*";
      input.onchange = async () => {
        const f = input.files[0];
        if (!f) return resolve(false);
        try {
          const { bytes } = await processImage(f, 400);
          // Sealed: the plaintext endpoint 409s — the photo rides a re-seal instead.
          if (serverBrandingSealed) return resolve(await sealServerPhoto(bytes, "image/jpeg", alt));
          const r = await fetch("/api/admin/server-avatar?alt=" + encodeURIComponent(alt || ""), {
            method: "POST",
            headers: { Authorization: "Bearer " + session.token },
            body: bytes,
          });
          resolve(r.ok);
        } catch {
          resolve(false);
        }
      };
      input.oncancel = () => resolve(false);
      input.click();
    }),
  setUserInvites: async (on) => {
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify({ user_invites: on }) })).ok;
    } catch {
      return false;
    }
  },
  // The setup extras steps write the feature gates ("ai" | "bots" | "apps" →
  // ai_enabled etc., #712). The whitelist keeps the flow data from naming an
  // arbitrary settings key.
  setFeature: async (key, on) => {
    if (!["ai", "bots", "apps"].includes(key)) return false;
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify({ [`${key}_enabled`]: !!on }) })).ok;
    } catch {
      return false;
    }
  },
  markSetupComplete: async () => {
    // The from-home marker's one job — steering the key step's copy — is done
    // with setup; left behind (#1377) it steered keys-home's "your sign-in
    // doesn't hold it yet" forever, even long after enrolling.
    try { localStorage.removeItem("lchat_from_home"); } catch { /* private mode */ }
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify({ setup_complete: true }) })).ok;
    } catch {
      return false;
    }
  },
  savePasskey: () => launchEnrol(session),
  enrolled: () => isEnrolled(),
  // Did this person arrive via their Eleven sign-in page (create-a-space)? Set
  // by join.js from the link's ?src=home; steers the key step's copy only.
  fromHome: () => {
    try { return localStorage.getItem("lchat_from_home") === "1"; } catch { return false; }
  },
  // Skipping the key ceremony starts the banner's escalating reminder schedule
  // (24h → 72h → 1w) instead of an immediate contradiction of the conversation.
  deferBackupReminders: () => deferBackupNudges(),
  // A joiner's profile photo, sent through the chat (an ordinary E2E
  // attachment): decrypt, then re-encrypt under the INSTANCE key as their
  // avatar — unlike the server photo, it never leaves the encryption.
  adoptProfilePhoto: async (threadId, att, alt) => {
    if (!instanceKey) return "nokey"; // still waiting on the space key — not a bad photo
    try {
      const plain = await loadBlobBytes(att.id, threadId);
      if (!plain) return false;
      await uploadAvatar(new Blob([plain], { type: att.type || "image/jpeg" }), (alt || "").trim());
      return true;
    } catch {
      return false;
    }
  },
  // The freshly-adopted profile photo, decrypted, for the welcome preview
  // (cache-busted: it was uploaded moments ago).
  myAvatarURL: async () => {
    delete avatarURLs[myUserId];
    return avatarFor(myUserId);
  },
  // The welcome conversation finished (or was completed enough) — stop
  // re-opening it on every load.
  markWelcomeDone: () => localStorage.removeItem("lchat_welcome_pending"),
  // ---- the Admin app's reads/writes (role-gated server-side either way) ----
  // Sealed branding (docs/no-plaintext.md): the Admin app's toggle. State is
  // read live so the panel reflects a seal done in another tab.
  brandingSealed: async () => {
    try {
      const g = await (await fetch(`/api/group?token=${encodeURIComponent(session.token)}`)).json();
      return !!g.sealed;
    } catch {
      return serverBrandingSealed;
    }
  },
  brandingSeal: () => sealBrandingNow(),
  brandingUnseal: () => unsealBrandingNow(),
  // A displayable space-photo URL: the plaintext endpoint normally, a
  // decrypted object URL while sealed (raw /api/server-avatar would be
  // ciphertext — a broken <img>). Null when sealed with no openable photo.
  serverAvatarURL: async () =>
    serverBrandingSealed ? sealedServerAvatarURL() : "/api/server-avatar?t=" + Date.now(),
  isAdmin: async () => {
    try {
      const me = await (await fetch(`/api/me?token=${encodeURIComponent(session.token)}`)).json();
      return me.role === "admin";
    } catch {
      return false;
    }
  },
  // The embedded release notes (changelog), oldest-first as the server stores
  // them — the Admin app posts new ones into its update stream (admin.note).
  // Non-secret, non-user-content (ships in the binary, announced publicly —
  // branding-class), so it reads in the clear; the app just needs the session
  // token to fetch it (it holds none of its own). Returns [] on any failure.
  changelog: async () => {
    try {
      const r = await fetch(`/api/changelog?token=${encodeURIComponent(session.token)}`);
      if (!r.ok) return [];
      const j = await r.json();
      return Array.isArray(j.entries) ? j.entries : [];
    } catch {
      return [];
    }
  },
  groupInfo: async () => {
    try {
      const [g, s] = await Promise.all([
        fetch(`/api/group?token=${encodeURIComponent(session.token)}`).then((r) => r.json()),
        fetch("/api/admin/settings", { headers: adminAuth() }).then((r) => r.json()),
      ]);
      // Sealed: the readable set lives in the decrypted blob, not on the wire.
      if (g.sealed && sealedBranding) {
        g.name = sealedBranding.name || "";
        g.name_set = true;
        g.admin_email = sealedBranding.admin_email || "";
        g.description = sealedBranding.description || "";
        g.avatar_alt = sealedBranding.avatar_alt || "";
      }
      return {
        name: g.name || "",
        nameSet: !!g.name_set,
        email: g.admin_email || "",
        description: g.description || "",
        avatar: !!g.avatar,
        avatarAlt: g.avatar_alt || "",
        userInvites: !!s.user_invites,
        // Feature gates (default on — a missing field is an older server).
        aiEnabled: s.ai_enabled !== false,
        botsEnabled: s.bots_enabled !== false,
        appsEnabled: s.apps_enabled !== false,
        memberAppsEnabled: s.member_apps_enabled !== false,
        // Space-install policy (default off — everyone may add space-wide).
        spaceInstallsAdmins: s.space_installs_admins === true,
        updateAuto: !!s.update_auto,
        updateDownload: !!s.update_download,
        updateChannel: s.update_channel || "stable",
        updatePin: s.update_pin || "",
        updateMajor: s.update_major || "",
        update: s.update || {},
      };
    } catch {
      return null;
    }
  },
  // Feature gates — a partial update; pass only the flipped flag
  // (ai_enabled / bots_enabled / apps_enabled). Same settings path as
  // setUserInvites; the picker/palette gates read it on the next page load.
  setFeatures: async (patch) => {
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify(patch) })).ok;
    } catch {
      return false;
    }
  },
  // Auto-update prefs — a partial update; pass only the changed field
  // (update_auto / update_download / update_channel / update_pin /
  // update_major).
  setUpdatePrefs: async (patch) => {
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify(patch) })).ok;
    } catch {
      return false;
    }
  },
  // Edit the photo's alt text without re-uploading the image.
  setAvatarAlt: async (alt) => {
    try {
      return (await fetch("/api/admin/settings", { method: "POST", headers: adminAuth(), body: JSON.stringify({ avatar_alt: alt }) })).ok;
    } catch {
      return false;
    }
  },
  removeServerPhoto: async () => {
    try {
      return (await fetch("/api/admin/server-avatar", { method: "DELETE", headers: adminAuth() })).ok;
    } catch {
      return false;
    }
  },
  // ---- Access levels (tiers) — the Admin app's management surface ---------
  // All crypto stays here in the shell: the app sees plain rows and verbs.
  tiers: async () => {
    await loadTiers();
    return tiers;
  },
  // Joined people for the level editor (agents excluded on purpose: adding a
  // bot to a level would widen what its sidecar can read — bot access stays a
  // deliberate per-thread choice, docs/bots.md).
  levelMembers: () =>
    roster
      .filter((e) => e.public_key && !e.is_agent)
      .map((e) => ({
        user_id: e.user_id,
        // Labels decrypt under the instance key and can be momentarily (or
        // legitimately) empty — a naked checkbox is not a member row. Name
        // yourself properly; strangers get an honest placeholder.
        label:
          e.user_id === myUserId
            ? `${e.label || session.name || "You"} (you)`
            : e.label || "Unnamed member",
      })),
  createTier: async (name) => {
    try {
      const r = await fetch("/api/tiers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, name }),
      });
      if (!r.ok) return null;
      return (await r.json()).id || null;
    } catch {
      return null;
    }
  },
  // Returns the HTTP status (200 ok, 409 = still gating groups) so the Admin
  // app can say WHY a delete was refused instead of a generic failure.
  deleteTier: async (id) => {
    try {
      const r = await fetch(`/api/tiers/${encodeURIComponent(id)}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token }),
      });
      return r.status;
    } catch {
      return 0;
    }
  },
  // Set a level's membership to exactly memberIds: assign the missing, remove
  // the dropped, then get keys to whoever this client can reach (minting on
  // first use — see ensureTierKeys for the no-copy-for-curators rule).
  // Admin sets a level's visibility policy: "shown" | "hidden" | "user".
  setTierPolicy: async (id, policy) => {
    try {
      const r = await fetch(`/api/tiers/${encodeURIComponent(id)}/policy`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, policy }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  // Paid access levels (admin): whether payments are set up for this space,
  // set/clear a level's price, and link the Stripe account.
  billingStatus: async () => {
    try {
      return await (await fetch(`/api/admin/billing?token=${encodeURIComponent(session.token)}`)).json();
    } catch {
      return { platform: false, available: false, account: false };
    }
  },
  setTierPrice: async (id, price) => {
    try {
      return (
        await fetch(`/api/tiers/${encodeURIComponent(id)}/price`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: session.token, ...price }),
        })
      ).ok;
    } catch {
      return false;
    }
  },
  // OAuth account linking (the only path — no ids pasted by hand): whether
  // the broker offers Stripe OAuth here, and the full-tab consent trip. The
  // return leg lands in completeOAuthReturn, which links the account and
  // fires "lchat:billing-changed".
  billingOAuthReady: async () => !!(await loadOAuthCfg("stripe")),
  startBillingConnect: async () => openBillingAuthorize(await loadOAuthCfg("stripe")),
  // A member's own show/hide for a level (honoured only under the "user" policy).
  setTierShown: async (id, show) => {
    try {
      const r = await fetch(`/api/tiers/${encodeURIComponent(id)}/show`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, show }),
      });
      return r.ok;
    } catch {
      return false;
    }
  },
  setTierMembers: async (id, memberIds) => {
    try {
      await loadTiers();
      const level = tiers.find((t) => t.id === id);
      if (!level) return false;
      const want = new Set(memberIds);
      const post = (path, body) =>
        fetch(path, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: session.token, ...body }),
        });
      for (const uid of level.members || []) {
        if (!want.has(uid)) await post(`/api/tiers/${encodeURIComponent(id)}/remove`, { user_id: uid });
      }
      for (const uid of want) {
        if (!(level.members || []).includes(uid)) {
          await post(`/api/tiers/${encodeURIComponent(id)}/members`, { user_id: uid });
        }
      }
      await ensureTierKeys(id);
      await loadTiers();
      return true;
    } catch {
      return false;
    }
  },
  // Create an admin-granting invite. The claimer can either join as a new
  // member or claim it on their existing account to get promoted to admin.
  // Returns {link} or null on failure.
  createAdminInvite: async () => {
    try {
      const { randomSecret, deriveInvite } = await import("/static/crypto.js");
      const { buildInviteFragment } = await import("/static/invite.js");
      const T = randomSecret();
      const { id, claimHash } = await deriveInvite(T);
      const res = await fetch("/api/admin/key-invites", {
        method: "POST",
        headers: adminAuth(),
        body: JSON.stringify({
          label: "",
          user_id: "",
          id,
          wrapped: "",
          claim_hash: claimHash,
          agent: false,
          grants_admin: true,
        }),
      });
      if (!res.ok) return null;
      const data = await res.json();
      if (!data.ok) return null;
      const frag = buildInviteFragment(T, "", brandingB || "");
      return { link: `${location.origin}/join/join#${frag}` };
    } catch {
      return null;
    }
  },
});

// First run: the instance's admin lands in a conversation with Eleven that walks
// setup (name, space name, email, photo, invites, the key backup) — chat-first,
// no /admin. Gated server-side by role + the setup_complete flag, so it appears
// for exactly one person, until finished.
async function maybeStartSetup(mePromise) {
  let me = await mePromise;
  // The boot race hands back null after 4s so a stalled /api/me never holds
  // the reveal hostage — but deciding "no setup" on that null silently
  // cancelled the whole resume (#1377): the admin came back from a successful
  // sign-in ceremony to no Eleven at all. The reveal already happened by the
  // time we're here, so a patient un-raced retry costs nothing.
  if (!me) {
    try {
      me = await fetch(`/api/me?token=${encodeURIComponent(session.token)}`).then((r) => r.json());
    } catch {
      me = null; // truly unreachable — setup retries next load, as before
    }
  }
  const setupActive = !!me && me.role === "admin" && !me.setup_complete;
  // The sidebar backup nudge defers to Eleven's conversations entirely (setup
  // AND the joiner welcome — one voice); afterwards it renders on its normal
  // rules, which include the escalating 24h/72h/1w schedule a skip starts.
  initBackupBanner(session, { suppress: setupActive || !!welcomePending() });
  if (!setupActive) return;
  try {
    // One Eleven: an admin arriving where a live agent Eleven already exists
    // (a space with its sidecar up before setup) gets the setup conversation
    // in ITS DM, exactly like the joiner welcome. The keyless app-thread
    // fallback stays the norm for fresh instances (no sidecar at setup time).
    const agent = liveElevenAgent();
    let live = null;
    let id;
    if (agent) {
      id = await createThread([agent.user_id], { group: false }); // dedupes to the existing DM
      if (!id) return;
      await loadThreads();
      await seedAppState(id); // setup.step resume state (typed events)
      live = {
        said: (key) => scriptedSaid(id, key),
        post: (text, key) => sendScriptedBubble(id, text, key),
        flowState: (active) => sendTypedPayload(id, { type: "flow.state", active: !!active }),
      };
      await openThreadById(id);
    } else {
      id = await resolveAppThread("setup");
      if (!id) return;
      appThreadView[id] = "chat"; // the conversation IS the surface (Interface is a progress card)
      await openThread(id);
    }
    // Notices pin the feed themselves (addLocalNotice arms pinNext); the typing
    // row needs the same nudge so the beat is visible before the reply lands.
    const pinFeed = () =>
      requestAnimationFrame(() => {
        const feed = document.querySelector(".chatapp-feed");
        if (feed) feedGlideToBottom(feed); // intent-aware: follow checks stay true mid-glide
      });
    startSetup({
      threadId: id,
      live,
      openQuickForm: () => openSetupQuickForm(id),
      typing: (on) => {
        setNoticeTyping(id, "Eleven", on);
        if (on) pinFeed();
      },
      respond: (spec) => appendNotice(id, spec),
    });
  } catch {}
}

// The joiner's marker, written by the join page when a fresh person claims an
// invite (chat-first, nameless — Eleven asks). Carries the inviter's suggested
// name; cleared by markWelcomeDone when the conversation completes.
function welcomePending() {
  try {
    return JSON.parse(localStorage.getItem("lchat_welcome_pending") || "null");
  } catch {
    return null;
  }
}

// A freshly-joined member's first load: open Eleven's welcome conversation
// before the reveal (the joiner mirror of maybeStartSetup). Runs until the
// conversation completes; each load resumes past the answered steps.
async function sendChatText(threadId, text) {
  const key = threadKeys[threadId];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) return false;
  const payload = { name: session.name || "New member", text, ts: Date.now() };
  if (myUserId) payload.uid = myUserId;
  const blob = await encrypt(key, payload);
  ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
  return true;
}

// Blobs we've sent over the socket and are waiting to see echoed back, keyed by
// the exact blob string → a resolver. The server stores a message before it
// broadcasts (hub.go), so the echo is proof of a durable write; announceLeave uses
// this to land the "X left" line before /leave drops our membership.
const pendingSends = new Map();

// Send a message and resolve once the server echoes it back (durably stored) — or
// after a timeout, so a WS hiccup can never hang the caller.
function sendAndConfirm(threadId, blob) {
  return new Promise((resolve) => {
    let done = false;
    const finish = () => {
      if (done) return;
      done = true;
      pendingSends.delete(blob);
      resolve();
    };
    pendingSends.set(blob, finish);
    setTimeout(finish, 2000);
    try {
      ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
    } catch {
      finish(); // socket died mid-send — resolve now, don't leak the pending entry
    }
  });
}

// Announce that people were just added to a group: a centered .chatapp-action
// line, sent as a normal thread-key-encrypted message so it persists in history
// and renders for every member (including the newcomers, from stored history on
// their first load) — the server never sees the names. We send the added members'
// user *ids* (plus our own), not baked names, so each recipient renders the line
// from their own point of view — "Paul added you and Bob" (membershipLine, applied
// at fold time). The baked `text` is a fallback for surfaces that don't run that
// rewrite (native clients, the sidebar preview, push). The `action` flag routes it
// through the action-line path in apps/chat.js rather than rendering as a bubble.
// Apply a membership announcement's roster delta to the thread's member list,
// so counts and member-derived UI (e.g. an open group's intro "N people here")
// update the moment someone joins/leaves — not only on the next full load. The
// server reconciles authoritatively on the next loadThreads; this just keeps
// the live view honest in between. Returns true if anything changed.
function applyMembershipDelta(threadId, payload) {
  const t = threads.find((x) => x.id === threadId);
  if (!t || !payload) return false;
  const members = t.members || (t.members = []);
  let changed = false;
  if (Array.isArray(payload.join)) {
    for (const uid of payload.join) {
      if (uid && !members.includes(uid)) (members.push(uid), (changed = true));
    }
  }
  if (Array.isArray(payload.removed)) {
    for (const uid of payload.removed) {
      const i = members.indexOf(uid);
      if (i >= 0) (members.splice(i, 1), (changed = true));
    }
  }
  if (payload.left && payload.uid) {
    const i = members.indexOf(payload.uid);
    if (i >= 0) (members.splice(i, 1), (changed = true));
  }
  return changed;
}

async function announceJoin(threadId, uids) {
  const key = threadKeys[threadId];
  if (!key || !uids.length || !ws || ws.readyState !== WebSocket.OPEN) return;
  // publishedLabel, NOT rosterLabel: this text is read by every member.
  const payload = { name: session.name || "New member", text: `${session.name || "New member"} added ${nameList(uids.map(publishedLabel))}`, join: uids.slice(), ts: Date.now(), action: true };
  if (myUserId) payload.uid = myUserId;
  const blob = await encrypt(key, payload);
  ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
}

// Announce that we're leaving a group, as our final act before the server drops
// our membership. Same shape as announceJoin (recipients render "Paul left"). The
// server gates every msg on membership, so we must get this stored BEFORE /leave —
// and the two travel on different channels (WebSocket vs HTTP), so we await the
// echo (proof of the write) with sendAndConfirm's timeout guard rather than firing
// and hoping it wins the race.
function announceLeave(threadId) {
  const key = threadKeys[threadId];
  if (!key || !ws || ws.readyState !== WebSocket.OPEN) return Promise.resolve();
  const payload = { name: session.name || "New member", text: `${session.name || "New member"} left`, left: true, ts: Date.now(), action: true };
  if (myUserId) payload.uid = myUserId;
  return encrypt(key, payload).then((blob) => sendAndConfirm(threadId, blob));
}

// Announce that someone (a person or a bot) was removed from a group ("Paul
// removed Bob"). Like announceJoin, sent as a normal thread-key-encrypted message
// carrying the removed members' ids so each recipient renders it locally. No
// leave-style echo race: the remover stays a member. The removed member is no
// longer in the thread, so the server won't deliver it to them.
async function announceRemove(threadId, uids) {
  const key = threadKeys[threadId];
  if (!key || !uids.length || !ws || ws.readyState !== WebSocket.OPEN) return;
  // publishedLabel, NOT rosterLabel: this text is read by every member.
  const payload = { name: session.name || "New member", text: `${session.name || "New member"} removed ${nameList(uids.map(publishedLabel))}`, removed: uids.slice(), ts: Date.now(), action: true };
  if (myUserId) payload.uid = myUserId;
  const blob = await encrypt(key, payload);
  ws.send(JSON.stringify({ type: "msg", thread_id: threadId, blob }));
}

// Build the chat.msg fold event for a plain message. Membership announcements
// (join/leave) get their text rewritten to the viewer's point of view here, so the
// live and history fold paths share one rewrite and can't drift.
function chatMsgEvent(payload) {
  const line = membershipLine(payload, myUserId, rosterLabel);
  return line ? { ...payload, type: "chat.msg", text: line } : { ...payload, type: "chat.msg" };
}

// createAppThread makes a personal app's single-member thread: a `self` thread
// whose name_blob is the ENCRYPTED app id, wrapped only to us. The server sees
// just another opaque self thread — it never learns which app it hosts.
async function createAppThread(appName) {
  const me = roster.find((e) => e.user_id === myUserId);
  if (!me || !me.public_key) return null;
  const { key, b64 } = await generateKey();
  const wrapped = await wrapThreadKey(b64, me.public_key);
  // Store the display title alongside the app id so native clients (which don't
  // have the app registry) can label the thread without knowing every app.
  const name_blob = await encrypt(key, { app: appName, title: (appByName(appName) || {}).title || appName });
  const r = await (
    await fetch("/api/threads", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, kind: "self", name_blob, members: [{ user_id: myUserId, wrapped }] }),
    })
  ).json();
  if (!r.thread_id) return null;
  threadKeys[r.thread_id] = key;
  threadKeyB64[r.thread_id] = b64;
  threadApp[r.thread_id] = appName;
  const a = appByName(appName);
  threadName[r.thread_id] = a ? a.title || a.name : appName;
  // A quiet app's thread exists (so its events have somewhere to land) but must
  // not force its own way into view on first use — hide it server-side before
  // loadThreads() ever has a chance to render it visible (issue #227).
  if (appIsQuiet(appName)) {
    hidden[r.thread_id] = true;
    await fetch(`/api/threads/${encodeURIComponent(r.thread_id)}/hidden`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, hidden: true }),
    }).catch(() => {});
  }
  await loadThreads();
  renderThreadList();
  return r.thread_id;
}

// resolveAppThread returns the user's thread for a personal app, creating it on
// first use. The in-flight guard stops a fast double "/todo" spawning two on
// THIS device — it can't see another device's in-flight create. A self-thread's
// app identity lives only in its encrypted name_blob (the server deliberately
// can't tell a todo from a poll from plain "Notes" — see displayName), so
// there's no server-side unique constraint to lean on the way DM creation gets
// one (postThread's "one thread per pair" dedupe). The best a client can do is
// narrow the window: refresh from the server right before committing to a
// create, so a thread another device made moments ago (and this one hasn't
// synced yet) is picked up instead of duplicated. This doesn't close a
// genuinely simultaneous cross-device race — see issue #240 for the fuller
// picture and what a complete fix would need.
const appThreadInflight = {};
async function resolveAppThread(appName) {
  for (const id in threadApp) if (threadApp[id] === appName) return id;
  if (appThreadInflight[appName]) return appThreadInflight[appName];
  const p = (async () => {
    await loadThreads();
    for (const id in threadApp) if (threadApp[id] === appName) return id;
    return createAppThread(appName);
  })().finally(() => delete appThreadInflight[appName]);
  appThreadInflight[appName] = p;
  return p;
}
setAppThreadResolver(resolveAppThread);
// "View <app>" (an action chip on a command reply) opens the app's thread with its
// Interface in view. On desktop the default split already shows it beside the chat;
// on a narrow/mobile layout, switch to the Interface pane so the list is what shows.
setThreadOpener((id) => {
  if (threadApp[id] && appWantsChatView(threadApp[id]) && !appChatOnly(threadApp[id]) && matchMedia("(max-width: 720px)").matches) appThreadView[id] = "interface";
  if (id === activeId) {
    applyAppThreadView(id);
    paintViewToggle(id);
  } else {
    openThread(id);
  }
});
// ctx.open — show an app INSTANCE where that copy legitimately lives, per
// place: a space copy opens its sidebar home (never the raw space thread,
// which has no chat surface to land on), a copy added to the chat you're in
// reveals its Interface pane right here, and a personal app-thread opens as a
// thread (the setThreadOpener behaviour above).
setInstanceOpener((appName, tid) => {
  if (spaceThreadId && tid === spaceThreadId) return openSpaceApp(appName);
  if (tid === activeId && !threadApp[tid] && chatAppFor(tid)) {
    groupAppView[tid] = appName;
    if ((appThreadView[tid] || "chat") === "chat") {
      setAppThreadView(tid, matchMedia("(max-width: 720px)").matches ? "interface" : "split");
    } else {
      renderGroupAppPane(tid);
      paintViewToggle(tid);
    }
    return;
  }
  if (threadApp[tid] && appWantsChatView(threadApp[tid]) && !appChatOnly(threadApp[tid]) && matchMedia("(max-width: 720px)").matches) appThreadView[tid] = "interface";
  if (tid === activeId) {
    applyAppThreadView(tid);
    paintViewToggle(tid);
  } else {
    openThread(tid);
  }
});

// "App mode": the app renders full-pane; the chat feed / composer / shared-app
// panel are hidden (an app-thread has no chat feed).
function setAppThreadMode(on) {
  const tv = document.getElementById("thread-view");
  if (tv) tv.classList.toggle("app-mode", on);
}

// The chat mini-app (web/static/apps/chat.js) is the sole chat experience:
// every group/DM thread renders it full-pane.
function chatAppFor(id) {
  if (threadApp[id]) return null;
  const t = threads.find((x) => x.id === id);
  if (!t || (t.kind !== "group" && t.kind !== "dm")) return null;
  // A pending DM (invitee not joined) still renders the chat app — its pane is
  // just hidden behind the waiting-card banner (see .thread-view.waiting in
  // style.css), same as the original feed/composer always were.
  return "chat";
}

// chatAppFoldMessage folds one stored message into the chat app: the payload (or a
// mini-app event to its own app), plus the server-side trimmings (reactions,
// edited flag). Shared by history open, scroll-back pages, and reconnect
// catch-up; foldEvent's per-message-id dedupe makes repeats no-ops.
async function chatAppFoldMessage(threadId, m) {
  // A delete tombstone (#583): the server hard-deleted this row's target and
  // left an empty marker so history/catch-up reads convey the delete. Fold it
  // through the exact event the live "delete" frame produces — same code path,
  // no parallel delete logic. (Nothing to decrypt; a tombstone's blob is empty.)
  if (m.tombstone_of) {
    foldHostEvent(threadId, "chat", { type: "chat.delete", msgId: m.tombstone_of });
    return;
  }
  try {
    const data = takeGossip(await decrypt(threadKeys[threadId], m.blob), false);
    if (data.type === "reaction") {
      foldHostEvent(threadId, "chat", { type: "chat.reaction", targetSid: data.targetSid, emoji: data.emoji, uid: data.uid, on: data.on, ts: data.ts });
      return;
    }
    // "Convert to thread" (chat.js's chat.convert): an inline chain moved into
    // a thread. The event's OWN message id rides in the meta — it's how two
    // overlapping conversions settle deterministically (oldest wins), so it
    // must be passed, not derived from the payload.
    if (data.type === "threadconvert") {
      foldHostEvent(threadId, "chat", { type: "chat.convert", root: data.root, ids: data.ids, uid: data.uid, ts: data.ts }, { id: m.id });
      return;
    }
    if (isAppType(data.type)) {
      foldEvent(threadId, data, { id: m.id, ts: data.ts });
      // The event also projects into the conversation — the same one-log-two-
      // views idea as a companion app-thread: an app-thread's own event in the
      // app's voice, a group/DM chat's in the group form (attributed action
      // line / app bubble). Not gated on foldEvent's return: the event may
      // already be inside the app's snapshot or a catch-up fold, but the chat
      // app (snapshot: false) still needs the line, and its own per-message
      // dedupe makes repeats no-ops.
      if (threadApp[threadId]) foldAppEventBubble(threadId, threadApp[threadId], data, { id: m.id, ts: data.ts });
      else foldGroupAppEventBubble(threadId, appForType(data.type), data, { id: m.id, ts: data.ts });
      return;
    }
    if (data.type || (!data.text && !data.attachments)) return;
    foldHostEvent(threadId, "chat", chatMsgEvent(data), { id: m.id, ts: data.ts || m.created_at * 1000 });
    // Carry the (post-edit) text, matching the live edit frame's fold event.
    // With state built fresh from server rows this was redundant (the chat.msg
    // fold above already had the new text); over a pre-seeded local store it's
    // load-bearing — the chat.msg fold dedupes against the CACHED text, and
    // only this event updates a message edited while this device was away.
    if (m.edited_at) foldHostEvent(threadId, "chat", { type: "chat.edit", msgId: m.id, text: data.text || "" });
  } catch {}
}
// The app the active thread renders full-pane, if any: a personal app-thread's
// own app, or the chat app (the default chat experience).
function activeAppFor(id) {
  return threadApp[id] || chatAppFor(id);
}

// Whether a thread has a bot/agent member — gates the bot slash-commands (/help,
// /theme, …) in the "/" typeahead to threads where a bot can actually answer them.
function threadHasBot(id) {
  const t = threads.find((x) => x.id === id);
  if (!t) return false;
  return (t.members || []).some((uid) => {
    const e = roster.find((r) => r.user_id === uid);
    return e && e.is_agent;
  });
}

// The app to RENDER for a thread, honouring its chosen view: an app-thread
// defaults to the chat view (a DM with its bot), or its own interactive UI in the
// "interface" view; a normal group/dm renders the chat app. null = no full-pane.
function renderAppFor(id) {
  const owner = threadApp[id];
  if (owner) {
    // Takeover (no chatMessage): the app's own interface IS the thread, always.
    // Chat-only: the conversation IS the thread, always. Companion: the chat
    // view by default, its interface in the "interface" view.
    if (!appWantsChatView(owner)) return owner;
    if (appChatOnly(owner)) return "chat";
    return (appThreadView[id] || appDefaultView(owner)) === "interface" ? owner : "chat";
  }
  return chatAppFor(id);
}

// Fold one of an app-thread's own events into the chat view. The app's
// chatMessage() turns the event into either a bot MESSAGE (a string → a bubble
// "from" the app, e.g. a reminder firing) or an ACTION (return { text, action:true }
// → a centered /me-style line, e.g. "added 'milk'"). No text → nothing (e.g. a
// housekeeping event). uid app:<name> so a bubble renders as the bot's, on the left.
function foldAppEventBubble(threadId, ownerApp, event, meta) {
  const owner = appByName(ownerApp);
  const line = owner && owner.chatMessage ? owner.chatMessage(event) : null;
  const text = typeof line === "string" ? line : line && line.text;
  if (!text) return;
  foldHostEvent(
    threadId,
    "chat",
    {
      type: "chat.msg",
      name: owner.title || ownerApp,
      text,
      uid: "app:" + ownerApp,
      ts: event.ts || (meta && meta.ts) || Date.now(),
      action: typeof line === "object" && !!line.action,
    },
    meta,
  );
}

// The group-chat sibling of foldAppEventBubble: in a chat with apps added, an
// app's events project into the conversation too — but ATTRIBUTED. An action
// projection leads with the actor ("Ciara added “buy milk”" — a group has many
// hands, unlike a personal app-thread where every act is yours); a message
// projection (a reminder firing) stays a bubble in the app's own voice. The
// actor reads "You" for the reader's own action, same as a membership line
// (membershipLine in format.js) — an app never needs to know who's reading to
// get this right.
//
// Which hook: groupFeedMessage(event) when the app implements it — the
// feed-projection hook for apps whose OWN thread stays a takeover (the
// Vault; growing a Chat view is chatMessage's meaning, see appWantsChatView)
// — else chatMessage(event, { group: true }), so a companion app projects
// into groups with the one hook it already has. Apps with neither stay
// silent in the feed, as everywhere.
function foldGroupAppEventBubble(threadId, app, event, meta) {
  if (!app) return;
  let line = null;
  try {
    if (typeof app.groupFeedMessage === "function") line = app.groupFeedMessage(event);
    // The { group: true } hint lets the shared hook word a projection for
    // many readers (Reminders' fire bubble drops "you asked me" in a group).
    // Apps that don't care simply ignore the second argument.
    else if (typeof app.chatMessage === "function") line = app.chatMessage(event, { group: true });
  } catch {}
  const text = typeof line === "string" ? line : line && line.text;
  if (!text) return;
  const ts = event.ts || (meta && meta.ts) || Date.now();
  const action = typeof line === "object" && !!line.action;
  const actorName = event.uid && event.uid === myUserId ? "You" : event.name || "Someone";
  foldHostEvent(
    threadId,
    "chat",
    action
      ? { type: "chat.msg", name: event.name || "", text: `${actorName} ${text}`, uid: event.uid || "", ts, action: true }
      : { type: "chat.msg", name: app.title || app.name, text, uid: "app:" + app.name, ts },
    meta,
  );
}

// Fold one stored message of an app-thread for BOTH views at once: the owning
// app's state (App view) and a bot bubble (Chat view). A plain untyped note you
// typed in the chat view folds as an ordinary chat message.
async function foldAppThreadMessage(threadId, ownerApp, m) {
  // Delete tombstones fold in app-threads too — a note unsent in the Chat view
  // must drop from a device that missed the live frame (#583).
  if (m.tombstone_of) {
    foldHostEvent(threadId, "chat", { type: "chat.delete", msgId: m.tombstone_of });
    return;
  }
  try {
    const data = takeGossip(await decrypt(threadKeys[threadId], m.blob), false);
    if (isAppType(data.type)) {
      foldEvent(threadId, data, { id: m.id, ts: data.ts });
      foldAppEventBubble(threadId, ownerApp, data, { id: m.id, ts: data.ts });
    } else if (!data.type && (data.text || data.attachments)) {
      foldHostEvent(threadId, "chat", { ...data, type: "chat.msg" }, { id: m.id, ts: data.ts });
    }
  } catch {}
}

// Fetch a thread's full message history (oldest→newest), paginating older pages.
// For app-threads only — their logs are bounded, and the Chat view needs every
// event to reconstruct its action-line history. Capped so a runaway thread can't
// stall the open. Returns null if the open was superseded (thread switched).
async function fetchAllThreadMessages(id, gen, cap = 2000) {
  const all = [];
  let before = 0; // 0 → the most recent page
  for (let page = 0; page < cap / 200; page++) {
    const q = before ? `&before=${before}&limit=200` : "&limit=200";
    const r = await (
      await fetch(`/api/messages?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(id)}${q}`)
    ).json();
    if (gen !== openSeq) return null;
    const msgs = r.messages || [];
    if (!msgs.length) break;
    all.unshift(...msgs); // each page is ascending; older pages prepend → ascending overall
    if (msgs.length < 200) break; // reached the start of history
    before = msgs[0].id; // oldest id of this page
  }
  return all;
}

// Open an app full-pane: fold the thread's event log and render. Used for
// personal app-threads (their own dedicated log) and chat-app threads (where
// original, untyped messages are folded in synthetically as chat.msg — they
// predate typed events). getState() is exactly this fold — one source of
// truth, no separate state store.
async function openAppThreadView(id, gen, appName = threadApp[id], ownerApp = null) {
  setAppThreadMode(true);
  const pane = document.getElementById("app-pane");
  if (!pane) return;

  // A COMPANION app-thread (its app has a chatMessage hook): two Views of ONE
  // folded log — the Chat pane + the app's Interface pane. Both mount; CSS shows
  // them split (desktop) or one-at-a-time (mobile). Its log is small and stays
  // live through WS, so re-render from state on each open (no park cache); fetch
  // history only the first time. A TAKEOVER app (no chatMessage) skips this and
  // falls through to the single-pane path below — its interface fills the thread.
  if (ownerApp && appWantsChatView(ownerApp)) {
    const iface = document.getElementById("interface-pane");
    if (!(appPaneCache[id] && appPaneCache[id].loaded)) {
      pane.textContent = "";
      if (iface) iface.textContent = "";
      resetThread(id);
      await seedAppState(id); // snapshot → the Interface list, fast
      if (gen !== openSeq) return;
      try {
        // The Chat view is a record of EVERY interaction, so fold the whole event
        // log (not just the recent window) into action lines — otherwise older
        // adds, compacted into the snapshot, would be missing from the history.
        const all = await fetchAllThreadMessages(id, gen);
        if (gen !== openSeq || !all) return;
        for (const m of all) await foldAppThreadMessage(id, ownerApp, m);
      } catch (e) {
        console.error("open app-thread", e);
      }
      appPaneCache[id] = { root: null, scrollTop: null, loaded: true };
    }
    if (gen !== openSeq) return;
    pane.textContent = "";
    renderMiniApp(id, "chat", pane); // Chat view
    if (iface) {
      iface.textContent = "";
      renderMiniApp(id, ownerApp, iface); // Interface view
    }
    applyAppThreadView(id);
    return;
  }

  // Single-pane full-surface path — the chat-app thread (group/dm) AND a takeover
  // app-thread (a personal app with no chat view). The instant park/restore cache
  // makes reopening flash-free. A chat-app thread folds its untyped messages
  // synthetically as chat.msg; a takeover app folds only its OWN typed events into
  // state — getState() is exactly that fold, one source of truth, no separate store.
  const cached = appPaneCache[id];
  if (cached && cached.loaded && cached.root) {
    pane.replaceChildren(cached.root);
    cached.root = null;
    const feed = pane.querySelector(".chatapp-feed");
    if (feed && cached.scrollTop != null) feed.scrollTop = cached.scrollTop;
    renderMiniApp(id, appName, pane);
    if (chatAppFor(id)) {
      catchUpActiveMessages();
      // Added-apps state may have changed while parked (live folds keep it
      // current), and stashAppPane cleared the Interface pane — refresh both.
      refreshGroupAppsUI(id);
    }
    return;
  }
  pane.textContent = "";
  resetThread(id);
  await seedAppState(id);
  if (gen !== openSeq) return;
  // Local-first for the chat app (#457): a thread we've seen before folds its
  // cached ciphertext rows — instant, offline-capable — then reconciles with a
  // background refetch (fold dedupe by id; edits refold via edited_at; deletes
  // replay via tombstone rows). First-ever opens still fetch below.
  if (appName === "chat" && !embed && threadKeys[id]) {
    const rows = await storeRecentMessages(id, 100);
    if (gen !== openSeq) return;
    if (rows.length) {
      for (const m of rows) await chatAppFoldMessage(id, m);
      if (gen !== openSeq) return;
      renderMiniApp(id, appName, pane);
      appPaneCache[id] = { root: null, scrollTop: null, loaded: true };
      if (chatAppFor(id)) refreshGroupAppsUI(id);
      catchUpActiveMessages();
      return;
    }
  }
  try {
    const r = await (
      await fetch(`/api/messages?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(id)}`)
    ).json();
    if (gen !== openSeq) return;
    if (appName === "chat" && !embed) storePutMessages(id, r.messages || []).catch(() => {});
    for (const m of r.messages || []) {
      // The chat app consumes the classic protocol (chatAppFoldMessage folds each
      // message with its server-side trimmings); a takeover app-thread folds only
      // its own typed events into state.
      if (appName === "chat") await chatAppFoldMessage(id, m);
      else {
        try {
          const data = takeGossip(await decrypt(threadKeys[id], m.blob), false);
          if (isAppType(data.type)) foldEvent(id, data, { id: m.id, ts: data.ts });
        } catch {}
      }
    }
    if (gen !== openSeq) return;
    renderMiniApp(id, appName, pane);
    appPaneCache[id] = { root: null, scrollTop: null, loaded: true };
    // The fold may have revealed apps added to this group (snapshot + history)
    // — the widget bar and Interface pane paint only now that state exists.
    if (chatAppFor(id)) refreshGroupAppsUI(id);
  } catch (e) {
    console.error("open app-thread", e);
  }
}

// Reflect an app-thread's chosen view as a class on the thread view: the split CSS
// keys off `.iface` (Interface selected) — desktop hides the chat pane, mobile
// swaps the visible pane.
function applyAppThreadView(id) {
  const tv = document.getElementById("thread-view");
  if (!tv) return;
  // A data-attribute drives the split CSS across the three views (chat | split |
  // interface). A COMPANION app-thread defaults to split; a GROUP chat with
  // apps added defaults to chat (a group is first a conversation — the widget
  // bar is the way in); a normal chat OR a takeover app-thread has NO view
  // attribute (→ the single pane fills, the empty interface pane hides), so
  // neither can inherit a stale one.
  if (threadApp[id] && appWantsChatView(threadApp[id]) && !appChatOnly(threadApp[id]))
    tv.dataset.appView = appThreadView[id] || appDefaultView(threadApp[id]);
  else if (!threadApp[id] && chatAppFor(id) && groupAppsFor(id).length) tv.dataset.appView = appThreadView[id] || "chat";
  else delete tv.dataset.appView;
}

// Re-draw whatever the active thread hosts: an app full-pane (personal
// app-thread or the chat app), or the shared-app panel above a normal chat feed.
// Called after each folded event.
function renderActiveSurfaces() {
  const owner = threadApp[activeId];
  if (owner) {
    if (appChatOnly(owner)) {
      // Chat-only: the conversation is the whole surface.
      renderMiniApp(activeId, "chat", document.getElementById("app-pane"));
    } else if (appWantsChatView(owner)) {
      // Companion: both Views live off the same folded log — redraw each pane.
      renderMiniApp(activeId, "chat", document.getElementById("app-pane"));
      const iface = document.getElementById("interface-pane");
      if (iface) renderMiniApp(activeId, owner, iface);
    } else {
      // Takeover: the app owns the single pane; there's no chat view to redraw.
      renderMiniApp(activeId, owner, document.getElementById("app-pane"));
    }
    return;
  }
  const appName = renderAppFor(activeId);
  if (appName) {
    renderMiniApp(activeId, appName, document.getElementById("app-pane"));
    // A group chat with an added app in view: its Interface pane folds off the
    // same log, so redraw it alongside the conversation.
    renderGroupAppPane(activeId);
  }
  // (The legacy ambient shared-app panel is gone — #405: chat-place apps
  // render through the widget bar's Interface pane above.)
}

// Unsend a message (server deletes it for everyone if we're the author).
function deleteMessage(msgId) {
  if (!ws || ws.readyState !== WebSocket.OPEN || !activeId) return;
  ws.send(JSON.stringify({ type: "delete", thread_id: activeId, message_id: msgId }));
}

// ---- attachments (images + files) ---------------------------------------

// Fetch + decrypt a blob to raw bytes (no object URL) — for consumers that
// need the plaintext itself (the setup flow re-posting a sent photo as the
// branding image; fetch(blob:) is blocked by the page CSP's connect-src).
async function loadBlobBytes(id, threadId = activeId) {
  const key = threadKeys[threadId];
  if (!key) return null;
  try {
    const resp = await fetch(`/api/blob/${encodeURIComponent(id)}?token=${encodeURIComponent(session.token)}`);
    if (!resp.ok) return null;
    return await decryptBytes(key, new Uint8Array(await resp.arrayBuffer()));
  } catch {
    return null;
  }
}

// Fetch + decrypt a blob (with the active thread's key), cached as an object URL.
// `type` (optional) sets the Blob's MIME so non-image files open/download right.
async function loadBlob(id, threadId = activeId, type, onProgress) {
  if (blobURLs[id]) return blobURLs[id];
  const key = threadKeys[threadId];
  if (!key) return null;
  try {
    const resp = await fetch(`/api/blob/${encodeURIComponent(id)}?token=${encodeURIComponent(session.token)}`);
    if (!resp.ok) return null;
    let buf;
    const total = Number(resp.headers.get("Content-Length")) || 0;
    // Stream the body so download progress can drive the video card's radial ring
    // (fetch CAN observe download progress, unlike upload); plain read otherwise.
    if (onProgress && total && resp.body && resp.body.getReader) {
      const reader = resp.body.getReader();
      const chunks = [];
      let received = 0;
      for (;;) {
        const { done, value } = await reader.read();
        if (done) break;
        chunks.push(value);
        received += value.length;
        onProgress(Math.min(1, received / total));
      }
      buf = new Uint8Array(received);
      let off = 0;
      for (const c of chunks) { buf.set(c, off); off += c.length; }
    } else {
      buf = new Uint8Array(await resp.arrayBuffer());
    }
    const plain = await decryptBytes(key, buf);
    const url = URL.createObjectURL(new Blob([plain], type ? { type } : undefined));
    blobURLs[id] = url;
    return url;
  } catch {
    return null;
  }
}


// ---- websocket ----------------------------------------------------------

// Show (or hide, with "") the floating connection-status pill.
function showConnStatus(text) {
  const el = document.getElementById("conn-status");
  if (!el) return;
  el.textContent = text || "Reconnecting…";
  el.classList.toggle("hidden", !text);
}

// Append any messages the open feed is missing, without clearing it. Used both
// for the offline catch-up (resyncActive) and when re-showing a cached thread
// (live messages that arrived for a background thread aren't appended to its
// parked feed, so we reconcile on reopen). Incremental/append-only so it never
// flashes or fights the scroll position when there's nothing new.
async function catchUpActiveMessages() {
  const id = activeId;
  if (!id || !threadKeys[id]) return;
  // An app-rendered thread (the chat app, or a personal app-thread) catches up
  // through the fold: re-fetch the window, fold anything unseen (per-message-id
  // dedupe makes the rest no-ops), re-render. Without this, messages missed while
  // the socket was down would only appear after leaving and re-entering the thread.
  if (activeAppFor(id)) {
    try {
      const r = await (
        await fetch(`/api/messages?token=${encodeURIComponent(session.token)}&thread=${encodeURIComponent(id)}`)
      ).json();
      if (id !== activeId) return;
      // Same gate as the open path: only chat-feed threads hydrate from the
      // store today, so only they write through (app-thread rows would be
      // dead weight until an app-thread hydrate exists).
      if (!embed && chatAppFor(id)) storePutMessages(id, r.messages || []).catch(() => {});
      for (const m of r.messages || []) await chatAppFoldMessage(id, m);
      renderActiveSurfaces();
      refreshGroupAppsUI(id); // an app add/remove may have landed while offline
    } catch (e) {
      // A fetch-level TypeError is the tab waking before the network does
      // (Safari's "Load failed") — expected, and resyncActive re-runs on the
      // next reconnect/refocus. Anything else is a real bug: stay loud.
      if (e instanceof TypeError) console.warn("catch up (lab): network not ready — retries on reconnect", e);
      else console.error("catch up (lab)", e);
    }
    return;
  }
}

// Catch up on messages missed while we were offline. The WebSocket only relays
// *live* messages — nothing is replayed on connect — so anything that arrived
// while the socket was down (phone asleep, tab hidden, a tapped notification
// re-focusing a now-stale tab) never reaches the open feed until you leave and
// re-enter the thread. Called on reconnect and on refocus: refresh the thread
// list (previews / last-activity / any new threads), then reconcile the open feed.
let resyncing = false;
async function resyncActive() {
  if (resyncing || !session) return;
  resyncing = true;
  try {
    await loadThreads();
    renderThreadList();
    // The space thread isn't in the list above (no membership rows), so pull
    // it separately — installs or space-app events posted while the socket was
    // down must not leave this session's routing and widget bar stale.
    await loadSpaceThread();
    await catchUpActiveMessages();
    // Whatever we just caught up on in the open thread, the user is looking at
    // — advance the synced watermark (only now that last_at is current).
    if (document.hasFocus()) onSawActiveThread();
  } catch (e) {
    if (e instanceof TypeError) console.warn("resync: network not ready — retries on reconnect", e);
    else console.error("resync", e);
  } finally {
    resyncing = false;
  }
}

function connectWS() {
  const proto = location.protocol === "https:" ? "wss://" : "ws://";
  setWs(new WebSocket(`${proto}${location.host}/ws?token=${encodeURIComponent(session.token)}`));
  ws.onopen = () => {
    // (Re)connected: hide the pill and (re)start the keepalive.
    if (reconnectStatusTimer) {
      clearTimeout(reconnectStatusTimer);
      reconnectStatusTimer = null;
    }
    showConnStatus("");
    wsConnected = true;
    setChatAppConnected(true); // and the mini-app composer's send button
    if (pingTimer) clearInterval(pingTimer);
    // Idle proxies drop WebSockets after ~60s; a tiny ping every 25s keeps it open.
    // The server ignores unknown frame types (see hub.go).
    pingTimer = setInterval(() => {
      if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "ping" }));
    }, 25000);
    // Tamper evidence: verify any new checkpoints now, then on a slow tick —
    // the sweep server-side runs every 5 minutes, so match its cadence. Show
    // the failure banner up front if a past session left an unresolved alert.
    if (integrityTimer) clearInterval(integrityTimer);
    renderIntegrityBanner();
    integrity.poll().then(sampleIntegrity);
    integrityTimer = setInterval(() => integrity.poll().then(sampleIntegrity), 5 * 60 * 1000);
    // A reconnect (not the first connect) means we were offline — pull anything
    // the socket missed while it was down. The initial connect follows boot()'s
    // fresh load, so there's nothing to catch up on then. Presence transitions
    // don't resync (they're ephemeral), so re-pull the roster snapshot too.
    if (everConnected) {
      resyncActive();
      loadRoster().then(renderThreadList).catch(() => {});
    }
    everConnected = true;
    // If we just came back from an OAuth consent redirect, finish it now that the
    // socket's open and roster/threads are loaded.
    completeOAuthReturn();
  };
  ws.onmessage = async (ev) => {
    let msg;
    try {
      msg = JSON.parse(ev.data);
    } catch {
      return;
    }
    if (msg.type === "joined") {
      // Someone claimed an invite: swap any pending-invite card for the live
      // DM and pick up the new roster entry — no reload needed on this side.
      await loadRoster();
      await loadThreads();
      await refreshNamesUI();
      renderThreadList();
      const t = activeId && threads.find((x) => x.id === activeId);
      // openThread(activeId) would no-op (the already-open guard), so refresh
      // the pending card directly: the joiner now has a key, so it clears and
      // the feed + composer come back.
      if (t && (t.members || []).includes(msg.user_id)) updatePendingBanner(t);
      return;
    }
    if (msg.type === "role_changed") {
      // Someone was promoted to admin: refresh the roster so isAdmin() checks
      // (nav entry points, invite gating) and anything that builds an
      // admin-encryption list from the roster (e.g. filing a report) see it
      // right away — not just after this tab's next reconnect.
      await loadRoster();
      return;
    }
    if (msg.type === "instance_key_nudge") {
      // A member lacks the instance key. The nudge names WHO needs it, but we
      // never wrap to a key handed to us in a raw frame — a compromised server
      // could forge one and harvest members' names/photos. Reload the roster and
      // wrap only to the public key the server has PUBLISHED for that user (a
      // claimed member). The inviter shares the joiner's pending DM, so their
      // roster includes the joiner and the grant flows; an unseen/forged nudge
      // is simply ignored (the joiner re-nudges until a holder who sees them is
      // online).
      if (instanceKeyB64 && msg.user_id) {
        try {
          await loadRoster();
          const target = roster.find((e) => e.user_id === msg.user_id && e.public_key);
          if (target) {
            const wrapped = await wrapThreadKey(instanceKeyB64, target.public_key);
            await fetch("/api/instance-key", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ token: session.token, grants: [{ user_id: target.user_id, wrapped }] }),
            });
          }
          await refreshNamesUI(); // the joiner may be new to our roster too
        } catch {}
      }
      return;
    }
    if (msg.type === "instance_key_granted") {
      // A holder just wrapped the instance key to us. Pick it up live (fetch +
      // unwrap) so an open tab recovers names + photos — and publishes our own
      // name — without waiting for a reload.
      if (!instanceKey) {
        await setupInstanceKey();
        await onInstanceKeyReady();
      }
      return;
    }
    if (msg.type === "tier_key_nudge") {
      // A member of an access level we hold the key for needs their copy. Same
      // rule as the instance-key nudge: never wrap to a key from a raw frame —
      // refresh, then wrap only to the PUBLISHED key of a current level member.
      const b64 = tierKeyB64[msg.tier_id];
      if (b64 && msg.user_id) {
        try {
          await Promise.all([loadRoster(), loadTiers()]);
          const target = roster.find((e) => e.user_id === msg.user_id && e.public_key);
          const level = tiers.find((t) => t.id === msg.tier_id);
          if (target && level && (level.members || []).includes(target.user_id)) {
            const wrapped = await wrapThreadKey(b64, target.public_key);
            await fetch(`/api/tiers/${encodeURIComponent(msg.tier_id)}/keys`, {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ token: session.token, grants: [{ user_id: target.user_id, wrapped }] }),
            });
          }
        } catch {}
      }
      return;
    }
    if (msg.type === "tier_key_granted" || msg.type === "tiers_changed") {
      // Our level set or key state changed — refetch (loadTiers unwraps the
      // new copy, or nudges holders if we were just assigned without one).
      await loadTiers();
      // A gated group may have been skipped while its level key was missing.
      if (threads.some((t) => t.open_key && !threadKeys[t.id])) {
        await loadThreads();
        renderThreadList();
      }
      return;
    }
    if (msg.type === "space_thread") {
      // Someone just created the space thread (their first space-wide app
      // install). Fetch + unwrap it now so the install reaches this tab live.
      await loadSpaceThread();
      return;
    }
    if (msg.type === "label") {
      const e = roster.find((x) => x.user_id === msg.user_id);
      if (e) {
        e.label_blob = msg.label_blob;
        if (instanceKey) {
          try {
            e.label = await decrypt(instanceKey, msg.label_blob);
          } catch {}
        }
        await refreshNamesUI(); // a name changed — re-derive any thread titled by it
      }
      return;
    }
    if (msg.type === "presence") {
      // Someone came online / went away / left. Roster is the store; repaint
      // the surfaces that read it — the (possibly filtered) chat list and the
      // open thread's header status line / online count.
      const e = roster.find((x) => x.user_id === msg.user_id);
      if (e && e.presence !== msg.presence) {
        e.presence = msg.presence;
        renderThreadList();
        if (activeId && document.getElementById("thread-title")) paintThreadHeader(activeId);
      }
      return;
    }
    if (msg.type === "description") {
      const e = roster.find((x) => x.user_id === msg.user_id);
      if (e) {
        e.description_blob = msg.description_blob;
        e.about = "";
        if (msg.description_blob && instanceKey) {
          try {
            e.about = await decrypt(instanceKey, msg.description_blob);
          } catch {}
        }
      }
      return;
    }
    if (msg.type === "avatar") {
      const e = roster.find((x) => x.user_id === msg.user_id);
      if (e) {
        e.avatar = msg.blob_id;
        e.avatarAlt = "";
        if (msg.alt_blob && instanceKey) {
          decrypt(instanceKey, msg.alt_blob)
            .then((alt) => {
              e.avatarAlt = alt;
            })
            .catch(() => {});
        }
      }
      delete avatarURLs[msg.user_id];
      refreshAvatars();
      return;
    }
    if (msg.type === "thread_avatar") {
      const t = threads.find((x) => x.id === msg.thread_id);
      if (t) t.avatar = msg.blob_id;
      delete avatarURLs["t:" + msg.thread_id];
      refreshAvatars();
      return;
    }
    if (msg.type === "report_filed") {
      // A report just landed (admins' connections only get this frame). If
      // the Admin app is on screen its queue repaints; push covers the rest.
      if (isAdmin()) renderActiveSurfaces();
      return;
    }
    if (msg.type === "report_notice") {
      // The server's once-per-burst report signal (admins only, throttled
      // server-side). The FRAME drives the dot and the hidden-tab banner —
      // a self-posted bubble can't light your own dot — and one visible
      // session writes the durable line into the Admin stream. Fully closed
      // apps are covered by the plaintext push instead.
      const adminTid = Object.keys(threadApp).find((id) => threadApp[id] === "admin");
      if (adminTid) {
        unread[adminTid] = true;
        renderThreadList();
      }
      const n = Number(msg.n) || 1;
      const body = n > 1 ? `${n} reports are waiting for review.` : "A report is waiting for review.";
      if (
        typeof Notification !== "undefined" &&
        Notification.permission === "granted" &&
        document.visibilityState !== "visible"
      ) {
        try {
          new Notification("New report", { body, tag: "lchat-app-admin" });
        } catch {}
      }
      // Two visible devices of the same admin could both write the line — a
      // rare, benign duplicate in a personal stream; the dot logic above is
      // per-device and immune.
      if (adminTid && document.visibilityState === "visible" && threadKeys[adminTid] && ws && ws.readyState === WebSocket.OPEN) {
        const payload = { type: "admin.report", n, name: session.name || "", uid: myUserId, ts: Date.now() };
        encrypt(threadKeys[adminTid], payload)
          .then((blob) => ws.send(JSON.stringify({ type: "msg", thread_id: adminTid, blob })))
          .catch(() => {});
      }
      return;
    }
    if (msg.type === "user_invites_changed") {
      // The admin flipped "users can invite people" (issue #346). USER_INVITES
      // was only ever set once, from the page's initial load — every place that
      // reads it via inviteAllowed() computes fresh on open (the palette, the
      // New chat sheet), so updating it here is enough; nothing to re-render.
      USER_INVITES = !!msg.enabled;
      return;
    }
    if (msg.type === "dm_closed" || msg.type === "dm_reopened") {
      // Either party ended (or revived) this DM. An open pane swaps between
      // composer and closed banner live; the list updates its hidden state.
      const tid = msg.thread_id;
      dmClosed[tid] = msg.type === "dm_closed";
      if (msg.type === "dm_closed") hidden[tid] = true;
      renderThreadList();
      if (activeId === tid) renderActiveSurfaces();
      return;
    }
    if (msg.type === "read") {
      // Our own read watermark advanced on another of this user's devices (the
      // server routes this frame only to the owner's connections) — clear the
      // dot if that mark covers the thread's newest message. Also echoes back
      // to the device that POSTed it; the max() makes that a no-op.
      const tid = msg.thread_id;
      readMarks[tid] = Math.max(readMarks[tid] || 0, msg.last_read_at || 0);
      const t = threads.find((x) => x.id === tid);
      if (t && unread[tid] && (t.last_at || 0) <= readMarks[tid]) {
        unread[tid] = false;
        renderThreadList();
      }
      return;
    }
    if (msg.type === "apps_changed") {
      // Something in the app set changed: a member app (bot build / App Studio),
      // or an admin-installed custom app (an ES module, which needs a reload).
      // In an embed the NATIVE shell owns reloads (a web banner would render
      // inside a pane the shell controls): register member apps live, then
      // post {catalogChanged} so native re-pulls appCatalog() and recreates
      // any webviews that need a fresh module load (docs/native-apps.md).
      if (embed) {
        loadMemberAppsNow().then(() => activeId && renderActiveSurfaces());
        nativePost({ catalogChanged: msg.kind || "updated" });
        return;
      }
      if (recentLocalDeploy()) {
        // We deployed it ourselves — App Studio already registered it live and
        // suppressed its own reload; just refresh the surfaces.
        loadMemberAppsNow().then(() => activeId && renderActiveSurfaces());
        return;
      }
      // Register any new MEMBER apps live so they're usable immediately (no
      // reload needed for those), then — rather than yank the page out from
      // under someone — SUBTLY offer a reload for anything that needs a fresh
      // module load (custom apps, or a code update to an app already loaded).
      loadMemberAppsNow().then(() => activeId && renderActiveSurfaces());
      if (!hasUnsentDraft()) offerAppReload(msg.kind);
      return;
    }
    if (msg.type === "edit") {
      // Chat app: an edit (server-verified author) replaces the message text in
      // the fold; the original feed's in-place bubble update follows unchanged.
      if (!embed) storeApplyEdit(msg.thread_id, msg.id, msg.blob, msg.edited_at).catch(() => {});
      if (!embed) mediaInvalidate(msg.thread_id, msg.id); // drop the stale entry so the overlay re-extracts it (links can change) on next open
      if (chatAppFor(msg.thread_id) && threadKeys[msg.thread_id]) {
        try {
          const nd = await decrypt(threadKeys[msg.thread_id], msg.blob);
          foldHostEvent(msg.thread_id, "chat", { type: "chat.edit", msgId: msg.id, text: nd.text || "" });
          if (msg.thread_id === activeId) renderActiveSurfaces();
        } catch {}
      }
      return;
    }
    if (msg.type === "delete") {
      // Chat app: a delete (server-verified author, ciphertext hard-deleted
      // upstream) removes the message from the fold. The local store drops its
      // ciphertext too — deleting really deletes, here as on the server —
      // and the in-memory search index forgets it the same moment.
      if (!embed) storeDeleteMessage(msg.thread_id, msg.id).catch(() => {});
      if (!embed) mediaInvalidate(msg.thread_id, msg.id); // hard-deleted upstream: drop it from the overlay's index too
      searchIdx.dropMessage(msg.thread_id, msg.id);
      if (chatAppFor(msg.thread_id)) {
        foldHostEvent(msg.thread_id, "chat", { type: "chat.delete", msgId: msg.id });
        if (msg.thread_id === activeId) renderActiveSurfaces();
      }
      // Hard-deleted upstream: drop the bubble + its tracked state. (A separator
      // above it may briefly linger; harmless and gone on next thread open.)
      return;
    }
    if (msg.type !== "msg") return;
    const tid = msg.thread_id;
    // Echo of a message we're awaiting confirmation for (the server stores before
    // it broadcasts, so seeing it back means it's durably persisted). Resolve it
    // before any early return below, so announceLeave can proceed to /leave.
    if (msg.blob && pendingSends.has(msg.blob)) pendingSends.get(msg.blob)();
    // A message in a DM we thought was pending means the invited person has joined
    // and started chatting — refresh roster + threads so their identity lands and the
    // "waiting to join" state clears (only they can post here until they've joined).
    const knownPending = threads.find((x) => x.id === tid);
    if (knownPending && pendingInvitee(knownPending)) {
      await loadRoster();
      await loadThreads();
    }
    if (!threadKeys[tid]) {
      // A thread we don't know yet (someone just added us / started a DM). In embed
      // mode the native sidebar owns the other threads and we have no private key to
      // unwrap them, so ignore anything but the active thread.
      if (embed) return;
      // The sender may be someone we haven't seen either (a new joiner's first DM,
      // a bot like Eleven welcoming us) — without a roster refresh they render as
      // "Someone" until the next full reload.
      await loadRoster();
      await loadThreads();
      renderThreadList();
      return;
    }
    // Relay-only presence traffic (typing, live cursors): decrypt and hand to
    // the owning app's ephemeral hook. Never stored (the frame has no id),
    // never folded, no unread/preview side-effects.
    if (msg.ephemeral) {
      try {
        const p = await decrypt(threadKeys[tid], msg.blob);
        if (isAppType(p.type)) deliverEphemeral(tid, p);
      } catch {}
      return;
    }
    // Persist the stored row (#457) — the same ciphertext the server just
    // stored, so the next reload paints this message without a fetch. Same
    // chat-feed gate as every other write site: only chat threads hydrate
    // from the store today.
    if (!embed && msg.id && chatAppFor(tid)) {
      storePutMessages(tid, [{ id: msg.id, created_at: msg.created_at, blob: msg.blob }]).catch(() => {});
    }
    // New activity normally reopens a closed chat — the server clears its hidden
    // flag on every message insert (db.go's insertMessage), unconditionally,
    // because it never learns which app owns a thread (see CLAUDE.md) and so
    // can't tell a quiet app's activity from anything else. A quiet app's
    // thread must stay exactly as the user left it, so when activity lands in
    // one we're keeping hidden, reassert the hide the server just cleared
    // (issue #227) — otherwise the very next reload would show it again.
    if (hidden[tid] && appIsQuiet(threadApp[tid])) {
      fetch(`/api/threads/${encodeURIComponent(tid)}/hidden`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, hidden: true }),
      }).catch(() => {});
    } else {
      hidden[tid] = false;
    }
    // Decrypt once up front: the payload feeds the list preview, and the sender
    // identity inside it decides the unread dot — your own message (sent from
    // another device or tab) must not light the chat up, and replying elsewhere
    // means you've read it, so it clears an existing dot too.
    let payload = null;
    try {
      payload = await decrypt(threadKeys[tid], msg.blob);
    } catch {}
    // Tamper-evidence gossip: compare the sender's chain head against ours and
    // strip it before anything downstream (folds, previews) sees the payload.
    // Own echoes still compare (per-device split view) but don't count as peers.
    takeGossip(payload, payload && payload.uid && payload.uid !== myUserId);
    // A reaction event: fold it so the target bubble's chips update live, then
    // stop — a reaction never lights the unread dot or fires a native notify
    // (the author's own push says it instead). It DOES retitle the chat-list
    // row ("James reacted 👍 to …"): the server counts the event as the
    // thread's latest message, so last_at advances either way and a reload
    // would render exactly this line — staying silent here would mean the list
    // said one thing live and another after a refresh.
    if (payload && payload.type === "reaction") {
      foldHostEvent(tid, "chat", { type: "chat.reaction", targetSid: payload.targetSid, emoji: payload.emoji, uid: payload.uid, on: payload.on, ts: payload.ts });
      if (tid === activeId) renderActiveSurfaces();
      const rt = threads.find((x) => x.id === tid);
      if (rt) {
        rt.last_at = msg.created_at || Math.floor(Date.now() / 1000);
        previewPayload[tid] = payload;
        threadPreview[tid] = previewText(rt, payload);
      }
      if (tid === activeId && document.hasFocus()) markThreadRead(tid);
      renderThreadList();
      return;
    }
    // A conversion ("Convert to thread"): fold it so the chain collapses into
    // its root's tally live, then stop. It's a reorganisation, not something
    // anyone said — so it never lights the unread dot and never notifies. (The
    // service worker drops a typed, textless payload for the same reason; the
    // iOS extension can't drop one without Apple's filtering entitlement, so
    // it ships a silent, passive list entry instead.) Like a reaction it DOES
    // retitle the chat-list row, because the server counts it as the thread's
    // latest message and a reload would say so anyway.
    if (payload && payload.type === "threadconvert") {
      foldHostEvent(tid, "chat", { type: "chat.convert", root: payload.root, ids: payload.ids, uid: payload.uid, ts: payload.ts }, { id: msg.id });
      if (tid === activeId) renderActiveSurfaces();
      const ct = threads.find((x) => x.id === tid);
      if (ct) {
        ct.last_at = msg.created_at || Math.floor(Date.now() / 1000);
        previewPayload[tid] = payload;
        threadPreview[tid] = previewText(ct, payload);
      }
      if (tid === activeId && document.hasFocus()) markThreadRead(tid);
      renderThreadList();
      return;
    }
    // A mini-app event, not a chat message: fold it (so the app's state stays
    // current), then let the OWNING APP decide its presence — its notify hook
    // may toast/alert (a live event, possibly a scheduled one the server just
    // delivered, no matter which thread is open; history refolds never do),
    // its preview hook may retitle the sidebar line, and its unread hook may
    // light the dot. Apps that opt out of all three stay silent, the old
    // hardcoded behaviour.
    if (payload && isAppType(payload.type)) {
      const owner = threadApp[tid];
      if (owner) {
        // An app-thread's own event: fold into its app (App view) AND as a bot
        // bubble (Chat view), then re-render whichever view is open. This is the
        // "reminder arrives as a DM" path — the bubble is the alert (no toast).
        foldEvent(tid, payload, { id: msg.id, ts: payload.ts });
        foldAppEventBubble(tid, owner, payload, { id: msg.id, ts: payload.ts });
        if (tid === activeId) renderActiveSurfaces();
      } else if (spaceThreadId && tid === spaceThreadId) {
        // A space-thread event: the install registry or a space app's shared
        // state changed. Fold it, then repaint the space surfaces: the
        // sidebar's space band (installs add/remove rows; activity previews +
        // the unread dot ride the owning app's own hooks) and the open space
        // home's pane. Live notices still speak via notifyLive.
        foldEvent(tid, payload, { id: msg.id, ts: payload.ts });
        const owner = appForType(payload.type);
        if (owner && owner.name !== "installs") {
          const pv = appPreview(payload, { you: payload.uid && payload.uid === myUserId });
          if (pv) spaceAppPreview[owner.name] = pv;
          const seeing = activeId === spaceThreadId && spaceAppOpen === owner.name;
          if (!seeing && appUnread(payload) && !ownMessage(payload, myUserId, session.name)) spaceAppUnread[owner.name] = true;
          if (spaceAppOpen === owner.name) renderSpaceAppPane();
        }
        notifyLive(tid, payload);
        renderThreadList();
        return;
      } else {
        foldEvent(tid, payload, { id: msg.id, ts: payload.ts });
        // A group/DM chat: the event also projects into the conversation (an
        // attributed action line / app bubble), like a companion thread's chat view.
        if (chatAppFor(tid)) foldGroupAppEventBubble(tid, appForType(payload.type), payload, { id: msg.id, ts: payload.ts });
        if (tid === activeId) {
          renderActiveSurfaces();
          // An app was added or removed: the header widget bar (and possibly
          // the visible pane) changes for everyone, live.
          if ((appForType(payload.type) || {}).name === "installs") refreshGroupAppsUI(tid);
        }
      }
      notifyLive(tid, payload);
      const pv = appPreview(payload, { you: payload.uid && payload.uid === myUserId });
      if (pv) threadPreview[tid] = pv;
      if (tid !== activeId && appUnread(payload) && !ownMessage(payload, myUserId, session.name)) {
        unread[tid] = true;
      }
      const at = threads.find((x) => x.id === tid);
      if (at) at.last_at = msg.created_at || Math.floor(Date.now() / 1000);
      // Watching the app live counts as reading — advance the synced watermark.
      if (tid === activeId && document.hasFocus()) markThreadRead(tid);
      renderThreadList();
      return;
    }
    // Chat app: a plain message (no type; text and/or attachments) folds into the
    // chat app so the feed stays live alongside original clients. Also for an
    // app-thread's chat view — it's a regular DM, so notes you type there just work
    // (folded + rendered), whether or not its bot ever replies.
    // A membership announce (join/left/removed) carries the roster delta —
    // apply it before the render below so live counts (an open group's intro
    // "N people here") reflect it immediately.
    if (payload && (payload.join || payload.removed || payload.left)) {
      if (applyMembershipDelta(tid, payload) && tid !== activeId) renderThreadList();
    }
    if ((chatAppFor(tid) || threadApp[tid]) && payload && !payload.type && (payload.text || payload.attachments)) {
      // Our own echo landing: the fold upgrades the pending bubble in place
      // (matched on _cid) — cancel its "sending…" timer so it never trips.
      if (payload._cid) clearSlow(payload._cid);
      foldHostEvent(tid, "chat", chatMsgEvent(payload), { id: msg.id, ts: payload.ts });
      if (tid === activeId) renderActiveSurfaces();
    }
    if (tid !== activeId) {
      unread[tid] = !ownMessage(payload, myUserId, session.name);
    }
    // Refresh the chat-list preview + last-activity time for this thread. last_at
    // is what floats this thread to the top on the next renderThreadList (the list
    // sorts by recency), so it's updated whether or not the thread is active.
    const t = threads.find((x) => x.id === tid);
    if (t) {
      t.last_at = msg.created_at || Math.floor(Date.now() / 1000);
      if (payload) {
        previewPayload[tid] = payload;
        const preview = previewText(t, payload);
        threadPreview[tid] = preview;
        maybeNativeNotify(tid, payload, preview);
      }
    }
    // Actually reading it live (thread open, window focused) advances the
    // synced watermark — your other devices' dots clear without a tap here.
    if (tid === activeId && document.hasFocus()) markThreadRead(tid);
    renderThreadList();
    // If the just-joined invitee's message cleared the pending state, drop the
    // waiting card and reveal the normal feed/composer.
    if (tid === activeId) updatePendingBanner(threads.find((x) => x.id === tid));
  };
  ws.onclose = () => {
    wsConnected = false;
    setChatAppConnected(false); // and grey the mini-app composer's send button too
    if (pingTimer) {
      clearInterval(pingTimer);
      pingTimer = null;
    }
    if (integrityTimer) {
      clearInterval(integrityTimer);
      integrityTimer = null;
    }
    // Only flash "Reconnecting…" if the outage persists past a brief blip.
    if (!reconnectStatusTimer) {
      reconnectStatusTimer = setTimeout(() => showConnStatus("Reconnecting…"), 2500);
    }
    setTimeout(connectWS, 2000);
  };
  ws.onerror = () => {
    try {
      ws.close();
    } catch {}
  };
}

// ---- inviting a new person straight into a DM ---------------------------

// inviteSomeone creates a pending DM with a brand-new person plus a link they use
// to join. The browser generates the DM key, wraps it to us (so we hold it) and
// encrypts it to the invite secret (so the joiner recovers it) — the server only
// stores blobs. Returns the pending thread id; the link lands in inviteLinks.
// An error whose message is written FOR the member — the sheet's failure
// handler (go, above) shows these inline instead of the generic label.
function friendlyError(message) {
  return Object.assign(new Error(message), { friendly: true });
}

// Why an invite can't mint yet: the invitee's name seals under the shared
// instance key, which hasn't reached this device. When the server reported
// holder liveness (#785), say the honest thing — including the way out when
// the holders look gone for good (the admin console's key reset).
function keylessInviteReason() {
  const h = keyHolderState;
  if (h && !h.online) {
    const since = h.lastActive
      ? ` since ${new Date(h.lastActive * 1000).toLocaleDateString([], { month: "long", year: "numeric" })}`
      : "";
    return (
      `The members who hold this space's shared key haven't been online${since}. ` +
      `Invites need that key. If those members are gone for good, an admin can reset the shared key from the admin console.`
    );
  }
  return "This space's shared key hasn't reached your device yet — it arrives automatically when another member who holds it comes online. Until then, invites can't be created.";
}

async function inviteSomeone(name, tierID = "") {
  const T = randomSecret();
  const { id, wrapKey, claimHash, bindKey } = await deriveInvite(T);
  const { key, b64 } = await generateKey();
  const me = roster.find((e) => e.user_id === myUserId);
  if (!me || !me.public_key) throw friendlyError("Your account is still loading — give it a second and try again.");
  if (!instanceKey) throw friendlyError(keylessInviteReason());
  const selfWrapped = await wrapThreadKey(b64, me.public_key);
  // My published name rides INSIDE the sealed payload (#1436): the joiner's
  // first paint can then label me before the instance key (and my real label)
  // reaches them. Published label only — never a nickname — and the server
  // still sees only ciphertext.
  const fromName = String(me.label || session.name || "").trim().slice(0, 64);
  const wrapped = await encrypt(wrapKey, fromName ? { threadKey: b64, from: fromName } : { threadKey: b64 });
  // The invitee's name is stored encrypted under the instance key (the server never
  // sees it); the plaintext name rides in the invite link's #fragment for pre-fill.
  const labelBlob = await encrypt(instanceKey, name);
  const r = await (
    await fetch("/api/invites", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, label_blob: labelBlob, id, wrapped, self_wrapped: selfWrapped, claim_hash: claimHash, tier_id: tierID }),
    })
  ).json();
  if (!r.thread_id) throw new Error("invite failed");
  threadKeys[r.thread_id] = key;
  threadKeyB64[r.thread_id] = b64;
  inviteLinks[r.thread_id] = inviteLink(name, T);
  // Key transparency (#573): stash the T-derived bind key against the invitee's
  // user id, so once they join and publish a key, verifyInviteBindings() can
  // confirm the roster key is the one THEY published (not a server substitute).
  if (r.user_id) rememberInviteBindKey(r.user_id, bindKey);
  // Add the (keyless) invitee to our local roster now, so the pending DM titles by
  // their name straight away — without waiting for the next connections reload.
  if (r.user_id && !roster.some((e) => e.user_id === r.user_id)) {
    roster.push({ user_id: r.user_id, label: name, label_blob: labelBlob, public_key: "", avatar: "" });
  }
  // The name I invited them under becomes MY name for them (#577): if they pick
  // a different one at signup I keep this, and their rename prompts me once.
  if (r.user_id) {
    nicknames[r.user_id] = { name, seen: name };
    nicknameOps.set(r.user_id, { name, seen: name });
    await saveNicknames(); // a failed save self-retries; never blocks the invite
  }
  return r.thread_id;
}

// resendInvite mints a fresh link for a pending invitee whose earlier link was lost
// (the secret is never recoverable from the server). Re-encrypts the DM key we
// still hold to a new secret, tied to the same pending chat. Returns the new link.
async function resendInvite(threadId) {
  const b64 = threadKeyB64[threadId];
  if (!b64) throw new Error("no key");
  const t = threads.find((x) => x.id === threadId);
  const other = (t.members || []).find((uid) => uid !== myUserId);
  const name = publishedLabel(other); // rides in the link they open — never my private name for them
  const T = randomSecret();
  const { id, wrapKey, claimHash } = await deriveInvite(T);
  // Same inviter-name hint as inviteSomeone (#1436) — a resent link's joiner
  // deserves the same first paint.
  const me = roster.find((e) => e.user_id === myUserId);
  const fromName = String((me && me.label) || session.name || "").trim().slice(0, 64);
  const wrapped = await encrypt(wrapKey, fromName ? { threadKey: b64, from: fromName } : { threadKey: b64 });
  const r = await (
    await fetch("/api/invites", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token, id, wrapped, thread_id: threadId, claim_hash: claimHash }),
    })
  ).json();
  if (!r.ok) throw new Error("resend failed");
  inviteLinks[threadId] = inviteLink(name, T);
  return inviteLinks[threadId];
}

// cancelInvitedChat tears down a pending DM whose invitee never joined.
async function cancelInvitedChat(threadId) {
  if (!confirm("Cancel this invite and remove the chat?")) return;
  try {
    await fetch(`/api/threads/${encodeURIComponent(threadId)}/cancel-invite`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token: session.token }),
    });
  } catch {}
  delete inviteLinks[threadId];
  delete threadKeys[threadId];
  delete threadKeyB64[threadId];
  setActiveId(null);
  await loadThreads();
  renderThreadList();
  document.getElementById("thread-view").classList.add("hidden");
  document.getElementById("thread-empty").classList.remove("hidden");
  showList();
}

// pendingInvitee returns the roster entry of a DM's other member when they haven't
// joined yet (keyless), so a caller can show their name — or null for a normal chat.
function pendingInvitee(t) {
  if (!t || t.kind !== "dm") return null;
  const other = (t.members || []).find((uid) => uid !== myUserId);
  const e = roster.find((x) => x.user_id === other);
  return e && !e.public_key ? e : null;
}

// The waiting-to-join state for a pending DM: a centered card (the feed + composer
// are hidden via the `.waiting` class while there's no one to talk to yet) showing
// the join link with copy, or a re-send button, plus cancel. Clears — restoring the
// normal feed/composer — once the invitee has joined.
function updatePendingBanner(t) {
  const view = document.getElementById("thread-view");
  let banner = document.getElementById("pending-banner");
  const invitee = pendingInvitee(t);
  if (!invitee) {
    view.classList.remove("waiting");
    if (banner) banner.remove();
    return;
  }
  view.classList.add("waiting");
  if (!banner) {
    banner = document.createElement("div");
    banner.id = "pending-banner";
    banner.className = "pending-banner";
    view.appendChild(banner); // feed/composer are hidden by .waiting, so order is moot
  }
  banner.innerHTML = "";
  const card = document.createElement("div");
  card.className = "pending-card";

  // The invitee's identity leads — the same tile the sidebar and header use —
  // so the card reads as "them", not as a system notice.
  const av = avatarEl(invitee.label);
  av.classList.add("avatar-lg", "pending-avatar");
  card.appendChild(av);

  const title = document.createElement("div");
  title.className = "pending-title";
  title.textContent = invitee.label ? `${invitee.label} hasn't joined yet` : "They haven't joined yet";
  card.appendChild(title);

  const link = inviteLinks[t.id];
  const msg = document.createElement("p");
  msg.textContent = link
    ? "Send them this link to let them in. It's the key to this chat — anyone who has it can read it, so share it privately."
    : "This device doesn't hold their invite link. Create a fresh one to send them — it's the key to this chat, so share it privately.";
  card.appendChild(msg);

  if (link) {
    const box = document.createElement("div");
    box.className = "key-box mono";
    box.textContent = link;
    box.onclick = () => selectAllText(box);
    card.appendChild(box);
  }

  const row = document.createElement("div");
  row.className = "row";
  if (link) {
    // Copying the link is THE action here — it gets the primary pill.
    const copyBtn = document.createElement("button");
    copyBtn.textContent = "Copy link";
    copyBtn.onclick = () => copyToButton(link, copyBtn);
    row.appendChild(copyBtn);
  } else {
    const get = document.createElement("button");
    get.textContent = "Get invite link";
    get.onclick = async () => {
      get.disabled = true;
      get.textContent = "Creating…";
      try {
        await resendInvite(t.id);
        updatePendingBanner(t);
      } catch {
        get.disabled = false;
        get.textContent = "Couldn't — try again";
      }
    };
    row.appendChild(get);
  }
  const cancel = document.createElement("button");
  cancel.className = "linkish danger";
  cancel.textContent = "Cancel invite";
  cancel.onclick = () => cancelInvitedChat(t.id);
  row.appendChild(cancel);
  card.appendChild(row);
  banner.appendChild(card);
}

// /join/<slug>#<secret> — the slug is cosmetic; the secret is the whole key.
function inviteLink(name, T) {
  // Neutral slug: the invitee's name rides in the #fragment (never sent to the
  // server), not the path — so opening a join link reveals no name to the server.
  // On a sealed instance the fragment also carries the branding key, so the
  // join card can show what the invitee is joining (docs/no-plaintext.md).
  return `${location.origin}/join/join#${buildInviteFragment(T, name, brandingB || "")}`;
}

function selectAllText(el) {
  const range = document.createRange();
  range.selectNodeContents(el);
  const sel = getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

async function copyToButton(text, btn) {
  const label = btn.textContent;
  try {
    await navigator.clipboard.writeText(text);
    btn.textContent = "Link copied ✓";
  } catch {
    btn.textContent = "Select the link above to copy";
  }
  setTimeout(() => (btn.textContent = label), 2000);
}

// ---- avatars + profile --------------------------------------------------

// A stable colour from a name, so each person's initial circle is consistent.

// Edit profile: avatar (photo or initials) + screen name.
function editProfile() {
  const backdrop = modal();
  const card = backdrop.querySelector(".sheet");
  const h = document.createElement("h2");
  h.textContent = "Edit profile";
  card.appendChild(h);

  const meAvatar = () => avatarFor(myUserId);
  const meAlt = () => {
    const e = roster.find((x) => x.user_id === myUserId);
    return (e && e.avatarAlt) || "";
  };
  const av = avatarEl(session.name, meAvatar);
  av.classList.add("avatar-lg");
  const photoBtn = document.createElement("button");
  photoBtn.className = "linkish";
  photoBtn.type = "button";
  photoBtn.id = "me-photo-btn"; // so refreshProfilePhotoBtn() can flip it live
  photoBtn.textContent = instanceKey ? "Change photo" : "Photo syncing…";
  photoBtn.disabled = !instanceKey;
  // Don't just sit on "Photo syncing…": prod any online holder to wrap the key to
  // us now, then poll for it. Picks up live via refreshProfilePhotoBtn().
  if (!instanceKey) {
    fetch(`/api/instance-key/nudge?token=${encodeURIComponent(session.token)}`, { method: "POST" }).catch(() => {});
    pollForInstanceKey();
  }
  const photoInput = document.createElement("input");
  photoInput.type = "file";
  photoInput.accept = "image/*";
  photoInput.style.display = "none";
  photoBtn.onclick = () => photoInput.click();
  photoInput.onchange = async () => {
    const f = photoInput.files[0];
    photoInput.value = "";
    if (!f) return;
    photoBtn.disabled = true;
    photoBtn.textContent = "Uploading…";
    try {
      await uploadAvatar(f, meAlt()); // keep the existing description on a photo swap
      delete avatarURLs[myUserId];
      paintAvatar(av, session.name, meAvatar);
      const me = document.getElementById("me-avatar");
      if (me) paintAvatar(me, session.name, meAvatar);
      photoBtn.textContent = "Change photo";
    } catch (e) {
      console.error(e);
      photoBtn.textContent = "Couldn't upload — try again";
    } finally {
      photoBtn.disabled = false;
    }
  };
  const avWrap = document.createElement("div");
  avWrap.style.cssText = "text-align:center;margin:6px 0 12px";
  avWrap.appendChild(av);
  avWrap.appendChild(document.createElement("br"));
  avWrap.appendChild(photoBtn);
  avWrap.appendChild(photoInput);
  card.appendChild(avWrap);

  const label = document.createElement("label");
  label.className = "field-label";
  label.textContent = "Screen name";
  const input = document.createElement("input");
  input.value = session.name;
  input.maxLength = 32;
  input.addEventListener("input", () => paintAvatar(av, input.value || "?", meAvatar));
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      save.click(); // Enter saves, like any single-field form
    }
  });
  card.appendChild(label);
  card.appendChild(input);

  // "About you": free text encrypted under the instance key, shown under your
  // name to the people you chat with. Needs the key to encrypt — until it
  // arrives the field waits, like the photo button (which already nudges).
  const meEntry = () => roster.find((x) => x.user_id === myUserId);
  const aboutLabel = document.createElement("label");
  aboutLabel.className = "field-label";
  aboutLabel.style.marginTop = "14px"; // air between the name field and this one
  aboutLabel.textContent = "About you";
  const about = document.createElement("textarea");
  about.id = "me-about"; // so refreshProfilePhotoBtn() can enable it live
  about.rows = 3;
  about.maxLength = 280;
  about.placeholder = instanceKey ? "A line or two about yourself" : "Syncing keys…";
  about.disabled = !instanceKey;
  const e = meEntry();
  about.value = (e && e.about) || "";
  card.appendChild(aboutLabel);
  card.appendChild(about);

  // DM privacy (issue #578): who may START a direct message with you. Honest
  // about the carve-out — admins and bots still can (the operator must stay
  // reachable; Eleven's welcome DM is how onboarding speaks). Saved on change,
  // independent of the Save button, like a settings switch.
  const dmLabel = document.createElement("label");
  dmLabel.className = "field-label";
  dmLabel.style.marginTop = "14px";
  dmLabel.textContent = "Who can message you directly";
  dmLabel.htmlFor = "me-dm-privacy";
  const dmSel = document.createElement("select");
  dmSel.id = "me-dm-privacy";
  for (const [val, text] of [
    ["everyone", "Everyone in this space"],
    ["nobody", "No one"],
  ]) {
    const o = document.createElement("option");
    o.value = val;
    o.textContent = text;
    dmSel.appendChild(o);
  }
  const dmNote = document.createElement("div");
  dmNote.className = "field-note";
  dmNote.textContent = "Existing chats keep working. Admins and helper bots can always reach you.";
  fetch(`/api/me?token=${encodeURIComponent(session.token)}`)
    .then((r) => r.json())
    .then((m) => {
      dmSel.value = m.dm_privacy === "nobody" ? "nobody" : "everyone";
    })
    .catch(() => {});
  dmSel.onchange = async () => {
    dmSel.disabled = true;
    try {
      const r = await fetch("/api/dm-privacy", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, dm_privacy: dmSel.value }),
      });
      if (!r.ok) throw new Error("server");
    } catch {
      dmNote.textContent = "Couldn't save — try again.";
    } finally {
      dmSel.disabled = false;
    }
  };
  card.appendChild(dmLabel);
  card.appendChild(dmSel);
  card.appendChild(dmNote);

  // Your access levels — read-only here (an admin, or another member of the
  // level, grants them; docs/community-and-tiers.md). The self-facing mirror
  // of the chips on someone else's profile card; fetched fresh, hidden when
  // you're in none so members of spaces without levels see nothing.
  const levelLabel = document.createElement("label");
  levelLabel.className = "field-label";
  levelLabel.style.marginTop = "14px";
  levelLabel.textContent = "Your access levels";
  levelLabel.style.display = "none";
  const levelChips = document.createElement("div");
  levelChips.className = "level-chips";
  levelChips.style.justifyContent = "flex-start"; // left-aligned under the label
  card.appendChild(levelLabel);
  card.appendChild(levelChips);
  const levelNotes = document.createElement("div");
  card.appendChild(levelNotes);
  loadTiers().then(() => {
    // A membership link when the space sells any level, or you already
    // subscribe — the way in to subscribe/change/cancel.
    if (tiers.some((tt) => tt.price_cents > 0 || tt.status)) {
      const mrow = document.createElement("div");
      mrow.style.cssText = "margin-top:12px";
      const mbtn = document.createElement("button");
      mbtn.className = "linkish";
      mbtn.textContent = "Manage membership";
      mbtn.onclick = () => {
        backdrop.remove();
        showMembership();
      };
      mrow.appendChild(mbtn);
      card.appendChild(mrow);
    }
    const mine = tiers.filter((tt) => (tt.members || []).includes(myUserId));
    if (!mine.length) return;
    levelLabel.style.display = "";
    for (const tt of mine) {
      const chip = document.createElement("span");
      chip.className = "level-chip";
      chip.textContent = tt.name;
      levelChips.appendChild(chip);
    }
    // Per-level visibility in the member's own words:
    //  - "user"  → a live toggle they control.
    //  - "hidden" → a muted note (members-only; no control).
    //  - "shown"  → nothing (the default; a note per level would be clutter).
    for (const tt of mine) {
      if (tt.visibility === "user") {
        const row = document.createElement("label");
        row.style.cssText =
          "display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:8px;cursor:pointer";
        const cb = document.createElement("input");
        cb.type = "checkbox";
        // Escape the app-wide `input { width:100% }` rule, which would make the
        // checkbox a full-width flex item and shove the label to the far edge.
        cb.style.cssText = "width:18px;height:18px;flex:none;margin:0";
        cb.checked = !tt.hidden; // hidden=true → currently NOT shown to others
        cb.onchange = async () => {
          cb.disabled = true;
          const ok = await setTierShown(tt.id, cb.checked);
          cb.disabled = false;
          if (ok) tt.hidden = !cb.checked;
          else cb.checked = !cb.checked; // revert on failure
        };
        const txt = document.createElement("span");
        txt.textContent = `Show “${tt.name}” on my profile`;
        row.append(cb, txt);
        levelNotes.appendChild(row);
      } else if (tt.visibility === "hidden") {
        const note = document.createElement("p");
        note.className = "sub";
        note.style.margin = "6px 0 0";
        note.textContent = `“${tt.name}” shows only to its members.`;
        levelNotes.appendChild(note);
      }
    }
  });

  // Away: pins your presence dot to away, so activity doesn't flip it back to
  // online. Applies immediately (server-stored, follows you across devices) —
  // Save is only for the name.
  const awayRow = document.createElement("label");
  awayRow.className = "toggle-row away-row";
  const awayCb = document.createElement("input");
  awayCb.type = "checkbox";
  awayCb.className = "switch";
  awayCb.setAttribute("role", "switch");
  awayCb.disabled = true; // until /api/me reports the current value
  const awayText = document.createElement("span");
  awayText.textContent = "Set yourself as away";
  awayRow.appendChild(awayText); // text left, switch right (settings idiom)
  awayRow.appendChild(awayCb);
  const awayNote = document.createElement("p");
  awayNote.className = "away-note";
  fetch(`/api/me?token=${encodeURIComponent(session.token)}`)
    .then((r) => r.json())
    .then((me) => {
      awayCb.checked = !!me.away;
      awayCb.disabled = false;
    })
    .catch(() => {
      awayNote.textContent = "Couldn't load your status.";
    });
  awayCb.onchange = async () => {
    const away = awayCb.checked;
    awayCb.disabled = true;
    awayNote.textContent = "";
    try {
      const r = await fetch("/api/presence", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token: session.token, away }),
      });
      if (!r.ok) throw new Error();
      // Our own dot updates via the presence frame the server echoes back.
    } catch {
      awayCb.checked = !away; // didn't stick — say so inline, no toast
      awayNote.textContent = "Couldn't update — try again.";
    } finally {
      awayCb.disabled = false;
    }
  };
  card.appendChild(awayRow);
  card.appendChild(awayNote);

  const foot = document.createElement("div");
  foot.className = "sheet-foot";
  const cancel = document.createElement("button");
  cancel.className = "secondary";
  cancel.textContent = "Cancel";
  cancel.onclick = () => backdrop.remove();
  const save = document.createElement("button");
  save.textContent = "Save";
  save.onclick = () => {
    const next = input.value.trim();
    if (next && next !== session.name) {
      session.name = next.slice(0, 32);
      localStorage.setItem(SESSION_KEY, JSON.stringify(session));
      setCurrentUser(myUserId, session.name); // emitted events carry the new name
      const me = document.getElementById("me-avatar");
      if (me) paintAvatar(me, session.name, meAvatar);
      // Publish the (encrypted) label NOW — without this, everyone else keeps
      // seeing "Someone" until this browser's next full reload happens to
      // republish it. The welcome/setup bridge already does the same.
      publishMyLabel();
    }
    const nextAbout = about.value.trim().slice(0, 280);
    const cur = meEntry();
    if (!about.disabled && nextAbout !== ((cur && cur.about) || "")) publishMyDescription(nextAbout);
    backdrop.remove();
  };
  foot.appendChild(cancel);
  foot.appendChild(save);
  card.appendChild(foot);
  input.focus();
}

// Encrypt a profile photo with the instance key, upload it, and point the user's
// avatar at the blob. Downscaled small; readable by every member, never the server.
async function uploadAvatar(file, alt = "") {
  if (!instanceKey) throw new Error("no instance key");
  const { bytes } = await processImage(file, 400);
  if (bytes.length > MAX_UPLOAD) throw new Error("too big");
  const enc = await encryptBytes(instanceKey, bytes);
  const res = await fetch(`/api/upload?token=${encodeURIComponent(session.token)}`, { method: "POST", body: enc });
  if (!res.ok) throw new Error("upload");
  const { id } = await res.json();
  // The alt text is user content: it ships encrypted under the instance key,
  // like the display name — the server stores an opaque blob. Cap the plaintext
  // so the base64 blob stays well under the server's 4096-char limit (else the
  // avatar POST 400s and — before this — failed silently).
  alt = (alt || "").slice(0, 280);
  const altBlob = alt ? await encrypt(instanceKey, alt) : "";
  const av = await fetch("/api/avatar", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: session.token, blob_id: id, alt_blob: altBlob }),
  });
  if (!av.ok) throw new Error("avatar save failed"); // don't let the UI show it as kept
  const me = roster.find((e) => e.user_id === myUserId);
  if (me) {
    me.avatar = id; // so avatarFor() picks it up immediately
    me.avatarAlt = alt;
  }
}

async function leave() {
  // How many devices hold this account's key? Signing out the LAST one loses the key
  // — and every chat encrypted to it — for good (there's no server-side copy).
  let count = 1;
  try {
    const me = await (await fetch(`/api/me?token=${encodeURIComponent(session.token)}`)).json();
    if (typeof me.device_count === "number") count = me.device_count;
  } catch {}

  if (count > 1) {
    if (confirm("Sign out on this device? Your other devices stay signed in.")) doSignout();
    return;
  }

  // Only device: warn hard and offer a way back in first.
  const backdrop = modal();
  const card = backdrop.querySelector(".sheet");
  const h = document.createElement("h2");
  h.textContent = "Sign out of your only device?";
  const p = document.createElement("p");
  p.className = "sub";
  p.textContent =
    "Your chats are encrypted to a key that lives only on this device. Sign out and you'll lose access to them for good — there's no way to recover it. Save a way back in first.";
  const foot = document.createElement("div");
  foot.className = "sheet-foot";
  const out = document.createElement("button");
  out.className = "secondary";
  out.textContent = "Sign out anyway";
  out.onclick = () => {
    backdrop.remove();
    doSignout();
  };
  const backup = document.createElement("button");
  backup.textContent = "Save a way back in";
  backup.onclick = () => {
    backdrop.remove();
    addDevice(); // sign in with Eleven or save the link, then sign out later if you still want to
  };
  foot.appendChild(out);
  foot.appendChild(backup);
  card.appendChild(h);
  card.appendChild(p);
  card.appendChild(foot);
}

// Revoke this device's token server-side (so it stops counting / receiving push) and
// clear the local session.
function doSignout() {
  fetch("/api/device/signout", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: session.token }),
  })
    .catch(() => {})
    .finally(async () => {
      // The local message store goes with the session (#457): the next person
      // on this browser profile must find nothing readable.
      try {
        await wipeStore();
      } catch {}
      localStorage.removeItem(SESSION_KEY);
      location.reload();
    });
}

// ---- onboarding: paste-to-join + iOS install ----------------------------

// Claim an invite secret: get a device token, set up the user keypair (generate
// for a new person; unwrap the shipped one for an added device), register the
// public key, and store the session.
async function claimInvite(T, name) {
  const { id, wrapKey, claimSecret, bindKey } = await deriveInvite(T);
  const info = await (await fetch(`/api/key-invite/${encodeURIComponent(id)}`)).json();
  if (!info.ok) throw new Error("invite unavailable");
  let pub, priv, wrappedSelf = "", addDevice = false;
  if (info.wrapped) {
    const payload = await decrypt(wrapKey, info.wrapped);
    if (payload.priv) {
      // Add-device link: it carries this user's own keypair.
      pub = payload.pub;
      priv = payload.priv;
      addDevice = true;
    } else if (payload.threadKey) {
      // User invite: a new person joining into a DM — fresh keypair, and re-wrap the
      // DM key to it so we can read the chat straight away. (Paste-to-join only runs
      // with no existing session, so this is always a brand-new person.)
      const kp = await generateUserKeypair();
      pub = kp.publicKey;
      priv = kp.privateKey;
      wrappedSelf = await wrapThreadKey(payload.threadKey, pub);
    }
  }
  if (!pub) {
    const kp = await generateUserKeypair();
    pub = kp.publicKey;
    priv = kp.privateKey;
  }
  const claim = await (
    await fetch(`/api/key-invite/${encodeURIComponent(id)}/claim`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      // Name is never sent to the server — published encrypted after boot.
      body: JSON.stringify({ wrapped: wrappedSelf, claim_secret: claimSecret }),
    })
  ).json();
  if (!claim.ok || !claim.token) throw new Error("claim failed");
  // Key transparency (#573): a fresh joiner MACs its public key under the
  // T-derived bind key so the inviter can verify it. Add-device re-registers an
  // existing key (its original binding stands), so no MAC. Computed in its own
  // try — a bind-MAC hiccup must never break the load-bearing pubkey publish +
  // session save below (that would leave a claimed-but-keyless broken join).
  let mac = "";
  try {
    if (!addDevice && bindKey) mac = await bindMac(bindKey, pub);
  } catch {}
  await fetch("/api/pubkey", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ token: claim.token, public_key: pub, bind_mac: mac }),
  });
  localStorage.setItem(SESSION_KEY, JSON.stringify({ token: claim.token, name, userPub: pub, userPriv: priv }));
  // Land straight in the DM this invite created (boot opens it).
  if (claim.thread_id) localStorage.setItem("lchat_open_thread", claim.thread_id);
}

function parseLink(text) {
  try {
    const u = new URL(text.trim());
    const frag = u.hash.slice(1);
    if (!frag) return null;
    const { T, name } = parseInviteFragment(frag);
    const slug = decodeURIComponent(u.pathname.split("/").filter(Boolean).pop() || "");
    return { T, name, slug };
  } catch {
    return null;
  }
}

function showNoInvite() {
  // A bare browser visit with no session belongs on the home server's sign-in
  // page — members recover their spaces there, new people learn what Eleven
  // is, and the instance's landing reveals nothing (which sealed branding
  // makes literal). The card below survives for the one surface that NEEDS
  // it: the installed Home-Screen app consumes invite links by paste — it has
  // no other way in — and ?stay=1 keeps it reachable everywhere (debugging,
  // and a deliberate "no, this instance's page" bookmark). Native webviews
  // never get here (route() hands embed to bootEmbed first). The origin check
  // also skips a dev page served without __HOME_ORIGIN__ substitution.
  const standalone =
    matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
  const home = window.__homeOrigin || "";
  const params = new URLSearchParams(location.search);
  if (autoRestoreRequested(location.search) && canRestore()) {
    // Links from an unlocked home vault land here first so this origin can
    // generate and retain the ephemeral private key. Consume the marker before
    // leaving; if crypto/storage fails, recursion paints the ordinary sign-in
    // card rather than trapping the tab in an automatic retry loop.
    consumeAutoRestoreMarker();
    launchRestore().catch(() => showNoInvite());
    return;
  }
  if (!standalone && home.startsWith("http") && !params.has("stay")) {
    return location.replace(home);
  }
  hideLoading();
  app.appendChild(tpl("noinvite-tpl"));
  // Public branding: reveal the server photo once /api/group confirms one is
  // set (the name is already substituted server-side). Same flag join.js uses.
  fetch("/api/group").then((r) => r.json()).then((g) => {
    const img = document.getElementById("join-brand-photo");
    if (!img || !g) return;
    if (g.avatar) {
      img.alt = g.avatar_alt || "";
      img.src = "/api/server-avatar";
      img.classList.remove("hidden");
    } else if (!g.name_set) {
      // No photo AND no admin-chosen name: an unbranded instance. Show the
      // Eleven mark rather than a bare default — never a hand-rolled glyph.
      img.alt = "";
      img.src = "/static/icon-192.png";
      img.classList.remove("hidden");
    }
  }).catch(() => {});
  const linkInput = document.getElementById("link");
  const nameInput = document.getElementById("name");
  const err = document.getElementById("join-err");
  const showErr = (m) => {
    err.textContent = m;
    err.classList.remove("hidden");
  };
  let joining = false;

  const reveal = () => {
    if (nameInput.classList.contains("hidden")) {
      nameInput.classList.remove("hidden");
      document.getElementById("join-intro").textContent = "Almost there — pick a screen name.";
      nameInput.focus();
    }
  };

  const onLink = async () => {
    const p = parseLink(linkInput.value);
    if (!p) return;
    if (p.name && !joining) {
      // Device-add link carries your name — join straight away.
      joining = true;
      try {
        await claimInvite(p.T, p.name);
        location.reload();
      } catch {
        joining = false;
        showErr("This link has been used or is no longer valid.");
      }
      return;
    }
    if (!nameInput.value.trim()) nameInput.value = p.slug || "";
    reveal();
  };
  linkInput.addEventListener("input", onLink);
  linkInput.addEventListener("change", onLink);

  document.getElementById("paste-join").onsubmit = async (e) => {
    e.preventDefault();
    err.classList.add("hidden");
    const p = parseLink(linkInput.value);
    if (!p) return showErr("That doesn't look like a valid invite link.");
    if (nameInput.classList.contains("hidden")) return reveal();
    const name = (p.name || nameInput.value).trim();
    if (!name) return showErr("Please enter a screen name.");
    if (joining) return;
    joining = true;
    try {
      await claimInvite(p.T, name);
      location.reload();
    } catch {
      joining = false;
      showErr("This invite has been used or is no longer valid.");
    }
  };

  // The one CTA: Sign in (passkey restore via home). The paste form stays
  // folded behind "Have an invite link?" — still essential for the iOS
  // Home-Screen app, which can only consume an invite link by pasting it here.
  const showJoinForm = () => {
    document.getElementById("join-intro").classList.remove("hidden");
    document.getElementById("paste-join").classList.remove("hidden");
    document.getElementById("invite-reveal-row").classList.add("hidden");
    linkInput.focus();
  };
  document.getElementById("invite-reveal").onclick = showJoinForm;
  const restoreRow = document.getElementById("restore-row");
  if (restoreRow && canRestore()) {
    restoreRow.style.display = "";
    document.getElementById("restore-btn").onclick = () => { launchRestore(); };
  } else {
    // No home server configured (or the native wrapper, where the ceremony
    // can't run): the join form is the only door — show it up front.
    showJoinForm();
  }
}

function showA2HS(done) {
  hideLoading();
  app.innerHTML = "";
  app.appendChild(tpl("a2hs-tpl"));
  document.getElementById("a2hs-continue").onclick = () => {
    localStorage.setItem("lchat_a2hs", "done");
    app.innerHTML = "";
    done();
  };
}

// ---- helpers ------------------------------------------------------------

function loadSession() {
  try {
    const s = JSON.parse(localStorage.getItem(SESSION_KEY) || "null");
    // name may be EMPTY (not just missing): a setup-invite claim signs in
    // nameless and the setup conversation asks for the name in-chat.
    if (s && s.token && typeof s.name === "string" && s.userPub && s.userPriv) return s;
  } catch {}
  return null;
}

function tpl(id) {
  return document.getElementById(id).content.cloneNode(true);
}

// Render message text into `el` with auto-linking + inline formatting. Builds
// text nodes + a single wrapper element per token (never innerHTML) — XSS-safe.
const MARK_TAG = { b: "strong", i: "em", s: "s", code: "code" };
// ---- @mention: candidate ranking + the tap-a-mention menu ---------------

// Candidates for a composer token — shared by the web menu above and the native
// shell's strip (window.lchatNative.typeahead), so both rank identically.
function typeaheadItems(tok) {
  if (tok.kind === "command") {
    const q = tok.query.toLowerCase();
    const hasBot = threadHasBot(activeId); // bot commands only where a bot can answer them
    // Contextual: inside an app-thread its local commands lead and its global
    // aliases drop out (commandCatalog handles both when given the thread).
    // Rank by NEARNESS of the place the command's data lands (the places
    // grammar): this chat's shared copy first, the space's next, then
    // everything personal/utility, bot-answered verbs last. Stable within a
    // rank, so registration order still breaks ties. Alt rows (the flagged
    // alternates) rank by their BARE verb's place (sortPlace) — the flag may
    // point somewhere nearer than the default, and an install offer must
    // never outrank the route the bare verb actually takes; the stable sort
    // then keeps each alternate right behind its verb.
    const nearness = (p) => (p === "chat" ? 0 : p === "space" ? 1 : 2);
    const rank = (c) => (c.bot ? 3 : nearness(c.sortPlace || c.place));
    return commandCatalog(activeId)
      .filter((c) => (!c.bot || hasBot) && c.name.slice(1).toLowerCase().startsWith(q))
      .sort((a, b) => rank(a) - rank(b))
      .slice(0, 8)
      .map((c) => ({ command: c.name, desc: c.desc, args: c.args, insert: c.name + " " }));
  }
  if (tok.kind === "emoji") {
    return emojiMatches(tok.query, 8).map((m) => ({ glyph: m.emoji, code: m.code, insert: m.emoji }));
  }
  const q = tok.query.toLowerCase();
  // Apps added to THIS chat — plus space-wide installs, mentionable in every
  // chat — are mentionable too: "@To-do buy milk" runs the app's default
  // command in place (see runAppMention). Same list the parser resolves
  // against (mentionableApps), so nothing is suggested that wouldn't run —
  // or runnable but never suggested. They rank after people.
  const appMatches = (activeId && !threadApp[activeId] ? mentionableApps(activeId) : [])
    .filter((a) => a.defaultCommand && (a.title || a.name).toLowerCase().includes(q))
    .map((a) => ({ name: a.title || a.name, glyph: a.glyph || "▦", insert: "@" + (a.title || a.name) + " " }));
  return [
    ...roster
      // rosterMatches: typing the name YOU call someone finds them too — but
      // what inserts is always the published @name every member can resolve.
      .filter((e) => e.user_id !== myUserId && e.label && rosterMatches(e, q))
      .map((e) => {
        // Rows show the name I use for them (#577); the insert stays the
        // published @name every member can resolve — goesBy says so when
        // the two differ.
        const shown = displayNameFor(nicknames[e.user_id], e.label);
        return { name: shown, goesBy: shown === e.label ? "" : e.label, userId: e.user_id, insert: "@" + e.label + " " };
      }),
    ...appMatches,
  ].slice(0, 8);
}


// A centered modal sheet. Click the backdrop or Esc to dismiss.
function modal() {
  const prevFocus = document.activeElement; // restored when the sheet closes
  const backdrop = document.createElement("div");
  backdrop.className = "overlay";
  const card = document.createElement("div");
  card.className = "card sheet";
  card.setAttribute("role", "dialog");
  card.setAttribute("aria-modal", "true");
  card.tabIndex = -1; // focusable as a fallback when there's no field/button
  backdrop.appendChild(card);
  const focusables = () =>
    [...card.querySelectorAll('a[href], button:not([disabled]), input, textarea, select, [tabindex]:not([tabindex="-1"])')].filter(
      (el) => el.offsetParent !== null
    );
  const close = () => {
    backdrop.remove();
    document.removeEventListener("keydown", onKey);
    if (prevFocus && prevFocus.focus) {
      try {
        prevFocus.focus();
      } catch {}
    }
  };
  const onKey = (e) => {
    if (e.key === "Escape") {
      close();
      return;
    }
    if (e.key === "Tab") {
      // Trap Tab within the sheet so keyboard/screen-reader users can't tab behind it.
      const f = focusables();
      if (!f.length) return;
      const first = f[0];
      const last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  };
  backdrop.addEventListener("click", (e) => {
    if (e.target === backdrop) close();
  });
  document.addEventListener("keydown", onKey);
  document.body.appendChild(backdrop);
  // Move focus into the sheet once the caller has populated it — unless the caller
  // already focused something inside (e.g. a screen-name field).
  setTimeout(() => {
    if (!card.contains(document.activeElement)) (focusables()[0] || card).focus();
  }, 0);
  return backdrop;
}