@sphoro/bugcatch-web-sdk 0.19.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.19.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
@@ -470,6 +504,15 @@ export interface MyReport {
   rating: number | null;
   /** Settled, on a project that asks for ratings — so a list can say "rate it". */
   ratingAsked: boolean;
+  /** When it was resolved or closed; null while it is open. */
+  resolvedAt: string | null;
+  /**
+   * Whether the widget's first screen asks for this report's rating: 'ask' with
+   * a Not now, 'require' before another report can be sent from the widget, or
+   * null. Set by the project (Settings → Resolutions → Where the widget asks),
+   * for reports settled in the last 30 days and not yet rated for this fix.
+   */
+  ratingDue: 'ask' | 'require' | null;
 }
 
 /**
@@ -683,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;
   /**
@@ -869,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;
@@ -904,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/call.js

@@ -34,8 +34,9 @@ export function mountCallOffer(ctx) {
         ctx.preloadCall();
         // Never over a panel that is still asking who this is: the call would
         // file a report, and on a project that requires sign-in that is the one
-        // thing this panel is holding back.
-        callBtn.hidden = ctx.mustSignIn();
+        // thing this panel is holding back. Nor over one holding the form for
+        // a rating (rate-due.js), for the same reason.
+        callBtn.hidden = ctx.mustSignIn() || ctx.mustRate();
       })
       .catch(() => { /* not available is the safe answer to every failure */ });
   }

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"
@@ -132,7 +132,9 @@ export function mountCompose(ctx) {
         void persistDraft();
       };
     }).catch(() => { draftStatus.textContent = 'Draft storage is unavailable. Keep this tab open.'; })
-      .finally(() => { compose.inert = false; if (!draftStatus.querySelector('[data-resume]')) draftLoaded = true; });
+      // Back to whatever the rating card wants: it may have held the form
+      // while storage was being read (rate-due.js).
+      .finally(() => { compose.inert = ctx.mustRate(); if (!draftStatus.querySelector('[data-resume]')) draftLoaded = true; });
   }
 
   // Saved on the way out, before anything else is taken down.
@@ -173,8 +175,10 @@ export function mountCompose(ctx) {
 
   function refreshSendState() {
     const busy = items.some((it) => it.status === 'uploading');
-    sendBtn.disabled = ctx.sending || busy || items.some((it) => it.status === 'failed');
-    note.textContent = busy ? 'Waiting for the upload to finish…' : items.some((it) => it.status === 'failed') ? 'Retry or remove failed attachments before sending.' : '';
+    const held = ctx.mustRate();
+    sendBtn.disabled = ctx.sending || busy || held || items.some((it) => it.status === 'failed');
+    note.textContent = held ? 'Rate your last report to send a new one.'
+      : busy ? 'Waiting for the upload to finish…' : items.some((it) => it.status === 'failed') ? 'Retry or remove failed attachments before sending.' : '';
     const max = cfg.maxAttachments ?? 5;
     scrim.querySelectorAll('.tool').forEach((t) => {
       t.disabled = ctx.sending || items.length >= max;

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