(() => {
  const flow = document.getElementById('msgflow');
  if (!flow) return;
  flow.innerHTML = '';
  const es = new EventSource('/messages/stream');
  const MAX_ROWS = 200;
  const tsFmt = (n) => new Date(n * 1000).toISOString().slice(11, 19);
  const esc = (s) => s.replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));
  es.onmessage = (e) => {
    let m;
    try { m = JSON.parse(e.data); } catch { return; }
    const row = document.createElement('div');
    row.className = 'msgrow ' + m.kind;
    const kind = m.kind === 'sent' ? '→' : '✓';
    row.innerHTML =
      '<span class="msg-ts">' + tsFmt(m.at) + '</span>' +
      '<span class="msg-arrow">' + kind + '</span>' +
      '<span class="msg-from">' + esc(m.from) + '</span>' +
      '<span class="msg-sep">→</span>' +
      '<span class="msg-to">' + esc(m.to) + '</span>' +
      '<span class="msg-body">' + esc(m.body) + '</span>';
    flow.insertBefore(row, flow.firstChild);
    while (flow.childNodes.length > MAX_ROWS) flow.removeChild(flow.lastChild);
  };
  es.onerror = () => {
    flow.insertBefore(Object.assign(document.createElement('div'), {
      className: 'msgrow meta', textContent: '[connection lost — retrying]'
    }), flow.firstChild);
  };
})();