@sphoro/bugcatch-web-sdk 0.16.0 → 0.18.0

package/src/panel/compose.js

@@ -0,0 +1,416 @@
+// The report form: what went wrong, how much it is in the way, anything that
+// shows it — and the Send that files it.
+//
+// Also the draft this device keeps of it, because a form that loses a
+// half-written report to a reload is a form people stop starting.
+
+import * as ICONS from './icons.js';
+import {
+  captureScreenshot, startRecording, screenshotSupported, captureSupported,
+  humanSize, humanDuration, normalizeMime, REPORT_MIMES,
+} from '../capture.js';
+import { draftKey, draftOperation, readDraft } from '../drafts.js';
+import { escapeHtml } from './render.js';
+
+const PRIORITIES = [
+  { value: 'LOW', label: 'Low' },
+  { value: 'MEDIUM', label: 'Medium' },
+  { value: 'HIGH', label: 'High' },
+  { value: 'CRITICAL', label: 'Critical' },
+];
+
+const DEFAULT_PRIORITY = 'MEDIUM';
+
+/** The form's markup, for the panel's body. */
+export function composeHtml(cfg) {
+  const canCapture = cfg.attachments !== false;
+  const canShoot = canCapture && screenshotSupported();
+  const canRecord = canCapture && captureSupported();
+  return `
+        <div class="compose">
+        <div class="field">
+          <label for="bc-title">What went wrong?</label>
+          <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"
+            aria-describedby="bc-title-err" />
+          <p class="field-err" id="bc-title-err" hidden></p>
+        </div>
+        <div class="field">
+          <label for="bc-desc">Anything else that helps <span class="opt">(optional)</span></label>
+          <textarea id="bc-desc" placeholder="What you were doing, what you expected, what happened instead."></textarea>
+        </div>
+        <!-- Drawn only when this project asks for an identifier and the report
+             does not already carry one. Between the description and the
+             severity because that is where it belongs in the reading order:
+             it is a question about what they just typed. -->
+        <div class="refs" hidden></div>
+        <div class="field">
+          <label id="bc-prio-l">How much is it getting in your way?</label>
+          <div class="seg" role="group" aria-labelledby="bc-prio-l">
+            ${PRIORITIES.map((p) => `
+              <button type="button" data-prio="${p.value}" aria-pressed="${p.value === DEFAULT_PRIORITY}">${p.label}</button>
+            `).join('')}
+          </div>
+        </div>
+        ${canCapture ? `
+        <div class="field">
+          <div class="field-head">
+            <label id="bc-att-l">Show us <span class="opt">(optional)</span></label>
+            <span class="count" aria-live="polite"></span>
+          </div>
+          <div class="tools" role="group" aria-labelledby="bc-att-l">
+            ${canShoot ? `<button class="tool" type="button" data-act="shot">${ICONS.camera}Screenshot</button>` : ''}
+            ${canRecord ? `<button class="tool" type="button" data-act="rec">${ICONS.video}Record screen</button>` : ''}
+            <button class="tool" type="button" data-act="file">${ICONS.paperclip}Upload file</button>
+          </div>
+          <div class="thumbs"></div>
+          <input type="file" accept="${REPORT_MIMES.join(',')}" multiple hidden />
+        </div>` : ''}
+        </div>`;
+}
+
+export function mountCompose(ctx) {
+  const {
+    client, cfg, root, host, dock, scrim, $, say, titleInput, descInput, compose, sendBtn, note,
+  } = ctx;
+  const thumbs = $('.thumbs');
+  const filePicker = scrim.querySelector('input[type=file]');
+
+  // Uploaded as they are added rather than on send: the upload is the slow
+  // part, and doing it while the reporter is still typing means Send is
+  // instant and a failure is visible next to the thing that failed.
+  const items = [];
+  let priority = DEFAULT_PRIORITY;
+  let recorder = null;
+
+  /* ---------- the draft this device keeps ---------- */
+
+  const draftStatus = document.createElement('div');
+  draftStatus.setAttribute('role', 'status');
+  draftStatus.className = 'note';
+  compose.prepend(draftStatus);
+  const savedDraftKey = draftKey(cfg, client.signedInAs()?.email);
+  let draftLoaded = cfg.drafts === false;
+  let draftSubmitted = false;
+  let draftWrites = Promise.resolve();
+  let draftTimer;
+  function persistDraft() {
+    clearTimeout(draftTimer);
+    if (!draftLoaded || draftSubmitted || cfg.drafts === false) return draftWrites;
+    const value = titleInput.value || descInput.value || items.length ? {
+      title: titleInput.value, description: descInput.value, priority,
+      items: items.map(({ blob, mime, kind }) => ({ blob, mime, kind })),
+    } : null;
+    draftWrites = draftWrites.catch(() => {}).then(() => draftOperation(savedDraftKey, value))
+      .then(() => { draftStatus.textContent = value ? 'Draft saved on this device' : ''; })
+      .catch(() => { draftStatus.textContent = 'Draft could not be saved. Keep this tab open.'; });
+    return draftWrites;
+  }
+  function scheduleDraft() { clearTimeout(draftTimer); draftTimer = setTimeout(persistDraft, 250); }
+  compose.addEventListener('input', scheduleDraft);
+  compose.addEventListener('change', scheduleDraft);
+  const onPageHide = () => { void persistDraft(); };
+  window.addEventListener('pagehide', onPageHide);
+  function reconnectUploads() { items.filter((it) => it.status === 'failed').forEach(upload); }
+  window.addEventListener('online', reconnectUploads);
+  if (cfg.drafts !== false) {
+    // Disable composition briefly so a late storage read cannot replace new text.
+    compose.inert = true;
+    readDraft(savedDraftKey).then((draft) => {
+      if (ctx.closed || !draft) return;
+      draftStatus.innerHTML = '<span>You have an unfinished report on this device.</span> <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>';
+      draftStatus.querySelector('[data-resume]').onclick = () => {
+        titleInput.value = draft.title || '';
+        descInput.value = draft.description || '';
+        priority = PRIORITIES.some((p) => p.value === draft.priority) ? draft.priority : 'MEDIUM';
+        scrim.querySelectorAll('[data-prio]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.prio === priority)));
+        for (const item of (draft.items || []).slice(0, cfg.maxAttachments ?? 5)) addItem(item);
+        draftLoaded = true;
+        void persistDraft();
+      };
+      draftStatus.querySelector('[data-discard]').onclick = () => {
+        draftLoaded = true;
+        void persistDraft();
+      };
+    }).catch(() => { draftStatus.textContent = 'Draft storage is unavailable. Keep this tab open.'; })
+      .finally(() => { compose.inert = false; if (!draftStatus.querySelector('[data-resume]')) draftLoaded = true; });
+  }
+
+  // Saved on the way out, before anything else is taken down.
+  ctx.onDestroy(() => {
+    void persistDraft();
+    clearTimeout(draftTimer);
+    window.removeEventListener('pagehide', onPageHide);
+    window.removeEventListener('online', reconnectUploads);
+    recorder?.cancel();
+    items.forEach((it) => it.previewUrl && URL.revokeObjectURL(it.previewUrl));
+    root.querySelector('.recbar')?.remove();
+  });
+
+  /* ---------- severity ---------- */
+
+  scrim.querySelectorAll('[data-prio]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      priority = btn.dataset.prio;
+      scheduleDraft();
+      scrim.querySelectorAll('[data-prio]').forEach((b) => {
+        b.setAttribute('aria-pressed', String(b === btn));
+      });
+    });
+  });
+
+  /* ---------- attachments ---------- */
+
+  // The one required field says what is missing right under itself, rather
+  // than in a banner the reporter has to connect back to it.
+  const titleErr = $('#bc-title-err');
+  function flagTitle(text) {
+    titleErr.hidden = !text;
+    titleErr.innerHTML = text ? `${ICONS.alert}<span>${escapeHtml(text)}</span>` : '';
+    titleInput.classList.toggle('invalid', Boolean(text));
+    titleInput.setAttribute('aria-invalid', String(Boolean(text)));
+  }
+  titleInput.addEventListener('input', () => { if (titleInput.value.trim()) flagTitle(''); });
+
+  function refreshSendState() {
+    const busy = items.some((it) => it.status === 'uploading');
+    sendBtn.disabled = ctx.sending || busy || items.some((it) => it.status === 'failed');
+    note.textContent = busy ? 'Waiting for the upload to finish…' : items.some((it) => it.status === 'failed') ? 'Retry or remove failed attachments before sending.' : '';
+    const max = cfg.maxAttachments ?? 5;
+    scrim.querySelectorAll('.tool').forEach((t) => {
+      t.disabled = ctx.sending || items.length >= max;
+    });
+    const count = $('.field-head .count');
+    if (count) count.textContent = items.length ? `${items.length} of ${max}` : '';
+  }
+  ctx.refreshSendState = refreshSendState;
+
+  function drawThumb(item) {
+    const el = item.el;
+    const label = item.kind === 'VIDEO' ? 'Video' : 'Shot';
+    const preview = item.kind === 'VIDEO'
+      ? `<video src="${item.previewUrl}" muted playsinline preload="metadata"></video>`
+      : `<img src="${item.previewUrl}" alt="" />`;
+
+    let veil = '';
+    if (item.status === 'uploading') {
+      veil = `<div class="veil"><div class="spinner"></div><div class="bar"><i style="width:${Math.round(item.progress * 100)}%"></i></div></div>`;
+    } else if (item.status === 'failed') {
+      veil = `<div class="veil err"><button type="button" data-act="retry" aria-label="Retry upload">${ICONS.retry}</button>Failed</div>`;
+    }
+
+    el.innerHTML = `
+      ${preview}
+      <span class="kind">${label} · ${humanSize(item.size)}</span>
+      <button class="drop" type="button" data-act="drop" aria-label="Remove ${label.toLowerCase()}">${ICONS.close}</button>
+      ${veil}`;
+
+    el.querySelector('[data-act="drop"]').addEventListener('click', () => removeItem(item));
+    el.querySelector('[data-act="retry"]')?.addEventListener('click', () => upload(item));
+  }
+
+  function removeItem(item) {
+    const i = items.indexOf(item);
+    if (i >= 0) items.splice(i, 1);
+    if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+    item.el.remove();
+    void persistDraft();
+    refreshSendState();
+  }
+
+  async function upload(item) {
+    item.status = 'uploading';
+    item.progress = 0;
+    drawThumb(item);
+    refreshSendState();
+    try {
+      const { storageKey, mime } = await client.uploadAttachment(item.blob, item.mime, (p) => {
+        item.progress = p;
+        // Only the width changes while uploading — repainting the whole tile
+        // would restart the entrance animation on every progress event.
+        const fill = item.el.querySelector('.bar i');
+        if (fill) fill.style.width = `${Math.round(p * 100)}%`;
+      });
+      item.storageKey = storageKey;
+      item.mime = mime;
+      item.status = 'ready';
+    } catch (err) {
+      item.status = 'failed';
+      say(err.message.replace('[BugCatch] ', ''));
+    }
+    drawThumb(item);
+    refreshSendState();
+  }
+
+  function addItem({ blob, mime, kind }) {
+    const max = cfg.maxAttachmentBytes ?? 25 * 1024 * 1024;
+    if (blob.size > max) {
+      say(`That file is ${humanSize(blob.size)} — the limit is ${humanSize(max)}.`);
+      return;
+    }
+    // Held to the report set, not the full upload set. A report's attachments
+    // are typed SCREENSHOT or VIDEO, so a document accepted here would be filed
+    // as a screenshot and render as a broken image. Documents and voice notes
+    // go on a message instead, where they keep their own type.
+    const normalized = normalizeMime(mime || blob.type, REPORT_MIMES);
+    if (!normalized) {
+      say('Only PNG, JPEG, WebP, WebM and MP4 files can be attached to a report.');
+      return;
+    }
+    const item = {
+      blob, kind, mime: normalized, size: blob.size,
+      previewUrl: URL.createObjectURL(blob),
+      status: 'uploading', progress: 0, storageKey: null,
+      el: document.createElement('div'),
+    };
+    item.el.className = 'thumb';
+    items.push(item);
+    thumbs.appendChild(item.el);
+    say('');
+    void persistDraft();
+    upload(item);
+  }
+
+  /* Hide our own UI so the capture shows the page, not this dialog. */
+  async function withWidgetHidden(fn) {
+    host.style.opacity = '0';
+    host.style.pointerEvents = 'none';
+    // One frame so the browser has actually painted the hidden state before
+    // the picker — and the frame we grab — is taken.
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+    try {
+      return await fn();
+    } finally {
+      host.style.opacity = '';
+      host.style.pointerEvents = '';
+    }
+  }
+
+  scrim.querySelector('[data-act="shot"]')?.addEventListener('click', async () => {
+    try {
+      const shot = await withWidgetHidden(captureScreenshot);
+      addItem(shot);
+    } catch (err) {
+      // NotAllowedError is the user dismissing the picker — not a failure.
+      if (err?.name !== 'NotAllowedError') say(`Screenshot failed: ${err.message}`);
+    }
+  });
+
+  scrim.querySelector('[data-act="file"]')?.addEventListener('click', () => filePicker.click());
+  filePicker?.addEventListener('change', () => {
+    const room = (cfg.maxAttachments ?? 5) - items.length;
+    [...filePicker.files].slice(0, Math.max(room, 0)).forEach((file) => {
+      addItem({
+        blob: file,
+        mime: file.type,
+        kind: file.type.startsWith('video/') ? 'VIDEO' : 'SCREENSHOT',
+      });
+    });
+    filePicker.value = '';
+  });
+
+  /* ---------- recording ---------- */
+
+  scrim.querySelector('[data-act="rec"]')?.addEventListener('click', async () => {
+    const maxMs = cfg.maxRecordingMs ?? 120_000;
+    let bar;
+    try {
+      recorder = await startRecording({
+        maxMs,
+        onTick: (s) => { if (bar) bar.querySelector('.time').textContent = humanDuration(s); },
+        onAutoStop: () => { if (recorder) stopRecording({ keep: true }); },
+      });
+    } catch (err) {
+      if (err?.name !== 'NotAllowedError') say(`Recording failed: ${err.message}`);
+      return;
+    }
+
+    // Step out of the way for the duration: a recording of this dialog sitting
+    // over the page is not what anyone means by "record the bug".
+    scrim.style.display = 'none';
+    dock.hidden = true;
+
+    bar = document.createElement('div');
+    bar.className = 'recbar';
+    bar.innerHTML = `
+      <span class="dot"></span>
+      <span class="time">0:00</span>
+      <span class="hint">Recording — up to ${humanDuration(Math.round(maxMs / 1000))}</span>
+      <button class="stop" type="button">Stop</button>
+      <button class="ghost" type="button">Discard</button>`;
+    bar.querySelector('.stop').addEventListener('click', () => stopRecording({ keep: true }));
+    bar.querySelector('.ghost').addEventListener('click', () => stopRecording({ keep: false }));
+    root.appendChild(bar);
+    bar.querySelector('.stop').focus();
+  });
+
+  async function stopRecording({ keep }) {
+    const rec = recorder;
+    if (!rec) return;
+    recorder = null;
+    root.querySelector('.recbar')?.remove();
+    scrim.style.display = '';
+    dock.hidden = false;
+
+    if (!keep) { rec.cancel(); titleInput.focus(); return; }
+    try {
+      const clip = await rec.stop();
+      if (clip.blob.size) addItem(clip);
+      else say('That recording came back empty — nothing was captured.');
+    } catch (err) {
+      say(`Recording failed: ${err.message}`);
+    }
+    titleInput.focus();
+  }
+  ctx.isRecording = () => Boolean(recorder);
+  ctx.stopRecording = stopRecording;
+
+  /* ---------- send ---------- */
+
+  sendBtn.addEventListener('click', async () => {
+    const title = titleInput.value;
+    if (!title.trim()) {
+      flagTitle('Add a few words about what went wrong — a short sentence is plenty.');
+      titleInput.focus();
+      return;
+    }
+
+    // Ask, if this project asks and nothing they wrote answered it — the
+    // first press opens the question rather than sending. See refs.js.
+    if (ctx.holdForReference()) return;
+
+    ctx.sending = true;
+    say('');
+    refreshSendState();
+    const original = sendBtn.innerHTML;
+    sendBtn.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
+
+    try {
+      const res = await client.report({
+        title,
+        description: descInput.value,
+        priority,
+        references: ctx.answeredReference(),
+        issue: ctx.pickedIssue()?.key || null,
+        attachments: items
+          .filter((it) => it.status === 'ready')
+          .map((it) => ({ type: it.kind, storageKey: it.storageKey, mime: it.mime })),
+      });
+      if (res?.cancelled) { ctx.sending = false; sendBtn.innerHTML = original; refreshSendState(); return; }
+      draftSubmitted = true;
+      clearTimeout(draftTimer);
+      await draftWrites;
+      if (cfg.drafts !== false) await draftOperation(savedDraftKey, null).catch(() => {});
+      ctx.succeed(res);
+    } catch (err) {
+      ctx.sending = false;
+      sendBtn.innerHTML = original;
+      say(err.message.replace('[BugCatch] ', ''));
+      refreshSendState();
+      // One reason a send fails is that this browser was signed out while the
+      // panel sat open — the same address signed in elsewhere. The message
+      // above already says so; this puts the panel back in step with it
+      // instead of leaving a Send button that will fail the same way again.
+      ctx.recheckSignIn();
+    }
+  });
+}

package/src/panel/composer.js

@@ -0,0 +1,235 @@
+// The reply box under a report's thread.
+
+import * as ICONS from './icons.js';
+import {
+  startVoiceNote, voiceSupported, humanSize, humanDuration, UPLOAD_MIMES,
+} from '../capture.js';
+import { messageHtml } from './messages.js';
+import { escapeHtml, scrollToLatest } from './render.js';
+
+/**
+ * The box at the bottom: text, files, and a voice note.
+ *
+ * Files are uploaded as they are picked, not on send, so the wait happens
+ * while the person is still writing rather than after they have pressed the
+ * button — and so a failed upload is visible as a failed chip instead of a
+ * message that never went.
+ */
+export function mountComposer(ctx, body, thread, bugId) {
+  const { client, cfg } = ctx;
+  const composer = document.createElement('div');
+  composer.className = 'composer';
+  composer.innerHTML = `
+    <div class="staged" hidden></div>
+    <div class="row">
+      <div class="tools">
+        ${cfg.attachments === false ? '' : `
+        <button class="tool" type="button" data-act="attach" title="Attach a file" aria-label="Attach a file">${ICONS.paperclip}</button>
+        <button class="tool" type="button" data-act="voice" title="Record a voice note" aria-label="Record a voice note">${ICONS.mic}</button>`}
+        <button class="tool" type="button" data-act="livecall" title="Call the team" aria-label="Call the team" hidden>${ICONS.phone}</button>
+      </div>
+      <textarea rows="1" placeholder="Write a reply…" aria-label="Write a reply"></textarea>
+      <button class="send" type="button" data-act="send" title="Send" aria-label="Send" disabled>${ICONS.send}</button>
+    </div>
+    <div class="note" hidden></div>
+    <input type="file" hidden multiple accept="${UPLOAD_MIMES.join(',')}">`;
+  body.appendChild(composer);
+
+  const staged = composer.querySelector('.staged');
+  const input = composer.querySelector('textarea');
+  const sendBtn = composer.querySelector('[data-act="send"]');
+  const voiceBtn = composer.querySelector('[data-act="voice"]');
+  const liveBtn = composer.querySelector('[data-act="livecall"]');
+  const picker = composer.querySelector('input[type=file]');
+  const note = composer.querySelector('.note');
+
+  // Uploaded files waiting to ride on the next message.
+  const files = [];
+  let recorder = null;
+  let sending = false;
+
+  function say(text, kind = '') {
+    note.hidden = !text;
+    note.className = `note ${kind}`;
+    note.textContent = text || '';
+  }
+
+  function refresh() {
+    const ready = files.filter((f) => f.storageKey);
+    sendBtn.disabled = sending || (!input.value.trim() && !ready.length);
+    staged.hidden = !files.length;
+    staged.innerHTML = files.map((f, i) => `
+      <span class="chip ${f.storageKey ? '' : 'uploading'}">
+        <span class="nm">${escapeHtml(f.name)}</span>
+        <span class="sz">${f.storageKey ? humanSize(f.size) : 'sending…'}</span>
+        <button type="button" data-drop="${i}" aria-label="Remove ${escapeHtml(f.name)}">${ICONS.close}</button>
+      </span>`).join('');
+    for (const btn of staged.querySelectorAll('[data-drop]')) {
+      btn.addEventListener('click', () => {
+        files.splice(Number(btn.dataset.drop), 1);
+        refresh();
+      });
+    }
+  }
+
+  /** Upload one blob and stage it. Its chip is on screen for the whole trip. */
+  async function stage(blob, mime, name) {
+    const entry = { name, size: blob.size, storageKey: null };
+    files.push(entry);
+    refresh();
+    try {
+      const { storageKey, mime: stored } = await client.uploadAttachment(blob, mime);
+      entry.storageKey = storageKey;
+      entry.mime = stored;
+    } catch (err) {
+      files.splice(files.indexOf(entry), 1);
+      say(err.message || 'That file could not be sent.', 'err');
+    }
+    refresh();
+  }
+
+  input.addEventListener('input', () => {
+    // Grow with the text, up to the CSS cap. A reply about a bug is often
+    // three lines, and a one-line box makes people write one line.
+    input.style.height = 'auto';
+    input.style.height = `${Math.min(input.scrollHeight, 120)}px`;
+    refresh();
+  });
+
+  // Enter sends, Shift+Enter breaks the line — the chat convention. Anyone
+  // who wants a paragraph gets it; nobody has to hunt for the button.
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      send();
+    }
+  });
+
+  // Absent when the host set `attachments: false` — which the report form
+  // has always honoured and this composer did not, so a host keeping files
+  // and microphone audio outside its compliance perimeter still had both
+  // offered in the follow-up thread.
+  composer.querySelector('[data-act="attach"]')?.addEventListener('click', () => picker.click());
+  picker.addEventListener('change', () => {
+    say('');
+    for (const file of picker.files) {
+      if (file.size > client.config.maxAttachmentBytes) {
+        say(`${file.name} is larger than ${humanSize(client.config.maxAttachmentBytes)}.`, 'err');
+        continue;
+      }
+      stage(file, file.type, file.name);
+    }
+    picker.value = '';
+  });
+
+  if (voiceBtn && !voiceSupported()) {
+    voiceBtn.disabled = true;
+    voiceBtn.title = 'This browser cannot record audio';
+  }
+
+  voiceBtn?.addEventListener('click', async () => {
+    if (recorder) {
+      const handle = recorder;
+      recorder = null;
+      voiceBtn.classList.remove('recording');
+      voiceBtn.innerHTML = ICONS.mic;
+      say('');
+      const { blob, mime } = await handle.stop();
+      if (blob.size) stage(blob, mime, 'Voice note');
+      return;
+    }
+    try {
+      say('');
+      recorder = await startVoiceNote({
+        maxMs: client.config.maxRecordingMs,
+        onTick: (s) => say(`Recording — ${humanDuration(s)}. Tap the mic to stop.`),
+        onAutoStop: () => voiceBtn.click(),
+      });
+      voiceBtn.classList.add('recording');
+      voiceBtn.innerHTML = ICONS.stopSquare;
+    } catch {
+      recorder = null;
+      say('The microphone is not available — check the browser permission.', 'err');
+    }
+  });
+
+  /* ---------- calling the team ---------- */
+
+  // Asked once, when a report is opened, and the button stays hidden unless
+  // the answer is yes. Most workspaces have live calling off, and a phone
+  // icon that apologises on press is worse than no phone icon.
+  client.canCallTeam(bugId)
+    .then((available) => {
+      if (!available) return;
+      liveBtn.hidden = false;
+      // Offered, so fetch what placing it needs now: the press should ring,
+      // not wait for code.
+      ctx.preloadCall();
+    })
+    .catch(() => { /* not available is the safe answer to every failure */ });
+
+  liveBtn.addEventListener('click', async () => {
+    liveBtn.disabled = true;
+    say('');
+    try {
+      const handle = await client.startLiveCall(bugId);
+      ctx.showLiveCall(body, thread, handle);
+    } catch (err) {
+      say(err.message.replace('[BugCatch] ', ''), 'err');
+    } finally {
+      liveBtn.disabled = false;
+    }
+  });
+
+  sendBtn.addEventListener('click', send);
+
+  // The confirm question's quick answers: the same as typing and sending.
+  thread.addEventListener('click', (e) => {
+    const quick = e.target.closest?.('[data-quick]');
+    if (!quick || sending) return;
+    input.value = quick.dataset.quick;
+    send();
+  });
+
+  async function send() {
+    const text = input.value.trim();
+    const ready = files.filter((f) => f.storageKey);
+    if (sending || (!text && !ready.length)) return;
+
+    sending = true;
+    refresh();
+    say('');
+
+    // Shown immediately, greyed, and replaced by the refresh below. Waiting
+    // for the round trip before anything appears makes a slow network look
+    // like a dropped message, which is when people send it twice.
+    thread.insertAdjacentHTML('beforeend', messageHtml({
+      from: 'reporter',
+      body: text,
+      at: new Date().toISOString(),
+      attachments: ready.map((f) => ({ type: 'FILE', name: f.name, size: f.size })),
+    }, 'pending'));
+    scrollToLatest(thread, { smooth: true });
+
+    try {
+      await client.replyToReport(bugId, {
+        body: text,
+        attachments: ready.map((f) => ({
+          storageKey: f.storageKey, mime: f.mime, name: f.name, size: f.size,
+        })),
+      });
+      input.value = '';
+      input.style.height = 'auto';
+      files.length = 0;
+      await ctx.refreshThread(bugId);
+    } catch (err) {
+      thread.querySelector('.msg-row.pending')?.classList.replace('pending', 'failed');
+      say(err.message || 'That could not be sent — try again.', 'err');
+    } finally {
+      sending = false;
+      refresh();
+    }
+  }
+
+  refresh();
+}