@sphoro/bugcatch-web-sdk 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Drop-in browser SDK — report bugs with console, network and environment context, without the extension.",
   "type": "module",
   "main": "dist/bugcatch.es.js",

package/src/feedback.js

@@ -0,0 +1,94 @@
+// Feedback: an idea, praise, something that confused somebody — sent from the
+// widget's "Give feedback" or from feedback() — and whether this project takes
+// it at all.
+//
+// In the script every page loads, not the panel's chunk, because feedback() is
+// part of the public API: a site running `widget: false` sends it from a form
+// of its own and never fetches the panel.
+
+import { tooManyMessage } from './busy.js';
+
+/** What the widget offers under "What kind is it?", and what the API keeps. */
+export const FEEDBACK_KINDS = ['idea', 'praise', 'confusing', 'other'];
+
+/** 1 (terrible) to 5 (great). */
+export const FEEDBACK_SCALE = 5;
+
+/** The API refuses longer, so the widget's box stops here too. */
+export const MAX_FEEDBACK_MESSAGE = 4000;
+
+/**
+ * Whether this project wants the option shown. False on every failure — an
+ * API too old to know the route, a network error, a key it refuses — because
+ * a form that the server would then refuse is worse than no form.
+ */
+export async function fetchFeedbackState({ apiBase, apiKey, projectId }) {
+  try {
+    const res = await fetch(`${apiBase}/ingest/feedback?projectId=${encodeURIComponent(projectId)}`, {
+      headers: { 'X-BugCatch-Key': apiKey },
+    });
+    if (!res.ok) return false;
+    const body = await res.json();
+    return body?.enabled === true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The fields as they go on the wire: the message trimmed and bounded, and
+ * anything the API would only drop left out rather than sent to be dropped.
+ * Throws for the one thing that cannot be sent: no message.
+ */
+export function feedbackFields({ message, kind, score, email, name } = {}) {
+  const text = typeof message === 'string' ? message.trim().slice(0, MAX_FEEDBACK_MESSAGE) : '';
+  if (!text) throw new Error('[BugCatch] feedback needs a message.');
+  const n = typeof score === 'string' && score.trim() !== '' ? Number(score) : score;
+  const contact = typeof email === 'string' ? email.trim() : '';
+  const who = typeof name === 'string' ? name.trim() : '';
+  return {
+    message: text,
+    ...(FEEDBACK_KINDS.includes(kind) ? { kind } : {}),
+    ...(Number.isInteger(n) && n >= 1 && n <= FEEDBACK_SCALE ? { score: n } : {}),
+    ...(contact ? { email: contact.slice(0, 254) } : {}),
+    ...(who ? { name: who.slice(0, 120) } : {}),
+  };
+}
+
+/**
+ * Send it. Resolves to `{ id }`; rejects with an Error whose message is fit to
+ * show the person who wrote it, with the `[BugCatch] ` prefix the widget strips.
+ */
+export async function postFeedback({ apiBase, apiKey, token, payload }) {
+  let res;
+  try {
+    res = await fetch(`${apiBase}/ingest/feedback`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-BugCatch-Key': apiKey,
+        // Present only where they signed in, so the server can put a proved
+        // name and address on it. A stale one is ignored there, not refused.
+        ...(token ? { 'X-BugCatch-Session': token } : {}),
+      },
+      body: JSON.stringify(payload),
+    });
+  } catch (cause) {
+    const err = new Error(`[BugCatch] could not reach ${apiBase} — check your connection and try again.`);
+    err.cause = cause;
+    throw err;
+  }
+  if (!res.ok) {
+    let detail = '';
+    try {
+      const body = await res.json();
+      detail = Array.isArray(body.message) ? body.message.join(', ') : body.message || '';
+    } catch { /* not JSON */ }
+    const err = res.status === 429
+      ? new Error(`[BugCatch] ${tooManyMessage(detail)}`)
+      : new Error(`[BugCatch] ${detail || `feedback could not be sent (HTTP ${res.status})`}`);
+    err.status = res.status;
+    throw err;
+  }
+  return res.json();
+}

package/src/identity.js

@@ -207,7 +207,7 @@ export const KNOWN_OPTIONS = [
   'user', 'context', 'updates', 'updateToast', 'onUpdate', 'voice', 'onCallState',
   'onIncomingCall', 'onReportSubmitted', 'onAssistantPhase', 'onError', 'debug',
   'drafts', 'knownIssues', 'agentIssues', 'release', 'environment', 'buildId',
-  'chunkBase', 'announcements',
+  'chunkBase', 'announcements', 'feedback',
 ];
 
 const CALLBACK_OPTIONS = [

package/src/index.d.ts

@@ -64,8 +64,29 @@ export interface ReportSubmittedEvent {
   result: ReportResult;
 }
 
+/** What feedback() takes. Only the message is required. */
+export interface FeedbackInput {
+  message: string;
+  kind?: FeedbackKind | null;
+  /** How the product feels so far: 1 (terrible) to 5 (great). */
+  score?: 1 | 2 | 3 | 4 | 5 | null;
+  /** Where to reply, if they want one. identify()'s address is used otherwise. */
+  email?: string;
+  name?: string;
+  /** Merged over setContext() for this one send. */
+  context?: BugCatchContext | null;
+}
+
+export type FeedbackKind = 'idea' | 'praise' | 'confusing' | 'other';
+
+export interface FeedbackSentEvent {
+  id: string | null;
+  kind: FeedbackKind | null;
+  score: number | null;
+}
+
 export interface BugCatchErrorEvent {
-  action: 'report' | 'call';
+  action: 'report' | 'call' | 'feedback';
   error: Error & { status?: number };
 }
 
@@ -218,14 +239,27 @@ export interface BugCatchConfig {
    * announcements() still answers, for a site that shows them its own way.
    */
   announcements?: boolean;
+  /**
+   * Offer "Give feedback" beside "Report a bug" in the panel — ideas, praise,
+   * something confusing — where the project has it switched on (it is, by
+   * default; Settings → Project → General). false hides it on this site;
+   * feedback() still sends.
+   */
+  feedback?: boolean;
   /** Default 5. */
   maxAttachments?: number;
   /** Default 25 MB. */
   maxAttachmentBytes?: number;
   /** Hard cap on a single recording. Default 120000 (2 minutes). */
   maxRecordingMs?: number;
-  /** Return false to cancel the report, or a payload object to replace it. */
-  beforeSend?: (payload: Record<string, any>) => Record<string, any> | false | void;
+  /**
+   * Return false to cancel, or a payload object to replace it. Runs for
+   * reports and for feedback; the second argument says which.
+   */
+  beforeSend?: (
+    payload: Record<string, any>,
+    info: { type: 'report' | 'feedback' },
+  ) => Record<string, any> | false | void;
   user?: BugCatchUser | null;
   /**
    * Tell the reporter, live and in your app, when a bug they filed changes
@@ -692,9 +726,11 @@ export declare class BugCatchClient {
   ): () => void;
   /** Someone signed out. `email` is who it was, where this browser knew. */
   on(event: 'signout', handler: (who: { email: string | null }) => void): () => void;
+  /** Feedback was accepted — from the widget or from feedback(). */
+  on(event: 'feedback', handler: (event: FeedbackSentEvent) => void): () => void;
   off(event: 'update', handler: (update: ReportUpdate) => void): this;
   off(
-    event: 'call' | 'unread' | 'incoming-call' | 'signin' | 'signout' | 'report' | 'assistant' | 'error',
+    event: 'call' | 'unread' | 'incoming-call' | 'signin' | 'signout' | 'report' | 'assistant' | 'error' | 'feedback',
     handler: (payload: any) => void,
   ): this;
   /**
@@ -878,8 +914,11 @@ export declare class BugCatchClient {
   setContext(context: BugCatchContext | null): this;
   /** A copy of what setContext() holds. */
   getContext(): BugCatchContext;
-  /** Open the built-in report panel (needs `widget: true`). */
-  open(): this;
+  /**
+   * Open the built-in panel (needs `widget: true`): the report form, or with
+   * `{ mode: 'feedback' }` the feedback form where the project takes it.
+   */
+  open(options?: { mode?: 'report' | 'feedback' }): this;
   /** Close the report panel if it is open. */
   close(): this;
   isOpen(): boolean;
@@ -913,6 +952,17 @@ export declare class BugCatchClient {
   announcements(): Promise<Announcement[]>;
   /** Stop showing one in this browser until the team uses "Show it again". */
   dismissAnnouncement(announcement: Announcement): void;
+  /**
+   * Whether this project takes feedback — what decides whether the widget
+   * draws "Give feedback". Asked once per page; false on any failure.
+   */
+  feedbackEnabled(): Promise<boolean>;
+  /**
+   * Send feedback to this project's team: not a bug, so not triaged or
+   * answered in the widget — it lands on the dashboard's Feedback page.
+   * Rejects with an Error whose message is fit to show the person.
+   */
+  feedback(input: FeedbackInput): Promise<{ id: string } | { cancelled: true }>;
   /**
    * The known issues that look like what somebody is describing.
    *

package/src/index.js

@@ -25,6 +25,7 @@ import { fetchAgentIssues } from './agent-issues.js';
 import {
   fetchAnnouncements, visibleAnnouncements, dismissAnnouncement as rememberDismissed,
 } from './announcements.js';
+import { fetchFeedbackState, feedbackFields, postFeedback } from './feedback.js';
 import { normalizeUser, mergeContext, checkOptions, cleanApiBase } from './identity.js';
 import { tooManyMessage } from './busy.js';
 
@@ -57,6 +58,10 @@ const DEFAULTS = {
   // ones written for that. false draws nothing; announcements() still answers,
   // for a site that shows them its own way.
   announcements: true,
+  // Offer "Give feedback" beside "Report a bug" in the panel, where the
+  // project has it switched on (Settings → Project → General). false hides it
+  // on this site; feedback() still sends, for a site with a form of its own.
+  feedback: true,
   // Screenshot / screen recording / file attach. Capture needs getDisplayMedia,
   // so it is offered only where the browser has it — file attach always works.
   attachments: true,
@@ -620,11 +625,14 @@ class BugCatchClient {
    *
    * Returns the payload to send, or false when the host cancelled.
    */
-  #screen(payload) {
+  #screen(payload, info = { type: 'report' }) {
     if (typeof this.config.beforeSend !== 'function') return payload;
     let result;
     try {
-      result = this.config.beforeSend(payload);
+      // The second argument says what is being sent — 'report' or 'feedback'
+      // — for a hook that scrubs the two differently. A hook written before
+      // feedback existed ignores it and still sees the capture it cleans.
+      result = this.config.beforeSend(payload, info);
     } catch (err) {
       // A throwing hook is not permission to send what it was meant to clean.
       this.warn(`beforeSend threw, so nothing was sent: ${err?.message || err}`);
@@ -1181,13 +1189,22 @@ class BugCatchClient {
    * Open the report panel, as if the floating button had been pressed — for a
    * "Report a problem" item in your own menu.
    *
-   * Needs the built-in widget (`widget: true`, the default). With `widget:
-   * false` there is no panel to open: draw your own form and call report().
+   *   BugCatch.open();                       // the report form
+   *   BugCatch.open({ mode: 'feedback' });   // straight to "Give feedback"
+   *
+   * Feedback opens only where this project takes it; otherwise the report form
+   * does. An open panel moves to the mode asked for. Needs the built-in widget
+   * (`widget: true`, the default). With `widget: false` there is no panel to
+   * open: draw your own form and call report() or feedback().
    */
-  open() {
+  open({ mode } = {}) {
     if (!this.started) { this.warn('open() was called before init() — nothing to open yet.'); return this; }
     if (!this.widgetControls) { this.warn('open() needs the built-in widget; it was turned off with widget: false.'); return this; }
-    this.widgetControls.open();
+    if (mode !== undefined && mode !== 'report' && mode !== 'feedback') {
+      this.warn(`open({ mode: "${mode}" }) is not 'report' or 'feedback' — opened the report form.`);
+      mode = 'report';
+    }
+    this.widgetControls.open(mode);
     return this;
   }
 
@@ -1262,7 +1279,7 @@ class BugCatchClient {
       issue: typeof issue === 'string' && issue ? issue.slice(0, 32) : null,
     });
 
-    const screened = this.#screen(payload);
+    const screened = this.#screen(payload, { type: 'report' });
     if (screened === false) return { cancelled: true };
     payload = screened;
 
@@ -1443,6 +1460,93 @@ class BugCatchClient {
     rememberDismissed(announcement);
   }
 
+  /**
+   * Whether this project takes feedback from the widget — the answer that
+   * decides whether "Give feedback" is drawn.
+   *
+   *   if (await BugCatch.feedbackEnabled()) showMyFeedbackButton();
+   *
+   * Switched on and off on the project's settings page, not here. Asked once
+   * per page and kept; false on any failure.
+   */
+  feedbackEnabled() {
+    if (this.feedbackState) return this.feedbackState;
+    this.feedbackState = fetchFeedbackState({
+      apiBase: this.config.apiBase,
+      apiKey: this.config.apiKey,
+      projectId: this.config.projectId,
+    });
+    return this.feedbackState;
+  }
+
+  /**
+   * Send feedback — an idea, praise, something that confused them — to this
+   * project's team. Not a bug: it is not triaged, assigned or answered in the
+   * widget; it lands on the dashboard's Feedback page.
+   *
+   *   await BugCatch.feedback({
+   *     message: 'Export to CSV would save me an hour a week',
+   *     kind: 'idea',          // 'idea' | 'praise' | 'confusing' | 'other' (optional)
+   *     score: 4,              // 1 (terrible) – 5 (great), how it feels so far (optional)
+   *     email: 'jo@acme.com',  // only if they want a reply; identify()'s is used otherwise
+   *   });
+   *   // → { id }
+   *
+   * Sent with the page and browser details, who identify() says they are and
+   * the setContext() context — never the console or network logs, which say
+   * nothing about an opinion. Goes through beforeSend, whose second argument is
+   * `{ type: 'feedback' }`. Rejects with a message fit to show the person.
+   */
+  async feedback({ message, kind, score, email, name, context = null } = {}) {
+    if (!this.started) throw new Error('[BugCatch] call init() first.');
+    const fields = feedbackFields({
+      message,
+      kind,
+      score,
+      // What they typed wins: it is the address they asked to be answered at.
+      email: email ?? this.config.user?.email,
+      name: name ?? this.config.user?.name,
+    });
+    if (kind !== undefined && kind !== null && !fields.kind) {
+      this.warn(`feedback({ kind: "${kind}" }) is not one of idea, praise, confusing, other — sent without one.`);
+    }
+    const ctx = context ? mergeContext(this.context, context, (m) => this.warn(m.replace('setContext()', 'feedback({ context })'))) : this.context;
+    let payload = {
+      projectId: this.config.projectId,
+      ...fields,
+      url: window.location.href,
+      metadata: {
+        ...(await collectEnvironment()),
+        release: this.config.release,
+        environment: this.config.environment,
+        buildId: this.config.buildId,
+        user: this.config.user || undefined,
+        ...(Object.keys(ctx).length ? { context: ctx } : {}),
+        sdk: SDK_IDENTITY,
+      },
+    };
+    const screened = this.#screen(payload, { type: 'feedback' });
+    if (screened === false) return { cancelled: true };
+    payload = screened;
+
+    this.debugLog('sending feedback', { kind: payload.kind, score: payload.score, user: payload.metadata?.user });
+    try {
+      const result = await postFeedback({
+        apiBase: this.config.apiBase,
+        apiKey: this.config.apiKey,
+        token: readSession(this.config.projectId)?.token,
+        payload,
+      });
+      const detail = { id: result?.id ?? null, kind: payload.kind ?? null, score: payload.score ?? null };
+      this.debugLog('feedback accepted', detail);
+      this.emit('feedback', detail);
+      return result;
+    } catch (err) {
+      this.#failed('feedback', err);
+      throw err;
+    }
+  }
+
   /**
    * Who this browser is signed in as on this project, from storage alone.
    *

package/src/panel/compose.js

@@ -27,7 +27,7 @@ export function composeHtml(cfg) {
   const canShoot = canCapture && screenshotSupported();
   const canRecord = canCapture && captureSupported();
   return `
-        <div class="compose">
+        <div class="compose bug-only">
         <div class="field">
           <label for="bc-title">What went wrong?</label>
           <input id="bc-title" type="text" placeholder="e.g. The checkout button does nothing" autocomplete="off"

package/src/panel/feedback.js

@@ -0,0 +1,205 @@
+// "Give feedback": the panel's second form, beside "Report a bug".
+//
+// For what is not a bug — an idea, praise, something that confused them —
+// and so deliberately smaller than the report form: one box that matters, two
+// optional taps, and an address only when the page does not already know one.
+// No attachments, no severity, no record to look up, no sign-in: feedback is
+// read by the team, not worked like a report.
+//
+// The switch between the two forms lives in index.js, because it is the
+// panel's frame that changes (the header, the footer's button) as much as the
+// body.
+
+import * as ICONS from './icons.js';
+import { escapeHtml } from './render.js';
+import { FEEDBACK_KINDS, MAX_FEEDBACK_MESSAGE } from '../feedback.js';
+
+const KINDS = {
+  idea: { label: 'Idea', icon: ICONS.bulb },
+  praise: { label: 'Praise', icon: ICONS.heart },
+  confusing: { label: 'Confusing', icon: ICONS.question },
+  other: { label: 'Other', icon: ICONS.dots },
+};
+
+/** The five faces, worst to best. The word is what a screen reader says. */
+export const FACES = [
+  { score: 1, word: 'Terrible', mouth: 'M7.8 17.2c1.1-2 2.5-2.9 4.2-2.9s3.1.9 4.2 2.9M8 8l2.4 1.2M16 8l-2.4 1.2' },
+  { score: 2, word: 'Not great', mouth: 'M8.6 16c1-.8 2.1-1.2 3.4-1.2s2.4.4 3.4 1.2' },
+  { score: 3, word: 'Okay', mouth: 'M8.8 15.2h6.4' },
+  { score: 4, word: 'Good', mouth: 'M8.6 14.4c1 .9 2.1 1.4 3.4 1.4s2.4-.5 3.4-1.4' },
+  { score: 5, word: 'Great', mouth: 'M7.8 13.2h8.4a4.2 4.2 0 0 1-8.4 0z' },
+];
+
+function face(mouth) {
+  return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">'
+    + '<circle cx="12" cy="12" r="9.2"/><path d="M9 9.9h.01M15 9.9h.01" stroke-width="2.6"/>'
+    + `<path d="${mouth}"/></svg>`;
+}
+
+/** The form's markup, for the panel's body. Hidden until the panel is in feedback mode. */
+export function feedbackHtml() {
+  return `
+        <div class="feedback fb-only">
+          <div class="field">
+            <label for="bc-fb-msg">What's on your mind?</label>
+            <textarea id="bc-fb-msg" maxlength="${MAX_FEEDBACK_MESSAGE}" aria-describedby="bc-fb-err"
+              placeholder="An idea, something you like, or something that confused you."></textarea>
+            <p class="field-err" id="bc-fb-err" hidden></p>
+          </div>
+          <div class="field">
+            <label id="bc-fb-kind-l">What kind is it? <span class="opt">(optional)</span></label>
+            <div class="kinds" role="group" aria-labelledby="bc-fb-kind-l">
+              ${FEEDBACK_KINDS.map((k) => `
+                <button class="tool" type="button" data-kind="${k}" aria-pressed="false">${KINDS[k].icon}${KINDS[k].label}</button>
+              `).join('')}
+            </div>
+          </div>
+          <div class="field">
+            <div class="field-head">
+              <label id="bc-fb-score-l">How's your experience so far? <span class="opt">(optional)</span></label>
+              <span class="count face-word" aria-hidden="true"></span>
+            </div>
+            <div class="faces" role="group" aria-labelledby="bc-fb-score-l">
+              ${FACES.map((f) => `
+                <button class="face" type="button" data-score="${f.score}" aria-pressed="false"
+                  aria-label="${f.word}" title="${f.word}">${face(f.mouth)}</button>
+              `).join('')}
+            </div>
+          </div>
+          <!-- Who it is from: an address to write back to when the page knows
+               none, and a line saying which one when it does. -->
+          <div class="field fb-who"></div>
+        </div>`;
+}
+
+/**
+ * Wire the form. Sets ctx.focusFeedback, called when the panel switches to it.
+ *
+ * The draft is kept in localStorage while it is written, so a click outside
+ * the panel does not cost somebody three paragraphs — the reason the report
+ * form keeps one. Text only, and cleared on send.
+ */
+export function mountFeedback(ctx) {
+  const { client, cfg, scrim, $, say, close } = ctx;
+  const box = $('.feedback');
+  const message = $('#bc-fb-msg');
+  const err = $('#bc-fb-err');
+  const sendBtn = $('[data-act="send-feedback"]');
+  const word = $('.face-word');
+  let kind = null;
+  let score = null;
+  let sending = false;
+  let sent = false;
+
+  /* ---------- who it is from ---------- */
+
+  const who = $('.fb-who');
+  const known = client.signedInAs()?.email || cfg.user?.email || null;
+  if (known) {
+    who.innerHTML = `<p class="fb-as">Sent as <strong>${escapeHtml(known)}</strong></p>`;
+  } else {
+    who.innerHTML = `
+      <label for="bc-fb-email">Your email <span class="opt">(optional — only if you'd like a reply)</span></label>
+      <input id="bc-fb-email" type="email" autocomplete="email" placeholder="you@example.com" />`;
+  }
+  const emailInput = $('#bc-fb-email');
+
+  /* ---------- the draft ---------- */
+
+  const draftKey = `bugcatch.feedbackDraft:${cfg.projectId || ''}`;
+  const keepDrafts = cfg.drafts !== false;
+  if (keepDrafts) {
+    try { message.value = localStorage.getItem(draftKey) || ''; } catch { /* storage off */ }
+  }
+  let draftTimer;
+  function saveDraft() {
+    clearTimeout(draftTimer);
+    if (!keepDrafts) return;
+    try {
+      if (message.value.trim()) localStorage.setItem(draftKey, message.value);
+      else localStorage.removeItem(draftKey);
+    } catch { /* storage off: the box still works */ }
+  }
+  message.addEventListener('input', () => {
+    if (message.value.trim()) flag('');
+    clearTimeout(draftTimer);
+    draftTimer = setTimeout(saveDraft, 250);
+  });
+  ctx.onDestroy(() => { if (!sent) saveDraft(); });
+
+  /* ---------- the two taps ---------- */
+
+  // Both are optional, so a second press takes the choice back rather than
+  // leaving no way to say "none of these".
+  box.querySelectorAll('[data-kind]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      kind = kind === btn.dataset.kind ? null : btn.dataset.kind;
+      box.querySelectorAll('[data-kind]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.kind === kind)));
+    });
+  });
+  box.querySelectorAll('[data-score]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const picked = Number(btn.dataset.score);
+      score = score === picked ? null : picked;
+      box.querySelectorAll('[data-score]').forEach((b) => b.setAttribute('aria-pressed', String(Number(b.dataset.score) === score)));
+      word.textContent = score ? FACES[score - 1].word : '';
+    });
+  });
+
+  /* ---------- send ---------- */
+
+  function flag(text) {
+    err.hidden = !text;
+    err.innerHTML = text ? `${ICONS.alert}<span>${escapeHtml(text)}</span>` : '';
+    message.classList.toggle('invalid', Boolean(text));
+    message.setAttribute('aria-invalid', String(Boolean(text)));
+  }
+
+  sendBtn.addEventListener('click', async () => {
+    if (sending) return;
+    if (!message.value.trim()) {
+      flag('Write a few words — a sentence is plenty.');
+      message.focus();
+      return;
+    }
+    sending = true;
+    ctx.sending = true;
+    say('');
+    const original = sendBtn.innerHTML;
+    sendBtn.disabled = true;
+    sendBtn.innerHTML = '<span class="spinner" aria-hidden="true"></span>Sending…';
+    try {
+      const res = await client.feedback({
+        message: message.value,
+        kind,
+        score,
+        ...(emailInput && emailInput.value.trim() ? { email: emailInput.value.trim() } : {}),
+      });
+      if (res?.cancelled) throw Object.assign(new Error(''), { quiet: true });
+      sent = true;
+      clearTimeout(draftTimer);
+      if (keepDrafts) { try { localStorage.removeItem(draftKey); } catch { /* storage off */ } }
+      thanks();
+    } catch (e) {
+      sending = false;
+      ctx.sending = false;
+      sendBtn.disabled = false;
+      sendBtn.innerHTML = original;
+      if (!e.quiet) say(String(e.message || 'That did not send. Please try again.').replace('[BugCatch] ', ''));
+    }
+  });
+
+  /** The panel's last screen: said, and then out of the way. */
+  function thanks() {
+    ctx.sending = false;
+    scrim.querySelector('.panel').innerHTML = `
+      <div class="done">
+        <div class="tick">${ICONS.check}</div>
+        <h3>Thanks — that's with the team.</h3>
+        <p>Everything sent here is read by the people who build this.</p>
+      </div>`;
+    setTimeout(close, 2600);
+  }
+
+  ctx.focusFeedback = () => message.focus();
+}

package/src/panel/icons.js

@@ -34,3 +34,9 @@ export const inbox = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
  * 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>';
+// "Give feedback": the switch's glyph and the four kinds of feedback.
+export const feedback = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 5.5h15a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-8l-4.3 3.2a.5.5 0 0 1-.8-.4v-2.8H4.5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/><path d="M12 8.4l.9 1.9 2 .3-1.5 1.4.4 2-1.8-1-1.8 1 .4-2-1.5-1.4 2-.3z"/></svg>';
+export const bulb = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17.5h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V17h5.2v-1.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z"/></svg>';
+export const heart = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"/></svg>';
+export const question = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.6M12 17h.01"/></svg>';
+export const dots = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"><path d="M6.5 12h.01M12 12h.01M17.5 12h.01"/></svg>';