@sphoro/bugcatch-web-sdk 0.13.1 → 0.14.1

package/src/widget.js

@@ -11,7 +11,10 @@ import {
   startVoiceNote, voiceSupported,
   humanSize, humanDuration, normalizeMime, UPLOAD_MIMES, REPORT_MIMES,
 } from './capture.js';
+import { draftKey, draftOperation, readDraft } from './drafts.js';
+import { readSession } from './session.js';
 import { sendMessage } from './updates.js';
+import { matchReferences, validateReference } from './references.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -354,6 +357,39 @@ textarea { min-height: 84px; resize: vertical; }
 .whoami .err { color: var(--bc-danger); }
 .whoami .code { letter-spacing: .28em; font-variant-numeric: tabular-nums; }
 
+/* ---------- which record is this about ----------
+   Shaped like .whoami on purpose: both are the widget asking for something
+   rather than the reporter telling us something, and a reporter who has learnt
+   what the grey block means once should not have to learn it twice. Drawn only
+   after Send has been pressed and only when what they wrote did not already
+   answer it, so most people never see this at all. */
+.refs {
+  margin-bottom: 14px; padding: 10px 12px;
+  font-size: 12.5px; line-height: 1.45; color: var(--bc-muted);
+  background: var(--bc-subtle); border-radius: 10px;
+}
+.refs .why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--bc-muted); }
+.refs .row { display: flex; gap: 8px; align-items: stretch; }
+.refs .row input { flex: 1; min-width: 0; }
+.refs select {
+  flex: none; max-width: 45%; padding: 10px 10px; font-size: 13px;
+  color: var(--bc-fg); background: var(--bc-elevated);
+  border: 1px solid var(--bc-border); border-radius: 10px;
+}
+.refs select:focus {
+  outline: none; border-color: var(--bc-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 18%, transparent);
+}
+.refs .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--bc-faint); }
+.refs .after { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
+.refs .err { color: var(--bc-danger); }
+.refs .link {
+  margin-top: 9px; padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.45;
+  color: var(--bc-accent); background: none; border: none; cursor: pointer;
+}
+.refs .link:hover { text-decoration: underline; }
+.refs .link:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 2px; border-radius: 4px; }
+
 /* ---------- severity ---------- */
 .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--bc-subtle); border-radius: 10px; }
 .seg button {
@@ -651,9 +687,9 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
 
 /* A call in progress, in place of the form.
    ---------------------------------------------------------------------------
-   Deliberately not styled as a chat. What is on screen is a transcript of
-   something being said out loud, and bubbles would invite the reporter to type
-   into it — which is the one thing this surface cannot accept. */
+   Deliberately not styled as a chat. Nothing arrives here to read — the
+   conversation is happening out loud — so this is a state, a line of
+   reassurance about the report, and a way to hang up. */
 .call { padding: 20px 22px 14px; animation: bc-fade-in 240ms ease both; }
 .call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
 .call-head strong { font-size: 14.5px; font-weight: 650; }
@@ -663,15 +699,14 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
 }
 .call-dot.off { background: var(--bc-faint); animation: none; }
 @keyframes bc-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
-/* Said before the first word is, because a voice answering is exactly when
-   somebody assumes they have reached a person. */
+/* Said while it is still ringing, because that is when somebody is deciding
+   whether it is worth waiting. */
 .call-note { margin: 0 0 12px; font-size: 12px; color: var(--bc-muted); line-height: 1.5; }
 
-/* ---------- a call to a person, on top of the report it is about ---------- */
-/* A bar rather than its own screen, unlike the agent call. There is nothing to
-   read during this one — no transcript arrives, because nobody is transcribing
-   it — and the thread underneath is exactly what both people are talking about,
-   so taking it off screen would be taking away the only shared reference. */
+/* ---------- the same call, on top of the report it is about ---------- */
+/* A bar rather than its own screen, unlike the one the composer opens. The
+   thread underneath is exactly what both people are talking about, so taking it
+   off screen would be taking away the only shared reference. */
 .livecall {
   display: flex; align-items: center; gap: 9px;
   margin: 12px 0 0; padding: 9px 11px;
@@ -689,15 +724,6 @@ button.primary .spinner { border-color: rgba(255,255,255,.4); border-top-color:
 .livecall .act.danger { border-color: transparent; background: var(--bc-danger); color: #fff; }
 .livecall.over { color: var(--bc-muted); }
 .call-note code { font-size: 11px; }
-.call-lines {
-  max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
-  padding: 10px 12px; border: 1px solid var(--bc-line); border-radius: 8px;
-  background: var(--bc-surface-2, transparent);
-}
-.call-line { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
-.call-line.agent { color: var(--bc-muted); }
-.call-line.you { color: var(--bc-ink); font-weight: 500; }
-.call-line.you::before { content: 'You: '; color: var(--bc-faint); font-weight: 400; }
 @media (prefers-reduced-motion: reduce) { .call-dot { animation: none; } }
 
 .done { padding: 34px 24px 38px; text-align: center; animation: bc-fade-in 240ms ease both; }
@@ -963,6 +989,11 @@ function openPanel({ root, host, dock, client, onClose }) {
           <label for="bc-desc">Any detail that helps <span style="font-weight:450;color:var(--bc-faint)">(optional)</span></label>
           <textarea id="bc-desc" placeholder="I clicked Pay and nothing happened."></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">Severity</label>
           <div class="seg" role="group" aria-labelledby="bc-prio-l">
@@ -994,7 +1025,7 @@ function openPanel({ root, host, dock, client, onClose }) {
              most cannot. Drawn here rather than as a second launcher because it
              is the same errand as Send report — the difference is only whether
              the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>Talk to us</button>
+        <button class="ghost" type="button" data-act="call" hidden>Talk to the team</button>
         <button class="primary" type="button" data-act="send">Send report</button>
       </div>
     </div>`;
@@ -1009,9 +1040,61 @@ function openPanel({ root, host, dock, client, onClose }) {
   const note = $('.note');
   const compose = $('.compose');
   const whoami = $('.whoami');
+  const refsBox = $('.refs');
   const known = $('.known');
   const historyBtn = $('[data-act="history"]');
 
+  const draftStatus = document.createElement('div');
+  draftStatus.setAttribute('role', 'status');
+  draftStatus.className = 'note';
+  compose.prepend(draftStatus);
+  const savedDraftKey = draftKey(cfg, readSession(cfg.projectId)?.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 || $('#bc-desc').value || items.length ? {
+      title: titleInput.value, description: $('#bc-desc').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 (closed || !draft) return;
+      draftStatus.innerHTML = 'Unfinished report on this device. <button type="button" data-resume>Resume report</button> <button type="button" data-discard>Discard</button>';
+      draftStatus.querySelector('[data-resume]').onclick = () => {
+        titleInput.value = draft.title || '';
+        $('#bc-desc').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; });
+  }
+
   /* ---------- lifecycle ---------- */
 
   const previouslyFocused = document.activeElement;
@@ -1024,7 +1107,11 @@ function openPanel({ root, host, dock, client, onClose }) {
   let stopListening = null;
   function destroy() {
     if (closed) return;
+    void persistDraft();
     closed = true;
+    clearTimeout(draftTimer);
+    window.removeEventListener('pagehide', onPageHide);
+    window.removeEventListener('online', reconnectUploads);
     recorder?.cancel();
     // Stop listening before the DOM goes: a frame arriving after this would
     // redraw a panel that is no longer on the page.
@@ -1078,6 +1165,7 @@ function openPanel({ root, host, dock, client, onClose }) {
   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));
       });
@@ -1092,8 +1180,8 @@ function openPanel({ root, host, dock, client, onClose }) {
 
   function refreshSendState() {
     const busy = items.some((it) => it.status === 'uploading');
-    sendBtn.disabled = sending || busy;
-    note.textContent = busy ? 'Waiting for the upload to finish…' : '';
+    sendBtn.disabled = 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.' : '';
     scrim.querySelectorAll('.tool').forEach((t) => {
       t.disabled = sending || items.length >= (cfg.maxAttachments ?? 5);
     });
@@ -1128,6 +1216,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     if (i >= 0) items.splice(i, 1);
     if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
     item.el.remove();
+    void persistDraft();
     refreshSendState();
   }
 
@@ -1180,6 +1269,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     items.push(item);
     thumbs.appendChild(item.el);
     say('');
+    void persistDraft();
     upload(item);
   }
 
@@ -1275,6 +1365,124 @@ function openPanel({ root, host, dock, client, onClose }) {
     titleInput.focus();
   }
 
+  /* ---------- 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.
+  let refConfig = { policy: 'off', fields: [] };
+  let refChoice = null;   // which field they are answering
+  let refValue = '';
+  let refError = '';
+  // 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; })
+    .catch(() => { /* off is the safe answer to every failure */ });
+
+  /** What the report already carries, read out of what they typed. */
+  function referencesInText() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return [];
+    return matchReferences(refConfig.fields, [titleInput.value, $('#bc-desc').value]);
+  }
+
+  /** The answer to send, or an empty list. */
+  function answeredReference() {
+    if (!refChoice || !refValue.trim()) return [];
+    return [{ key: refChoice, value: refValue.trim().slice(0, 120) }];
+  }
+
+  function drawRefs() {
+    if (!refChoice) { refsBox.hidden = true; refsBox.innerHTML = ''; return; }
+    const field = refConfig.fields.find((f) => f.key === refChoice) || refConfig.fields[0];
+    const optional = refConfig.policy !== 'required';
+
+    refsBox.hidden = false;
+    refsBox.innerHTML = `
+      <p class="why">${escapeHtml(
+        optional
+          ? 'One more thing, so we can find your record — this helps us answer faster.'
+          : 'We need one of these to look this up.',
+      )}</p>
+      <div class="row">
+        ${refConfig.fields.length > 1 ? `
+        <select class="ref-kind" aria-label="Which detail you are giving">
+          ${refConfig.fields.map((f) => `
+            <option value="${escapeHtml(f.key)}" ${f.key === field.key ? 'selected' : ''}>${escapeHtml(f.label)}</option>
+          `).join('')}
+        </select>` : ''}
+        <input class="ref-value" type="${field.inputMode === 'email' ? 'email' : 'text'}"
+          inputmode="${escapeHtml(field.inputMode === 'numeric' || field.inputMode === 'tel' ? 'numeric' : 'text')}"
+          value="${escapeHtml(refValue)}"
+          placeholder="${escapeHtml(field.placeholder || '')}"
+          aria-label="${escapeHtml(field.label)}" />
+      </div>
+      ${field.hint ? `<p class="hint">${escapeHtml(field.hint)}</p>` : ''}
+      ${refError ? `<p class="after err">${escapeHtml(refError)}</p>` : ''}
+      ${optional ? '<button type="button" class="link" data-act="ref-skip">I don\'t have this</button>' : ''}`;
+
+    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.
+      refSettled = true;
+      refChoice = null;
+      refValue = '';
+      refError = '';
+      refWarned = false;
+      drawRefs();
+      say('');
+    });
+
+    value.focus();
+  }
+
+  /**
+   * Whether Send should stop and ask.
+   *
+   * True at most once per report. The question is skippable on an `optional`
+   * project and not on a `required` one, and on both the answer to "have we
+   * already got one" is read from the text every time — somebody who types the
+   * loan number into the description after being asked has answered the
+   * question, and being asked again would be the widget not listening.
+   */
+  function needsReference() {
+    if (refConfig.policy === 'off' || !refConfig.fields.length) return false;
+    if (referencesInText().length) return false;
+    if (answeredReference().length) return false;
+    return !refSettled || refConfig.policy === 'required';
+  }
+
   /* ---------- send ---------- */
 
   sendBtn.addEventListener('click', async () => {
@@ -1287,6 +1495,36 @@ function openPanel({ root, host, dock, client, onClose }) {
       return;
     }
 
+    // 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.
+    if (needsReference()) {
+      refChoice = refChoice || refConfig.fields[0].key;
+      drawRefs();
+      say('');
+      return;
+    }
+
+    // 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;
+      }
+    }
+
     sending = true;
     say('');
     refreshSendState();
@@ -1298,10 +1536,16 @@ function openPanel({ root, host, dock, client, onClose }) {
         title,
         description: $('#bc-desc').value,
         priority,
+        references: answeredReference(),
         attachments: items
           .filter((it) => it.status === 'ready')
           .map((it) => ({ type: it.kind, storageKey: it.storageKey, mime: it.mime })),
       });
+      if (res?.cancelled) { sending = false; sendBtn.innerHTML = original; refreshSendState(); return; }
+      draftSubmitted = true;
+      clearTimeout(draftTimer);
+      await draftWrites;
+      if (cfg.drafts !== false) await draftOperation(savedDraftKey, null).catch(() => {});
       succeed(res);
     } catch (err) {
       sending = false;
@@ -1439,25 +1683,22 @@ function openPanel({ root, host, dock, client, onClose }) {
   loadKnownIssues();
   titleInput.addEventListener('input', () => matchKnown(titleInput.value));
 
-  /* ---------- talk to us ---------- */
+  /* ---------- talk to the team ---------- */
 
   // 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.
-  // Which kind, not merely whether. A deployment offers the triage agent or a
-  // person, never both, and the two are wholly different promises: one is a
-  // machine that answers instantly, the other rings a room and may go
-  // unanswered. The button says which, because a reporter told "talk to us" who
-  // gets a robot — or who waits through twenty seconds of ringing expecting an
-  // instant answer — has been misled by this widget rather than by the product.
-  let callKind = null;
+  //
+  // 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;
-        callKind = kind;
-        callBtn.textContent = kind === 'live' ? 'Talk to the team' : 'Talk to us';
+        callOffered = true;
         // 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.
@@ -1498,7 +1739,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     // 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 (callKind) callBtn.hidden = false;
+    else if (callOffered) callBtn.hidden = false;
   }
 
   function drawWhoami() {
@@ -1681,23 +1922,22 @@ function openPanel({ root, host, dock, client, onClose }) {
     say('');
     refreshSendState();
     callBtn.disabled = true;
-    callBtn.innerHTML = `<span class="spinner"></span>${
-      callKind === 'live' ? 'Ringing…' : 'Connecting…'}`;
+    callBtn.innerHTML = '<span class="spinner"></span>Ringing…';
 
     try {
-      // No id: this files the report from what the page was doing and calls
-      // about it, in one round trip.
+      // 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) {
       sending = false;
       callBtn.disabled = false;
-      callBtn.textContent = callKind === 'live' ? 'Talk to the team' : 'Talk to us';
+      callBtn.textContent = 'Talk to the team';
       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) succeed(err.filed);
+      if (err.filed) 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
@@ -1710,7 +1950,7 @@ function openPanel({ root, host, dock, client, onClose }) {
   });
 
   /**
-   * The call, once it is connected.
+   * 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
@@ -1720,51 +1960,35 @@ function openPanel({ root, host, dock, client, onClose }) {
   function showCall(handle) {
     const panel = scrim.querySelector('.panel');
     const ref = handle?.bugId ? String(handle.bugId).slice(0, 8) : null;
-    // Read off the handle rather than off `callKind`: the handle is what actually
-    // happened, and it is the only one of the two that cannot be stale.
-    const live = Boolean(handle?.live);
 
     panel.innerHTML = `
       <div class="call">
         <div class="call-head">
           <span class="call-dot" aria-hidden="true"></span>
-          <strong class="call-state">${live ? 'Ringing…' : 'Connecting…'}</strong>
+          <strong class="call-state">Ringing…</strong>
         </div>
         <p class="call-note">
-          ${live
-            ? `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.`
-            : `You're talking to our automated assistant, not a person. What you say is
-               added to your report${ref ? ` <code>${escapeHtml(ref)}</code>` : ''} for the team to read.`}
+          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="call-lines" role="log" aria-live="polite"></div>
         <div class="foot">
           <span class="spacer"></span>
-          <button class="primary" type="button" data-act="hangup">${live ? 'Cancel' : 'Hang up'}</button>
+          <button class="primary" type="button" data-act="hangup">Cancel</button>
         </div>
       </div>`;
 
     const stateEl = panel.querySelector('.call-state');
-    const linesEl = panel.querySelector('.call-lines');
     const dot = panel.querySelector('.call-dot');
 
-    // Two vocabularies, because the two calls are two different experiences. An
-    // agent call is connected or it failed; a live one spends its first twenty
-    // seconds in a state the agent call has no equivalent for — ringing — and can
-    // end by nobody picking up, which is not a failure and must not read as one.
-    const WORDING = live ? {
+    // 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',
-    } : {
-      connecting: 'Connecting…',
-      listening: 'Listening',
-      speaking: 'Assistant is speaking',
-      ended: 'Call ended',
-      failed: 'The call dropped',
     };
 
     // `missed` is over too, and is the ordinary way a live call ends when the
@@ -1791,38 +2015,8 @@ function openPanel({ root, host, dock, client, onClose }) {
       }
     });
 
-    // One element per turn, replaced while a turn is still being recognised —
-    // appending every partial would scroll the reporter's own half-sentence
-    // past them as they said it.
-    let pending = null;
-    const offLines = client.on('call-transcript', ({ role, text, final }) => {
-      if (!text && !final) return;
-      if (role === 'agent') {
-        // The agent arrives as deltas; they belong on one line.
-        if (!pending || pending.dataset.role !== 'agent') {
-          pending = document.createElement('div');
-          pending.className = 'call-line agent';
-          pending.dataset.role = 'agent';
-          linesEl.appendChild(pending);
-        }
-        if (text) pending.textContent += text;
-        if (final) pending = null;
-      } else {
-        if (!pending || pending.dataset.role !== 'reporter') {
-          pending = document.createElement('div');
-          pending.className = 'call-line you';
-          pending.dataset.role = 'reporter';
-          linesEl.appendChild(pending);
-        }
-        pending.textContent = text;
-        if (final) pending = null;
-      }
-      linesEl.scrollTop = linesEl.scrollHeight;
-    });
-
     panel.querySelector('[data-act="hangup"]').addEventListener('click', () => {
       offState();
-      offLines();
       client.endCall();
       close();
     });
@@ -1847,17 +2041,24 @@ function openPanel({ root, host, dock, client, onClose }) {
    * for one line and is not enough for two, and a panel that closes over the
    * sentence somebody started reading is the reason they open it again.
    */
-  function succeed(res) {
+  function succeed(res, { callFailed = null } = {}) {
     const ref = res?.id ? String(res.id).slice(0, 8) : null;
     const eta = res?.estimate?.label ? String(res.estimate.label) : null;
+    // A press of Call that filed the report and then could not ring anybody.
+    // Shown as a plain "Thanks" it read as a call that had quietly worked, and
+    // the reporter sat waiting for a phone that was never going to ring.
+    const failed = callFailed
+      ? `<p class="eta">${escapeHtml(callFailed)} Your report is filed, and the team will reply in the chat.</p>`
+      : '';
     scrim.querySelector('.panel').innerHTML = `
       <div class="done">
         <div class="tick">${ICONS.check}</div>
         <h3>Thanks — that's on its way.</h3>
         <p>${ref ? `Filed as <code>${escapeHtml(ref)}</code>.` : 'The team has what they need to reproduce it.'}</p>
+        ${failed}
         ${eta ? `<p class="eta">Reports like this usually take <strong>${escapeHtml(eta)}</strong>. We'll let you know when it moves.</p>` : ''}
       </div>`;
-    setTimeout(close, eta ? 4000 : 2000);
+    setTimeout(close, failed ? 6000 : eta ? 4000 : 2000);
   }
 
   /**
@@ -1980,6 +2181,7 @@ function openPanel({ root, host, dock, client, onClose }) {
 
     const thread = body.querySelector('.thread');
     scrollToLatest(thread);
+    mountVerification(body, report);
     if (report.canReply) mountComposer(body, thread, bugId);
   }
 
@@ -1990,6 +2192,22 @@ function openPanel({ root, host, dock, client, onClose }) {
    * would also throw away a draft, a staged file and the scroll position — for
    * someone mid-sentence, a reply arriving would look like the widget crashed.
    */
+  function mountVerification(body, report) {
+    body.querySelector('.fix-verification')?.remove();
+    if (!report.resolvedAt || !['RESOLVED', 'CLOSED'].includes(report.status)) return;
+    const box = document.createElement('div'); box.className = 'fix-verification';
+    if (report.verification) { box.textContent = report.verification === 'CONFIRMED' ? 'You confirmed that this fix works.' : 'Your feedback was recorded.'; }
+    else {
+      box.innerHTML = '<p>Does the fix work for you?</p><textarea maxlength="4000" aria-label="Fix feedback" placeholder="What happens when you try again? (optional)"></textarea><button type="button" data-result="CONFIRMED">It works now</button> <button type="button" data-result="STILL_HAPPENING">Still happening</button><p class="feedback-status" role="status"></p>';
+      box.querySelectorAll('[data-result]').forEach((btn) => { btn.onclick = async () => {
+        box.querySelectorAll('button').forEach((b) => { b.disabled = true; });
+        try { await client.verifyFix(report.id, { result: btn.dataset.result, resolvedAt: report.resolvedAt, note: box.querySelector('textarea').value }); await showReport(report.id); }
+        catch (err) { box.querySelector('.feedback-status').textContent = err.message; box.querySelectorAll('button').forEach((b) => { b.disabled = false; }); }
+      }; });
+    }
+    body.querySelector('.report-head')?.after(box);
+  }
+
   async function refreshThread(bugId) {
     const body = scrim.querySelector('.history.chatting');
     const thread = body?.querySelector('.thread');
@@ -2001,6 +2219,7 @@ function openPanel({ root, host, dock, client, onClose }) {
     } catch { /* a failed refresh leaves what is on screen, which is not wrong */ }
     if (!report || openReportId !== bugId) return;
 
+    mountVerification(body, report);
     const pinned = atLatest(thread);
     thread.innerHTML = threadHtml(report.timeline);
     // Only follow the conversation down if they were already at the bottom.
@@ -2227,12 +2446,11 @@ function openPanel({ root, host, dock, client, onClose }) {
   /**
    * The call, on top of the report it is about.
    *
-   * A bar rather than a screen of its own, which is the opposite of what the
-   * agent call does — and for a reason that only applies to this kind. An agent
-   * call has a transcript arriving line by line, which is worth a whole panel;
-   * this one has nothing to show, because nobody is listening to it but the
-   * person on the other end. What is worth looking at during a live call is the
-   * report, which is what both people are talking 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');
@@ -2267,10 +2485,7 @@ function openPanel({ root, host, dock, client, onClose }) {
       hangBtn.classList.remove('danger');
     };
 
-    const off = client.on('call', ({ state, live }) => {
-      // The agent call emits on the same channel. Its own panel is listening.
-      if (!live) return;
-
+    const off = client.on('call', ({ state }) => {
       if (state === 'ringing') who.textContent = 'Calling the team…';
 
       if (state === 'connecting') {