@sphoro/bugcatch-web-sdk 0.17.0 → 0.19.0

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@sphoro/bugcatch-web-sdk",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Drop-in browser SDK — report bugs with console, network and environment context, without the extension.",
   "type": "module",
   "main": "dist/bugcatch.es.js",
   "module": "dist/bugcatch.es.js",
-  "browser": "dist/bugcatch.umd.js",
+  "browser": "dist/bugcatch.standalone.umd.js",
   "unpkg": "dist/bugcatch.umd.js",
   "jsdelivr": "dist/bugcatch.umd.js",
   "types": "src/index.d.ts",
@@ -15,7 +15,7 @@
       "import": "./dist/bugcatch.es.js",
       "default": "./dist/bugcatch.es.js"
     },
-    "./dist/bugcatch.umd.js": "./dist/bugcatch.umd.js",
+    "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
   "files": [
@@ -24,9 +24,9 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "prepublishOnly": "vite build"
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/build.mjs --watch",
+    "prepublishOnly": "node scripts/build.mjs"
   },
   "keywords": [
     "bug-report",

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/announcements.js

@@ -0,0 +1,147 @@
+/**
+ * What the project's team is telling the people using its widget — "UPI
+ * payments are delayed today, no need to report it" — written on the Widget
+ * announcements settings page and changed there whenever it needs to be,
+ * without the site redeploying anything.
+ *
+ * The API decides what is live (GET /ingest/announcements): published, and in
+ * date for somebody on earth. This file decides the two things only the browser
+ * can — whether it is in date on the visitor's own day, and whether this
+ * visitor has closed it — and keeps the answer for a few minutes.
+ *
+ * Kept, unlike the other things the widget asks about, because this is the one
+ * asked on page load: a card beside the button has to be known before anybody
+ * presses it. Without the cache that is one request per page view on every site
+ * running the SDK, for an answer that is an empty list on nearly all of them.
+ * With it, a browser asks at most once every CACHE_MS, and a notice written now
+ * reaches a visitor within that.
+ *
+ * Every failure is an empty list. A notice is never worth a broken widget.
+ */
+
+const CACHE_MS = 5 * 60_000;
+const SEEN_KEY = 'bugcatch:announcements:seen';
+// More than can ever be live at once; the entry that falls off is one whose
+// notice ended long ago, and the cost of being wrong is closing it twice.
+const SEEN_LIMIT = 40;
+
+const TONES = ['info', 'success', 'warning', 'critical'];
+
+const cacheKey = (projectId) => `bugcatch:announcements:${projectId}`;
+
+export async function fetchAnnouncements({
+  apiBase, apiKey, projectId, fresh = false,
+}) {
+  if (!fresh) {
+    const held = readCache(projectId);
+    if (held) return held;
+  }
+  try {
+    const res = await fetch(
+      `${apiBase}/ingest/announcements?projectId=${encodeURIComponent(projectId)}`,
+      { headers: { 'X-BugCatch-Key': apiKey } },
+    );
+    // Kept even when refused. An API from before this route answers 404 on
+    // every page, and asking it again on the next one changes nothing.
+    const list = res.ok ? cleanList((await res.json())?.announcements) : [];
+    writeCache(projectId, list);
+    return list;
+  } catch {
+    // Offline, or blocked by a CSP — not kept, so the next page tries again.
+    return [];
+  }
+}
+
+/** What to draw: in date where the visitor is, and not closed by them. */
+export function visibleAnnouncements(list, { on = localDay(), seen = readSeen() } = {}) {
+  return (list || []).filter((a) => inDate(a, on) && !(a.dismissible && seen.includes(seenKey(a))));
+}
+
+/** Remember that this visitor closed it, until a "show it again" bumps the revision. */
+export function dismissAnnouncement(a) {
+  if (!a?.id || !a.dismissible) return;
+  try {
+    const key = seenKey(a);
+    const next = [...readSeen().filter((k) => k !== key), key];
+    localStorage.setItem(SEEN_KEY, JSON.stringify(next.slice(-SEEN_LIMIT)));
+  } catch { /* storage denied — it still goes away for this page */ }
+}
+
+/**
+ * Whether a link is one to draw at all. The API refuses anything else, and this
+ * is the second lock on the same door: the widget renders it as a link on the
+ * customer's site, and `javascript:` there is a script run by whoever wrote it.
+ */
+export function safeHref(href) {
+  if (typeof href !== 'string' || !href) return null;
+  if (href.startsWith('//')) return null;
+  if (href.startsWith('/')) return href;
+  return /^(https?:\/\/|mailto:)./i.test(href) ? href : null;
+}
+
+/** Today where the visitor is, as YYYY-MM-DD — never UTC; see the API's dayIn(). */
+export function localDay(now = new Date()) {
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+}
+
+function inDate(a, on) {
+  if (a.startsOn && on < a.startsOn) return false;
+  if (a.endsOn && on > a.endsOn) return false;
+  return true;
+}
+
+function seenKey(a) {
+  return `${a.id}#${a.revision || 0}`;
+}
+
+/** The shape the widget draws, from whatever came over the wire. */
+function cleanList(rows) {
+  return (Array.isArray(rows) ? rows : [])
+    .filter((a) => a && typeof a.id === 'string' && typeof a.title === 'string' && a.title.trim())
+    .map((a) => {
+      const placement = a.placement === 'launcher' ? 'launcher' : 'panel';
+      const href = safeHref(a.ctaHref);
+      return {
+        id: a.id,
+        revision: Number.isInteger(a.revision) ? a.revision : 0,
+        title: a.title,
+        body: typeof a.body === 'string' ? a.body : '',
+        tone: TONES.includes(a.tone) ? a.tone : 'info',
+        // Both halves, or neither, as the API saves them.
+        ctaLabel: href && typeof a.ctaLabel === 'string' ? a.ctaLabel : '',
+        ctaHref: href && typeof a.ctaLabel === 'string' ? href : '',
+        placement,
+        dismissible: placement === 'launcher' || a.dismissible !== false,
+        startsOn: typeof a.startsOn === 'string' ? a.startsOn : '',
+        endsOn: typeof a.endsOn === 'string' ? a.endsOn : '',
+      };
+    });
+}
+
+function readSeen() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(SEEN_KEY) || '[]');
+    return Array.isArray(parsed) ? parsed.filter((k) => typeof k === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function readCache(projectId) {
+  try {
+    const held = JSON.parse(localStorage.getItem(cacheKey(projectId)) || 'null');
+    if (!held || !Array.isArray(held.list) || typeof held.at !== 'number') return null;
+    // A clock moved backwards reads as fresh forever without the second half.
+    const age = Date.now() - held.at;
+    return age >= 0 && age < CACHE_MS ? held.list : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeCache(projectId, list) {
+  try {
+    localStorage.setItem(cacheKey(projectId), JSON.stringify({ at: Date.now(), list }));
+  } catch { /* not kept — the next page asks again */ }
+}

package/src/busy.js

@@ -0,0 +1,18 @@
+/**
+ * What somebody is told when the API refuses a request for coming too fast
+ * (HTTP 429).
+ *
+ * The API's own refusal is already written for a stranger — "Too many reports
+ * are being sent from this site at the moment. Please try again in a minute."
+ * — and is used wherever it arrived. This is for when it did not, such as a
+ * proxy answering 429 with a page of HTML: the person still reads a sentence
+ * saying that waiting will fix it, rather than "HTTP 429", which reads as
+ * something they broke.
+ */
+export const TOO_MANY_REQUESTS =
+  'Too many requests are being sent from here at the moment. Please try again in a minute.';
+
+/** The sentence for a 429: the server's own when there was one. */
+export function tooManyMessage(detail) {
+  return detail || TOO_MANY_REQUESTS;
+}

package/src/call.js

@@ -0,0 +1,7 @@
+// Everything a call needs, as one part that is fetched only when a call is
+// offered, placed, or rings (lazy.js). Nothing is added here: the files it
+// gathers stay where they are, because the dashboard imports live-call.js by
+// that path to take the other end of the same call.
+
+export { joinLiveCall, liveCallSupported, openMicrophone } from './live-call.js';
+export { showIncomingCall } from './incoming-call.js';

package/src/capture.js

@@ -6,6 +6,8 @@
 // purpose: it would need a heavy dependency and would still silently miss
 // cross-origin iframes, canvas and video, which is worse than not offering it.
 
+import { tooManyMessage } from './busy.js';
+
 /**
  * Pristine references, taken at module-evaluation time — which happens on
  * import, before init() patches anything.
@@ -252,6 +254,13 @@ export async function uploadAttachment({ apiBase, apiKey, blob, mime, onProgress
     headers: { 'Content-Type': 'application/json', 'X-BugCatch-Key': apiKey },
     body: JSON.stringify({ mime: type }),
   });
+  if (res.status === 429) {
+    // Uploading faster than the API allows. The server's sentence when it sent
+    // one; either way words, not a status code, because the widget shows this.
+    let detail = '';
+    try { detail = (await res.json())?.message || ''; } catch { /* not JSON */ }
+    throw new Error(`[BugCatch] ${tooManyMessage(typeof detail === 'string' ? detail : '')}`);
+  }
   if (!res.ok) throw new Error(`[BugCatch] could not start the upload (HTTP ${res.status}).`);
   const { key, uploadUrl } = await res.json();
 

package/src/chunks.js

@@ -0,0 +1,56 @@
+// What the two loaders (lazy.js, umd/lazy.js) share: how a part of the
+// script-tag build that arrived on its own is found, and what a part that
+// never arrived is called.
+//
+// The ES build does not use the registry: a bundler splits it at its import()
+// calls and wires the pieces back together itself. A <script> tag has no such
+// machinery, so each part of that build is a plain script that, when it runs,
+// leaves its exports under a name on `window` — and umd/lazy.js, having added
+// the script, reads them from there once it has loaded.
+//
+// The name carries the version, so a part left in a cache by an older release
+// is never mistaken for this one's: it registers under its own version, this
+// release finds nothing under its, and says so rather than running code that
+// expects a different client.
+
+// Replaced at build time from package.json; see vite.config.js.
+const VERSION = typeof __SDK_VERSION__ === 'string' ? __SDK_VERSION__ : '0.0.0-dev';
+
+const REGISTRY = '__bugcatchChunks';
+
+const key = (name) => `${name}@${VERSION}`;
+
+/** Called by a part as its script runs: here is what I export. */
+export function registerChunk(name, exports) {
+  const registry = window[REGISTRY] || (window[REGISTRY] = {});
+  registry[key(name)] = exports;
+}
+
+/** What a part registered, once its script has run; undefined until then. */
+export function registeredChunk(name) {
+  return typeof window !== 'undefined' ? window[REGISTRY]?.[key(name)] : undefined;
+}
+
+/**
+ * A part that could not be loaded, said twice: the details for whoever is
+ * debugging the page, in the console, and a sentence for the person using it,
+ * as the error — which is what the panel shows when a call cannot start.
+ */
+export function chunkUnavailable(detail, cause) {
+  // eslint-disable-next-line no-console
+  console.warn(`[BugCatch] ${detail}`, ...(cause ? [cause] : []));
+  const err = new Error('[BugCatch] part of the widget could not be loaded — check the connection and try again.');
+  if (cause) err.cause = cause;
+  return err;
+}
+
+/** One fetch per part at a time; a failure is forgotten, so the next ask retries. */
+export function once(load) {
+  let pending = null;
+  return (...args) => {
+    pending ||= load(...args).catch((err) => { pending = null; throw err; });
+    return pending;
+  };
+}
+
+export { VERSION as CHUNK_VERSION };

package/src/gesture.js

@@ -0,0 +1,33 @@
+// Whether anybody has touched this page yet — for the incoming-call card,
+// which may only make a sound once somebody has.
+//
+// Tracked rather than asked, because there is nothing to ask: a browser will
+// tell you an AudioContext is suspended, but only after you have built one —
+// and building one on a page with no interaction is what writes
+//
+//     The AudioContext was not allowed to start. It must be resumed (or
+//     created) after a user gesture on the page.
+//
+// into the console. This SDK runs on somebody else's site, and that console
+// belongs to whoever is trying to debug their own product. A warning we cannot
+// act on, for a sound that was never going to play, is not ours to put there.
+//
+// Here, in the script every page loads, rather than beside the card: the card's
+// code is fetched when a call rings (lazy.js), and listeners added then would
+// have missed every click that came before it.
+
+let touched = false;
+if (typeof window !== 'undefined' && window.addEventListener) {
+  for (const evt of ['pointerdown', 'keydown', 'touchstart']) {
+    // Capture, and it matters more here than it would in our own app: this runs
+    // on somebody else's page, whose handlers we have never seen and one of
+    // which may well stop a click before it reaches the window.
+    window.addEventListener(evt, () => { touched = true; }, {
+      once: true, capture: true, passive: true,
+    });
+  }
+}
+
+export function pageTouched() {
+  return touched;
+}

package/src/icons.js

@@ -0,0 +1,18 @@
+// The handful of glyphs the launcher draws before the panel exists: its own
+// two, the theme switch's three, what the load-failure card needs, and the
+// tones of an announcement beside the button (notice.js). Every other icon
+// lives with the panel (panel/icons.js), which re-exports these.
+//
+// One export per glyph rather than one object, so a bundle carries only the
+// ones something draws — imported as `* as ICONS` and read as ICONS.chat.
+
+export const chat = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5a7.5 7 0 0 1 7.5-7h1a7.5 7 0 0 1 0 14H9l-4.2 2.6a.5.5 0 0 1-.76-.5l.5-3.1A7 7 0 0 1 4 11.5z"/><path d="M8.5 11.5h.01M12 11.5h.01M15.5 11.5h.01" stroke-width="2.6"/></svg>';
+export const chevronDown = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9.5l6 6 6-6"/></svg>';
+export const sun = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.4 5.4l1.6 1.6M17 17l1.6 1.6M18.6 5.4L17 7M7 17l-1.6 1.6"/></svg>';
+export const moon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13.4A8.2 8.2 0 1 1 10.6 4a6.6 6.6 0 0 0 9.4 9.4z"/></svg>';
+export const auto = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.8" y="4.4" width="18.4" height="12.6" rx="2.2"/><path d="M8.6 20.2h6.8"/><path d="M12 4.4v12.6"/><path d="M12 7.2a3.6 3.6 0 0 1 0 7.2z" fill="currentColor" stroke="none"/></svg>';
+export const alert = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.5v5.2M12 16.3h.01"/></svg>';
+export const close = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+export const check = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.8l4.6 4.4L19 7"/></svg>';
+export const info = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5.5M12 7.7h.01"/></svg>';
+export const warn = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.2a2 2 0 0 1 3.4 0l7.6 13.1a2 2 0 0 1-1.7 3H4.4a2 2 0 0 1-1.7-3z"/><path d="M12 9.5v4.2M12 17h.01"/></svg>';

package/src/identity.js

@@ -11,14 +11,17 @@
  * signed in and which loan is on screen. Passed as `loanId`, `applicationId` or
  * `customerNumber`, the API reads them as identifiers the app itself asserted
  * (reference source `identify`), which is what lets bugcatch look the customer
- * up in the lender's own system over MCP without asking the reporter — and lets
- * that lookup count as a trusted join. Passed under any other name they are
- * still sent, but only as metadata a person can read.
+ * up in the lender's own system over MCP without asking the reporter. They are
+ * a lookup, not proof: the widget key is public, so the Sphoro Agent treats the
+ * customer as proved only when the host's server signed the `id` (`userHash`,
+ * checked by the API against the project's identity secret) or the reporter
+ * verified their email with a code. Passed under any other name they are still
+ * sent, but only as metadata a person can read.
  *
  * WHERE THEY GO. The signed-in user's fields travel as `metadata.user`, which is
- * where the API has always read `id` and where the ownership check reads `phone`
- * and `email`. The current screen travels as `metadata.context`. Both shapes are
- * mirrored by bugcatch-api/src/settings/reference-extract.ts identifyReferences.
+ * where the API has always read `id` (and `userHash`). The current screen
+ * travels as `metadata.context`. Both shapes are mirrored by
+ * bugcatch-api/src/settings/reference-extract.ts identifyReferences.
  */
 
 /** Longest identifier the API keeps; anything longer is dropped there too. */
@@ -98,8 +101,9 @@ const RESERVED_USER = new Set(['id', 'userId', ...USER_TEXT, ...Object.values(ID
  *   id              string | number   the customer's own account id in your system
  *   email           string            threads their reports; where "resolved" mail goes
  *   name            string
- *   phone           string | number   used, with email, to confirm the reporter owns
- *                                     the record bugcatch looked up
+ *   phone           string | number   for your team to read; never proof of who they are
+ *   userHash        string            HMAC-SHA256(identity secret, id), made on your
+ *                                     server — what makes `id` proof rather than a claim
  *   loanId          string | number   (alias loanNumber)
  *   applicationId   string | number
  *   customerNumber  string | number   (alias customerId)
@@ -203,6 +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',
 ];
 
 const CALLBACK_OPTIONS = [

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.
  *
@@ -53,32 +55,6 @@ const RING = {
   ],
 };
 
-/**
- * Whether anybody has touched this page yet.
- *
- * Tracked rather than asked, because there is nothing to ask: a browser will
- * tell you an AudioContext is suspended, but only after you have built one —
- * and building one on a page with no interaction is what writes
- *
- *     The AudioContext was not allowed to start. It must be resumed (or
- *     created) after a user gesture on the page.
- *
- * into the console. This SDK runs on somebody else's site, and that console
- * belongs to whoever is trying to debug their own product. A warning we cannot
- * act on, for a sound that was never going to play, is not ours to put there.
- */
-let touched = false;
-if (typeof window !== 'undefined' && window.addEventListener) {
-  for (const evt of ['pointerdown', 'keydown', 'touchstart']) {
-    // Capture, and it matters more here than it would in our own app: this runs
-    // on somebody else's page, whose handlers we have never seen and one of
-    // which may well stop a click before it reaches the window.
-    window.addEventListener(evt, () => { touched = true; }, {
-      once: true, capture: true, passive: true,
-    });
-  }
-}
-
 /**
  * The same question asked of the browser rather than of ourselves.
  *
@@ -104,8 +80,8 @@ function activatedByBrowser() {
  * permission, and the correct behaviour there is a card that appears in silence
  * rather than no card.
  */
-function startRinging() {
-  if (!touched && !activatedByBrowser()) return () => {};
+function startRinging(touched) {
+  if (!touched() && !activatedByBrowser()) return () => {};
 
   const Ctx = typeof window !== 'undefined' && (window.AudioContext || window.webkitAudioContext);
   if (!Ctx) return () => {};
@@ -183,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(';');
 
@@ -194,17 +170,22 @@ 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.
  * @param {() => void} [opts.onExpire] Nobody pressed anything in time.
+ * @param {() => boolean} [opts.touched]  Whether anybody has touched the page
+ *   yet, which is when a sound may be made (gesture.js). Asked of the caller
+ *   because this file is fetched when a call rings, and could not have been
+ *   listening for the clicks that came before.
  * @returns {(reason?: string) => void} Take it away. Called with no reason on
  *   an ordinary dismissal; the caller passes one only for its own logging.
  */
 export function showIncomingCall({
-  call, accent = '#5b6ef5', position = 'bottom-right',
-  onAnswer, onDecline, onExpire,
+  call, accent = null, position = 'bottom-right',
+  onAnswer, onDecline, onExpire, touched = () => false,
 }) {
   if (typeof document === 'undefined' || !document.body) return () => {};
 
@@ -222,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',
@@ -241,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';
@@ -266,14 +246,14 @@ 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);
   }
   el.append(actions);
   document.body.appendChild(el);
 
-  const stopRinging = startRinging();
+  const stopRinging = startRinging(touched);
   let closed = false;
   let ticker = null;