@devchitchat/chat 4.5.0 → 5.0.0

package/pages/public/client/islands/call.js

@@ -1,2282 +0,0 @@
-/**
- * call.js — combined chat + WebRTC island.
- *
- * Mounted on: <section class="chat-panel" island="/client/islands/call.js" …>
- *
- * Handles:
- *   - Chat (messages, composer) — same as the old chat.js island
- *   - WebRTC calls: start, join, leave, tile grid, mini-bar, sidebar badge
- *
- * WebRTC patterns ported from v1 RtcCallService:
- *   - negotiationInFlight / negotiationQueued per-peer serialisation
- *   - Pre-allocated transceiver slots (1 audio + 2 video: camera + screen)
- *   - replaceTrack() + direction toggle rather than addTrack() for renegotiation
- *   - waitForStableSignaling() before every offer
- *   - ICE candidate queue (pendingIceByPeer) until remote description is set
- *   - New joiner is offerer toward all existing peers; existing peers are answerers
- */
-import { signal, effect, computed, Context } from '@devchitchat/rdbljs'
-import { WsClient } from '../ws.js'
-import { patchSettings } from '../settings-sync.js'
-import { navigateTo } from '../router.js'
-import { escHtml, utcDateKey, formatDateLabel, makeDateSeparator, applyInlineRenderingToTextNodes, renderAttachment, makeMessageEl } from '../shared/messages.js'
-import { RtcPeerManager } from '../rtc-peer-manager.js'
-import { CATEGORIES, EMOJI_NAMES } from '../emoji-data.js'
-import { showActionSheet, dismiss as dismissActionSheet, getItemsContainer } from '../action-sheet.js'
-import { addLongPress } from '../long-press.js'
-
-export default function CallIsland(root) {
-  // ── Data from HTML ─────────────────────────────────────────────────────────
-  let channelId   = root.dataset.id
-  let channelKind = root.dataset.kind ?? 'text'
-  const userId     = root.dataset.userId
-  const userHandle = root.dataset.userHandle
-  const seedSeq    = parseInt(root.dataset.seedSeq ?? '0', 10)
-  let oldestSeq    = parseInt(root.dataset.seedFirstSeq ?? '0', 10)
-  let loadingMore  = false
-
-  // ── DOM refs ───────────────────────────────────────────────────────────────
-  const messages       = document.getElementById('messages')
-  const sentinelEl     = document.getElementById('load-more-sentinel')
-  const tilePanelEl   = document.getElementById('tile-panel')
-  const tileGridEl    = document.getElementById('tile-grid')
-  const callStatusEl  = document.getElementById('call-status')
-  const callStatusInfo = document.getElementById('call-status-info')
-  const callStatusAvatars = document.getElementById('call-status-avatars')
-  const callControlsEl = document.getElementById('call-controls-bar')
-  const peerCountEl   = document.getElementById('call-peer-count')
-  const btnStartCall  = document.getElementById('btn-start-call')
-  const btnJoinCall   = document.getElementById('btn-join-call')
-  const btnLeaveCall  = document.getElementById('btn-leave-call')
-  const ctrlMic       = document.getElementById('ctrl-mic')
-  const ctrlCam       = document.getElementById('ctrl-cam')
-  const ctrlScreen    = document.getElementById('ctrl-screen')
-  const ctrlDevices   = document.getElementById('ctrl-devices')
-
-  // Mini-bar (lives in sidebar footer — shared across channel navigations)
-  const miniBarEl     = document.getElementById('call-mini-bar')
-  const miniBarName   = document.getElementById('mini-bar-channel-name')
-  const miniBarMic    = document.getElementById('mini-bar-mic')
-  const miniBarReturn = document.getElementById('mini-bar-return')
-  const miniBarLeave  = document.getElementById('mini-bar-leave')
-
-  // ── WebSocket ──────────────────────────────────────────────────────────────
-  const ws = new WsClient(`${window.__BASE_PATH__}/ws`)
-
-  // ── Chat signals ───────────────────────────────────────────────────────────
-  const draft       = signal('')
-  const channelName = signal(root.dataset.name ?? '')
-  const channelTopic = signal(root.dataset.topic ?? '')
-  let afterSeq = seedSeq
-
-  // ── @mention picker state ──────────────────────────────────────────────────
-  let channelMembers  = []   // [{ user_id, handle, display_name }] — non-bot users
-  let channelBots     = []   // [{ user_id, handle, display_name }] — bot users
-  let mentionFiltered        = []   // current filtered subset
-  let mentionStart           = -1   // index of '@' in textarea.value
-  let mentionSelIdx          = 0    // keyboard-selected row
-  let activeMentionTextarea  = null // which textarea triggered the picker
-
-  // ── Call state ─────────────────────────────────────────────────────────────
-  const inCall     = signal(false)
-  const callIdSig  = signal(null)   // active call_id in this channel (may exist before we join)
-  let callChannelId = null          // channel where the active call lives (may differ from channelId after navigation)
-  const selfPeerId = signal(null)
-  const micMuted   = signal(false)
-  const camOff     = signal(false)
-  const screenSharing = signal(false)
-  let pinnedPeerId = null
-
-  // ── Local media streams ────────────────────────────────────────────────────
-  let audioStream  = null  // local mic
-  let videoStream  = null  // local camera
-  let screenStream = null  // local screen share
-  let iceServers   = [{ urls: 'stun:stun.l.google.com:19302' }]
-
-  // ── RTC peer manager ───────────────────────────────────────────────────────
-  const rtcManager = new RtcPeerManager({
-    iceServers,
-    getLocalStreams: () => ({ audio: audioStream, video: videoStream, screen: screenStream }),
-    handlers: {
-      onOffer:        (peerId, sdp) => ws.send({ t: 'rtc.offer',  body: { call_id: callIdSig(), to_peer_id: peerId, sdp } }),
-      onAnswer:       (peerId, sdp) => ws.send({ t: 'rtc.answer', body: { call_id: callIdSig(), to_peer_id: peerId, sdp } }),
-      onIceCandidate: (peerId, candidate) => ws.send({ t: 'rtc.ice', body: { call_id: callIdSig(), to_peer_id: peerId, candidate } }),
-      onTrack:        (peerId, tileId, stream, label) => { _renderTile(tileId, stream, false, label); _ensureRemoteAudio(stream, peerId) },
-      onAudio:        (peerId, stream) => _ensureRemoteAudio(stream, peerId),
-      onPeerClosed:   (peerId) => {
-        tileGridEl?.querySelectorAll(`[data-peer^="${peerId}"]`).forEach(t => t.remove())
-        document.querySelectorAll(`audio[data-peer-id="${peerId}"]`).forEach(a => { a.srcObject = null; a.remove() })
-        _updateTileLayout()
-      },
-    },
-  })
-
-  // ── Device state ───────────────────────────────────────────────────────────
-  const DEVICES_KEY = 'devchitchat_devices'
-  let availableDevices = { cameras: [], mics: [] }
-  let activeCameraId   = null
-  let activeMicId      = null
-
-  function loadSavedDevices() {
-    try { return JSON.parse(localStorage.getItem(DEVICES_KEY) ?? '{}') } catch { return {} }
-  }
-  function saveDevices(patch) {
-    localStorage.setItem(DEVICES_KEY, JSON.stringify({ ...loadSavedDevices(), ...patch }))
-  }
-  async function refreshDevices() {
-    const devices = await navigator.mediaDevices.enumerateDevices()
-    availableDevices = {
-      cameras: devices.filter(d => d.kind === 'videoinput'),
-      mics:    devices.filter(d => d.kind === 'audioinput'),
-    }
-    return availableDevices
-  }
-
-  // ── Reaction bar ───────────────────────────────────────────────────────────
-
-  function renderReactionBar(article, reactions, msgId) {
-    const bar = article.querySelector('.reaction-bar')
-    if (!bar) return
-    bar.innerHTML = reactions.map(r => `
-      <button class="reaction-pill${r.reacted ? ' reacted' : ''}"
-              data-emoji="${escHtml(r.emoji)}" data-msg-id="${escHtml(msgId)}"
-              type="button" title="${r.count} reaction${r.count !== 1 ? 's' : ''}">
-        ${r.emoji} <span class="reaction-count">${r.count}</span>
-      </button>`).join('')
-  }
-
-  // ── Hydrate seed message attachments ──────────────────────────────────────
-  // Seed messages are SSR'd without attachment HTML. Process data-attachments now.
-  // Called on initial mount and again after each SPA navigation morph.
-  function hydrateSeedMessages() {
-    const articles = Array.from(messages.querySelectorAll('article.message'))
-    let prevDateKey = null
-
-    for (const article of articles) {
-      if (article.dataset.hydrated) continue
-      article.dataset.hydrated = '1'
-
-      // Add dm-trigger to non-self sender handles
-      const handle = article.querySelector('.message-handle[data-user-id]')
-      if (handle && handle.dataset.userId !== userId) {
-        handle.classList.add('dm-trigger')
-        handle.title = 'Send a direct message'
-      }
-      // Add hover action toolbar (react for all messages; … only for own)
-      if (!article.querySelector('.message-hover-actions')) {
-        const toolbar = document.createElement('div')
-        toolbar.className = 'message-hover-actions'
-        const quickPicks = document.createElement('span')
-        quickPicks.className = 'quick-picks'
-        toolbar.appendChild(quickPicks)
-        const replyBtn = document.createElement('button')
-        replyBtn.className = 'btn-reply btn-icon'
-        replyBtn.type = 'button'
-        replyBtn.title = 'Reply in thread'
-        replyBtn.setAttribute('aria-label', 'Reply in thread')
-        replyBtn.innerHTML = '&#x21A9;'
-        toolbar.appendChild(replyBtn)
-        const reactBtn = document.createElement('button')
-        reactBtn.className = 'btn-react btn-icon'
-        reactBtn.type = 'button'
-        reactBtn.title = 'Add reaction'
-        reactBtn.setAttribute('aria-label', 'Add reaction')
-        reactBtn.textContent = '🙂'
-        toolbar.appendChild(reactBtn)
-        if (article.dataset.userId === userId) {
-          const actionsBtn = document.createElement('button')
-          actionsBtn.className = 'btn-msg-actions btn-icon'
-          actionsBtn.type = 'button'
-          actionsBtn.title = 'Message actions'
-          actionsBtn.textContent = '…'
-          toolbar.appendChild(actionsBtn)
-        }
-        article.appendChild(toolbar)
-        renderQuickPicks(toolbar)
-      }
-
-      // Hydrate "view N replies" link for seed messages that have replies
-      if (!article.querySelector('.thread-replies-link')) {
-        const replyCount = parseInt(article.dataset.replyCount ?? '0', 10)
-        if (replyCount > 0) {
-          const msgId = article.dataset.msgId
-          const link = document.createElement('a')
-          link.className = 'thread-replies-link'
-          link.href = '#'
-          link.dataset.msgId = msgId
-          link.textContent = `View ${replyCount} ${replyCount === 1 ? 'reply' : 'replies'}`
-          const reactionBar = article.querySelector('.reaction-bar')
-          if (reactionBar) article.insertBefore(link, reactionBar)
-          else article.appendChild(link)
-        }
-      }
-
-      // Apply inline rendering (URLs, @mentions) to server-rendered message text.
-      // Walk text nodes instead of replacing innerHTML so that <a> tags already
-      // rendered server-side (e.g. from markdown link syntax) are preserved.
-      const textEl = article.querySelector('.message-text')
-      if (textEl) applyInlineRenderingToTextNodes(textEl, { userHandle })
-
-      // Inject attachment HTML for seed messages that have attachments_json
-      const raw = article.dataset.attachments
-      if (raw) {
-        let attachments
-        try { attachments = JSON.parse(raw) } catch { attachments = null }
-        if (Array.isArray(attachments) && attachments.length > 0) {
-          attachments.forEach(a => article.insertAdjacentHTML('beforeend', renderAttachment(a)))
-        }
-      }
-
-      // Hydrate reaction bar for seed messages
-      const rawReactions = article.dataset.reactions
-      const msgId = article.dataset.msgId
-      if (msgId) {
-        let reactions = []
-        if (rawReactions) {
-          try { reactions = JSON.parse(rawReactions) } catch { reactions = [] }
-        }
-        renderReactionBar(article, reactions, msgId)
-      }
-
-      enableTaskCheckboxes(article)
-
-      // Date separator before this article if date changed
-      const ts = parseInt(article.querySelector('time')?.getAttribute('datetime') ?? '0', 10)
-      if (ts) {
-        // Re-format time in the browser's local timezone (SSR bakes UTC time)
-        const timeEl = article.querySelector('.message-time')
-        if (timeEl) {
-          const localTime = new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-          const editedSpan = timeEl.querySelector('.message-edited')
-          timeEl.textContent = localTime
-          if (editedSpan) timeEl.appendChild(editedSpan)
-        }
-
-        const dateKey = utcDateKey(ts)
-        if (prevDateKey && dateKey !== prevDateKey) {
-          article.before(makeDateSeparator(dateKey))
-        }
-        prevDateKey = dateKey
-      }
-    }
-  }
-  hydrateSeedMessages()
-  // Scroll to the bottom instantly on first load — requestAnimationFrame gives
-  // the browser one layout cycle to settle flex heights before we measure
-  // scrollHeight. behavior:'instant' bypasses scroll-behavior:smooth so there
-  // is no visible animation from top to bottom on mount.
-  requestAnimationFrame(() => messages.scrollTo({ top: messages.scrollHeight, behavior: 'instant' }))
-
-  // ── Load-more sentinel + pagination ───────────────────────────────────────
-
-  function showSentinel() { if (sentinelEl) sentinelEl.hidden = false }
-  function hideSentinel() { if (sentinelEl) sentinelEl.hidden = true  }
-
-  if (root.dataset.seedHasMore === 'true') showSentinel()
-
-  const loadMoreObserver = new IntersectionObserver(entries => {
-    if (!entries[0].isIntersecting || loadingMore || oldestSeq <= 1) return
-    loadingMore = true
-    ws.send({ t: 'msg.list', body: { channel_id: channelId, before_seq: oldestSeq } })
-  }, { root: messages, threshold: 0.1 })
-
-  if (sentinelEl) loadMoreObserver.observe(sentinelEl)
-
-  // ── Date separator helpers ─────────────────────────────────────────────────
-  // utcDateKey, formatDateLabel, makeDateSeparator imported from shared/messages.js
-
-  function prependMessages(msgs) {
-    const prevHeight = messages.scrollHeight
-    const fragment   = document.createDocumentFragment()
-    let   prevDate   = null
-
-    const firstExisting = messages.querySelector('article.message')
-    if (firstExisting) {
-      const ts = parseInt(firstExisting.querySelector('time')?.getAttribute('datetime') ?? '0', 10)
-      if (ts) prevDate = utcDateKey(ts)
-    }
-
-    for (const m of msgs) {
-      const dateKey = utcDateKey(m.ts)
-      if (prevDate && dateKey !== prevDate) {
-        fragment.appendChild(makeDateSeparator(prevDate))
-      }
-      fragment.appendChild(makeMessageEl(m, { userId, userHandle }))
-      prevDate = dateKey
-    }
-
-    // If last prepended message is different day from first existing, insert separator before existing
-    if (firstExisting && prevDate) {
-      const existingTs = parseInt(firstExisting.querySelector('time')?.getAttribute('datetime') ?? '0', 10)
-      const existingDateKey = existingTs ? utcDateKey(existingTs) : null
-      if (existingDateKey && prevDate !== existingDateKey) {
-        messages.insertBefore(makeDateSeparator(existingDateKey), firstExisting)
-      }
-    }
-
-    sentinelEl ? sentinelEl.after(fragment) : messages.prepend(fragment)
-    messages.scrollTop += messages.scrollHeight - prevHeight
-  }
-
-  // ── @mention picker ────────────────────────────────────────────────────────
-
-  const mentionPickerEl = document.createElement('div')
-  mentionPickerEl.id        = 'mention-picker'
-  mentionPickerEl.className = 'mention-picker'
-  mentionPickerEl.hidden    = true
-  root.querySelector('.composer')?.prepend(mentionPickerEl)
-
-  function openPicker(filtered, start) {
-    mentionFiltered = filtered
-    mentionStart    = start
-    mentionSelIdx   = 0
-    renderPicker()
-  }
-
-  function closePicker() {
-    mentionFiltered = []
-    mentionStart    = -1
-    mentionPickerEl.hidden = true
-  }
-
-  function renderPicker() {
-    if (mentionFiltered.length === 0) { closePicker(); return }
-    mentionPickerEl.innerHTML = mentionFiltered.map((m, i) => `
-      <button class="mention-option${i === mentionSelIdx ? ' selected' : ''}"
-              data-idx="${i}" type="button">
-        <span class="mention-option-name">${escHtml(m.display_name || m.handle)}</span>
-        <span class="mention-option-handle">@${escHtml(m.handle)}</span>
-      </button>`).join('')
-    mentionPickerEl.hidden = false
-  }
-
-  function selectMention(member) {
-    if (!member) return
-    const textarea = activeMentionTextarea ?? root.querySelector('#message-input')
-    if (!textarea) return
-    const cursor = textarea.selectionStart
-    const val    = textarea.value
-    const insert = `@${member.handle} `
-    textarea.value = val.substring(0, mentionStart) + insert + val.substring(cursor)
-    if (textarea.id === 'message-input') draft.set(textarea.value)
-    const pos = mentionStart + insert.length
-    textarea.setSelectionRange(pos, pos)
-    closePicker()
-    textarea.focus()
-  }
-
-  mentionPickerEl.addEventListener('mousedown', e => {
-    // mousedown instead of click so the textarea doesn't lose focus first
-    e.preventDefault()
-    const btn = e.target.closest('.mention-option')
-    if (!btn) return
-    selectMention(mentionFiltered[parseInt(btn.dataset.idx, 10)])
-  })
-
-  function handleComposerInput(e) {
-    const textarea = e.target
-    const cursor   = textarea.selectionStart
-    const before   = textarea.value.substring(0, cursor)
-    // Match a bare @ or @partial-handle with no space, anchored to end of text-so-far
-    const match    = before.match(/@([a-zA-Z0-9_.-]*)$/)
-    if (!match) { closePicker(); return }
-    const query    = match[1].toLowerCase()
-    const start    = cursor - match[0].length
-    const filtered = [...channelMembers, ...channelBots]
-      .filter(m =>
-        m.handle.toLowerCase().startsWith(query) ||
-        (m.display_name ?? '').toLowerCase().startsWith(query)
-      )
-      .slice(0, 8)
-    if (filtered.length === 0) { closePicker(); return }
-    openPicker(filtered, start)
-  }
-
-  const mainInputEl = root.querySelector('#message-input')
-
-  mainInputEl?.addEventListener('input', handleComposerInput)
-  mainInputEl?.addEventListener('focus', () => {
-    activeMentionTextarea = mainInputEl
-    root.querySelector('.composer')?.prepend(mentionPickerEl)
-  })
-
-  // ── Chat: connect + join channel ───────────────────────────────────────────
-
-  ws.on('open', () => {
-    ws.send({ t: 'hello', body: { client: 'devchitchat', resume: { session_token: null } } })
-  })
-
-  ws.on('hello_ack', () => {
-    ws.send({ t: 'channel.join', body: { channel_id: channelId } })
-  })
-
-  ws.on('channel.joined', () => {
-    if (afterSeq > 0) {
-      ws.send({ t: 'msg.list', body: { channel_id: channelId, after_seq: afterSeq } })
-    }
-    if (channelMembers.length === 0) {
-      ws.send({ t: 'user.list', body: {} })
-      ws.send({ t: 'bot.list', body: {} })
-    }
-  })
-
-  ws.on('user.list_result', ({ users }) => {
-    channelMembers = (users ?? []).filter(m => m.handle)
-  })
-
-  ws.on('bot.list_result', ({ bots }) => {
-    channelBots = (bots ?? []).filter(b => b.handle)
-  })
-
-  ws.on('msg.list_result', ({ messages: msgs, next_after_seq, has_more, direction }) => {
-    if (direction === 'before') {
-      if (msgs.length === 0) {
-        hideSentinel()
-        if (sentinelEl) loadMoreObserver.unobserve(sentinelEl)
-        loadingMore = false
-        return
-      }
-      prependMessages(msgs)
-      if (msgs[0].seq < oldestSeq) oldestSeq = msgs[0].seq
-      if (!has_more || oldestSeq <= 1) {
-        hideSentinel()
-        if (sentinelEl) loadMoreObserver.unobserve(sentinelEl)
-      }
-      loadingMore = false
-      return
-    }
-    // after_seq catch-up path
-    msgs.forEach(appendMessage)
-    if (msgs.length) afterSeq = msgs[msgs.length - 1].seq
-    else if (next_after_seq != null) afterSeq = next_after_seq
-  })
-
-  ws.on('msg.event', (body) => {
-    if (body.channel_id !== channelId) return
-    if (body.parent_msg_id) return  // thread reply — handled via thread.reply_event
-    appendMessage(body)
-    afterSeq = body.seq
-  })
-
-  ws.on('msg.deleted', ({ msg_id }) => {
-    const article = messages.querySelector(`[data-msg-id="${msg_id}"]`)
-                 ?? threadRepliesEl?.querySelector(`[data-msg-id="${msg_id}"]`)
-    if (article) article.remove()
-  })
-
-  ws.on('msg.edited', ({ msg_id, text, edited_at, rendered_text }) => {
-    const article = messages.querySelector(`[data-msg-id="${msg_id}"]`)
-                 ?? threadRepliesEl?.querySelector(`[data-msg-id="${msg_id}"]`)
-    if (!article) return
-    const textEl = article.querySelector('.message-text')
-    if (textEl) { textEl.innerHTML = sanitizeHtml(rendered_text); enableTaskCheckboxes(article) }
-    article.dataset.rawText = text
-    article.dataset.editedAt = edited_at
-    const timeEl = article.querySelector('.message-time')
-    if (timeEl) {
-      let editedSpan = timeEl.querySelector('.message-edited')
-      if (!editedSpan) {
-        editedSpan = document.createElement('span')
-        editedSpan.className = 'message-edited'
-        editedSpan.textContent = '(edited)'
-        timeEl.appendChild(editedSpan)
-      }
-    }
-  })
-
-  ws.on('reaction.event', ({ msg_id, reactions }) => {
-    // Check both the main message list and the open thread panel
-    const article = messages.querySelector(`[data-msg-id="${msg_id}"]`)
-                 ?? threadRepliesEl?.querySelector(`[data-msg-id="${msg_id}"]`)
-    if (article) renderReactionBar(article, reactions ?? [], msg_id)
-  })
-
-  ws.on('channel.updated', (body) => {
-    if (body.channel?.channel_id !== channelId) return
-    channelName.set(body.channel.name)
-    channelTopic.set(body.channel.topic ?? '')
-    document.title = `#${body.channel.name} — devchitchat`
-  })
-
-  // ── Thread panel ───────────────────────────────────────────────────────────
-
-  const threadPanelEl  = document.getElementById('thread-panel')
-  const threadBodyEl   = threadPanelEl?.querySelector('.thread-body')
-  const threadAnchorEl = document.getElementById('thread-anchor')
-  const threadRepliesEl = document.getElementById('thread-replies')
-  const threadInputEl  = document.getElementById('thread-input')
-  const threadSendBtn  = document.getElementById('thread-send')
-
-  let activeThreadParentId = null
-
-  function updateReplyCountLink(article, count) {
-    let link = article.querySelector('.thread-replies-link')
-    if (count > 0) {
-      const label = `View ${count} ${count === 1 ? 'reply' : 'replies'}`
-      if (!link) {
-        link = document.createElement('a')
-        link.className = 'thread-replies-link'
-        link.href = '#'
-        link.dataset.msgId = article.dataset.msgId
-        const reactionBar = article.querySelector('.reaction-bar')
-        if (reactionBar) article.insertBefore(link, reactionBar)
-        else article.appendChild(link)
-      }
-      link.textContent = label
-    }
-  }
-
-  function openThread(parentMsgId) {
-    activeThreadParentId = parentMsgId
-    const parentArticle = messages.querySelector(`[data-msg-id="${parentMsgId}"]`)
-
-    // Render anchor (clone parent message, strip hover actions)
-    if (threadAnchorEl) {
-      threadAnchorEl.innerHTML = ''
-      if (parentArticle) {
-        const clone = parentArticle.cloneNode(true)
-        clone.querySelector('.message-hover-actions')?.remove()
-        clone.querySelector('.thread-replies-link')?.remove()
-        threadAnchorEl.appendChild(clone)
-      }
-    }
-
-    if (threadRepliesEl) threadRepliesEl.innerHTML = '<p class="thread-loading">Loading…</p>'
-    threadPanelEl?.classList.add('active')
-
-    ws.send({ t: 'thread.list', body: { parent_msg_id: parentMsgId, channel_id: channelId } })
-
-    setTimeout(() => threadInputEl?.focus(), 50)
-  }
-
-  function closeThread() {
-    threadPanelEl?.classList.remove('active')
-    activeThreadParentId = null
-    if (threadAnchorEl) threadAnchorEl.innerHTML = ''
-    if (threadRepliesEl) threadRepliesEl.innerHTML = ''
-  }
-
-  // Use delegation so both the top ✕ and the mobile footer "Close thread" button work
-  threadPanelEl?.addEventListener('click', e => {
-    if (e.target.closest('.thread-panel-close')) closeThread()
-  })
-
-  function sendThreadReply() {
-    const text = threadInputEl?.value.trim()
-    if (!text || !activeThreadParentId) return
-    ws.send({ t: 'msg.send', body: { channel_id: channelId, text, parent_msg_id: activeThreadParentId } })
-    if (threadInputEl) threadInputEl.value = ''
-  }
-
-  threadSendBtn?.addEventListener('click', sendThreadReply)
-  threadInputEl?.addEventListener('input', handleComposerInput)
-  threadInputEl?.addEventListener('focus', () => {
-    activeMentionTextarea = threadInputEl
-    root.querySelector('.thread-composer')?.prepend(mentionPickerEl)
-  })
-  threadInputEl?.addEventListener('keydown', e => {
-    if (!mentionPickerEl.hidden) {
-      if (e.key === 'ArrowDown') { e.preventDefault(); mentionSelIdx = Math.min(mentionSelIdx + 1, mentionFiltered.length - 1); renderPicker(); return }
-      if (e.key === 'ArrowUp')   { e.preventDefault(); mentionSelIdx = Math.max(mentionSelIdx - 1, 0); renderPicker(); return }
-      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); selectMention(mentionFiltered[mentionSelIdx]); return }
-      if (e.key === 'Escape') { closePicker(); return }
-    }
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendThreadReply() }
-  })
-
-  ws.on('thread.list_result', ({ parent_msg_id, replies }) => {
-    if (parent_msg_id !== activeThreadParentId) return
-    if (!threadRepliesEl) return
-    threadRepliesEl.innerHTML = ''
-    if (!replies.length) {
-      threadRepliesEl.innerHTML = '<p class="thread-empty">No replies yet. Be the first!</p>'
-      return
-    }
-    for (const reply of replies) {
-      const article = makeMessageEl(reply, { userId, userHandle, isThreadReply: true })
-      renderQuickPicks(article.querySelector('.message-hover-actions'))
-      if (reply.reactions?.length) renderReactionBar(article, reply.reactions, reply.msg_id)
-      threadRepliesEl.appendChild(article)
-    }
-    if (threadBodyEl) threadBodyEl.scrollTop = threadBodyEl.scrollHeight
-  })
-
-  ws.on('thread.reply_event', ({ parent_msg_id, channel_id: evtChannelId, reply }) => {
-    if (evtChannelId !== channelId) return
-
-    // Update reply count on parent message in the channel list
-    const parentArticle = messages.querySelector(`[data-msg-id="${parent_msg_id}"]`)
-    if (parentArticle) {
-      const current = parseInt(parentArticle.dataset.replyCount ?? '0', 10)
-      const next = current + 1
-      parentArticle.dataset.replyCount = String(next)
-      updateReplyCountLink(parentArticle, next)
-    }
-
-    // Append reply to thread panel if it's open for this parent
-    if (activeThreadParentId === parent_msg_id && threadRepliesEl) {
-      const emptyEl = threadRepliesEl.querySelector('.thread-empty')
-      if (emptyEl) emptyEl.remove()
-      const article = makeMessageEl(reply, { userId, userHandle, isThreadReply: true })
-      renderQuickPicks(article.querySelector('.message-hover-actions'))
-      threadRepliesEl.appendChild(article)
-      if (threadBodyEl) threadBodyEl.scrollTop = threadBodyEl.scrollHeight
-    }
-  })
-
-  // Delegated click: reply button → open thread panel
-  messages.addEventListener('click', e => {
-    const btn = e.target.closest('.btn-reply')
-    if (!btn) return
-    e.stopPropagation()
-    const article = btn.closest('article.message')
-    const msgId = article?.dataset.msgId
-    if (!msgId) return
-    openThread(msgId)
-  })
-
-  // Delegated click: "view N replies" link → open thread panel
-  messages.addEventListener('click', e => {
-    const link = e.target.closest('.thread-replies-link')
-    if (!link) return
-    e.preventDefault()
-    e.stopPropagation()
-    const msgId = link.dataset.msgId
-    if (!msgId) return
-    openThread(msgId)
-  })
-
-  // ── Chat: composer ─────────────────────────────────────────────────────────
-
-  // Pending attachments: [{ upload_id, url, original_name, mime_type, size_bytes }]
-  let pendingAttachments = []
-
-  const composerEl = root.querySelector('.composer')
-  const textareaEl = root.querySelector('#message-input')
-
-  // Attachment chips container — injected above the textarea
-  const chipsEl = document.createElement('div')
-  chipsEl.className = 'attachment-chips'
-  composerEl?.insertBefore(chipsEl, textareaEl)
-
-  // Hidden file input
-  const fileInputEl = document.createElement('input')
-  fileInputEl.type = 'file'
-  fileInputEl.multiple = true
-  fileInputEl.style.display = 'none'
-  fileInputEl.setAttribute('aria-hidden', 'true')
-  composerEl?.appendChild(fileInputEl)
-
-  // Attach-file button (paperclip)
-  const btnAttachEl = document.createElement('button')
-  btnAttachEl.type = 'button'
-  btnAttachEl.className = 'btn-attach btn-icon'
-  btnAttachEl.title = 'Attach file'
-  btnAttachEl.setAttribute('aria-label', 'Attach file')
-  btnAttachEl.innerHTML = '📎'
-  // Insert before the send button
-  const btnSendEl = composerEl?.querySelector('.btn-send')
-  if (btnSendEl && composerEl) composerEl.insertBefore(btnAttachEl, btnSendEl)
-
-  btnAttachEl.addEventListener('click', () => fileInputEl.click())
-  fileInputEl.addEventListener('change', () => {
-    uploadFiles([...fileInputEl.files])
-    fileInputEl.value = ''
-  })
-
-  // Drag-and-drop onto the textarea
-  let dropOverlayEl = null
-
-  function ensureDropOverlay() {
-    if (dropOverlayEl) return dropOverlayEl
-    dropOverlayEl = document.createElement('div')
-    dropOverlayEl.className = 'drop-overlay'
-    dropOverlayEl.textContent = 'Drop to attach'
-    composerEl?.appendChild(dropOverlayEl)
-    return dropOverlayEl
-  }
-
-  composerEl?.addEventListener('dragover', e => {
-    if (!e.dataTransfer.types.includes('Files')) return
-    e.preventDefault()
-    ensureDropOverlay().hidden = false
-  })
-
-  composerEl?.addEventListener('dragleave', e => {
-    if (composerEl.contains(e.relatedTarget)) return
-    if (dropOverlayEl) dropOverlayEl.hidden = true
-  })
-
-  composerEl?.addEventListener('drop', e => {
-    e.preventDefault()
-    if (dropOverlayEl) dropOverlayEl.hidden = true
-    const files = [...(e.dataTransfer.files ?? [])]
-    if (files.length > 0) uploadFiles(files)
-  })
-
-  // Paste image from clipboard (screenshots, copied images)
-  textareaEl?.addEventListener('paste', e => {
-    const items = [...(e.clipboardData?.items ?? [])]
-    const imageFiles = items
-      .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
-      .map(item => {
-        const file = item.getAsFile()
-        if (!file) return null
-        if (!file.name) {
-          const ext = item.type.split('/')[1] ?? 'png'
-          return new File([file], `paste-${Date.now()}.${ext}`, { type: item.type })
-        }
-        return file
-      })
-      .filter(Boolean)
-    if (imageFiles.length === 0) return
-    e.preventDefault()
-    uploadFiles(imageFiles)
-  })
-
-  async function uploadFiles(files) {
-    for (const file of files) {
-      await uploadOneFile(file, channelId)
-    }
-  }
-
-  async function uploadOneFile(file, targetChannelId) {
-    const formData = new FormData()
-    formData.append('file', file)
-    formData.append('channel_id', targetChannelId)
-
-    let res
-    try {
-      res = await fetch(`${window.__BASE_PATH__}/api/uploads`, { method: 'POST', body: formData })
-    } catch {
-      showComposerError(`Upload failed: network error`)
-      return null
-    }
-
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}))
-      showComposerError(`Upload failed: ${body.error ?? res.statusText}`)
-      return null
-    }
-
-    const attachment = await res.json()
-    pendingAttachments.push(attachment)
-    renderChips()
-    return attachment
-  }
-
-  function renderChips() {
-    const html = pendingAttachments.map((a, i) => `
-      <span class="attachment-chip" data-index="${i}">
-        <span class="attachment-chip-name">${escHtml(a.original_name)}</span>
-        <button type="button" class="attachment-chip-remove" data-index="${i}" aria-label="Remove ${escHtml(a.original_name)}">×</button>
-      </span>
-    `).join('')
-    chipsEl.innerHTML = html
-    chipsEl.hidden = pendingAttachments.length === 0
-    if (composeChipsEl) {
-      composeChipsEl.innerHTML = html
-      composeChipsEl.hidden = pendingAttachments.length === 0
-    }
-  }
-
-  function _removeChipAt(idx) {
-    pendingAttachments.splice(idx, 1)
-    renderChips()
-  }
-
-  chipsEl.addEventListener('click', e => {
-    const btn = e.target.closest('.attachment-chip-remove')
-    if (!btn) return
-    _removeChipAt(parseInt(btn.dataset.index, 10))
-  })
-
-  function showComposerError(msg) {
-    const target = composeOpen ? composeChipsEl : chipsEl
-    if (!target) return
-    const chip = document.createElement('span')
-    chip.className = 'attachment-chip attachment-chip-error'
-    chip.textContent = msg
-    target.appendChild(chip)
-    target.hidden = false
-    setTimeout(() => chip.remove(), 5000)
-  }
-
-  // ── Compose overlay ───────────────────────────────────────────────────────
-  const composeOverlayEl   = root.querySelector('#compose-overlay')
-  const composeTaEl        = document.getElementById('compose-textarea')
-  const composePreviewEl   = document.getElementById('compose-preview')
-  const composeCollapseBtn = document.getElementById('btn-compose-collapse')
-  const composeSendBtn     = document.getElementById('compose-send')
-  const composeUrgentBtn   = document.getElementById('compose-urgent-toggle')
-  const composeChipsEl     = document.getElementById('compose-chips')
-  const composeBtnAttach   = document.getElementById('compose-attach')
-
-  let composeOpen = false
-
-  function openComposeMode() {
-    if (composeOpen) return
-    composeOpen = true
-    if (composeTaEl) composeTaEl.value = draft()
-    messages.hidden = true
-    composerEl.hidden = true
-    if (composeOverlayEl) composeOverlayEl.hidden = false
-    _switchComposeTab('write')
-    requestAnimationFrame(() => {
-      if (!composeTaEl) return
-      composeTaEl.focus()
-      const len = composeTaEl.value.length
-      composeTaEl.setSelectionRange(len, len)
-    })
-  }
-
-  function closeComposeMode() {
-    if (!composeOpen) return
-    composeOpen = false
-    messages.hidden = false
-    composerEl.hidden = false
-    if (composeOverlayEl) composeOverlayEl.hidden = true
-    textareaEl?.focus()
-  }
-
-  function toggleComposeMode() {
-    composeOpen ? closeComposeMode() : openComposeMode()
-  }
-
-  function _switchComposeTab(tab) {
-    root.querySelectorAll('.compose-tab').forEach(btn => {
-      const active = btn.dataset.tab === tab
-      btn.classList.toggle('compose-tab--active', active)
-      btn.setAttribute('aria-selected', String(active))
-    })
-    if (composeTaEl) composeTaEl.hidden = tab !== 'write'
-    if (composePreviewEl) composePreviewEl.hidden = tab !== 'preview'
-    if (tab === 'preview') _renderComposePreview()
-  }
-
-  async function _renderComposePreview() {
-    const text = composeTaEl?.value ?? ''
-    if (!text.trim()) {
-      if (composePreviewEl) composePreviewEl.innerHTML = '<p style="color:var(--text-muted)">Nothing to preview yet.</p>'
-      return
-    }
-    try {
-      const res = await fetch(`${window.__BASE_PATH__}/api/preview`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text }),
-      })
-      if (res.ok) {
-        const { html } = await res.json()
-        if (composePreviewEl) composePreviewEl.innerHTML = sanitizeHtml(html)
-      }
-    } catch {
-      if (composePreviewEl) composePreviewEl.textContent = text
-    }
-  }
-
-  // Sync compose textarea → draft signal
-  composeTaEl?.addEventListener('input', () => { draft.set(composeTaEl.value) })
-
-  // Ctrl+Enter / Cmd+Enter in compose textarea → send and collapse
-  composeTaEl?.addEventListener('keydown', e => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-      e.preventDefault()
-      sendMessage()
-      closeComposeMode()
-    }
-  })
-
-  // Tab strip
-  root.querySelectorAll('.compose-tab').forEach(btn => {
-    btn.addEventListener('click', () => _switchComposeTab(btn.dataset.tab))
-  })
-
-  // Collapse, send, and attach buttons
-  composeCollapseBtn?.addEventListener('click', closeComposeMode)
-  composeSendBtn?.addEventListener('click', () => { sendMessage(); closeComposeMode() })
-  composeUrgentBtn?.addEventListener('click', () => toggleUrgentMode())
-  composeBtnAttach?.addEventListener('click', () => fileInputEl.click())
-  composeChipsEl?.addEventListener('click', e => {
-    const btn = e.target.closest('.attachment-chip-remove')
-    if (!btn) return
-    _removeChipAt(parseInt(btn.dataset.index, 10))
-  })
-
-  // Paste images into the compose textarea
-  composeTaEl?.addEventListener('paste', e => {
-    const items = [...(e.clipboardData?.items ?? [])]
-    const imageFiles = items
-      .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
-      .map(item => {
-        const file = item.getAsFile()
-        if (!file) return null
-        if (!file.name) {
-          const ext = item.type.split('/')[1] ?? 'png'
-          return new File([file], `paste-${Date.now()}.${ext}`, { type: item.type })
-        }
-        return file
-      })
-      .filter(Boolean)
-    if (imageFiles.length === 0) return
-    e.preventDefault()
-    uploadFiles(imageFiles)
-  })
-
-  // Drag-and-drop files onto the compose overlay
-  let composeDropOverlayEl = null
-  function ensureComposeDropOverlay() {
-    if (composeDropOverlayEl) return composeDropOverlayEl
-    composeDropOverlayEl = document.createElement('div')
-    composeDropOverlayEl.className = 'drop-overlay'
-    composeDropOverlayEl.textContent = 'Drop to attach'
-    composeOverlayEl?.appendChild(composeDropOverlayEl)
-    return composeDropOverlayEl
-  }
-  composeOverlayEl?.addEventListener('dragover', e => {
-    if (!e.dataTransfer.types.includes('Files')) return
-    e.preventDefault()
-    ensureComposeDropOverlay().hidden = false
-  })
-  composeOverlayEl?.addEventListener('dragleave', e => {
-    if (composeOverlayEl.contains(e.relatedTarget)) return
-    if (composeDropOverlayEl) composeDropOverlayEl.hidden = true
-  })
-  composeOverlayEl?.addEventListener('drop', e => {
-    e.preventDefault()
-    if (composeDropOverlayEl) composeDropOverlayEl.hidden = true
-    const files = [...(e.dataTransfer.files ?? [])]
-    if (files.length > 0) uploadFiles(files)
-  })
-
-  // Ctrl+E / Cmd+E anywhere to toggle compose mode
-  document.addEventListener('keydown', e => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
-      e.preventDefault()
-      toggleComposeMode()
-    }
-  })
-
-  // ── Urgent send ───────────────────────────────────────────────────────────
-  const urgentMode = signal(false)
-  const composerFooter = root.querySelector('.composer')
-
-  const urgentClass = computed(() => ({ 'is-urgent': urgentMode() }))
-
-  function toggleUrgentMode() {
-    urgentMode.set(!urgentMode())
-    composerFooter?.classList.toggle('composer-urgent', urgentMode())
-    composeOverlayEl?.classList.toggle('composer-urgent', urgentMode())
-    composeUrgentBtn?.classList.toggle('is-urgent', urgentMode())
-  }
-
-  function sendMessage({ priority } = {}) {
-    const text = draft().trim()
-    if (!text && pendingAttachments.length === 0) return
-    const resolvedPriority = priority ?? (urgentMode() ? 'now' : 'normal')
-    ws.send({
-      t: 'msg.send',
-      body: {
-        channel_id: channelId,
-        text,
-        client_msg_id: `local_${Date.now()}`,
-        priority: resolvedPriority,
-        attachments: pendingAttachments.map(a => ({
-          upload_id: a.upload_id,
-          url: a.url,
-          filename: a.original_name,
-          mime_type: a.mime_type,
-          size_bytes: a.size_bytes,
-        }))
-      }
-    })
-    draft.set('')
-    pendingAttachments = []
-    renderChips()
-  }
-
-  function handleComposerKey(e) {
-    if (!mentionPickerEl.hidden) {
-      if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        mentionSelIdx = Math.min(mentionSelIdx + 1, mentionFiltered.length - 1)
-        renderPicker()
-        return
-      }
-      if (e.key === 'ArrowUp') {
-        e.preventDefault()
-        mentionSelIdx = Math.max(mentionSelIdx - 1, 0)
-        renderPicker()
-        return
-      }
-      if (e.key === 'Enter' || e.key === 'Tab') {
-        e.preventDefault()
-        selectMention(mentionFiltered[mentionSelIdx])
-        return
-      }
-      if (e.key === 'Escape') {
-        closePicker()
-        return
-      }
-    }
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      const priority = e.ctrlKey || e.metaKey ? 'now' : undefined
-      sendMessage({ priority })
-    }
-  }
-
-  function appendMessage({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, attachments, reactions }) {
-    if (messages.querySelector(`[data-msg-id="${msg_id}"]`)) return
-
-    // Date separator if day changed
-    const dateKey = utcDateKey(ts)
-    const lastMsg = messages.querySelector('article.message:last-of-type')
-    if (lastMsg) {
-      const lastTs = parseInt(lastMsg.querySelector('time')?.getAttribute('datetime') ?? '0', 10)
-      if (lastTs && utcDateKey(lastTs) !== dateKey) {
-        messages.appendChild(makeDateSeparator(dateKey))
-      }
-    }
-
-    const article = makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, text, rendered_text, attachments }, { userId, userHandle })
-
-    // Ensure reaction bar exists in dynamically created messages
-    if (!article.querySelector('.reaction-bar')) {
-      const bar = document.createElement('div')
-      bar.className = 'reaction-bar'
-      article.appendChild(bar)
-    }
-
-    enableTaskCheckboxes(article)
-    const toolbar = article.querySelector('.message-hover-actions')
-    if (toolbar) renderQuickPicks(toolbar)
-    messages.appendChild(article)
-    renderReactionBar(article, reactions ?? [], msg_id)
-    messages.scrollTop = messages.scrollHeight
-  }
-
-  // renderAttachment, formatBytes imported from shared/messages.js
-
-  function sanitizeHtml(html) {
-    return String(html ?? '').replaceAll('<script>', '').replaceAll('</script>', '')
-  }
-
-  // Enable task-list checkboxes so they're clickable (renderer marks them disabled)
-  function enableTaskCheckboxes(article) {
-    for (const cb of article.querySelectorAll('.task-list-item-checkbox[disabled]')) {
-      cb.removeAttribute('disabled')
-    }
-  }
-
-  // Delegated click: message sender name → open DM
-  messages.addEventListener('click', e => {
-    const handle = e.target.closest('.dm-trigger')
-    if (!handle) return
-    const targetUserId = handle.dataset.userId
-    if (!targetUserId || targetUserId === userId) return
-    ws.send({ t: 'dm.open', body: { target_user_id: targetUserId } })
-  })
-
-  // ── Emoji picker ──────────────────────────────────────────────────────────
-
-  const RECENT_KEY = 'devchitchat_recent_emoji'
-  const RECENT_MAX = 24
-
-  function loadRecentEmoji() {
-    try { return JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') } catch { return [] }
-  }
-
-  function saveRecentEmoji(emoji) {
-    let recents = loadRecentEmoji().filter(e => e !== emoji)
-    recents.unshift(emoji)
-    if (recents.length > RECENT_MAX) recents = recents.slice(0, RECENT_MAX)
-    localStorage.setItem(RECENT_KEY, JSON.stringify(recents))
-    refreshAllQuickPicks()
-  }
-
-  function renderQuickPicks(toolbar) {
-    const slot = toolbar.querySelector('.quick-picks')
-    if (!slot) return
-    const recents = loadRecentEmoji().slice(0, 4)
-    slot.innerHTML = recents.map(emoji =>
-      `<button class="btn-quick-react btn-icon" data-emoji="${escHtml(emoji)}" type="button" title="${escHtml(emoji)}">${emoji}</button>`
-    ).join('')
-  }
-
-  function refreshAllQuickPicks() {
-    for (const toolbar of messages.querySelectorAll('.message-hover-actions')) {
-      renderQuickPicks(toolbar)
-    }
-    if (threadRepliesEl) {
-      for (const toolbar of threadRepliesEl.querySelectorAll('.message-hover-actions')) {
-        renderQuickPicks(toolbar)
-      }
-    }
-  }
-
-  let emojiPickerEl = null
-  let emojiPickerCurrentCat = 'smileys'
-  let emojiPickerTarget = null  // msg_id the picker is for
-
-  function buildEmojiPicker() {
-    emojiPickerEl = document.createElement('div')
-    emojiPickerEl.className = 'emoji-picker'
-
-    const searchInput = document.createElement('input')
-    searchInput.type = 'search'
-    searchInput.className = 'emoji-picker-search'
-    searchInput.placeholder = 'Search emoji…'
-    searchInput.setAttribute('aria-label', 'Search emoji')
-    emojiPickerEl.appendChild(searchInput)
-
-    const tabs = document.createElement('div')
-    tabs.className = 'emoji-picker-tabs'
-    for (const cat of CATEGORIES) {
-      const btn = document.createElement('button')
-      btn.type = 'button'
-      btn.className = 'emoji-picker-tab' + (cat.id === emojiPickerCurrentCat ? ' active' : '')
-      btn.dataset.catId = cat.id
-      btn.textContent = cat.label
-      btn.title = cat.id
-      tabs.appendChild(btn)
-    }
-    emojiPickerEl.appendChild(tabs)
-
-    const grid = document.createElement('div')
-    grid.className = 'emoji-picker-grid'
-    emojiPickerEl.appendChild(grid)
-
-    tabs.addEventListener('click', e => {
-      const btn = e.target.closest('.emoji-picker-tab')
-      if (!btn) return
-      emojiPickerCurrentCat = btn.dataset.catId
-      tabs.querySelectorAll('.emoji-picker-tab').forEach(b => b.classList.toggle('active', b.dataset.catId === emojiPickerCurrentCat))
-      searchInput.value = ''
-      renderEmojiGrid(null)
-    })
-
-    searchInput.addEventListener('input', () => {
-      renderEmojiGrid(searchInput.value.trim().toLowerCase())
-    })
-
-    grid.addEventListener('click', e => {
-      const btn = e.target.closest('button[data-emoji]')
-      if (!btn) return
-      const emoji = btn.dataset.emoji
-      saveRecentEmoji(emoji)
-      emojiPickerEl.dispatchEvent(new CustomEvent('emoji:pick', { bubbles: true, detail: { emoji } }))
-    })
-
-    renderEmojiGrid(null)
-    return emojiPickerEl
-  }
-
-  function renderEmojiGrid(query) {
-    if (!emojiPickerEl) return
-    const grid = emojiPickerEl.querySelector('.emoji-picker-grid')
-    if (!grid) return
-
-    let emojiList
-    if (query) {
-      // Search across all categories
-      const allEmoji = CATEGORIES.flatMap(c => c.emoji)
-      const unique = [...new Set(allEmoji)]
-      emojiList = unique.filter(e => {
-        const name = EMOJI_NAMES[e] ?? ''
-        return name.includes(query) || e.includes(query)
-      })
-    } else {
-      if (emojiPickerCurrentCat === 'recent') {
-        emojiList = loadRecentEmoji()
-      } else {
-        const cat = CATEGORIES.find(c => c.id === emojiPickerCurrentCat)
-        emojiList = cat ? cat.emoji : []
-      }
-    }
-
-    grid.innerHTML = emojiList.map(e =>
-      `<button type="button" data-emoji="${escHtml(e)}" title="${escHtml(EMOJI_NAMES[e] ?? e)}">${e}</button>`
-    ).join('')
-  }
-
-  function getOrBuildEmojiPicker() {
-    if (!emojiPickerEl) buildEmojiPicker()
-    return emojiPickerEl
-  }
-
-  function openEmojiPickerAt(anchorEl, msgId) {
-    emojiPickerTarget = msgId
-    const picker = getOrBuildEmojiPicker()
-
-    // Refresh recent tab if active
-    if (emojiPickerCurrentCat === 'recent') renderEmojiGrid(null)
-
-    // Attach handler once (use named function to avoid duplicates)
-    picker.onEmojiPickHandler = (e) => {
-      const { emoji } = e.detail
-      closeEmojiPicker()
-      ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    }
-    picker.removeEventListener('emoji:pick', picker._boundEmojiPick)
-    picker._boundEmojiPick = picker.onEmojiPickHandler
-    picker.addEventListener('emoji:pick', picker._boundEmojiPick)
-
-    document.body.appendChild(picker)
-    picker.style.position = 'fixed'
-    picker.style.zIndex = '400'
-
-    // Position below the anchor, viewport-aware
-    const rect = anchorEl.getBoundingClientRect()
-    picker.style.top = `${rect.bottom + 4}px`
-    picker.style.left = `${rect.left}px`
-
-    // Force layout so getBoundingClientRect is accurate
-    requestAnimationFrame(() => {
-      const pickerRect = picker.getBoundingClientRect()
-      let left = rect.left
-      if (left + pickerRect.width > window.innerWidth - 8) {
-        left = window.innerWidth - 8 - pickerRect.width
-      }
-      if (left < 8) left = 8
-      picker.style.left = `${left}px`
-
-      // Flip above if not enough room below
-      if (rect.bottom + 4 + pickerRect.height > window.innerHeight - 8) {
-        picker.style.top = `${rect.top - 4 - pickerRect.height}px`
-      }
-    })
-  }
-
-  function closeEmojiPicker() {
-    if (emojiPickerEl && emojiPickerEl.parentNode) emojiPickerEl.parentNode.removeChild(emojiPickerEl)
-    emojiPickerTarget = null
-  }
-
-  document.addEventListener('click', e => {
-    // Close emoji picker on click-outside
-    if (emojiPickerEl && emojiPickerEl.parentNode && !emojiPickerEl.contains(e.target)) {
-      const isReactionAddBtn = e.target.closest('.reaction-add') || e.target.closest('.btn-react')
-      if (!isReactionAddBtn) closeEmojiPicker()
-    }
-  }, { capture: true })
-
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape') {
-      if (activeEditCancel) { activeEditCancel(); return }
-      if (composeOpen) { closeComposeMode(); return }
-      closeEmojiPicker()
-    }
-  })
-
-  // Delegated click on task-list checkboxes — toggle [ ] ↔ [x] and save via msg.edit
-  messages.addEventListener('click', e => {
-    const cb = e.target.closest('.task-list-item-checkbox')
-    if (!cb) return
-    e.preventDefault()  // we control the toggle ourselves
-    const article = cb.closest('article.message')
-    if (!article) return
-    const rawText = article.dataset.rawText
-    if (!rawText) return
-    const allCbs = Array.from(article.querySelectorAll('.task-list-item-checkbox'))
-    const idx = allCbs.indexOf(cb)
-    if (idx === -1) return
-    let count = 0
-    const newText = rawText.replace(/\[([ xX])\]/g, (match, state) => {
-      if (count++ !== idx) return match
-      return state.trim() === '' ? '[x]' : '[ ]'
-    })
-    if (newText === rawText) return
-    cb.checked = !cb.checked  // optimistic toggle
-    article.dataset.rawText = newText
-    ws.send({ t: 'msg.edit', body: { msg_id: article.dataset.msgId, channel_id: channelId, text: newText } })
-  })
-
-  // Delegated click on .btn-quick-react — send reaction without opening picker
-  messages.addEventListener('click', e => {
-    const btn = e.target.closest('.btn-quick-react')
-    if (!btn) return
-    e.stopPropagation()
-    const emoji = btn.dataset.emoji
-    const msgId = btn.closest('article.message')?.dataset.msgId
-    if (!emoji || !msgId) return
-    saveRecentEmoji(emoji)
-    ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-  })
-
-  // Delegated click on .reaction-pill — toggle reaction
-  messages.addEventListener('click', e => {
-    const pill = e.target.closest('.reaction-pill')
-    if (!pill) return
-    e.stopPropagation()
-    const emoji = pill.dataset.emoji
-    const msgId = pill.dataset.msgId
-    if (!emoji || !msgId) return
-    if (pill.classList.contains('reacted')) {
-      ws.send({ t: 'reaction.remove', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    } else {
-      ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    }
-  })
-
-  // Delegated click on .reaction-add or .btn-react — open emoji picker
-  messages.addEventListener('click', e => {
-    const addBtn = e.target.closest('.reaction-add')
-    const reactBtn = e.target.closest('.btn-react')
-    const btn = addBtn ?? reactBtn
-    if (!btn) return
-    e.stopPropagation()
-    const msgId = addBtn?.dataset.msgId ?? btn.closest('article.message')?.dataset.msgId
-    if (!msgId) return
-    // Toggle: close if already open for this message
-    if (emojiPickerEl && emojiPickerEl.parentNode && emojiPickerTarget === msgId) {
-      closeEmojiPicker()
-      return
-    }
-    openEmojiPickerAt(btn, msgId)
-  })
-
-  // ── Thread panel: mirror all message-level interaction handlers ───────────
-  // threadRepliesEl is a sibling outside the island root, so handlers on
-  // `messages` don't reach it — duplicate the relevant delegated clicks here.
-
-  threadRepliesEl?.addEventListener('click', e => {
-    const btn = e.target.closest('.btn-quick-react')
-    if (!btn) return
-    e.stopPropagation()
-    const emoji = btn.dataset.emoji
-    const msgId = btn.closest('article.message')?.dataset.msgId
-    if (!emoji || !msgId) return
-    saveRecentEmoji(emoji)
-    ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-  })
-
-  threadRepliesEl?.addEventListener('click', e => {
-    const pill = e.target.closest('.reaction-pill')
-    if (!pill) return
-    e.stopPropagation()
-    const emoji = pill.dataset.emoji
-    const msgId = pill.dataset.msgId
-    if (!emoji || !msgId) return
-    if (pill.classList.contains('reacted')) {
-      ws.send({ t: 'reaction.remove', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    } else {
-      ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    }
-  })
-
-  threadRepliesEl?.addEventListener('click', e => {
-    const addBtn = e.target.closest('.reaction-add')
-    const reactBtn = e.target.closest('.btn-react')
-    const btn = addBtn ?? reactBtn
-    if (!btn) return
-    e.stopPropagation()
-    const msgId = addBtn?.dataset.msgId ?? btn.closest('article.message')?.dataset.msgId
-    if (!msgId) return
-    if (emojiPickerEl && emojiPickerEl.parentNode && emojiPickerTarget === msgId) {
-      closeEmojiPicker()
-      return
-    }
-    openEmojiPickerAt(btn, msgId)
-  })
-
-  threadRepliesEl?.addEventListener('click', e => {
-    const btn = e.target.closest('.btn-msg-actions')
-    if (!btn) return
-    e.stopPropagation()
-    const article = btn.closest('article.message')
-    if (article) showContextMenu(article, btn)
-  })
-
-  threadRepliesEl?.addEventListener('click', e => {
-    const handle = e.target.closest('.dm-trigger')
-    if (!handle) return
-    const targetUserId = handle.dataset.userId
-    if (!targetUserId || targetUserId === userId) return
-    ws.send({ t: 'dm.open', body: { target_user_id: targetUserId } })
-  })
-
-  // ── Mobile long-press → action sheet with emoji picker ────────────────────
-
-  addLongPress(messages, (e) => {
-    const article = e.target.closest?.('article.message')
-    if (!article) return
-    const msgId = article.dataset.msgId
-    if (!msgId) return
-
-    const itemsContainer = getItemsContainer()
-    itemsContainer.innerHTML = ''
-
-    const pickerWrapper = document.createElement('div')
-    pickerWrapper.className = 'action-sheet-emoji-picker-wrap'
-
-    const picker = getOrBuildEmojiPicker()
-    pickerWrapper.appendChild(picker)
-    itemsContainer.appendChild(pickerWrapper)
-
-    picker.removeEventListener('emoji:pick', picker._boundEmojiPick)
-    picker._boundEmojiPick = (ev) => {
-      const { emoji } = ev.detail
-      saveRecentEmoji(emoji)
-      dismissActionSheet()
-      ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
-    }
-    picker.addEventListener('emoji:pick', picker._boundEmojiPick)
-    emojiPickerTarget = msgId
-
-    showActionSheet({ label: 'React to this message', items: [] })
-  })
-
-  // ── Inline edit ────────────────────────────────────────────────────────────
-
-  let activeEditCancel = null
-
-  function startInlineEdit(article) {
-    if (article.querySelector('.message-edit-wrap')) return
-    const textEl  = article.querySelector('.message-text')
-    if (!textEl) return
-    const rawText = article.dataset.rawText ?? ''
-
-    // Build the edit widget
-    const wrap = document.createElement('div')
-    wrap.className = 'message-edit-wrap'
-
-    const tabStrip = document.createElement('div')
-    tabStrip.className = 'message-edit-tabs'
-    tabStrip.setAttribute('role', 'tablist')
-    tabStrip.innerHTML = `
-      <button class="message-edit-tab message-edit-tab--active" data-tab="write" role="tab" aria-selected="true" type="button">Write</button>
-      <button class="message-edit-tab" data-tab="preview" role="tab" aria-selected="false" type="button">Preview</button>`
-
-    const textarea = document.createElement('textarea')
-    textarea.className = 'message-edit-input'
-    textarea.value = rawText
-
-    const preview = document.createElement('div')
-    preview.className = 'message-edit-preview message-text'
-    preview.hidden = true
-    preview.setAttribute('aria-live', 'polite')
-
-    const toolbar = document.createElement('div')
-    toolbar.className = 'message-edit-toolbar'
-    toolbar.innerHTML = `
-      <span class="message-edit-hint">Ctrl+Enter to save · Esc to cancel</span>
-      <button class="btn-ghost btn-edit-cancel" type="button">Cancel</button>
-      <button class="btn-primary btn-edit-save" type="button">Save</button>`
-
-    wrap.append(tabStrip, textarea, preview, toolbar)
-    textEl.replaceWith(wrap)
-    textarea.focus()
-    textarea.setSelectionRange(rawText.length, rawText.length)
-
-    // Tab switching
-    tabStrip.addEventListener('click', async e => {
-      const btn = e.target.closest('.message-edit-tab')
-      if (!btn) return
-      const tab = btn.dataset.tab
-      tabStrip.querySelectorAll('.message-edit-tab').forEach(b => {
-        b.classList.toggle('message-edit-tab--active', b === btn)
-        b.setAttribute('aria-selected', String(b === btn))
-      })
-      textarea.hidden = tab !== 'write'
-      preview.hidden  = tab !== 'preview'
-      if (tab === 'preview') {
-        const text = textarea.value.trim()
-        if (!text) { preview.innerHTML = '<p style="color:var(--text-muted)">Nothing to preview yet.</p>'; return }
-        try {
-          const res = await fetch(`${window.__BASE_PATH__}/api/preview`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text }),
-          })
-          if (res.ok) { const { html } = await res.json(); preview.innerHTML = sanitizeHtml(html) }
-        } catch { preview.textContent = text }
-      }
-    })
-
-    function cancel() {
-      if (!wrap.parentNode) return
-      wrap.replaceWith(textEl)
-      activeEditCancel = null
-    }
-
-    activeEditCancel = cancel
-
-    function save() {
-      const newText = textarea.value.trim()
-      if (!newText || newText === rawText) { cancel(); return }
-      cancel()
-      article.dataset.rawText = newText
-      ws.send({ t: 'msg.edit', body: { msg_id: article.dataset.msgId, channel_id: channelId, text: newText } })
-    }
-
-    toolbar.querySelector('.btn-edit-save').addEventListener('click', save)
-    toolbar.querySelector('.btn-edit-cancel').addEventListener('click', cancel)
-    textarea.addEventListener('keydown', e => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); save() }
-      if (e.key === 'Escape') cancel()
-    })
-  }
-
-  // ── Context menu (desktop hover → … button) ────────────────────────────────
-
-  let activeContextMenu = null
-
-  function closeContextMenu() {
-    if (activeContextMenu) { activeContextMenu.remove(); activeContextMenu = null }
-  }
-
-  function showContextMenu(article, anchorEl) {
-    closeContextMenu()
-    const isAuthor = article.dataset.userId === userId
-    if (!isAuthor) return
-
-    const menu = document.createElement('div')
-    menu.className = 'msg-context-menu'
-    const editBtn = document.createElement('button')
-    editBtn.className = 'msg-context-menu-item'
-    editBtn.type = 'button'
-    editBtn.textContent = 'Edit'
-    editBtn.addEventListener('click', () => { closeContextMenu(); startInlineEdit(article) })
-    menu.appendChild(editBtn)
-
-    const deleteBtn = document.createElement('button')
-    deleteBtn.className = 'msg-context-menu-item msg-context-menu-item--danger'
-    deleteBtn.type = 'button'
-    deleteBtn.textContent = 'Delete'
-    deleteBtn.addEventListener('click', () => {
-      closeContextMenu()
-      ws.send({ t: 'msg.delete', body: { msg_id: article.dataset.msgId, channel_id: channelId } })
-    })
-    menu.appendChild(deleteBtn)
-
-    document.body.appendChild(menu)
-    activeContextMenu = menu
-
-    const rect = anchorEl.getBoundingClientRect()
-    const menuRect = menu.getBoundingClientRect()
-    let top = rect.bottom + window.scrollY + 4
-    let left = rect.right + window.scrollX - menuRect.width
-    if (left < 8) left = 8
-    if (left + menuRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - menuRect.width
-    menu.style.top = `${top}px`
-    menu.style.left = `${left}px`
-  }
-
-  document.addEventListener('click', e => {
-    if (activeContextMenu && !activeContextMenu.contains(e.target)) closeContextMenu()
-  }, { capture: true })
-
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape') closeContextMenu()
-  })
-
-  // Delegated click: … button → open context menu
-  messages.addEventListener('click', e => {
-    const btn = e.target.closest('.btn-msg-actions')
-    if (!btn) return
-    e.stopPropagation()
-    const article = btn.closest('article.message')
-    if (article) showContextMenu(article, btn)
-  })
-
-
-  ws.on('dm.opened', ({ channel_id, notify_only }) => {
-    if (notify_only) return  // target user — sidebar handles the notification
-    window.location.href = `${window.__BASE_PATH__}/channels/${channel_id}`
-  })
-
-  // ── Call: rtc.call_state — drives "N in call" row + sidebar badge ──────────
-
-  ws.on('rtc.call_state', (body) => {
-    if (body.channel_id !== channelId) return
-    // Don't overwrite the active call's ID when browsing a different channel —
-    // callIdSig is what miniBarLeave uses to leave the call.
-    if (!inCall() || body.channel_id === callChannelId) {
-      callIdSig.set(body.call_id)
-    }
-    _updateCallStatusRow(body.call_id, body.count, body.users ?? [])
-    _updateChannelBadge(body.count)
-  })
-
-  function _updateCallStatusRow(activeCallId, count, users) {
-    if (!callStatusEl) return
-    if (inCall()) {
-      // Already in the call — just update peer count
-      if (peerCountEl) peerCountEl.textContent = count > 1 ? `${count} in call` : ''
-      callStatusEl.hidden = true
-      return
-    }
-    if (!activeCallId || count === 0) {
-      callStatusEl.hidden = true
-      return
-    }
-    callStatusEl.hidden = false
-    if (callStatusInfo) callStatusInfo.textContent = `${count} in call`
-    if (callStatusAvatars) {
-      callStatusAvatars.innerHTML = users.slice(0, 5).map(u =>
-        `<span class="call-status-avatar" title="${escHtml(u.user_id)}">${escHtml(u.user_id.slice(0, 2).toUpperCase())}</span>`
-      ).join('')
-    }
-  }
-
-  function _updateChannelBadge(count) {
-    const li = document.querySelector(`.channel-link[data-channel-id="${channelId}"]`)?.closest('li')
-    if (!li) return
-    li.classList.toggle('call-active', count > 0)
-    const badge = li.querySelector('.call-badge')
-    if (badge) badge.textContent = count > 0 ? String(count) : ''
-  }
-
-  // ── Call: start / join / leave ─────────────────────────────────────────────
-
-  btnStartCall?.addEventListener('click', () => {
-    ws.send({ t: 'rtc.call_create', body: { channel_id: channelId, kind: 'mesh' } })
-  })
-
-  btnJoinCall?.addEventListener('click', () => {
-    const id = callIdSig()
-    if (id) ws.send({ t: 'rtc.join', body: { call_id: id } })
-  })
-
-  btnLeaveCall?.addEventListener('click', leaveCall)
-
-  function leaveCall() {
-    const id = callIdSig()
-    if (!inCall() || !id) return
-    ws.send({ t: 'rtc.leave', body: { call_id: id } })
-    _teardownCall()
-  }
-
-  // ── Call: WS message handlers ──────────────────────────────────────────────
-
-  ws.on('rtc.call', (body) => {
-    // Server confirmed call creation / found existing call — now join it
-    if (body.ice_servers?.length) { iceServers = body.ice_servers; rtcManager.setIceServers(iceServers) }
-    callIdSig.set(body.call_id)
-    ws.send({ t: 'rtc.join', body: { call_id: body.call_id } })
-  })
-
-  ws.on('rtc.joined', async (body) => {
-    const { call_id, peer_id, peers } = body
-    if (body.ice_servers?.length) { iceServers = body.ice_servers; rtcManager.setIceServers(iceServers) }
-    selfPeerId.set(peer_id)
-    callIdSig.set(call_id)
-    callChannelId = channelId
-    inCall.set(true)
-    _showCallControls()
-    _showTilePanel()
-    _attachDeviceChangeListener()
-    patchSettings({ last_channel_id: channelId })
-
-    // Start audio immediately; video is opt-in
-    await _startAudio()
-
-    // Cache display names for existing peers, then connect as offerer
-    for (const peer of peers) {
-      if (peer.peer_id !== peer_id) {
-        rtcManager.setDisplayName(peer.peer_id, peer.display_name)
-        rtcManager.ensurePeer(peer.peer_id)
-        rtcManager.negotiate(peer.peer_id)
-      }
-    }
-  })
-
-  ws.on('rtc.peer_event', ({ call_id, kind, peer }) => {
-    if (kind === 'join' && peer.peer_id !== selfPeerId()) {
-      rtcManager.setDisplayName(peer.peer_id, peer.display_name)
-      // Existing peer receives new joiner's event — create answerer connection
-      // (new joiner will send us an offer)
-      rtcManager.ensurePeer(peer.peer_id)
-    }
-    if (kind === 'leave') {
-      rtcManager.closePeer(peer.peer_id)
-    }
-  })
-
-  ws.on('rtc.offer_event', async ({ call_id, from_peer_id, sdp }) => {
-    await rtcManager.handleRemoteOffer(from_peer_id, call_id, sdp)
-  })
-
-  ws.on('rtc.answer_event', async ({ call_id, from_peer_id, sdp }) => {
-    await rtcManager.handleRemoteAnswer(from_peer_id, sdp)
-  })
-
-  ws.on('rtc.ice_event', async ({ from_peer_id, candidate }) => {
-    await rtcManager.handleIceCandidate(from_peer_id, candidate)
-  })
-
-  ws.on('rtc.stream_event', () => {
-    // No pre-tile creation here — tile IDs must match between this handler
-    // (which uses kind: 'cam'/'screen') and ontrack (which uses transceiver.mid,
-    // a number like '1' or '2'). The mismatch left orphaned empty tiles.
-    // Tiles are created in ontrack once the actual stream track arrives.
-  })
-
-  ws.on('rtc.call_end', ({ call_id }) => {
-    if (call_id === callIdSig()) _teardownCall()
-  })
-
-  ws.on('rtc.left', () => {
-    // Server confirmed our leave
-  })
-
-  // ── Local media ────────────────────────────────────────────────────────────
-  // Peer negotiation, transceiver slots, ICE queuing → RtcPeerManager
-
-  async function _startAudio() {
-    if (audioStream) return
-    try {
-      const saved = loadSavedDevices()
-      audioStream = await navigator.mediaDevices.getUserMedia({
-        audio: saved.micId ? { deviceId: { ideal: saved.micId } } : true,
-        video: false,
-      })
-      activeMicId = audioStream.getAudioTracks()[0]?.getSettings().deviceId ?? null
-      audioStream.getAudioTracks().forEach(t => { t.enabled = !micMuted() })
-      await refreshDevices()  // labels now available after permission granted
-      for (const peerId of rtcManager.peerIds()) rtcManager.negotiate(peerId)
-    } catch {
-      micMuted.set(true)
-    }
-  }
-
-  async function toggleMic() {
-    micMuted.set(!micMuted())
-    audioStream?.getAudioTracks().forEach(t => { t.enabled = !micMuted() })
-    if (ctrlMic) ctrlMic.textContent = micMuted() ? '🔇' : '🎙'
-    if (miniBarMic) miniBarMic.textContent = micMuted() ? '🔇' : '🎙'
-  }
-
-  async function toggleCamera() {
-    if (videoStream) {
-      videoStream.getTracks().forEach(t => t.stop())
-      _removeTile('local-cam')
-      videoStream = null
-      camOff.set(true)
-      for (const peerId of rtcManager.peerIds()) rtcManager.negotiate(peerId)
-      if (ctrlCam) ctrlCam.textContent = '📷'
-      return
-    }
-    try {
-      const saved = loadSavedDevices()
-      const videoConstraint = saved.cameraId
-        ? { deviceId: { ideal: saved.cameraId }, width: 640, height: 360 }
-        : { width: 640, height: 360 }
-      videoStream = await navigator.mediaDevices.getUserMedia({ video: videoConstraint, audio: false })
-      activeCameraId = videoStream.getVideoTracks()[0]?.getSettings().deviceId ?? null
-      camOff.set(false)
-      _renderTile('local-cam', videoStream, true, `${userHandle ?? 'You'} (cam)`)
-      ws.send({ t: 'rtc.stream_publish', body: { call_id: callIdSig(), stream: { kind: 'camera' } } })
-      for (const peerId of rtcManager.peerIds()) rtcManager.negotiate(peerId)
-      if (ctrlCam) ctrlCam.textContent = '📷✓'
-    } catch {
-      // Camera denied
-    }
-  }
-
-  async function toggleScreen() {
-    if (screenStream) {
-      screenStream.getTracks().forEach(t => t.stop())
-      _removeTile('local-screen')
-      screenStream = null
-      screenSharing.set(false)
-      for (const peerId of rtcManager.peerIds()) rtcManager.negotiate(peerId)
-      if (ctrlScreen) ctrlScreen.textContent = '🖥'
-      return
-    }
-    if (!navigator.mediaDevices?.getDisplayMedia) return
-    try {
-      screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false })
-      screenSharing.set(true)
-      _renderTile('local-screen', screenStream, true, `${userHandle ?? 'You'} (screen)`)
-      ws.send({ t: 'rtc.stream_publish', body: { call_id: callIdSig(), stream: { kind: 'screen' } } })
-      screenStream.getVideoTracks()[0].addEventListener('ended', () => toggleScreen())
-      for (const peerId of rtcManager.peerIds()) rtcManager.negotiate(peerId)
-      if (ctrlScreen) ctrlScreen.textContent = '🖥✓'
-    } catch { /* user cancelled */ }
-  }
-
-  // ── Audio element for remote peers ─────────────────────────────────────────
-
-  function _ensureRemoteAudio(stream, peerId) {
-    if (document.querySelector(`audio[data-peer-id="${peerId}"]`)) return
-    const audio = document.createElement('audio')
-    audio.autoplay = true
-    audio.dataset.peerId = peerId
-    audio.srcObject = stream
-    document.body.appendChild(audio)
-  }
-
-  // ── Tile grid ──────────────────────────────────────────────────────────────
-
-  function _captureFrame(tile, label) {
-    const video = tile.querySelector('video')
-    if (!video || !video.videoWidth) return
-    const canvas = document.createElement('canvas')
-    canvas.width = video.videoWidth
-    canvas.height = video.videoHeight
-    canvas.getContext('2d').drawImage(video, 0, 0)
-    const a = document.createElement('a')
-    a.href = canvas.toDataURL('image/png')
-    a.download = `capture-${label.replace(/[^a-z0-9]/gi, '-')}-${Date.now()}.png`
-    a.click()
-  }
-
-  function _startCapture(tile, label, delay) {
-    const countdown = tile.querySelector('.tile-countdown')
-    const captureBtn = tile.querySelector('.tile-capture')
-    if (tile._captureTimer) {
-      clearInterval(tile._captureTimer)
-      tile._captureTimer = null
-      countdown.hidden = true
-      captureBtn.textContent = '📸'
-      return
-    }
-    if (delay === 0) { _captureFrame(tile, label); return }
-    let remaining = delay
-    countdown.textContent = remaining
-    countdown.hidden = false
-    captureBtn.textContent = '✕'
-    tile._captureTimer = setInterval(() => {
-      remaining--
-      if (remaining <= 0) {
-        clearInterval(tile._captureTimer)
-        tile._captureTimer = null
-        countdown.hidden = true
-        captureBtn.textContent = '📸'
-        _captureFrame(tile, label)
-      } else {
-        countdown.textContent = remaining
-      }
-    }, 1000)
-  }
-
-  function _renderTile(tileId, stream, muted, label) {
-    if (!tileGridEl) return
-    let tile = tileGridEl.querySelector(`[data-peer="${tileId}"]`)
-    if (!tile) {
-      tile = document.createElement('div')
-      tile.className = 'stream-tile'
-      tile.dataset.peer = tileId
-      tile.innerHTML = `<video autoplay playsinline controls ${muted ? 'muted' : ''}></video><span class="tile-label">${escHtml(label)}</span><div class="tile-capture-wrap"><button class="tile-pin" title="Move to top">⬆</button><button class="tile-capture" title="Capture photo">📸</button><div class="tile-capture-menu" hidden><button class="tile-capture-opt" data-delay="0">0s</button><button class="tile-capture-opt" data-delay="1">1s</button><button class="tile-capture-opt" data-delay="3">3s</button><button class="tile-capture-opt" data-delay="5">5s</button></div></div><div class="tile-countdown" hidden></div>`
-      tile.querySelector('video').addEventListener('click', e => e.stopPropagation())
-      tile.querySelector('.tile-pin').addEventListener('click', e => { e.stopPropagation(); _pinTile(tileId) })
-      const menu = tile.querySelector('.tile-capture-menu')
-      tile.querySelector('.tile-capture').addEventListener('click', e => {
-        e.stopPropagation()
-        if (tile._captureTimer) { _startCapture(tile, label, 0); return }
-        menu.hidden = !menu.hidden
-      })
-      menu.querySelectorAll('.tile-capture-opt').forEach(btn => {
-        btn.addEventListener('click', e => {
-          e.stopPropagation()
-          menu.hidden = true
-          _startCapture(tile, label, parseInt(btn.dataset.delay))
-        })
-      })
-      tileGridEl.appendChild(tile)
-      _updateTileLayout()
-    }
-    if (stream) tile.querySelector('video').srcObject = stream
-    return tile
-  }
-
-  function _removeTile(tileId) {
-    tileGridEl?.querySelector(`[data-peer="${tileId}"]`)?.remove()
-    _updateTileLayout()
-  }
-
-  function _updateTileLayout() {
-    if (!tileGridEl) return
-    const count = tileGridEl.querySelectorAll('.stream-tile').length
-    tileGridEl.classList.toggle('avatars-only', count >= 5)
-  }
-
-  function _pinTile(tileId) {
-    if (pinnedPeerId === tileId) {
-      tileGridEl?.classList.remove('pinned')
-      tileGridEl?.querySelectorAll('.stream-tile').forEach(t => t.classList.remove('pinned-tile'))
-      pinnedPeerId = null
-    } else {
-      tileGridEl?.classList.add('pinned')
-      tileGridEl?.querySelectorAll('.stream-tile').forEach(t => t.classList.remove('pinned-tile'))
-      tileGridEl?.querySelector(`[data-peer="${tileId}"]`)?.classList.add('pinned-tile')
-      pinnedPeerId = tileId
-    }
-  }
-
-  // ── Device switching ───────────────────────────────────────────────────────
-
-  async function switchCamera(deviceId) {
-    const newStream = await navigator.mediaDevices.getUserMedia({
-      video: { deviceId: { exact: deviceId } },
-    })
-    const newTrack = newStream.getVideoTracks()[0]
-    await rtcManager.replaceTrack('camera', newTrack)
-
-    videoStream?.getTracks().forEach(t => t.stop())
-    videoStream = newStream
-    activeCameraId = deviceId
-    saveDevices({ cameraId: deviceId })
-
-    const localTile = tileGridEl?.querySelector('[data-peer="local-cam"]')
-    if (localTile) localTile.querySelector('video').srcObject = newStream
-  }
-
-  async function switchMic(deviceId) {
-    const newStream = await navigator.mediaDevices.getUserMedia({
-      audio: { deviceId: { exact: deviceId } },
-    })
-    const newTrack = newStream.getAudioTracks()[0]
-    newTrack.enabled = !micMuted()
-    await rtcManager.replaceTrack('audio', newTrack)
-
-    audioStream?.getTracks().forEach(t => t.stop())
-    audioStream = newStream
-    activeMicId = deviceId
-    saveDevices({ micId: deviceId })
-  }
-
-  // ── Device change detection ────────────────────────────────────────────────
-
-  function _onDeviceChange() {
-    refreshDevices().then(({ cameras, mics }) => {
-      const cameraGone = activeCameraId && !cameras.find(d => d.deviceId === activeCameraId)
-      const micGone    = activeMicId    && !mics.find(d => d.deviceId === activeMicId)
-      if (cameraGone || micGone) _showDeviceWarning(cameraGone ? 'camera' : 'mic')
-      if (devicePickerEl?.classList.contains('open')) _populatePicker()
-    })
-  }
-
-  function _attachDeviceChangeListener() {
-    navigator.mediaDevices.addEventListener('devicechange', _onDeviceChange)
-  }
-  function _detachDeviceChangeListener() {
-    navigator.mediaDevices.removeEventListener('devicechange', _onDeviceChange)
-  }
-
-  // ── Device picker ──────────────────────────────────────────────────────────
-
-  let devicePickerEl = null
-
-  function _buildPicker() {
-    devicePickerEl = document.createElement('div')
-    devicePickerEl.className = 'device-picker'
-    devicePickerEl.innerHTML = `
-      <div class="device-picker-row">
-        <label>Camera</label>
-        <select id="dp-camera"></select>
-        <video id="dp-preview" autoplay playsinline muted></video>
-      </div>
-      <div class="device-picker-row">
-        <label>Microphone</label>
-        <select id="dp-mic"></select>
-        <canvas id="dp-level" width="80" height="12"></canvas>
-      </div>
-      <div class="device-picker-footer">
-        <button id="dp-cancel" class="btn-ghost" type="button">Cancel</button>
-        <button id="dp-apply"  class="btn-primary" type="button">Switch</button>
-      </div>
-    `
-    callControlsEl?.after(devicePickerEl)
-
-    devicePickerEl.querySelector('#dp-cancel').addEventListener('click', _closePicker)
-    devicePickerEl.querySelector('#dp-apply').addEventListener('click', _applyPicker)
-
-    const cameraSelect = devicePickerEl.querySelector('#dp-camera')
-    const previewVideo = devicePickerEl.querySelector('#dp-preview')
-
-    cameraSelect.addEventListener('change', async () => {
-      devicePickerEl._previewStream?.getTracks().forEach(t => t.stop())
-      devicePickerEl._previewStream = null
-      if (!cameraSelect.value) return
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: { deviceId: { exact: cameraSelect.value } },
-        })
-        previewVideo.srcObject = stream
-        devicePickerEl._previewStream = stream
-      } catch { /* camera unavailable */ }
-    })
-  }
-
-  function _populatePicker() {
-    const { cameras, mics } = availableDevices
-    const cameraSelect = devicePickerEl?.querySelector('#dp-camera')
-    const micSelect    = devicePickerEl?.querySelector('#dp-mic')
-    if (cameraSelect) {
-      cameraSelect.innerHTML = cameras
-        .map(d => `<option value="${escHtml(d.deviceId)}"${d.deviceId === activeCameraId ? ' selected' : ''}>${escHtml(d.label || 'Camera')}</option>`)
-        .join('')
-    }
-    if (micSelect) {
-      micSelect.innerHTML = mics
-        .map(d => `<option value="${escHtml(d.deviceId)}"${d.deviceId === activeMicId ? ' selected' : ''}>${escHtml(d.label || 'Microphone')}</option>`)
-        .join('')
-    }
-  }
-
-  async function _openPicker() {
-    if (!devicePickerEl) _buildPicker()
-    await refreshDevices()
-    _populatePicker()
-    devicePickerEl.classList.add('open')
-  }
-
-  function _closePicker() {
-    devicePickerEl?._previewStream?.getTracks().forEach(t => t.stop())
-    if (devicePickerEl) devicePickerEl._previewStream = null
-    devicePickerEl?.classList.remove('open')
-  }
-
-  async function _applyPicker() {
-    const cameraId = devicePickerEl?.querySelector('#dp-camera')?.value
-    const micId    = devicePickerEl?.querySelector('#dp-mic')?.value
-    try {
-      if (cameraId && cameraId !== activeCameraId && videoStream) await switchCamera(cameraId)
-      if (micId    && micId    !== activeMicId)                    await switchMic(micId)
-      ctrlDevices?.classList.remove('device-warning')
-    } catch { /* device unavailable — leave current stream in place */ }
-    _closePicker()
-  }
-
-  ctrlDevices?.addEventListener('click', () => {
-    devicePickerEl?.classList.contains('open') ? _closePicker() : _openPicker()
-  })
-
-  // ── Device warning toast ───────────────────────────────────────────────────
-
-  function _showDeviceWarning(kind) {
-    const label = kind === 'camera' ? 'Camera' : 'Microphone'
-    const toast = document.createElement('div')
-    toast.className = 'device-warning-toast'
-    toast.textContent = `${label} disconnected — click ⚙ to switch`
-    document.body.appendChild(toast)
-    setTimeout(() => toast.remove(), 6000)
-    ctrlDevices?.classList.add('device-warning')
-  }
-
-  // ── Controls visibility ────────────────────────────────────────────────────
-
-  function _showCallControls() {
-    callStatusEl && (callStatusEl.hidden = true)
-    callControlsEl?.classList.add('active')
-    if (btnStartCall) btnStartCall.hidden = true
-  }
-
-  function _hideCallControls() {
-    callControlsEl?.classList.remove('active')
-    if (btnStartCall) btnStartCall.hidden = false
-  }
-
-  // ── Tile panel show / hide ─────────────────────────────────────────────────
-
-  const LAYOUT_KEY = 'devchitchat_tile_layout'
-
-  function _showTilePanel() {
-    document.querySelector('.main-content')?.classList.add('has-call')
-    tilePanelEl?.classList.add('active')
-  }
-
-  function _hideTilePanel() {
-    document.querySelector('.main-content')?.classList.remove('has-call')
-    tilePanelEl?.classList.remove('active')
-    tilePanelEl?.classList.remove('collapsed')
-  }
-
-  // Restore collapse state from localStorage
-  try {
-    const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-    if (saved.collapsed) tilePanelEl?.classList.add('collapsed')
-    if (saved.overlayRight && saved.overlayTop && tilePanelEl) {
-      tilePanelEl.style.right = saved.overlayRight
-      tilePanelEl.style.top   = saved.overlayTop
-    }
-  } catch { /* ignore */ }
-
-  // Collapse toggle
-  document.getElementById('tile-panel-collapse')?.addEventListener('click', () => {
-    const collapsed = tilePanelEl?.classList.toggle('collapsed')
-    try {
-      const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-      localStorage.setItem(LAYOUT_KEY, JSON.stringify({ ...saved, collapsed: !!collapsed }))
-    } catch { /* ignore */ }
-  })
-
-  // Overlay drag (mobile only)
-  ;(function _attachOverlayDrag(panel) {
-    if (!panel) return
-    if (window.matchMedia('(min-width: 1025px)').matches) return
-
-    const header = panel.querySelector('.tile-panel-header')
-    if (!header) return
-
-    let startX, startY, startRight, startTop
-
-    function onMove(e) {
-      e.preventDefault()  // stop page scroll while dragging the tile panel
-      const clientX = e.touches ? e.touches[0].clientX : e.clientX
-      const clientY = e.touches ? e.touches[0].clientY : e.clientY
-      const dx = startX - clientX
-      const dy = clientY - startY
-      const newRight = Math.max(0, Math.min(startRight + dx, window.innerWidth  - 60))
-      const newTop   = Math.max(0, Math.min(startTop  + dy, window.innerHeight - 60))
-      panel.style.right = newRight + 'px'
-      panel.style.top   = newTop   + 'px'
-    }
-
-    function onEnd() {
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup',   onEnd)
-      document.removeEventListener('touchmove', onMove)
-      document.removeEventListener('touchend',  onEnd)
-      try {
-        const saved = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? '{}')
-        localStorage.setItem(LAYOUT_KEY, JSON.stringify({
-          ...saved,
-          overlayRight: panel.style.right,
-          overlayTop:   panel.style.top,
-        }))
-      } catch { /* ignore */ }
-    }
-
-    header.addEventListener('mousedown', e => {
-      startX = e.clientX; startY = e.clientY
-      startRight = parseInt(panel.style.right) || 0
-      startTop   = parseInt(panel.style.top)   || 0
-      document.addEventListener('mousemove', onMove)
-      document.addEventListener('mouseup',   onEnd)
-    })
-
-    header.addEventListener('touchstart', e => {
-      e.preventDefault()  // prevent scroll from starting on the drag handle
-      startX = e.touches[0].clientX; startY = e.touches[0].clientY
-      startRight = parseInt(panel.style.right) || 0
-      startTop   = parseInt(panel.style.top)   || 0
-      document.addEventListener('touchmove', onMove, { passive: false })
-      document.addEventListener('touchend',  onEnd)
-    }, { passive: false })
-  })(tilePanelEl)
-
-  // ── Mini-bar (persists while navigating away during a call) ───────────────
-
-  function _showMiniBar() {
-    if (!miniBarEl) return
-    if (miniBarName) miniBarName.textContent = channelName()
-    miniBarEl.classList.add('active')
-  }
-
-  function _hideMiniBar() {
-    miniBarEl?.classList.remove('active')
-  }
-
-  ctrlMic?.addEventListener('click', toggleMic)
-  ctrlCam?.addEventListener('click', toggleCamera)
-  ctrlScreen?.addEventListener('click', toggleScreen)
-  miniBarMic?.addEventListener('click', toggleMic)
-
-  miniBarReturn?.addEventListener('click', () => {
-    if (callChannelId) navigateTo(`${window.__BASE_PATH__}/channels/${callChannelId}`, false)
-  })
-
-  miniBarLeave?.addEventListener('click', () => {
-    leaveCall()
-  })
-
-  // Show mini-bar when user navigates to a different channel while in a call
-  document.addEventListener('channelnavigated', (e) => {
-    if (inCall() && e.detail?.channelId !== channelId) {
-      _showMiniBar()
-    }
-  })
-
-  // SPA navigation: router morphed .chat-panel and dispatched this event.
-  // Re-initialise chat state for the new channel without touching RTC.
-  document.addEventListener('chatpanel:navigated', (e) => {
-    const { channelId: newId, name, topic, kind, seedSeq: newSeedSeq, seedFirstSeq: newFirstSeq, seedHasMore: newHasMore } = e.detail
-
-    if (composeOpen && newId !== channelId) closeComposeMode()
-
-    // Morph strips dynamically-added content (reactions, attachments, timestamps, etc.)
-    // but may preserve data-hydrated="1". Always clear and re-hydrate.
-    for (const a of messages.querySelectorAll('article.message[data-hydrated]')) {
-      delete a.dataset.hydrated
-    }
-    hydrateSeedMessages()
-
-    if (newId === channelId) return   // same channel — re-hydrate only, no WS channel change
-
-    // Leave old channel subscription on the server
-    ws.send({ t: 'channel.leave', body: { channel_id: channelId } })
-
-    // Update local identity
-    channelId = newId
-    channelKind = kind
-    channelName.set(name)
-    channelTopic.set(topic)
-    afterSeq = newSeedSeq
-
-    // Reset pagination state for new channel
-    oldestSeq   = newFirstSeq ?? 0
-    loadingMore = false
-    if (sentinelEl) {
-      sentinelEl.hidden = !newHasMore
-      if (newHasMore) loadMoreObserver.observe(sentinelEl)
-      else            loadMoreObserver.unobserve(sentinelEl)
-    }
-
-    // Update browser chrome
-    document.title = `#${name} — devchitchat`
-    const textarea = root.querySelector('#message-input')
-    if (textarea) textarea.placeholder = `Message in ${name}`
-
-    closePicker()
-
-    // Join new channel — server responds with channel.joined + rtc.call_state.
-    // channel.joined handler sends msg.list if afterSeq > 0, which will append
-    // any messages that arrived after the seed snapshot.
-    ws.send({ t: 'channel.join', body: { channel_id: channelId } })
-  })
-
-  // ── Teardown ───────────────────────────────────────────────────────────────
-
-  function _teardownCall() {
-    rtcManager.teardown()
-
-    audioStream?.getTracks().forEach(t => t.stop()); audioStream = null
-    videoStream?.getTracks().forEach(t => t.stop()); videoStream = null
-    screenStream?.getTracks().forEach(t => t.stop()); screenStream = null
-
-    document.querySelectorAll('audio[data-peer-id]').forEach(a => { a.srcObject = null; a.remove() })
-    if (tileGridEl) tileGridEl.innerHTML = ''
-    _updateTileLayout()
-    _hideCallControls()
-    _hideTilePanel()
-    _hideMiniBar()
-    _closePicker()
-    _detachDeviceChangeListener()
-    ctrlDevices?.classList.remove('device-warning')
-
-    micMuted.set(false)
-    camOff.set(false)
-    screenSharing.set(false)
-    inCall.set(false)
-    selfPeerId.set(null)
-    callChannelId = null
-    pinnedPeerId = null
-    activeCameraId = null
-    activeMicId = null
-  }
-
-  // ── Mobile back button ─────────────────────────────────────────────────────
-
-  root.querySelector('.btn-back-mobile')?.addEventListener('click', () => {
-    document.body.classList.add('sidebar-open')
-    patchSettings({ mobile_chat_open: false })
-  })
-
-  // ── Exports (rdbljs bindings) ──────────────────────────────────────────────
-
-  return { draft, channelName, channelTopic, urgentMode, urgentClass, sendMessage, handleComposerKey, toggleUrgentMode, toggleComposeMode }
-}