@sphoro/bugcatch-web-sdk 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.18.0",
+  "version": "0.20.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/accent.js

@@ -0,0 +1,38 @@
+// The colour the widget's buttons wear, and the colour of the words on them.
+//
+// With no `accent` configured the widget is ink: a black pill on a light page
+// and a white one on a dark page, which sits on any brand without arguing with
+// it. A configured accent is the host's own colour, and the text on it is
+// whichever of white or ink can be read against it — a pale brand colour with
+// white words on it is a button nobody can read.
+
+export const INK = '#0e0e10';
+export const PAPER = '#ffffff';
+
+/**
+ * White or ink, whichever reads on `color`. Only colours this can parse (#rgb,
+ * #rrggbb, rgb()) are measured; anything else (a name, hsl(), a variable) gets
+ * white, which is what every accent got before this existed.
+ */
+export function readableOn(color) {
+  const rgb = parse(color);
+  if (!rgb) return PAPER;
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  // The crossover where ink starts to out-contrast white.
+  return luminance > 0.179 ? INK : PAPER;
+}
+
+function parse(color) {
+  const s = String(color || '').trim();
+  let m = /^#([0-9a-f]{3})$/i.exec(s);
+  if (m) return [...m[1]].map((h) => parseInt(h + h, 16));
+  m = /^#([0-9a-f]{6})$/i.exec(s);
+  if (m) return [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16));
+  m = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i.exec(s);
+  if (m) return [m[1], m[2], m[3]].map(Number);
+  return null;
+}

package/src/incoming-call.js

@@ -37,6 +37,8 @@
 // yet, which is its rule and not ours — the card rings silently rather than not
 // appearing.
 
+import { readableOn, INK, PAPER } from './accent.js';
+
 /**
  * A quiet double-pulse, once every three seconds.
  *
@@ -157,8 +159,8 @@ const BUTTON = [
   'flex:1',
   'padding:9px 12px',
   'border:0',
-  'border-radius:8px',
-  'font:600 13px/1.4 inherit',
+  'border-radius:999px',
+  'font:560 13px/1.4 inherit',
   'cursor:pointer',
 ].join(';');
 
@@ -168,7 +170,8 @@ const BUTTON = [
  * @param {object} opts
  * @param {object} opts.call  The `incomingCall` object off the update stream —
  *   `callId`, `from`, `project`, `reference`, `ringsUntil`, `recorded`.
- * @param {string} opts.accent  The integration's own colour, for Answer.
+ * @param {string|null} opts.accent  The integration's own colour, for Answer;
+ *   null is the ink default, which on this dark card is a white button.
  * @param {string} [opts.position]  Same two words the toast takes.
  * @param {() => void} opts.onAnswer   Pressed Answer.
  * @param {() => void} opts.onDecline  Pressed Decline.
@@ -181,7 +184,7 @@ const BUTTON = [
  *   an ordinary dismissal; the caller passes one only for its own logging.
  */
 export function showIncomingCall({
-  call, accent = '#5b6ef5', position = 'bottom-right',
+  call, accent = null, position = 'bottom-right',
   onAnswer, onDecline, onExpire, touched = () => false,
 }) {
   if (typeof document === 'undefined' || !document.body) return () => {};
@@ -200,13 +203,12 @@ export function showIncomingCall({
     'z-index:2147483647',
     'width:300px',
     'max-width:calc(100vw - 40px)',
-    'padding:14px',
-    'border-radius:12px',
-    'background:#1b1e26',
-    'color:#eceef2',
+    'padding:16px',
+    'border-radius:16px',
+    'background:#111113',
+    'color:#f3f2ef',
     'font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
-    'box-shadow:0 18px 44px rgba(0,0,0,0.5)',
-    `border:1px solid ${accent}`,
+    `box-shadow:0 0 0 1px ${accent ? `color-mix(in srgb, ${accent} 55%, transparent)` : 'rgba(255,255,255,.12)'},0 24px 50px -12px rgba(0,0,0,.6)`,
     'opacity:0',
     'transform:translateY(8px)',
     'transition:opacity .2s ease,transform .2s ease',
@@ -219,23 +221,23 @@ export function showIncomingCall({
   heading.textContent = `${call.from || 'Support'} is calling`;
 
   const about = document.createElement('div');
-  about.style.cssText = 'color:#a4abba;margin-bottom:10px';
+  about.style.cssText = 'color:#b3b0aa;margin-bottom:10px';
   about.textContent = call.project
     ? `About your report ${call.reference} · ${call.project}`
     : `About your report ${call.reference}`;
 
   const countdown = document.createElement('div');
-  countdown.style.cssText = 'color:#7d8598;font-size:12px;margin-bottom:10px';
+  countdown.style.cssText = 'color:#8f8c86;font-size:12px;margin-bottom:10px';
 
   const answer = document.createElement('button');
   answer.type = 'button';
   answer.textContent = 'Answer';
-  answer.style.cssText = `${BUTTON};background:${accent};color:#fff`;
+  answer.style.cssText = `${BUTTON};background:${accent || PAPER};color:${accent ? readableOn(accent) : INK}`;
 
   const decline = document.createElement('button');
   decline.type = 'button';
   decline.textContent = 'Not now';
-  decline.style.cssText = `${BUTTON};background:#2b2f3a;color:#c8cedb`;
+  decline.style.cssText = `${BUTTON};background:rgba(255,255,255,.08);color:#f3f2ef`;
 
   const actions = document.createElement('div');
   actions.style.cssText = 'display:flex;gap:8px';
@@ -244,7 +246,7 @@ export function showIncomingCall({
   el.append(heading, about, countdown);
   if (call.recorded) {
     const kept = document.createElement('div');
-    kept.style.cssText = 'color:#7d8598;font-size:12px;margin-bottom:10px';
+    kept.style.cssText = 'color:#8f8c86;font-size:12px;margin-bottom:10px';
     kept.textContent = 'This call will be recorded.';
     el.append(kept);
   }

package/src/index.d.ts

@@ -196,8 +196,12 @@ export interface BugCatchConfig {
   widgetPosition?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
   /** 'auto' follows the visitor's system setting. Default 'auto'. */
   theme?: 'auto' | 'light' | 'dark';
-  /** Any CSS colour. Default '#4F46E5'. */
-  accent?: string;
+  /**
+   * Any CSS colour, for the launcher, the buttons and the assistant's orb. The
+   * words on it are white or near-black, whichever reads. Default null: ink,
+   * which is a black button on light and a white one on dark.
+   */
+  accent?: string | null;
   /** Offer screenshot / recording / file attach in the widget. Default true. */
   attachments?: boolean;
   /**
@@ -462,6 +466,34 @@ export interface MyReport {
   project: string;
   workspace: string;
   attachments: number;
+  /** Their score for how it was handled, 1–5, or null when they have not rated it. */
+  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;
+}
+
+/**
+ * A reporter's own rating of how a settled report was handled.
+ *
+ * `current` is false when the report has been reopened and settled again since
+ * it was given — the rating stands, but it was for an earlier fix.
+ */
+export interface ReportRating {
+  /** 1–5, five best. */
+  score: number;
+  comment: string | null;
+  ratedAt: string;
+  via: 'widget' | 'portal' | 'email';
+  current: boolean;
 }
 
 /** A report of this browser's changed status. */
@@ -552,6 +584,18 @@ export interface ReportDetail {
   attachments: { type: string; mime: string; createdAt: string; url: string | null }[];
   /** Every step from filing to now, oldest first, both sides' messages included. */
   timeline: ReportTimelineEntry[];
+  /** When it was last settled, or null while it is open. */
+  resolvedAt: string | null;
+  /** Their answer to "does the fix work?", or null when they have not given one. */
+  verification: 'CONFIRMED' | 'STILL_HAPPENING' | null;
+  /** Their rating of how it was handled, or null. See rate(). */
+  rating: ReportRating | null;
+  /**
+   * Whether a rating is being asked for: the report is settled and the project
+   * has not switched ratings off. The widget draws its stars only when this is
+   * true; an integration's own view should do the same.
+   */
+  ratingAsked: boolean;
   /**
    * The same figure they were given when they filed it, so coming back to check
    * is not a worse experience than not checking. Null on a settled report — the
@@ -787,6 +831,12 @@ export declare class BugCatchClient {
   endCall(): this;
   /** Tell the team whether their fix worked. STILL_HAPPENING re-sends this browser's context. */
   verifyFix(bugId: string, feedback: { result: 'CONFIRMED' | 'STILL_HAPPENING'; resolvedAt: string; note?: string }): Promise<{ verification: string; status: string }>;
+  /**
+   * Rate how a settled report was handled, 1–5, five best. Rating again
+   * replaces the earlier score. Rejects while the report is open, or on a
+   * project that does not ask for ratings (`ratingAsked` is false).
+   */
+  rate(bugId: string, rating: { score: 1 | 2 | 3 | 4 | 5; comment?: string }): Promise<ReportRating>;
   /** One report with its full timeline, or null if this browser cannot prove it filed it. */
   myReport(bugId: string): Promise<ReportDetail | null>;
   /**

package/src/index.js

@@ -6,7 +6,7 @@ import { mountWidget } from './widget.js';
 import { uploadAttachment, normalizeMime, REPORT_MIMES } from './capture.js';
 import {
   watchUpdates, createUpdateNotifier, fetchMyReports, fetchReport, writeToken, readToken,
-  clearToken, scopeReports, sendMessage, verifyFix, callKindsForProject,
+  clearToken, scopeReports, sendMessage, verifyFix, rateReport, callKindsForProject,
   reportByCall, liveCallAvailable, requestLiveCall, giveUpLiveCall,
   answerIncomingCall, declineIncomingCall,
   readUnread, rememberUpdate, forgetUpdate, forgetReportUpdates, forgetAllUpdates,
@@ -49,7 +49,9 @@ const DEFAULTS = {
   widgetPosition: 'bottom-right',
   // 'auto' follows the visitor's system setting; 'light' / 'dark' pin it.
   theme: 'auto',
-  accent: '#4F46E5',
+  // null is ink: black buttons on light, white on dark (accent.js). Any CSS
+  // colour makes the buttons, the launcher and the assistant's orb that colour.
+  accent: null,
   // Draw what the project's team is telling visitors — written on the Widget
   // announcements settings page — in the panel, and beside the button for the
   // ones written for that. false draws nothing; announcements() still answers,
@@ -456,6 +458,28 @@ class BugCatchClient {
     this.notifier.render(unread);
   }
 
+  /**
+   * Tell the team whether their fix worked. STILL_HAPPENING reopens the report
+   * and re-sends this browser's context with it.
+   */
+  async verifyFix(bugId, { result, resolvedAt, note }) {
+    const context = result === 'STILL_HAPPENING' ? await this.#payload({}) : {};
+    return verifyFix({ apiBase: this.config.apiBase, bugId, result, resolvedAt, note, metadata: context.metadata, logs: context.logs });
+  }
+
+  /**
+   * Rate how a settled report was handled, 1 to 5, five best.
+   *
+   *   await BugCatch.rate(report.id, { score: 4, comment: 'Quick, thanks' });
+   *
+   * Only once the report is RESOLVED or CLOSED, on a project that asks for
+   * ratings — `myReport(id).ratingAsked` says whether it does. Rating again
+   * replaces the earlier score rather than adding a second one.
+   */
+  async rate(bugId, { score, comment } = {}) {
+    return rateReport({ apiBase: this.config.apiBase, bugId, score, comment });
+  }
+
   /**
    * One report in full, with its timeline — every step from filing to now.
    *
@@ -464,11 +488,6 @@ class BugCatchClient {
    *
    * Resolves to null when this browser cannot prove it filed that report.
    */
-  async verifyFix(bugId, { result, resolvedAt, note }) {
-    const context = result === 'STILL_HAPPENING' ? await this.#payload({}) : {};
-    return verifyFix({ apiBase: this.config.apiBase, bugId, result, resolvedAt, note, metadata: context.metadata, logs: context.logs });
-  }
-
   async myReport(bugId) {
     const report = await fetchReport({ apiBase: this.config.apiBase, bugId });
     this.#notePhase(bugId, report?.assistant);

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

@@ -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/icons.js

@@ -17,6 +17,8 @@ export const retry = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
 // 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>';
+// A rating star. Filled; the empty and chosen states are colour, set in CSS.
+export const star = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.9l2.75 5.82 6.37.76-4.7 4.37 1.24 6.3L12 17.03l-5.66 3.12 1.24-6.3-4.7-4.37 6.37-.76z"/></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.

package/src/panel/index.js

@@ -8,6 +8,7 @@
 // One dialog doing several jobs, one file each:
 //
 //   compose.js   the report form: drafts, severity, attachments, recording, Send
+//   rate-due.js  "how did we do?" about a settled report, above the form
 //   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"
@@ -37,6 +38,7 @@ import { mountPicks } from './picks.js';
 import { mountCallOffer } from './call.js';
 import { mountSignIn } from './signin.js';
 import { mountThread } from './thread.js';
+import { mountRateDue } from './rate-due.js';
 
 /**
  * Open the panel over the page. `preloadCall` fetches the call code ahead of a
@@ -44,10 +46,11 @@ import { mountThread } from './thread.js';
  * to load code of its own.
  */
 export function openPanel({
-  root, host, dock, client, onClose, preloadCall = () => {},
+  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null,
 }) {
   addStyles(root);
   const cfg = client.config;
+  const themeLabel = () => themeControls?.label() || '';
 
   const scrim = document.createElement('div');
   // The panel opens out of whichever corner the dock is in, clearing it by the
@@ -59,11 +62,17 @@ export function openPanel({
     <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.",
+        // Not "Tell us what went wrong": that is the first field's own label,
+        // a few pixels below. The header names the errand the launcher named.
+        title: 'Report a bug',
+        sub: 'We attach the page details for you.',
+        theme: themeLabel(),
       })}
       <div class="body">
         <div class="slot" role="alert"></div>
+        <!-- A settled report still waiting for its rating. Drawn only when the
+             project asks for one here; see rate-due.js. -->
+        <div class="rate-due fix-rating" tabindex="-1" hidden></div>
         <!-- What the project's team is telling visitors. Drawn only when it
              has published something. -->
         <div class="notices" hidden></div>
@@ -127,12 +136,14 @@ export function openPanel({
     notices: $('.notices'),
     known: $('.known'),
     picks: $('.picks'),
+    rateDue: $('.rate-due'),
     // A report or a call is on its way. Escape and a click outside wait for it.
     sending: false,
     closed: false,
     say,
     close,
     preloadCall,
+    themeLabel,
     onDestroy: (fn) => { cleanups.push(fn); },
     // compose.js
     refreshSendState: null,
@@ -150,6 +161,8 @@ export function openPanel({
     // signin.js
     mustSignIn: null,
     recheckSignIn: null,
+    // rate-due.js
+    mustRate: () => false,
     // thread.js
     succeed: null,
     refreshThread: null,
@@ -166,6 +179,7 @@ export function openPanel({
   mountCallOffer(ctx);
   mountSignIn(ctx);
   mountThread(ctx);
+  mountRateDue(ctx);
 
   /* ---------- lifecycle ---------- */
 
@@ -218,6 +232,15 @@ export function openPanel({
   document.addEventListener('keydown', onKeydown, true);
   scrim.addEventListener('click', (e) => { if (e.target === scrim && !ctx.sending) close(); });
   $('[data-act="close"]').addEventListener('click', close);
+  // On the scrim rather than the button: every screen draws its own header, and
+  // the scrim is the one element all of them are drawn inside.
+  scrim.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-act="theme"]');
+    if (!btn || !themeControls) return;
+    const next = themeControls.cycle();
+    btn.title = `Theme: ${next.label}`;
+    btn.setAttribute('aria-label', `Theme: ${next.label}. Change theme`);
+  });
 
   /** The banner at the top of the form: an error, or with `info`, a notice. */
   function say(text, kind = 'err') {

package/src/panel/messages.js

@@ -100,7 +100,7 @@ export function messageHtml(message, state = '') {
   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>`;
+    avatar = `<span class="av bot orb" aria-hidden="true"></span>`;
   } else if (!mine) {
     const name = message.author || 'Support team';
     who = `<span class="msg-who">${escapeHtml(name)}</span>`;
@@ -140,7 +140,7 @@ export function messageHtml(message, state = '') {
 export function typingHtml() {
   return `
     <div class="typing-row">
-      <span class="av bot" aria-hidden="true">${ICONS.sparkle}</span>
+      <span class="av bot orb" aria-hidden="true"></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>`;

package/src/panel/picks.js

@@ -18,14 +18,18 @@ export function mountPicks(ctx) {
   function drawPicks() {
     if (!agentIssues.length) { picks.hidden = true; picks.innerHTML = ''; return; }
     picks.hidden = false;
+    // Chips, not cards: they are a shortcut in front of the form, and three
+    // two-line cards pushed the form itself off the first screen. The hint is
+    // still there — as the chip's tooltip and its accessible description.
     picks.innerHTML = `
       <p class="picks-h">Get an answer right away</p>
       <div class="picks-grid" role="group" aria-label="Common questions">
-        ${agentIssues.map((issue) => `
+        ${agentIssues.map((issue, i) => `
           <button type="button" class="pick" data-pick="${escapeHtml(issue.key)}"
+            ${issue.hint ? `title="${escapeHtml(issue.hint)}" aria-describedby="bc-pick-h${i}"` : ''}
             aria-pressed="${pickedIssue?.key === issue.key}">
             <span class="t">${escapeHtml(issue.title)}</span>
-            ${issue.hint ? `<span class="h">${escapeHtml(issue.hint)}</span>` : ''}
+            ${issue.hint ? `<span class="h sr-only" id="bc-pick-h${i}">${escapeHtml(issue.hint)}</span>` : ''}
           </button>`).join('')}
       </div>
       ${pickedIssue ? `<p class="picks-note">${ICONS.check}<span>Our assistant will check your account and reply here. Add anything else below, then send.</span></p>` : ''}`;

package/src/panel/rate-due.js

@@ -0,0 +1,155 @@
+// The rating a settled report is still waiting for, asked on the first screen,
+// above the form, rather than only inside Your reports, which few reporters
+// ever open again.
+//
+// How hard it asks is the project's choice (Settings → Resolutions → Where the
+// widget asks), sent with each report as `ratingDue`:
+//
+//   'ask'      a card with a Not now.
+//   'require'  the same card, and the form waits: Send and Talk to the team
+//              come back once the report is rated.
+//
+// One report per open, the one settled most recently. A reporter with three
+// settled reports is not handed three questions at the door; the next one is
+// waiting the next time they come.
+
+import * as ICONS from './icons.js';
+import { escapeHtml, relativeDay } from './render.js';
+import { drawRating } from './rating.js';
+
+// The reports somebody pressed Not now on, on this device. Kept so the card
+// does not come back on every open; a project that wants an answer regardless
+// asks with 'require', which this list does not excuse.
+const LATER_KEY = 'bugcatch.rateLater';
+const LATER_MAX = 50;
+
+function putOffList() {
+  try {
+    const list = JSON.parse(window.localStorage.getItem(LATER_KEY) || '[]');
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+function putOff(bugId) {
+  try {
+    const list = putOffList().filter((id) => id !== bugId);
+    list.push(bugId);
+    window.localStorage.setItem(LATER_KEY, JSON.stringify(list.slice(-LATER_MAX)));
+  } catch { /* private mode: the card comes back next time, which is all that is lost */ }
+}
+
+/** The report to ask about now, or null. Exported for the tests. */
+export function pickDue(reports, putOffIds = putOffList()) {
+  const later = new Set(putOffIds);
+  const due = (reports || []).filter((r) => (r.ratingDue === 'require'
+    || (r.ratingDue === 'ask' && !later.has(r.id))));
+  if (!due.length) return null;
+  const settledAt = (r) => new Date(r.resolvedAt || r.updatedAt || 0).getTime() || 0;
+  return due.reduce((latest, r) => (settledAt(r) > settledAt(latest) ? r : latest));
+}
+
+export function mountRateDue(ctx) {
+  const {
+    client, rateDue: card, compose, picks, known, callBtn, titleInput, scrim,
+  } = ctx;
+
+  let held = false;
+  ctx.mustRate = () => held;
+
+  /**
+   * Hold the form, or let it go. Held, it stays on screen, dimmed: what they
+   * came to do is still in sight, one rating away.
+   */
+  function hold(on) {
+    held = on;
+    for (const el of [compose, picks, known]) {
+      el.classList.toggle('held', on);
+      el.inert = on;
+    }
+    if (on) callBtn.hidden = true;
+    else if (ctx.callOffered() && !ctx.mustSignIn()) callBtn.hidden = false;
+    ctx.refreshSendState();
+  }
+
+  function release() {
+    if (held) hold(false);
+  }
+
+  function dismiss() {
+    card.hidden = true;
+    card.replaceChildren();
+    release();
+    titleInput.focus();
+  }
+
+  function draw(report) {
+    const required = report.ratingDue === 'require';
+    const when = report.resolvedAt ? relativeDay(report.resolvedAt) : '';
+    const done = report.status === 'CLOSED' ? 'closed' : 'fixed';
+    card.hidden = false;
+    card.classList.toggle('is-required', required);
+    card.innerHTML = `
+      <div class="rd-head">
+        <span class="rd-eyebrow">${required ? 'Before you report something new' : `Your report was ${done}`}</span>
+        ${required ? '' : '<button type="button" class="link rd-later" data-act="rate-later">Not now</button>'}
+      </div>
+      <p class="rd-report">
+        <span class="rd-ico" aria-hidden="true">${ICONS.check}</span>
+        <span class="rd-ttl">${escapeHtml(report.title)}</span>
+        <span class="rd-sub">${escapeHtml(report.reference)}${when ? ` · ${done} ${escapeHtml(when)}` : ''}</span>
+      </p>
+      <div class="rd-stars"></div>`;
+
+    card.querySelector('[data-act="rate-later"]')?.addEventListener('click', () => {
+      putOff(report.id);
+      dismiss();
+    });
+
+    drawRating(card.querySelector('.rd-stars'), {
+      client,
+      report,
+      rating: null,
+      question: required ? 'How did we handle it? Rate it to send a new one.' : 'How did we do?',
+      onRated: () => {
+        card.querySelector('.rd-eyebrow').textContent = `Your report was ${done}`;
+        card.querySelector('[data-act="skip"]')?.remove();
+        card.classList.remove('is-required');
+        release();
+      },
+      // The rating could not be sent. A held form must not turn into a locked
+      // door because of our outage: offer the way past.
+      onError: () => {
+        if (!held || card.querySelector('[data-act="skip"]')) return;
+        const skip = document.createElement('button');
+        skip.type = 'button';
+        skip.className = 'link rd-later';
+        skip.dataset.act = 'skip';
+        skip.textContent = 'Skip for now';
+        skip.addEventListener('click', dismiss);
+        card.querySelector('.rd-head').append(skip);
+      },
+    });
+
+    if (required) {
+      hold(true);
+      // Focus moves to the card, out of the form that just went inert. The
+      // card, not its first star: a focused star lights up, and one lit star
+      // reads as a rating of 1 somebody never gave.
+      const active = scrim.getRootNode().activeElement;
+      if (!active || !card.contains(active)) card.focus();
+    }
+  }
+
+  // Only a browser that has filed something has anything to rate. A failed
+  // read asks nothing and holds nothing: the form is what they came for.
+  if (!client.hasReports()) return;
+  client.myReports()
+    .then(({ reports }) => {
+      if (ctx.closed) return;
+      const report = pickDue(reports);
+      if (report) draw(report);
+    })
+    .catch(() => {});
+}