@sphoro/bugcatch-web-sdk 0.16.0 → 0.18.0

package/src/panel/icons.js

@@ -0,0 +1,34 @@
+// The panel's glyphs: the launcher's set (../icons.js) and everything the
+// form, the thread and the call screens draw.
+
+export * from '../icons.js';
+
+export const camera = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.2a1 1 0 0 0 .83-.45l.94-1.4A1 1 0 0 1 9.3 4.7h5.4a1 1 0 0 1 .83.45l.94 1.4a1 1 0 0 0 .83.45h2.2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.4"/></svg>';
+export const video = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="12.5" height="12" rx="2.2"/><path d="M15.5 10.8l4.2-2.6a.6.6 0 0 1 .92.5v6.6a.6.6 0 0 1-.92.5l-4.2-2.6z"/></svg>';
+export const paperclip = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11.5l-7.6 7.6a4.6 4.6 0 0 1-6.5-6.5l8-8a3.2 3.2 0 0 1 4.5 4.5l-8 8a1.8 1.8 0 0 1-2.5-2.5l7.1-7.1"/></svg>';
+export const mic = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6"/></svg>';
+export const send = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l16-8-6 16-2.6-6.2L4 12Z"/></svg>';
+export const stopSquare = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>';
+export const back = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg>';
+export const phone = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/></svg>';
+export const phoneOff = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.2 3.5h3l1.5 3.7-2 1.4a11.5 11.5 0 0 0 5.7 5.7l1.4-2 3.7 1.5v3a1.8 1.8 0 0 1-2 1.8A15.6 15.6 0 0 1 4.4 5.5a1.8 1.8 0 0 1 1.8-2z"/><path d="M3 21L21 3"/></svg>';
+export const bug = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6a4 4 0 0 1 8 0"/><rect x="7" y="7.5" width="10" height="12" rx="5"/><path d="M7 11H3.5M7 15.5H4M17 11h3.5M17 15.5h3M12 8v11.5"/></svg>';
+export const retry = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.6-5.9M20 4v4.5h-4.5"/></svg>';
+// The assistant's mark: a four-point spark, drawn wherever it speaks.
+export const sparkle = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5c.5 4.6 2.9 7 7.5 7.5v.1c-4.6.5-7 2.9-7.5 7.5h-.1c-.5-4.6-2.9-7-7.5-7.5V10c4.6-.5 7-2.9 7.5-7.5z"/><path d="M18.6 15.2c.2 1.9 1.2 2.9 3.1 3.1v.1c-1.9.2-2.9 1.2-3.1 3.1h-.1c-.2-1.9-1.2-2.9-3.1-3.1v-.1c1.9-.2 2.9-1.2 3.1-3.1z" opacity=".7"/></svg>';
+export const chevronRight = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 6l6 6-6 6"/></svg>';
+export const inbox = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13.5l2.6-7.2A1.5 1.5 0 0 1 7.5 5.3h9a1.5 1.5 0 0 1 1.4 1L20.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 18z"/><path d="M3.5 13.5h4.8l1.2 2.2h5l1.2-2.2h4.8"/></svg>';
+
+/* The sphoro lockup, as outlines rather than text.
+ *
+ * This SDK runs inside other people's pages, where Space Grotesk is not loaded
+ * and cannot be assumed. Live <text> would render the mark in whatever the host
+ * site happens to use — a different typeface on every customer. Outlines are
+ * self-contained, so the mark is identical everywhere, at the cost of the path
+ * data below.
+ *
+ * The BUGCATCH half reads --bc-brand-mark, not a bare --accent. Custom properties
+ * are exempt from `all: initial`, so they cross the shadow boundary: a host page
+ * that happens to define --accent would have repainted our mark in their brand
+ * colour. The --bc- prefix is ours and no host is going to set it by accident. */
+export const BRAND = '<svg class="bc-brand" viewBox="0 0 254 60" fill="none" role="img" aria-label="sphoro BugCatch"><g fill="currentColor"><path transform="translate(0.00 40.00) scale(0.04000 -0.04000)" d="M276.00 -14.00Q179.00 -14.00 117.00 28.00Q55.00 70.00 42.00 148.00L158.00 178.00Q165.00 143.00 181.50 123.00Q198.00 103.00 222.50 94.50Q247.00 86.00 276.00 86.00Q320.00 86.00 341.00 101.50Q362.00 117.00 362.00 140.00Q362.00 163.00 342.00 175.50Q322.00 188.00 278.00 196.00L250.00 201.00Q198.00 211.00 155.00 228.50Q112.00 246.00 86.00 277.00Q60.00 308.00 60.00 357.00Q60.00 431.00 114.00 470.50Q168.00 510.00 256.00 510.00Q339.00 510.00 394.00 473.00Q449.00 436.00 466.00 376.00L349.00 340.00Q341.00 378.00 316.50 394.00Q292.00 410.00 256.00 410.00Q220.00 410.00 201.00 397.50Q182.00 385.00 182.00 363.00Q182.00 339.00 202.00 327.50Q222.00 316.00 256.00 310.00L284.00 305.00Q340.00 295.00 385.50 278.50Q431.00 262.00 457.50 231.50Q484.00 201.00 484.00 149.00Q484.00 71.00 427.50 28.50Q371.00 -14.00 276.00 -14.00Z"/><path transform="translate(19.56 40.00) scale(0.04000 -0.04000)" d="M70.00 -200.00V496.00H194.00V436.00H212.00Q229.00 465.00 265.00 487.50Q301.00 510.00 368.00 510.00Q428.00 510.00 479.00 480.50Q530.00 451.00 561.00 394.00Q592.00 337.00 592.00 256.00V240.00Q592.00 159.00 561.00 102.00Q530.00 45.00 479.00 15.50Q428.00 -14.00 368.00 -14.00Q323.00 -14.00 292.50 -3.50Q262.00 7.00 243.50 23.50Q225.00 40.00 214.00 57.00H196.00V-200.00ZM330.00 96.00Q389.00 96.00 427.50 133.50Q466.00 171.00 466.00 243.00V253.00Q466.00 325.00 427.00 362.50Q388.00 400.00 330.00 400.00Q272.00 400.00 233.00 362.50Q194.00 325.00 194.00 253.00V243.00Q194.00 171.00 233.00 133.50Q272.00 96.00 330.00 96.00Z"/><path transform="translate(43.68 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V700.00H196.00V435.00H214.00Q222.00 451.00 239.00 467.00Q256.00 483.00 284.50 493.50Q313.00 504.00 357.00 504.00Q415.00 504.00 458.50 477.50Q502.00 451.00 526.00 404.50Q550.00 358.00 550.00 296.00V0.00H424.00V286.00Q424.00 342.00 396.50 370.00Q369.00 398.00 318.00 398.00Q260.00 398.00 228.00 359.50Q196.00 321.00 196.00 252.00V0.00Z"/><path transform="translate(66.92 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/><path transform="translate(90.00 40.00) scale(0.04000 -0.04000)" d="M70.00 0.00V496.00H194.00V440.00H212.00Q223.00 470.00 248.50 484.00Q274.00 498.00 308.00 498.00H368.00V386.00H306.00Q258.00 386.00 227.00 360.50Q196.00 335.00 196.00 282.00V0.00Z"/><path transform="translate(104.44 40.00) scale(0.04000 -0.04000)" d="M306.00 -14.00Q232.00 -14.00 173.00 16.00Q114.00 46.00 80.00 103.00Q46.00 160.00 46.00 240.00V256.00Q46.00 336.00 80.00 393.00Q114.00 450.00 173.00 480.00Q232.00 510.00 306.00 510.00Q380.00 510.00 439.00 480.00Q498.00 450.00 532.00 393.00Q566.00 336.00 566.00 256.00V240.00Q566.00 160.00 532.00 103.00Q498.00 46.00 439.00 16.00Q380.00 -14.00 306.00 -14.00ZM306.00 98.00Q364.00 98.00 402.00 135.50Q440.00 173.00 440.00 243.00V253.00Q440.00 323.00 402.50 360.50Q365.00 398.00 306.00 398.00Q248.00 398.00 210.00 360.50Q172.00 323.00 172.00 253.00V243.00Q172.00 173.00 210.00 135.50Q248.00 98.00 306.00 98.00Z"/></g><rect x="139.52" y="16" width="1.6" height="26" rx="0.8" fill="var(--bc-brand-mark, #5647ee)" opacity="0.4"/><g fill="var(--bc-brand-mark, #5647ee)"><path transform="translate(154.52 35.00) scale(0.01400 -0.01400)" d="M46.35 0.00V105.85H139.75V594.15H46.35V700.00H404.08Q467.38 700.00 514.79 678.41Q562.20 656.83 588.70 617.33Q615.20 577.83 615.20 523.35V513.70Q615.20 465.52 597.03 434.76Q578.85 404.00 553.91 387.24Q528.98 370.48 506.28 363.30V346.35Q528.98 340.35 555.24 323.50Q581.50 306.65 600.00 275.48Q618.50 244.30 618.50 194.48V184.48Q618.50 126.65 591.41 85.24Q564.33 43.83 516.83 21.91Q469.33 0.00 406.85 0.00ZM259.85 109.15H392.60Q441.20 109.15 469.80 132.60Q498.40 156.05 498.40 198.55V208.20Q498.40 250.70 470.21 274.15Q442.02 297.60 392.60 297.60H259.85ZM259.85 406.75H391.65Q437.55 406.75 466.32 430.11Q495.10 453.48 495.10 493.80V503.80Q495.10 544.95 466.74 567.90Q438.37 590.85 391.65 590.85H259.85Z"/><path transform="translate(167.00 35.00) scale(0.01400 -0.01400)" d="M335.30 -14.00Q251.22 -14.00 190.60 16.63Q129.97 47.25 97.56 104.96Q65.15 162.68 65.15 243.03V700.00H185.25V239.73Q185.25 170.48 224.03 131.99Q262.80 93.50 335.30 93.50Q407.80 93.50 446.57 131.99Q485.35 170.48 485.35 239.73V700.00H605.45V243.03Q605.45 162.68 573.13 104.96Q540.80 47.25 480.09 16.63Q419.38 -14.00 335.30 -14.00Z"/><path transform="translate(179.60 35.00) scale(0.01400 -0.01400)" d="M311.85 -14.00Q238.45 -14.00 179.69 18.50Q120.92 51.00 86.69 113.67Q52.45 176.35 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.23 645.59Q598.33 577.17 598.33 460.87V456.70H479.87V464.52Q479.87 504.67 463.76 536.86Q447.65 569.05 414.99 587.77Q382.32 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 138.89Q257.63 91.85 334.00 91.85Q410.02 91.85 445.12 132.83Q480.22 173.80 480.22 237.92V249.67H302.85V351.88H598.33V0.00H487.52V69.10H470.57Q462.70 50.87 446.06 31.44Q429.42 12.00 397.64 -1.00Q365.85 -14.00 311.85 -14.00Z"/><path transform="translate(192.05 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(204.25 35.00) scale(0.01400 -0.01400)" d="M19.75 0.00 211.62 700.00H421.33L613.20 0.00H489.27L447.42 159.60H185.53L143.68 0.00ZM214.25 270.40H418.70L324.95 624.87H308.00Z"/><path transform="translate(216.31 35.00) scale(0.01400 -0.01400)" d="M233.95 0.00V590.85H24.70V700.00H563.30V590.85H354.05V0.00Z"/><path transform="translate(227.75 35.00) scale(0.01400 -0.01400)" d="M332.35 -14.00Q203.57 -14.00 128.01 58.50Q52.45 131.00 52.45 266.87V433.13Q52.45 569.00 128.01 641.50Q203.57 714.00 332.35 714.00Q460.13 714.00 529.58 643.85Q599.03 573.70 599.03 451.57V445.75H480.57V455.22Q480.57 521.42 444.15 563.96Q407.72 606.50 332.35 606.50Q257.63 606.50 215.09 560.70Q172.55 514.90 172.55 435.13V264.87Q172.55 185.93 215.09 139.71Q257.63 93.50 332.35 93.50Q407.72 93.50 444.15 136.45Q480.57 179.40 480.57 244.78V262.25H599.03V248.43Q599.03 126.30 529.58 56.15Q460.13 -14.00 332.35 -14.00Z"/><path transform="translate(239.95 35.00) scale(0.01400 -0.01400)" d="M69.50 0.00V700.00H189.60V405.58H466.40V700.00H586.50V0.00H466.40V296.42H189.60V0.00Z"/></g></svg>';

package/src/panel/index.js

@@ -0,0 +1,251 @@
+// The report panel: the dialog the launcher opens, and everything on it.
+//
+// None of this is in the script every page loads. Most visitors never press
+// the button, and the panel is most of the widget's code and nearly all of its
+// CSS, so it is fetched the first time it is wanted — see widget.js for when,
+// and lazy.js for how.
+//
+// One dialog doing several jobs, one file each:
+//
+//   compose.js   the report form: drafts, severity, attachments, recording, Send
+//   refs.js      "which record is this about", asked at Send
+//   notices.js   what the project's team is telling visitors, at the top
+//   known.js     what the project already knows is broken, and "me too"
+//   picks.js     questions the assistant answers by itself, as one tap
+//   signin.js    who is reporting, proved with a one-time code
+//   call.js      the call offer, the ringing screen, and the bar over a thread
+//   thread.js    the reporter's reports, one of them as a conversation
+//   composer.js  the reply box under that conversation
+//
+// with markup they share in render.js and messages.js.
+//
+// They were one closure, and what they share is still one closure's worth of
+// state: `ctx`, built below. It is passed rather than kept in module variables
+// because two panels must never share it — a widget torn down and mounted again
+// by a second init(), or a page running BugCatch.Client twice, would otherwise
+// find the last panel's draft and the last panel's report in the new one.
+
+import * as ICONS from './icons.js';
+import { BRAND } from './icons.js';
+import { PANEL_CSS } from './styles.js';
+import { headHtml, escapeHtml } from './render.js';
+import { composeHtml, mountCompose } from './compose.js';
+import { mountReferences } from './refs.js';
+import { mountNotices } from './notices.js';
+import { mountKnownIssues } from './known.js';
+import { mountPicks } from './picks.js';
+import { mountCallOffer } from './call.js';
+import { mountSignIn } from './signin.js';
+import { mountThread } from './thread.js';
+
+/**
+ * Open the panel over the page. `preloadCall` fetches the call code ahead of a
+ * call being placed; the launcher hands it over because the panel has no way
+ * to load code of its own.
+ */
+export function openPanel({
+  root, host, dock, client, onClose, preloadCall = () => {},
+}) {
+  addStyles(root);
+  const cfg = client.config;
+
+  const scrim = document.createElement('div');
+  // The panel opens out of whichever corner the dock is in, clearing it by the
+  // dock's measured height rather than a guess at the launcher's size.
+  scrim.className = `scrim ${dock.classList.contains('at-left') ? 'at-left' : 'at-right'} `
+    + `${dock.classList.contains('at-top') ? 'at-top' : 'at-bottom'}`;
+  scrim.style.setProperty('--bc-dock-h', `${Math.round(dock.getBoundingClientRect().height)}px`);
+  scrim.innerHTML = `
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+      ${headHtml({
+        id: 'bc-h',
+        title: 'Tell us what went wrong',
+        sub: "Our assistant starts looking right away. We attach the page details for you.",
+      })}
+      <div class="body">
+        <div class="slot" role="alert"></div>
+        <!-- What the project's team is telling visitors. Drawn only when it
+             has published something. -->
+        <div class="notices" hidden></div>
+        <div class="whoami" hidden></div>
+        <!-- The questions the assistant can answer from their account and
+             close by itself. Drawn only when the project offers any. -->
+        <div class="picks" hidden></div>
+        <div class="known" hidden></div>
+        ${composeHtml(cfg)}
+      </div>
+      <div class="foot">
+        <span class="note" aria-live="polite"></span>
+        ${client.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ''}
+        <span class="spacer"></span>
+        <!-- Hidden until the API confirms this project can take a call, which
+             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>${ICONS.phone}Talk to the team</button>
+        <button class="primary" type="button" data-act="send">Send report ${ICONS.send}</button>
+      </div>
+      <div class="powered">Powered by
+        <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
+      </div>
+    </div>`;
+
+  const $ = (sel) => scrim.querySelector(sel);
+  const slot = $('.slot');
+
+  // Run as the panel goes, in the order the parts added them: the draft saved,
+  // a recording stopped, timers and listeners dropped.
+  const cleanups = [];
+
+  /**
+   * What the parts share.
+   *
+   * The nodes are looked up once and held, not looked up again: the history
+   * and report screens replace the panel's markup, and a draft saved on the way
+   * out must still read what was typed. The functions left null are filled in
+   * by the part that owns them (named beside each), and nothing calls one until
+   * every part has mounted — they are reached from events and replies, and from
+   * the end of this function.
+   */
+  const ctx = {
+    client,
+    cfg,
+    root,
+    host,
+    dock,
+    scrim,
+    $,
+    titleInput: $('#bc-title'),
+    descInput: $('#bc-desc'),
+    compose: $('.compose'),
+    sendBtn: $('[data-act="send"]'),
+    callBtn: $('[data-act="call"]'),
+    historyBtn: $('[data-act="history"]'),
+    note: $('.foot .note'),
+    whoami: $('.whoami'),
+    refsBox: $('.refs'),
+    notices: $('.notices'),
+    known: $('.known'),
+    picks: $('.picks'),
+    // A report or a call is on its way. Escape and a click outside wait for it.
+    sending: false,
+    closed: false,
+    say,
+    close,
+    preloadCall,
+    onDestroy: (fn) => { cleanups.push(fn); },
+    // compose.js
+    refreshSendState: null,
+    isRecording: null,
+    stopRecording: null,
+    // refs.js
+    holdForReference: null,
+    answeredReference: null,
+    // picks.js
+    pickedIssue: null,
+    // call.js
+    offerCall: null,
+    callOffered: null,
+    showLiveCall: null,
+    // signin.js
+    mustSignIn: null,
+    recheckSignIn: null,
+    // thread.js
+    succeed: null,
+    refreshThread: null,
+    openReportId: null,
+  };
+
+  /* ---------- the parts, in the order they ask the API anything ---------- */
+
+  mountCompose(ctx);
+  mountReferences(ctx);
+  mountNotices(ctx);
+  mountKnownIssues(ctx);
+  mountPicks(ctx);
+  mountCallOffer(ctx);
+  mountSignIn(ctx);
+  mountThread(ctx);
+
+  /* ---------- lifecycle ---------- */
+
+  const previouslyFocused = document.activeElement;
+  const rootStyle = document.documentElement.style;
+  const previousOverflow = rootStyle.overflow;
+  rootStyle.overflow = 'hidden';
+
+  function destroy() {
+    if (ctx.closed) return;
+    cleanups.forEach((fn) => fn());
+    ctx.closed = true;
+    rootStyle.overflow = previousOverflow;
+    document.removeEventListener('keydown', onKeydown, true);
+    scrim.remove();
+    dock.hidden = false;
+    host.style.opacity = '';
+    onClose?.();
+  }
+
+  function close() {
+    if (ctx.closed) return;
+    // Let the exit animation play, but never wait on an event that a
+    // reduced-motion user's near-zero animation might deliver unpredictably.
+    scrim.classList.add('closing');
+    setTimeout(destroy, 160);
+    try { previouslyFocused?.focus?.(); } catch { /* element may be gone */ }
+  }
+
+  function onKeydown(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (ctx.isRecording()) { ctx.stopRecording({ keep: false }); return; }
+      if (!ctx.sending) close();
+      return;
+    }
+    if (e.key !== 'Tab' || ctx.isRecording()) return;
+    // Focus trap: the panel is modal, so Tab must not reach the host page.
+    const focusable = [...scrim.querySelectorAll(
+      'button:not(:disabled), input:not([hidden]), textarea, select, [href]',
+    )].filter((el) => el.offsetParent !== null || el === document.activeElement);
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = scrim.getRootNode().activeElement;
+    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+  }
+
+  document.addEventListener('keydown', onKeydown, true);
+  scrim.addEventListener('click', (e) => { if (e.target === scrim && !ctx.sending) close(); });
+  $('[data-act="close"]').addEventListener('click', close);
+
+  /** The banner at the top of the form: an error, or with `info`, a notice. */
+  function say(text, kind = 'err') {
+    slot.innerHTML = text
+      ? `<div class="msg ${kind}">${kind === 'err' ? ICONS.alert : ''}<span>${escapeHtml(text)}</span></div>`
+      : '';
+  }
+
+  root.appendChild(scrim);
+  ctx.refreshSendState();
+  ctx.titleInput.focus();
+
+  return { destroy, close };
+}
+
+/**
+ * Add the panel's stylesheet to the widget's shadow root, once.
+ *
+ * Straight after the launcher's sheet rather than at the end of the root, so
+ * the two stay together at the top and the panel's rules keep their place after
+ * the launcher's in the cascade — the order they had as one stylesheet.
+ */
+function addStyles(root) {
+  if (root.querySelector('style[data-panel]')) return;
+  const style = document.createElement('style');
+  style.setAttribute('data-panel', '');
+  style.textContent = PANEL_CSS;
+  const launcherSheet = root.querySelector('style');
+  if (launcherSheet) launcherSheet.after(style);
+  else root.prepend(style);
+}

package/src/panel/known.js

@@ -0,0 +1,130 @@
+// What is already known: the project's open issues that look like what the
+// reporter is describing, above the form, with "me too" instead of a second
+// report about the same thing.
+
+import { escapeHtml, relativeDay } from './render.js';
+
+export function mountKnownIssues(ctx) {
+  const {
+    client, cfg, titleInput, known,
+  } = ctx;
+
+  // The list as it was last fetched, and who has said what about it. Held here
+  // rather than re-read from the DOM so a re-render after a join does not have
+  // to parse its own markup back out.
+  let issues = [];
+  let issueError = '';
+  let askingFor = null;
+  let matchAbort = null;
+
+  // Asked once when the dialog opens, like the call offer (call.js) and for the
+  // same reason: it is one request per opened widget rather than one per page
+  // load of every site running this SDK, and most projects will answer with an
+  // empty list forever.
+  function loadKnownIssues() {
+    if (cfg.knownIssues === false) return;
+    client.knownIssues()
+      .then((rows) => { issues = rows; drawKnown(); })
+      .catch(() => { /* a help panel that cannot load is simply not drawn */ });
+  }
+
+  // Re-run as the title is typed, so the panel narrows to what they are
+  // actually describing. Debounced, and the previous request is aborted rather
+  // than left to land: a fast typist otherwise renders whichever response comes
+  // back last, which is not necessarily the one matching the box.
+  let matchTimer = null;
+  function matchKnown(query) {
+    if (cfg.knownIssues === false) return;
+    clearTimeout(matchTimer);
+    matchAbort?.abort();
+    const q = (query || '').trim();
+    if (q.length < 3) { loadKnownIssues(); return; }
+    matchTimer = setTimeout(() => {
+      matchAbort = new AbortController();
+      client.matchKnownIssues(q, { signal: matchAbort.signal })
+        .then((rows) => {
+          // An empty result means "nothing like this is known", which is not
+          // the same as "nothing is known" — fall back to the full list rather
+          // than blanking a panel the reporter was reading.
+          if (rows.length) { issues = rows; drawKnown(); }
+        })
+        .catch(() => {});
+    }, 250);
+  }
+
+  function drawKnown() {
+    if (!issues.length) { known.hidden = true; known.innerHTML = ''; return; }
+    known.hidden = false;
+    known.innerHTML = `
+      <p class="known-h">Already reported</p>
+      ${issues.map((issue) => `
+        <div class="issue ${issue.joined ? 'is-joined' : ''}">
+          <span class="who">
+            <span class="t">${escapeHtml(issue.title)}</span>
+            <span class="meta">${escapeHtml(knownMeta(issue))}</span>
+          </span>
+          <button class="join" type="button" data-join="${escapeHtml(issue.id)}"
+            ${issue.joined ? 'disabled' : ''}>${issue.joined ? 'Following' : 'Me too'}</button>
+        </div>
+        ${askingFor === issue.id ? `
+        <div class="ask">
+          <input type="email" class="join-email" placeholder="you@example.com"
+            aria-label="Your email, so we can tell you when this is fixed" />
+          <button class="ghost" type="button" data-join-confirm="${escapeHtml(issue.id)}">Follow</button>
+        </div>` : ''}
+      `).join('')}
+      ${issueError ? `<p class="err">${escapeHtml(issueError)}</p>` : ''}`;
+  }
+
+  // What a reporter is told about an issue beside its title. Deliberately not
+  // its severity: how bad the team thinks this is, published to everybody who
+  // opens the widget, is an internal judgement that reads as a promise.
+  function knownMeta(issue) {
+    const state = issue.status === 'IN_PROGRESS' ? 'Being worked on now' : 'Not fixed yet';
+    // The count is dropped entirely at zero rather than written as "0 people",
+    // or as a bare "Reported" that says nothing the heading above has not
+    // already said. Nobody having pressed the button yet is not a fact about
+    // this issue worth a reporter's attention.
+    const others = issue.affectedCount === 0
+      ? ''
+      : ` · ${issue.affectedCount} ${issue.affectedCount === 1 ? 'person has' : 'people have'} said this is happening to them`;
+    return `${state} · reported ${relativeDay(issue.since)}${others}`;
+  }
+
+  known.addEventListener('click', async (e) => {
+    const start = e.target.closest('[data-join]');
+    const confirm = e.target.closest('[data-join-confirm]');
+    if (!start && !confirm) return;
+
+    const bugId = (confirm || start).getAttribute(confirm ? 'data-join-confirm' : 'data-join');
+    issueError = '';
+
+    // An address is what joining buys them — being told when it is fixed — so
+    // ask for one when neither a sign-in nor identify() has supplied it, rather
+    // than recording somebody nobody can ever write to.
+    const email = known.querySelector('.join-email')?.value?.trim()
+      || client.signedInAs()?.email
+      || client.config.user?.email;
+    if (!email) {
+      askingFor = bugId;
+      drawKnown();
+      known.querySelector('.join-email')?.focus();
+      return;
+    }
+
+    try {
+      const result = await client.meToo(bugId, { email });
+      askingFor = null;
+      issues = issues.map((issue) => (issue.id === bugId
+        ? { ...issue, joined: true, affectedCount: result.affectedCount ?? issue.affectedCount }
+        : issue));
+      drawKnown();
+    } catch (err) {
+      issueError = err.message.replace('[BugCatch] ', '');
+      drawKnown();
+    }
+  });
+
+  loadKnownIssues();
+  titleInput.addEventListener('input', () => matchKnown(titleInput.value));
+}

package/src/panel/messages.js

@@ -0,0 +1,176 @@
+// The thread's markup: one entry per event or message, oldest first, grouped
+// into turns the way a chat groups them. Strings in, strings out — the thread
+// screen (thread.js) decides when to draw them and what to keep on screen.
+
+import * as ICONS from './icons.js';
+import { SOLVED_PROMPT } from '../agent-issues.js';
+import { humanSize } from '../capture.js';
+import {
+  escapeHtml, dayKey, dayLabel, clockTime, relativeDay, initials,
+} from './render.js';
+
+/**
+ * The whole thread, oldest first.
+ *
+ * The API hands back one ordered list holding both kinds of entry, which is
+ * what keeps a reply sitting under the status change that prompted it. Entries
+ * carrying `from` are messages; the rest are things that happened.
+ */
+export function threadHtml(timeline) {
+  const entries = timeline || [];
+  if (!entries.length) return '';
+  let day = null;
+  let prev = null;
+  return entries.map((e) => {
+    // A rule with the date on it whenever the calendar day turns, the way a
+    // chat marks that the next message came later.
+    const d = dayKey(e.at);
+    const sep = d && d !== day ? `<div class="day-sep" role="separator">${escapeHtml(dayLabel(e.at))}</div>` : '';
+    if (sep) { day = d; prev = null; }
+    if (!e.from) { prev = null; return sep + systemHtml(e); }
+    const message = {
+      from: e.from,
+      author: e.reply?.author,
+      automated: e.reply?.automated,
+      body: e.reply?.body,
+      at: e.at,
+      attachments: e.reply?.attachments,
+    };
+    // Consecutive messages from the same voice within a few minutes are one
+    // turn: one avatar, one name, the bubbles stacked under it.
+    const who = speakerOf(message);
+    const cont = prev && prev.who === who
+      && Math.abs(new Date(e.at).getTime() - new Date(prev.at).getTime()) < 5 * 60_000;
+    prev = { who, at: e.at };
+    return sep + messageHtml(message, cont ? 'cont' : '');
+  }).join('');
+}
+
+/** Which voice a message is in, for grouping: the reporter, the assistant, or a named person. */
+function speakerOf(message) {
+  if (message.from === 'reporter') return 'me';
+  if (message.automated) return 'assistant';
+  return `team:${message.author || ''}`;
+}
+
+/**
+ * Something that happened, rather than something someone said.
+ *
+ * `summary` is written by the API, which knows what changed and phrases it for
+ * the person who reported it — so the wording here matches the toast and the
+ * portal exactly rather than being a third attempt at the same sentence.
+ */
+function systemHtml(entry) {
+  const when = clockTime(entry.at);
+  return `
+    <div class="sys k-${escapeHtml(entry.kind)}">
+      <span class="dot" aria-hidden="true"></span>${escapeHtml(entry.summary || '')}${when ? `
+      <span class="t">· ${escapeHtml(when)}</span>` : ''}
+    </div>`;
+}
+
+/**
+ * One bubble. `state` marks a message that is still in flight, or failed, or
+ * one that continues the turn above it.
+ *
+ * A reply that was sent automatically says so, above the words rather than
+ * after them. The person reading it is deciding whether their problem has been
+ * understood, and that decision is different when nobody has read the report —
+ * so it is not a footnote, and it is not left to be inferred from the tone.
+ */
+export function messageHtml(message, state = '') {
+  const mine = message.from === 'reporter';
+  const body = message.body || '';
+  const attachments = message.attachments || [];
+  const automated = !mine && Boolean(message.automated);
+
+  // The text goes in its own element rather than as a bare child of .bubble:
+  // it is the only part that wants `white-space: pre-wrap`, and with that rule
+  // on the bubble the template's own newlines and indentation render as a
+  // blank line above and below every message.
+  const text = body ? `<span class="msg-text">${escapeHtml(body)}</span>` : '';
+  const files = attachments.length
+    ? `<div class="att">${attachments.map(attachmentHtml).join('')}</div>`
+    : '';
+
+  // Named, or labelled, never both and never neither: an automated message has
+  // no author to name, and naming one would be the lie the label exists to
+  // prevent. The avatar says the same thing at a glance.
+  let who = '';
+  let avatar = '';
+  if (automated) {
+    who = '<span class="msg-who auto">Assistant <span class="tag">AI</span></span>';
+    avatar = `<span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>`;
+  } else if (!mine) {
+    const name = message.author || 'Support team';
+    who = `<span class="msg-who">${escapeHtml(name)}</span>`;
+    avatar = `<span class="av" aria-hidden="true">${escapeHtml(initials(name))}</span>`;
+  }
+  if (state.includes('cont')) who = '';
+
+  // The assistant's one answer ends by inviting a correction (check-rules
+  // confirmMessage). One tap sends it, and what comes back goes to the person
+  // who now owns the report rather than to another automated round — so the
+  // wording is "that's right" and "that's not it", not a yes/no question.
+  // The Sphoro Agent's answer ends by asking whether it settled things
+  // (SOLVED_PROMPT). Yes closes the report; No puts it in front of a person.
+  const confirm = automated && /it goes to the same person/i.test(body)
+    ? `<div class="quick" role="group" aria-label="Answer">
+        <button type="button" data-quick="Yes, this is the problem">${ICONS.check}That's right</button>
+        <button type="button" data-quick="No, that is not the problem">That's not it</button>
+      </div>`
+    : automated && SOLVED_PROMPT.test(body)
+      ? `<div class="quick" role="group" aria-label="Did this answer your question?">
+          <button type="button" data-quick="Yes, that answers it">${ICONS.check}Yes, that answers it</button>
+          <button type="button" data-quick="No, I still need help">No, I still need help</button>
+        </div>`
+      : '';
+
+  return `
+    <div class="msg-row ${mine ? 'mine' : 'theirs'} ${automated ? 'auto' : ''} ${state}">
+      ${avatar}
+      ${who}
+      <div class="bubble ${body ? '' : 'silent'}">${text}${files}</div>
+      ${confirm}
+      <span class="msg-when">${escapeHtml(clockTime(message.at) || relativeDay(message.at))}</span>
+    </div>`;
+}
+
+/** The assistant, thinking: where its next message will appear. */
+export function typingHtml() {
+  return `
+    <div class="typing-row">
+      <span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>
+      <span class="msg-who auto">Assistant <span class="tag">AI</span></span>
+      <div class="bubble typing" role="img" aria-label="The assistant is working on it"><i></i><i></i><i></i></div>
+    </div>`;
+}
+
+/**
+ * One attachment, rendered as what it is.
+ *
+ * An image people can see, a voice note they can play and a document they can
+ * download are three different things, and collapsing them all to a link is
+ * how a chat stops feeling like one. A pending upload has no URL yet, so it
+ * falls through to the file row with nothing to click.
+ */
+function attachmentHtml(a) {
+  const name = escapeHtml(a.name || 'attachment');
+  if (!a.url) return `<span class="file"><span class="nm">${name}</span></span>`;
+  const url = escapeHtml(a.url);
+
+  if (a.type === 'SCREENSHOT') {
+    return `<a href="${url}" target="_blank" rel="noopener noreferrer"><img src="${url}" alt="${name}" loading="lazy"></a>`;
+  }
+  if (a.type === 'AUDIO') {
+    return `<audio controls preload="metadata" src="${url}"></audio>`;
+  }
+  if (a.type === 'VIDEO') {
+    return `<video controls preload="metadata" src="${url}"></video>`;
+  }
+  return `
+    <a class="file" href="${url}" target="_blank" rel="noopener noreferrer" download>
+      <span class="nm">${name}</span>
+      ${a.size ? `<span class="sz">${escapeHtml(humanSize(a.size))}</span>` : ''}
+    </a>`;
+}

package/src/panel/notices.js

@@ -0,0 +1,34 @@
+// What the project's team is telling visitors, at the top of the form: the place
+// to say "we know, it's being fixed" before somebody types it out.
+
+import { noticeNode } from '../notice.js';
+
+// A panel opened to report a bug, not to read news. A project with more live
+// than this has written a page, and the newest are the ones still true — the
+// API sends them newest first.
+const MOST = 3;
+
+export function mountNotices(ctx) {
+  const { client, cfg, notices } = ctx;
+  let list = [];
+
+  function draw() {
+    const shown = list.slice(0, MOST);
+    notices.replaceChildren(...shown.map((a) => noticeNode(a, { where: 'panel', onDismiss })));
+    notices.hidden = shown.length === 0;
+  }
+
+  function onDismiss(a) {
+    client.dismissAnnouncement(a);
+    list = list.filter((x) => x !== a);
+    draw();
+    // The button pressed has gone; the form is where they were headed.
+    ctx.titleInput.focus();
+  }
+
+  if (cfg.announcements !== false && typeof client.announcements === 'function') {
+    client.announcements()
+      .then((rows) => { if (!ctx.closed) { list = rows; draw(); } })
+      .catch(() => { /* a panel with no notices is still a panel that files reports */ });
+  }
+}