@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/src/panel/refs.js

@@ -0,0 +1,321 @@
+// Which record is this about.
+//
+// What this project asks for, and what the reporter has answered.
+//
+// The question is asked at Send and not before, which is the whole design of
+// it. A form that opens with "loan number" above "what went wrong" tells
+// somebody they have paperwork to do before they may complain, and most of
+// them will not — while the same question, asked once, after they have said
+// their piece, and only when what they said did not already contain the
+// answer, is a reasonable thing to be asked. Most reporters never see it: the
+// loan number was in the sentence.
+
+import * as ICONS from './icons.js';
+import { readReferences, validateReference } from '../references.js';
+import { escapeHtml } from './render.js';
+
+export function mountReferences(ctx) {
+  const {
+    client, say, titleInput, descInput, sendBtn, refsBox,
+  } = ctx;
+
+  let refConfig = { policy: 'off', fields: [] };
+  let refOpen = false;
+  let refChoice = null;   // which field they are answering; null = not picked yet
+  let refValue = '';
+  let refError = '';
+  // What we read in their text but could not place for sure, offered as taps:
+  // [{ value, kinds: [{ key, label }] }]. `refMode` says why the card is open —
+  // 'confirm' when the text had two answers, 'suggest' when it had an unlabelled
+  // one, 'ask' when it had none.
+  let refCandidates = [];
+  let refMode = 'ask';
+  // Set once they have answered or explicitly skipped, so Send stops asking.
+  let refSettled = false;
+  // Set once we have said "that does not look right" about the current value.
+  // Its own flag rather than reusing refSettled, which was the first attempt
+  // and was a loop: the warning returns early, the next press re-validates the
+  // same unchanged value, warns again, and the report can never be sent. One
+  // warning per value, and then it is their call.
+  let refWarned = false;
+
+  client.referenceFields()
+    .then((cfg) => { refConfig = cfg; showFound(); })
+    .catch(() => { /* off is the safe answer to every failure */ });
+
+  /** What the text says: found (sure), conflicts (ask which), loose (offer). */
+  function readText() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return { found: [], conflicts: [], loose: [] };
+    return readReferences(refConfig.fields, [titleInput.value, descInput.value]);
+  }
+
+  /** Sure enough to send without a question: something found, nothing contested. */
+  function textAnswers(read = readText()) {
+    return read.found.length > 0 && read.conflicts.length === 0;
+  }
+
+  /** The answer to send, or an empty list. */
+  function answeredReference() {
+    if (!refChoice || !refValue.trim()) return [];
+    return [{ key: refChoice, value: refValue.trim().slice(0, 120) }];
+  }
+
+  // A quiet line under the description while they type, so somebody who put
+  // their loan number in the sentence can see it was read and does not go
+  // looking for a box to type it into again.
+  const foundNote = document.createElement('p');
+  foundNote.className = 'ref-found';
+  foundNote.setAttribute('aria-live', 'polite');
+  foundNote.hidden = true;
+  descInput.closest('.field').after(foundNote);
+  let foundTimer;
+  function showFound() {
+    const read = readText();
+    if (textAnswers(read)) {
+      const list = read.found.slice(0, 2).map((r) => `${escapeHtml(r.label)} <b>${escapeHtml(shortId(r.value))}</b>`).join(', ');
+      foundNote.innerHTML = `${ICONS.check}<span>Found your ${list} — no need to add it again.</span>`;
+      foundNote.hidden = false;
+      // They have answered in the text; a card still asking would be not listening.
+      if (refOpen && !answeredReference().length) { refOpen = false; drawRefs(); }
+    } else {
+      foundNote.hidden = true;
+      foundNote.innerHTML = '';
+    }
+  }
+  const queueFound = () => { clearTimeout(foundTimer); foundTimer = setTimeout(showFound, 250); };
+  titleInput.addEventListener('input', queueFound);
+  descInput.addEventListener('input', queueFound);
+
+  /** A UUID is long; the chip shows its ends, the title shows all of it. */
+  function shortId(value) {
+    return value.length > 20 ? `${value.slice(0, 8)}…${value.slice(-4)}` : value;
+  }
+
+  function candidateFor(value) {
+    const v = value.trim().toLowerCase();
+    return refCandidates.find((c) => c.value.toLowerCase() === v) || null;
+  }
+
+  /** Pick a candidate: its value, and its kind when only one kind fits. */
+  function takeCandidate(c) {
+    refValue = c.value;
+    if (c.kinds.length === 1) refChoice = c.kinds[0].key;
+    else if (!c.kinds.some((k) => k.key === refChoice)) refChoice = null;
+    refError = '';
+    refWarned = false;
+  }
+
+  function drawRefs() {
+    if (!refOpen) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
+    const field = refConfig.fields.find((f) => f.key === refChoice) || null;
+    const optional = refConfig.policy !== 'required';
+    const current = candidateFor(refValue);
+    // Kinds worth offering: the ones the picked value could be, when we know;
+    // every kind otherwise. Never zero — a guess of ours must not lock out the
+    // right answer.
+    const kinds = current && current.kinds.length > 1
+      ? refConfig.fields.filter((f) => current.kinds.some((k) => k.key === f.key))
+      : refConfig.fields;
+    // Two loan numbers: the kind is not in question, only which one — so the
+    // kind chips would be a second question nobody needs to answer.
+    const sharedKind = refCandidates.length > 1
+      && refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === refCandidates[0].kinds[0].key);
+
+    const head = {
+      confirm: refCandidates.length > 1
+        ? ['Which one is this about?', 'We found more than one ID in your message. Pick the one this problem is about.']
+        : ['Is this the right ID?', 'This could be more than one kind of ID. Tell us which it is.'],
+      suggest: ['Is this your ID?', 'We spotted this in your message. Tell us what it is so we can find your record.'],
+      ask: optional
+        ? ['One more thing', 'So we can find your record — this helps us answer faster.']
+        : ['We need one detail', 'We need one of these to look this up.'],
+    }[refMode];
+
+    refsBox.hidden = false;
+    // A handful of kinds read best as chips to tap; a long list goes back to
+    // a select so the card does not turn into a wall of pills.
+    const many = kinds.length > 6;
+    refsBox.innerHTML = `
+      <div class="ask-head">
+        <span class="avatar orb" aria-hidden="true"></span>
+        <div>
+          <strong>${escapeHtml(head[0])}</strong>
+          <p class="why">${escapeHtml(head[1])}</p>
+        </div>
+      </div>
+      ${refCandidates.length > 1 ? `
+      <div class="chips cands" role="group" aria-label="IDs found in your message">
+        ${refCandidates.map((c, i) => `
+          <button type="button" data-ref-cand="${i}" title="${escapeHtml(c.value)}"
+            aria-pressed="${!!current && current === c}">${escapeHtml(shortId(c.value))}</button>
+        `).join('')}
+      </div>` : ''}
+      ${kinds.length > 1 && !many && !sharedKind ? `
+      <div class="chips" role="group" aria-label="Which detail you are giving">
+        ${kinds.map((f) => `
+          <button type="button" data-ref-kind="${escapeHtml(f.key)}" aria-pressed="${!!field && f.key === field.key}">${escapeHtml(f.label)}</button>
+        `).join('')}
+      </div>` : ''}
+      <div class="row">
+        ${many ? `
+        <select class="ref-kind" aria-label="Which detail you are giving">
+          ${field ? '' : '<option value="" selected disabled>What is it?</option>'}
+          ${kinds.map((f) => `
+            <option value="${escapeHtml(f.key)}" ${field && f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
+          `).join('')}
+        </select>` : ''}
+        <input class="ref-value${refError ? ' invalid' : ''}" type="${field?.inputMode === 'email' ? 'email' : 'text'}"
+          inputmode="${escapeHtml(field?.inputMode === 'numeric' || field?.inputMode === 'tel' ? 'numeric' : 'text')}"
+          value="${escapeHtml(refValue)}"
+          placeholder="${escapeHtml(field ? (field.placeholder || field.label) : 'Your ID')}"
+          aria-label="${escapeHtml(field ? field.label : 'Your ID')}" ${refError ? 'aria-invalid="true"' : ''} />
+      </div>
+      ${field?.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
+      ${refError ? `<p class="field-err" role="alert">${ICONS.alert}<span>${escapeHtml(refError)}</span></p>` : ''}
+      ${optional ? `<button type="button" class="link" data-act="ref-skip">${
+        refMode === 'ask' ? 'I don\'t have this — send without it' : 'Not sure — send as it is'}</button>` : ''}`;
+
+    refsBox.querySelectorAll('[data-ref-cand]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        takeCandidate(refCandidates[Number(chip.dataset.refCand)]);
+        drawRefs();
+      });
+    });
+    refsBox.querySelectorAll('[data-ref-kind]').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        refChoice = chip.dataset.refKind;
+        refError = '';
+        refWarned = false;
+        drawRefs();
+      });
+    });
+    const value = refsBox.querySelector('.ref-value');
+    value.addEventListener('input', () => {
+      refValue = value.value;
+      refError = '';
+      // A changed value has not been warned about yet.
+      refWarned = false;
+    });
+    // Enter in the box is the same gesture as pressing Send, which is what
+    // somebody who has just been asked one question expects it to be.
+    value.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); sendBtn.click(); }
+    });
+    refsBox.querySelector('.ref-kind')?.addEventListener('change', (e) => {
+      refChoice = e.target.value;
+      refError = '';
+      drawRefs();
+      refsBox.querySelector('.ref-value')?.focus();
+    });
+    refsBox.querySelector('[data-act="ref-skip"]')?.addEventListener('click', () => {
+      // Skipping is answering. Without this the panel asks again on the next
+      // press and the reporter is in a loop with a button that does nothing.
+      // The text still goes; the server reads it either way.
+      refSettled = true;
+      refOpen = false;
+      refChoice = null;
+      refValue = '';
+      refError = '';
+      refWarned = false;
+      drawRefs();
+      say('');
+    });
+
+    // Focus where the next decision is: the kind, when that is all that is
+    // missing; the box otherwise.
+    const next = !field && refValue ? refsBox.querySelector('[data-ref-kind], .ref-kind') : null;
+    (next || value).focus();
+  }
+
+  /**
+   * Open the question, pre-filled with the best of what the text offered.
+   *
+   * Conflicts first — the text said two things and only the reporter knows
+   * which — then loose IDs, which are probably the answer and only need a
+   * name. Nothing, and it is the plain question it always was.
+   */
+  function openRefs(read) {
+    refCandidates = read.conflicts.length ? read.conflicts : read.loose.slice(0, 4);
+    refMode = read.conflicts.length ? 'confirm' : read.loose.length ? 'suggest' : 'ask';
+    refOpen = true;
+    if (refCandidates.length) {
+      // One contested value: pre-fill it so they only choose what it is. Two
+      // or more: pick nothing, because picking is the question.
+      if (refCandidates.length === 1) takeCandidate(refCandidates[0]);
+      else {
+        refValue = '';
+        const [first] = refCandidates;
+        const same = refCandidates.every((c) => c.kinds.length === 1 && c.kinds[0].key === first.kinds[0].key);
+        refChoice = same ? first.kinds[0].key : null;
+      }
+    } else {
+      refChoice = refChoice || refConfig.fields[0].key;
+    }
+    drawRefs();
+  }
+
+  /**
+   * Whether Send should stop and ask.
+   *
+   * Never when the text answered it outright. Once when the text said two
+   * things or something unlabelled — on every policy, because sending the
+   * wrong record's id with confidence is worse than one extra tap. And the
+   * plain question on `optional`/`required` projects as before.
+   */
+  function needsReference() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return false;
+    if (answeredReference().length) return false;
+    const read = readText();
+    if (textAnswers(read)) return false;
+    if (refSettled && refConfig.policy !== 'required') return false;
+    return read;
+  }
+
+  /**
+   * Whether Send should stop here: true when it asked, or warned, instead.
+   *
+   * Ask, if this project asks and nothing they wrote answered it. The first
+   * press opens the question rather than sending; the second sends. That
+   * costs one extra press on projects that want an identifier, and it is the
+   * only shape that does not put paperwork in front of a person who came here
+   * to say something is broken.
+   */
+  function holdForReference() {
+    // First, though: a value in the box but no kind picked. Asked rather than
+    // guessed — a wrong kind joins on the wrong table.
+    if (refOpen && refValue.trim() && !refChoice) {
+      refError = 'Pick what this ID is.';
+      drawRefs();
+      return true;
+    }
+
+    const read = needsReference();
+    if (read) {
+      if (!refOpen) openRefs(read); else drawRefs();
+      say('');
+      return true;
+    }
+
+    // They chose a field and typed something that is not that shape. Advisory
+    // on the server — a value that fails is still what they believe identifies
+    // them, and it is kept — but worth one chance to fix a typo here, where the
+    // number is still on screen.
+    if (refChoice && refValue.trim()) {
+      const field = refConfig.fields.find((f) => f.key === refChoice);
+      if (!refWarned && field && !validateReference(field, refValue)) {
+        refError = `That does not look like a ${field.label.toLowerCase()}. Press Send again to use it anyway.`;
+        // Once, and then it is their call. Our idea of the shape of somebody's
+        // account number is not better than theirs, and refusing outright is
+        // how a genuine reference gets lost — so the second press sends it and
+        // the API keeps it, marked as not matching the expected format.
+        refWarned = true;
+        drawRefs();
+        return true;
+      }
+    }
+    return false;
+  }
+
+  ctx.holdForReference = holdForReference;
+  ctx.answeredReference = answeredReference;
+}

package/src/panel/render.js

@@ -0,0 +1,132 @@
+// Markup the panel's screens share: the header, empty and loading states, and
+// the small formatting helpers every screen reaches for — dates, statuses and
+// escaping. Pure functions of their arguments; nothing here touches the DOM
+// except the two scroll helpers, which are handed the element they move.
+
+import * as ICONS from './icons.js';
+
+/**
+ * The panel's header, on every screen. The assistant's orb carries the
+ * identity; `back` adds the way out of a report to the list of them.
+ *
+ * `theme` is the name of the theme in force ("Light", "Dark", "System
+ * default"); given one, the header carries the button that moves to the next.
+ * The button holds all three glyphs and the stylesheet shows the one matching
+ * the host element's class, so it is right on every screen without anyone
+ * redrawing it. Its press is handled once, on the scrim (index.js).
+ */
+export function headHtml({ title, sub, id = '', back = false, theme = '' }) {
+  return `
+    <div class="head">
+      ${back ? `<button class="icon-btn back" type="button" data-act="back" aria-label="Back to your reports">${ICONS.back}</button>` : ''}
+      <span class="orb mark" aria-hidden="true"></span>
+      <div class="titles">
+        <h2${id ? ` id="${id}"` : ''}>${escapeHtml(title)}</h2>
+        <p>${escapeHtml(sub)}</p>
+      </div>
+      ${theme ? `<button class="icon-btn theme" type="button" data-act="theme" title="Theme: ${escapeHtml(theme)}"
+        aria-label="Theme: ${escapeHtml(theme)}. Change theme"><span class="m-light">${ICONS.sun}</span><span class="m-dark">${ICONS.moon}</span><span class="m-auto">${ICONS.auto}</span></button>` : ''}
+      <button class="icon-btn" type="button" data-act="close" aria-label="Close">${ICONS.close}</button>
+    </div>`;
+}
+
+export function emptyHtml(text, icon) {
+  return `<div class="empty"><span class="empty-ico" aria-hidden="true">${icon}</span>${escapeHtml(text)}</div>`;
+}
+
+/** Placeholder rows while the list loads — the shape of what is coming. */
+export function skeletonRows(n) {
+  return Array.from({ length: n }, () => `
+    <div class="row" aria-hidden="true">
+      <span class="row-ico"></span>
+      <span class="who"><span class="skel" style="width:70%"></span><span class="skel" style="width:40%;height:9px"></span></span>
+    </div>`).join('') + '<span class="sr-only">Loading…</span>';
+}
+
+export function skeletonBubbles() {
+  return `
+    <div aria-hidden="true" style="display:flex;flex-direction:column;gap:10px;padding-top:6px">
+      <span class="skel" style="width:42%;height:34px;border-radius:16px;align-self:center"></span>
+      <span class="skel" style="width:66%;height:52px;border-radius:18px"></span>
+      <span class="skel" style="width:48%;height:38px;border-radius:18px;align-self:flex-end"></span>
+    </div>
+    <span class="sr-only">Loading…</span>`;
+}
+
+export function initials(name) {
+  const parts = String(name).trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return '?';
+  return (parts[0][0] + (parts.length > 1 ? parts[parts.length - 1][0] : '')).toUpperCase();
+}
+
+export function dayKey(iso) {
+  const d = new Date(iso);
+  return Number.isFinite(d.getTime()) ? `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}` : null;
+}
+
+/** "Today" / "Yesterday" / "Mon, 14 Sep" — the label on a day separator. */
+export function dayLabel(iso) {
+  const d = new Date(iso);
+  const today = new Date();
+  const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+  if (dayKey(d) === dayKey(today)) return 'Today';
+  if (dayKey(d) === dayKey(yesterday)) return 'Yesterday';
+  try {
+    return d.toLocaleDateString(undefined, {
+      weekday: 'short', day: 'numeric', month: 'short',
+      ...(d.getFullYear() !== today.getFullYear() ? { year: 'numeric' } : {}),
+    });
+  } catch {
+    return relativeDay(iso);
+  }
+}
+
+/** "14:05" or "2:05 PM", in the reader's own convention. */
+export function clockTime(iso) {
+  const d = new Date(iso);
+  if (!Number.isFinite(d.getTime())) return '';
+  try {
+    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+/** Whether the reader is at the foot of the thread, within a line or two. */
+export function atLatest(thread) {
+  return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 40;
+}
+
+export function scrollToLatest(thread, { smooth = false } = {}) {
+  const calm = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (smooth && !calm && thread.scrollTo) thread.scrollTo({ top: thread.scrollHeight, behavior: 'smooth' });
+  else thread.scrollTop = thread.scrollHeight;
+}
+
+/** Status as a word a reporter would use, not the enum the database stores. */
+export function statusWord(status) {
+  return {
+    OPEN: 'Open',
+    IN_PROGRESS: 'In progress',
+    RESOLVED: 'Fixed',
+    CLOSED: 'Closed',
+  }[status] || String(status || '').toLowerCase();
+}
+
+/** "today" / "3 days ago" — enough for a history list, no library. */
+export function relativeDay(iso) {
+  const then = new Date(iso).getTime();
+  if (!Number.isFinite(then)) return '';
+  const days = Math.floor((Date.now() - then) / 86400000);
+  if (days <= 0) return 'today';
+  if (days === 1) return 'yesterday';
+  if (days < 30) return `${days} days ago`;
+  const months = Math.floor(days / 30);
+  return months === 1 ? 'a month ago' : `${months} months ago`;
+}
+
+export function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+  ));
+}

package/src/panel/signin.js

@@ -0,0 +1,228 @@
+// Who is reporting.
+//
+// Three states, and the project picks which: 'off' is every project that has
+// not asked for this and draws nothing at all; 'optional' offers a sign-in
+// above the form that the reporter may ignore; 'required' replaces the form
+// with it until they have.
+//
+// Asked on every open rather than remembered for the page, because the answer
+// includes whether this browser's session is still live — and it can end
+// somewhere else, when the same address signs in on another device. A widget
+// holding a cached "signed in as you" would find out at the moment the report
+// failed, which is the worst moment to discover it.
+
+import { escapeHtml } from './render.js';
+
+export function mountSignIn(ctx) {
+  const {
+    client, say, compose, sendBtn, historyBtn, callBtn, whoami,
+  } = ctx;
+
+  let login = { mode: client.lastLoginMode || 'off', signedIn: null };
+  // 'idle' — showing who they are; 'email' / 'code' — the two steps of getting there.
+  let step = 'idle';
+  let pendingEmail = client.config.user?.email || '';
+  let pendingCode = '';
+  let signInBusy = false;
+  let signInError = '';
+
+  const mustSignIn = () => login.mode === 'required' && !login.signedIn;
+
+  /** Show or hide everything that only makes sense once we know who is filing. */
+  function applyGate() {
+    const shut = mustSignIn();
+    compose.hidden = shut;
+    sendBtn.hidden = shut;
+    if (historyBtn) historyBtn.hidden = shut;
+    // The call offer is the same errand as the form, so it goes with it — and
+    // comes back only if the API had already said this project can take one.
+    if (shut) callBtn.hidden = true;
+    else if (ctx.callOffered()) callBtn.hidden = false;
+  }
+
+  function drawWhoami() {
+    if (login.mode === 'off') {
+      whoami.hidden = true;
+      whoami.innerHTML = '';
+      return;
+    }
+    whoami.hidden = false;
+    whoami.classList.toggle('asking', step !== 'idle');
+
+    const problem = signInError ? `<div class="after err">${escapeHtml(signInError)}</div>` : '';
+
+    if (step === 'idle') {
+      if (login.signedIn) {
+        whoami.innerHTML = `<span class="who">Signed in as <strong>${escapeHtml(login.signedIn.email)}</strong></span>`
+          + '<button type="button" class="link" data-act="signout">Sign out</button>';
+        return;
+      }
+      // An address the host application passed for its own signed-in user is
+      // not nothing — the report will carry it — so saying "anonymously" over
+      // the top of one would be untrue. It is simply not proved, which is what
+      // the offer beside it is for.
+      const claimed = client.config.user?.email;
+      whoami.innerHTML = `<span class="who">${login.mode === 'required'
+        ? 'Sign in to report a bug here.'
+        : claimed
+          ? `Reporting as <strong>${escapeHtml(claimed)}</strong>.`
+          : 'Reporting anonymously — sign in and we can tell you what happens next.'}</span>`
+        + '<button type="button" class="link" data-act="signin">Sign in</button>';
+      return;
+    }
+
+    if (step === 'email') {
+      whoami.innerHTML = `
+        <p class="why">Sign in with any email address — we'll send you a code.
+          It's how you hear back about this report${login.mode === 'required' ? ', and this project asks for it' : ''}.</p>
+        <div class="row">
+          <input type="email" data-fld="email" value="${escapeHtml(pendingEmail)}"
+            placeholder="you@example.com" autocomplete="email" spellcheck="false"
+            aria-label="Your email address" ${signInBusy ? 'disabled' : ''} />
+          <button type="button" class="primary" data-act="code" ${signInBusy ? 'disabled' : ''}>
+            ${signInBusy ? 'Sending…' : 'Send code'}
+          </button>
+        </div>
+        ${problem}
+        ${login.mode === 'optional'
+          ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>'
+          : ''}`;
+      return;
+    }
+
+    whoami.innerHTML = `
+      <p class="why">We sent a code to <strong>${escapeHtml(pendingEmail)}</strong>. It expires in ten minutes.</p>
+      <div class="row">
+        <input type="text" class="code" data-fld="code" value="${escapeHtml(pendingCode)}"
+          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
+          maxlength="8" aria-label="The code we emailed you" ${signInBusy ? 'disabled' : ''} />
+        <button type="button" class="primary" data-act="confirm" ${signInBusy ? 'disabled' : ''}>
+          ${signInBusy ? 'Checking…' : 'Sign in'}
+        </button>
+      </div>
+      ${problem}
+      <div class="after">
+        <button type="button" class="link" data-act="resend" ${signInBusy ? 'disabled' : ''}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${signInBusy ? 'disabled' : ''}>Use another address</button>
+      </div>`;
+  }
+
+  /** Redraw, and put the cursor where the reporter is being asked to type. */
+  function drawSignIn({ focus = false } = {}) {
+    drawWhoami();
+    applyGate();
+    if (!focus || signInBusy) return;
+    const field = whoami.querySelector('[data-fld]');
+    if (field) { field.focus(); field.setSelectionRange?.(field.value.length, field.value.length); }
+  }
+
+  // Typed values survive a redraw because they are held here, not read back off
+  // a node that the next render replaces.
+  whoami.addEventListener('input', (e) => {
+    const field = e.target.closest('[data-fld]');
+    if (!field) return;
+    if (field.dataset.fld === 'email') pendingEmail = field.value;
+    else pendingCode = field.value;
+  });
+
+  whoami.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' || !e.target.closest('[data-fld]')) return;
+    e.preventDefault();
+    if (step === 'email') requestCode();
+    else confirmCode();
+  });
+
+  async function requestCode({ resent = false } = {}) {
+    const email = pendingEmail.trim();
+    if (!email) { signInError = 'Enter the address to send the code to.'; drawSignIn({ focus: true }); return; }
+
+    signInBusy = true; signInError = ''; drawSignIn();
+    try {
+      await client.signIn(email);
+      pendingEmail = email;
+      if (!resent) pendingCode = '';
+      step = 'code';
+    } catch (err) {
+      signInError = err.message;
+    } finally {
+      signInBusy = false;
+      drawSignIn({ focus: true });
+    }
+  }
+
+  async function confirmCode() {
+    const code = pendingCode.trim();
+    if (!code) { signInError = 'Enter the code we emailed you.'; drawSignIn({ focus: true }); return; }
+
+    signInBusy = true; signInError = ''; drawSignIn();
+    try {
+      const who = await client.confirmSignIn(pendingEmail.trim(), code);
+      login.signedIn = who;
+      step = 'idle';
+      pendingCode = '';
+      say('');
+      // Signing in is what makes a call possible on most projects — there is
+      // now somebody to attribute it to — so the offer is asked for again
+      // rather than staying hidden until the panel is reopened.
+      ctx.offerCall();
+    } catch (err) {
+      signInError = err.message;
+    } finally {
+      signInBusy = false;
+      drawSignIn({ focus: step !== 'idle' });
+    }
+  }
+
+  whoami.addEventListener('click', async (e) => {
+    const btn = e.target.closest('button[data-act]');
+    if (!btn) return;
+    const act = btn.dataset.act;
+
+    if (act === 'signin') { step = 'email'; signInError = ''; drawSignIn({ focus: true }); return; }
+    if (act === 'skip') { step = 'idle'; signInError = ''; drawSignIn(); return; }
+    // Namespaced: the report screen has a back button of its own, and the two
+    // must not be one selector away from each other.
+    if (act === 'signin-back') { step = 'email'; signInError = ''; pendingCode = ''; drawSignIn({ focus: true }); return; }
+    if (act === 'code') { requestCode(); return; }
+    if (act === 'resend') { requestCode({ resent: true }); return; }
+    if (act === 'confirm') { confirmCode(); return; }
+    if (act === 'signout') {
+      signInBusy = true; drawSignIn();
+      try {
+        await client.signOut();
+      } finally {
+        login.signedIn = null;
+        signInBusy = false;
+        // On a project that requires it, signing out puts the form away again
+        // and asks — which is what applyGate does off the back of this.
+        step = login.mode === 'required' ? 'email' : 'idle';
+        drawSignIn({ focus: step !== 'idle' });
+      }
+    }
+  });
+
+  /** Re-read the project's setting and this browser's session, and redraw. */
+  async function refreshLogin({ announce = false } = {}) {
+    const state = await client.loginState();
+    login = { mode: state.mode, signedIn: state.signedIn };
+    client.lastLoginMode = state.mode;
+    // Nothing to type on a project that requires sign-in and has nobody in it.
+    if (mustSignIn() && step === 'idle') step = 'email';
+    if (login.signedIn) step = 'idle';
+    if (announce && state.signedOutReason) say(state.signedOutReason, 'info');
+    drawSignIn();
+  }
+
+  refreshLogin({ announce: true }).catch(() => { /* a widget that can't ask stays open */ });
+
+  /**
+   * Put the panel back in step after a send or a call was refused: the reason
+   * may be that this browser was signed out while the panel sat open.
+   */
+  function recheckSignIn() {
+    if (login.mode !== 'off') refreshLogin().catch(() => {});
+  }
+
+  ctx.mustSignIn = mustSignIn;
+  ctx.recheckSignIn = recheckSignIn;
+}