@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/panel/call.js

@@ -0,0 +1,242 @@
+// Talking to the team instead of typing: the offer on the form, the screen
+// that replaces the form while the team is rung, and the bar that sits over a
+// report's thread during a call about it.
+//
+// Only what the reporter sees. Placing the call, the microphone and the
+// connection are the client's (startCall, startLiveCall in index.js), and their
+// code is fetched only when a call is actually placed.
+
+import * as ICONS from './icons.js';
+import { humanDuration } from '../capture.js';
+import { escapeHtml } from './render.js';
+
+export function mountCallOffer(ctx) {
+  const {
+    client, scrim, say, callBtn, close,
+  } = ctx;
+
+  // Asked once, when the dialog opens, and the button stays hidden unless the
+  // answer is yes. Doing it here rather than at init keeps one request off the
+  // page load of every site this SDK is on, for a button most of them will
+  // never show.
+  //
+  // The wording is fixed because there is one kind of call: it rings a room and
+  // may go unanswered. A button that said "talk to us" would have somebody
+  // expecting an instant answer sit through twenty seconds of ringing.
+  let callOffered = false;
+  function offerCall() {
+    client.callKind()
+      .then((kind) => {
+        if (!kind) return;
+        callOffered = true;
+        // Offered, so fetch what placing it needs now: the press should ring,
+        // not wait for code.
+        ctx.preloadCall();
+        // Never over a panel that is still asking who this is: the call would
+        // file a report, and on a project that requires sign-in that is the one
+        // thing this panel is holding back.
+        callBtn.hidden = ctx.mustSignIn();
+      })
+      .catch(() => { /* not available is the safe answer to every failure */ });
+  }
+  offerCall();
+
+  callBtn.addEventListener('click', async () => {
+    ctx.sending = true;
+    say('');
+    ctx.refreshSendState();
+    callBtn.disabled = true;
+    callBtn.innerHTML = '<span class="spinner"></span>Ringing…';
+
+    try {
+      // No id: this files the report from what the page was doing and rings the
+      // team about it, in one round trip.
+      const handle = await client.startCall();
+      showCall(handle);
+    } catch (err) {
+      ctx.sending = false;
+      callBtn.disabled = false;
+      callBtn.innerHTML = `${ICONS.phone}Talk to the team`;
+      ctx.refreshSendState();
+      // A report filed with no call is still a report. Saying "the call
+      // failed" and nothing else would leave the reporter thinking their
+      // context went nowhere, and pressing Send again would file it twice.
+      if (err.filed) ctx.succeed(err.filed, { callFailed: err.reason || 'The call could not be started.' });
+      else {
+        say(err.message.replace('[BugCatch] ', ''));
+        // The same follow-up the Send button does, because a call can fail for
+        // the same reason a report can: this browser was signed out while the
+        // panel sat open. Without it the message says sign in while the row
+        // under it still names who signed in, which reads as a broken widget.
+        ctx.recheckSignIn();
+      }
+    }
+  });
+
+  /**
+   * The call, once the team is being rung.
+   *
+   * Replaces the panel for the same reason the history view does: it is the
+   * same dialog answering a different question, and the reporter got here from
+   * one launcher. There is no way back to the form — the report has already
+   * been filed, and a Cancel that implied otherwise would be a lie.
+   */
+  function showCall(handle) {
+    const panel = scrim.querySelector('.panel');
+    const ref = handle?.bugId ? String(handle.bugId).slice(0, 8) : null;
+
+    panel.innerHTML = `
+      <div class="call">
+        <div class="call-head">
+          <span class="call-dot" aria-hidden="true"></span>
+          <strong class="call-state">Ringing…</strong>
+        </div>
+        <p class="call-note">
+          We're ringing the team now. Someone will pick up if they're free — your report${
+            ref ? ` <code>${escapeHtml(ref)}</code>` : ''} is already filed either way, so nothing is lost if nobody answers.
+        </p>
+        <div class="foot">
+          <span class="spacer"></span>
+          <button class="primary" type="button" data-act="hangup">Cancel</button>
+        </div>
+      </div>`;
+
+    const stateEl = panel.querySelector('.call-state');
+    const dot = panel.querySelector('.call-dot');
+
+    // A call spends its first twenty seconds ringing, and can end by nobody
+    // picking up — which is not a failure and must not read as one.
+    const WORDING = {
+      ringing: 'Ringing the team…',
+      connecting: 'Someone answered — connecting…',
+      connected: 'Connected',
+      missed: 'Nobody was free',
+      ended: 'Call ended',
+      failed: 'The call dropped',
+    };
+
+    // `missed` is over too, and is the ordinary way a live call ends when the
+    // team is busy. Left out of this list it would leave the dialog showing
+    // "Nobody was free" above a Cancel button for a call that has already
+    // stopped.
+    const OVER = ['ended', 'failed', 'missed'];
+
+    const offState = client.on('call', ({ state }) => {
+      stateEl.textContent = WORDING[state] || state;
+      dot.classList.toggle('off', OVER.includes(state));
+      if (OVER.includes(state)) {
+        panel.querySelector('[data-act="hangup"]').textContent = 'Close';
+        if (state === 'missed') {
+          // Said plainly, and said as the non-event it is. The report is filed
+          // and the thread already says the call went unanswered, so the one
+          // thing left to tell them is that they have not lost anything.
+          const note = panel.querySelector('.call-note');
+          if (note) {
+            note.textContent = 'Nobody was free to pick up just now. Your report is filed '
+              + 'and the team will reply in the chat.';
+          }
+        }
+      }
+    });
+
+    panel.querySelector('[data-act="hangup"]').addEventListener('click', () => {
+      offState();
+      client.endCall();
+      close();
+    });
+  }
+
+  /**
+   * The call, on top of the report it is about.
+   *
+   * A bar rather than a screen of its own, unlike the one the composer's button
+   * opens — and for a reason that only applies here. A call has nothing to show
+   * while it runs, because nobody is listening to it but the person on the
+   * other end, so what is worth looking at is the report both people are
+   * talking about.
+   */
+  function showLiveCall(body, thread, handle) {
+    const bar = document.createElement('div');
+    bar.className = 'livecall';
+    bar.innerHTML = `
+      <span class="call-dot" aria-hidden="true"></span>
+      <span class="who" role="status" aria-live="polite">Calling the team…</span>
+      <span class="secs" hidden></span>
+      ${handle?.recorded ? '<span class="call-kept">This call is recorded.</span>' : ''}
+      <button class="act" type="button" data-act="mute" hidden>Mute</button>
+      <button class="act danger" type="button" data-act="hangup">Cancel</button>`;
+    body.insertBefore(bar, thread);
+
+    const who = bar.querySelector('.who');
+    const secs = bar.querySelector('.secs');
+    const dot = bar.querySelector('.call-dot');
+    const muteBtn = bar.querySelector('[data-act="mute"]');
+    const hangBtn = bar.querySelector('[data-act="hangup"]');
+
+    let ticker = null;
+    const stopTicking = () => { if (ticker) { clearInterval(ticker); ticker = null; } };
+
+    /** Left up rather than removed, so somebody who looked away can see how it
+     *  ended — and dismissed by hand, or by the next call replacing it. */
+    const settle = (text) => {
+      stopTicking();
+      dot.classList.add('off');
+      bar.classList.add('over');
+      who.textContent = text;
+      secs.hidden = true;
+      muteBtn.hidden = true;
+      hangBtn.textContent = 'Dismiss';
+      hangBtn.classList.remove('danger');
+    };
+
+    const off = client.on('call', ({ state }) => {
+      if (state === 'ringing') who.textContent = 'Calling the team…';
+
+      if (state === 'connecting') {
+        who.textContent = 'Someone answered — connecting…';
+      }
+
+      if (state === 'connected') {
+        who.textContent = "You're on a call with the team";
+        muteBtn.hidden = false;
+        secs.hidden = false;
+        const from = Date.now();
+        stopTicking();
+        // Started on connect rather than on answer: the seconds a person is
+        // charged for looking at are the ones they could hear.
+        ticker = setInterval(() => {
+          secs.textContent = humanDuration(Math.floor((Date.now() - from) / 1000));
+        }, 1000);
+        secs.textContent = '0s';
+      }
+
+      if (state === 'missed') {
+        settle('Nobody was free. Send a message instead and the team will pick it up.');
+      }
+      if (state === 'ended') settle('Call ended.');
+      if (state === 'failed') settle('The call dropped.');
+    });
+
+    muteBtn.addEventListener('click', () => {
+      const muted = handle.setMuted(!handle.isMuted());
+      muteBtn.textContent = muted ? 'Unmute' : 'Mute';
+      // Announced rather than only shown: somebody who muted by accident finds
+      // out when the other person stops replying, which is a long way in.
+      who.textContent = muted ? "You're muted" : "You're on a call with the team";
+    });
+
+    hangBtn.addEventListener('click', () => {
+      off();
+      stopTicking();
+      client.endCall();
+      bar.remove();
+      // The note about the call lands in the thread a moment after it ends, and
+      // the reporter is looking straight at where it goes.
+      ctx.refreshThread(ctx.openReportId());
+    });
+  }
+
+  ctx.offerCall = offerCall;
+  ctx.callOffered = () => callOffered;
+  ctx.showLiveCall = showLiveCall;
+}

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