@sphoro/bugcatch-web-sdk 0.19.0 → 0.21.0

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>';

package/src/panel/index.js

@@ -8,6 +8,8 @@
 // One dialog doing several jobs, one file each:
 //
 //   compose.js   the report form: drafts, severity, attachments, recording, Send
+//   feedback.js  the other form: "Give feedback", for what is not a bug
+//   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 +39,17 @@ 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';
+import { feedbackHtml, mountFeedback } from './feedback.js';
+
+/**
+ * What the header says on each of the two forms. The header names the errand;
+ * the switch under it is how to change errands.
+ */
+const MODES = {
+  report: { title: 'Report a bug', sub: 'We attach the page details for you.' },
+  feedback: { title: 'Give feedback', sub: 'The team reads every note.' },
+};
 
 /**
  * Open the panel over the page. `preloadCall` fetches the call code ahead of a
@@ -44,11 +57,17 @@ import { mountThread } from './thread.js';
  * to load code of its own.
  */
 export function openPanel({
-  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null,
+  root, host, dock, client, onClose, preloadCall = () => {}, themeControls = null, mode: askedMode = 'report',
 }) {
   addStyles(root);
   const cfg = client.config;
   const themeLabel = () => themeControls?.label() || '';
+  // Drawn straight away rather than once the API has answered, because nearly
+  // every project has it on: a switch that arrived a beat after the form would
+  // push the form down under the reader's cursor. The rare project that has it
+  // off loses it again when the answer comes (below).
+  const offerFeedback = cfg.feedback !== false;
+  let mode = offerFeedback && askedMode === 'feedback' ? 'feedback' : 'report';
 
   const scrim = document.createElement('div');
   // The panel opens out of whichever corner the dock is in, clearing it by the
@@ -57,37 +76,47 @@ export function openPanel({
     + `${dock.classList.contains('at-top') ? 'at-top' : 'at-bottom'}`;
   scrim.style.setProperty('--bc-dock-h', `${Math.round(dock.getBoundingClientRect().height)}px`);
   scrim.innerHTML = `
-    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h">
+    <div class="panel" role="dialog" aria-modal="true" aria-labelledby="bc-h" data-mode="${mode}">
       ${headHtml({
         id: 'bc-h',
         // 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.',
+        title: MODES[mode].title,
+        sub: MODES[mode].sub,
         theme: themeLabel(),
       })}
+      ${offerFeedback ? `
+      <div class="modes" role="group" aria-label="What would you like to do?">
+        <button type="button" data-mode="report" aria-pressed="${mode === 'report'}">${ICONS.bug}Report a bug</button>
+        <button type="button" data-mode="feedback" aria-pressed="${mode === 'feedback'}">${ICONS.feedback}Give feedback</button>
+      </div>` : ''}
       <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 bug-only" tabindex="-1" hidden></div>
         <!-- What the project's team is telling visitors. Drawn only when it
              has published something. -->
         <div class="notices" hidden></div>
-        <div class="whoami" hidden></div>
+        <div class="whoami bug-only" hidden></div>
         <!-- The questions the assistant can answer from their account and
              close by itself. Drawn only when the project offers any. -->
-        <div class="picks" hidden></div>
-        <div class="known" hidden></div>
+        <div class="picks bug-only" hidden></div>
+        <div class="known bug-only" hidden></div>
         ${composeHtml(cfg)}
+        ${offerFeedback ? feedbackHtml() : ''}
       </div>
       <div class="foot">
-        <span class="note" aria-live="polite"></span>
+        <span class="note bug-only" aria-live="polite"></span>
         ${client.hasReports() ? '<button class="quiet" type="button" data-act="history">Your reports</button>' : ''}
         <span class="spacer"></span>
         <!-- Hidden until the API confirms this project can take a call, which
              most cannot. Drawn here rather than as a second launcher because it
              is the same errand as Send report — the difference is only whether
              the reporter would rather say it than type it. -->
-        <button class="ghost" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
-        <button class="primary" type="button" data-act="send">Send report ${ICONS.send}</button>
+        <button class="ghost bug-only" type="button" data-act="call" hidden>${ICONS.phone}Talk to the team</button>
+        <button class="primary bug-only" type="button" data-act="send">Send report ${ICONS.send}</button>
+        ${offerFeedback ? `<button class="primary fb-only" type="button" data-act="send-feedback">Send feedback ${ICONS.send}</button>` : ''}
       </div>
       <div class="powered">Powered by
         <a class="brand-credit" href="https://bugcatch.sphoro.com" target="_blank" rel="noopener noreferrer" aria-label="BugCatch">${BRAND}</a>
@@ -131,6 +160,7 @@ 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,
@@ -155,6 +185,10 @@ export function openPanel({
     // signin.js
     mustSignIn: null,
     recheckSignIn: null,
+    // rate-due.js
+    mustRate: () => false,
+    // feedback.js
+    focusFeedback: () => {},
     // thread.js
     succeed: null,
     refreshThread: null,
@@ -171,6 +205,50 @@ export function openPanel({
   mountCallOffer(ctx);
   mountSignIn(ctx);
   mountThread(ctx);
+  mountRateDue(ctx);
+  if (offerFeedback) mountFeedback(ctx);
+
+  /* ---------- report a bug, or give feedback ---------- */
+
+  /**
+   * Move between the two forms. Only while the forms are on screen: history,
+   * a report's conversation and the call screens replace the panel's markup,
+   * and there is no form there to switch to. Nothing typed into either form is
+   * lost by switching — both stay in the page, one of them hidden.
+   */
+  function setMode(next, { focus = true } = {}) {
+    const want = next === 'feedback' && $('.modes') ? 'feedback' : 'report';
+    const panel = scrim.querySelector('.panel');
+    if (ctx.closed || ctx.sending || !panel || !scrim.querySelector('.modes')) return;
+    if (want === 'feedback' && ctx.isRecording()) return;
+    mode = want;
+    panel.dataset.mode = want;
+    panel.querySelector('#bc-h').textContent = MODES[want].title;
+    panel.querySelector('.head .titles p').textContent = MODES[want].sub;
+    scrim.querySelectorAll('.modes [data-mode]').forEach((b) => {
+      b.setAttribute('aria-pressed', String(b.dataset.mode === want));
+    });
+    say('');
+    if (focus) (want === 'feedback' ? ctx.focusFeedback() : ctx.titleInput.focus());
+  }
+  scrim.querySelectorAll('.modes [data-mode]').forEach((btn) => {
+    btn.addEventListener('click', () => setMode(btn.dataset.mode));
+  });
+
+  // The project's own answer. Off — or an API too old to say — takes the
+  // switch away, and with it a feedback form the server would refuse.
+  if (offerFeedback) {
+    client.feedbackEnabled().then((on) => {
+      // Mid-send, the form stays for this open: the server's refusal says why,
+      // which beats a form vanishing from under the button just pressed.
+      if (on || ctx.closed || ctx.sending) return;
+      const wasFeedback = mode === 'feedback';
+      setMode('report', { focus: wasFeedback });
+      scrim.querySelector('.modes')?.remove();
+      scrim.querySelector('.feedback')?.remove();
+      scrim.querySelector('[data-act="send-feedback"]')?.remove();
+    });
+  }
 
   /* ---------- lifecycle ---------- */
 
@@ -242,9 +320,10 @@ export function openPanel({
 
   root.appendChild(scrim);
   ctx.refreshSendState();
-  ctx.titleInput.focus();
+  if (mode === 'feedback') ctx.focusFeedback();
+  else ctx.titleInput.focus();
 
-  return { destroy, close };
+  return { destroy, close, setMode };
 }
 
 /**

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

package/src/panel/rating.js

@@ -0,0 +1,87 @@
+// "How did we do?" — five stars and, after them, an optional note. Drawn under
+// a settled report's conversation (thread.js) and above the form on the first
+// screen (rate-due.js), so both ask the same question the same way.
+
+import * as ICONS from './icons.js';
+import { escapeHtml } from './render.js';
+
+/** What a drawn rating box was drawn from, so a refresh can tell if it moved. */
+export function ratingKey(rating) {
+  return JSON.stringify(rating ? [rating.score, rating.current, rating.comment || null] : null);
+}
+
+/**
+ * Draw the stars into `box` for `report`, with the reader's `rating` so far.
+ *
+ * One tap sends the score; a note is offered after it rather than before,
+ * because a form that asks for a sentence first is a form people close, and
+ * the score is the part that counts. `onRated` hears each saved rating and
+ * `onError` each refusal, for a caller that holds something until it lands.
+ */
+export function drawRating(box, {
+  client, report, rating, justRated = false, question = null, onRated = null, onError = null,
+}) {
+  box.dataset.key = ratingKey(rating);
+  // A rating given for an earlier fix stands, but it is not this fix's: the
+  // stars start empty and the sentence says what the old score was.
+  const shown = rating?.current ? rating.score : 0;
+  const asked = !rating
+    ? (question || 'How did we do?')
+    : !rating.current
+      ? `You rated an earlier fix ${rating.score} out of 5. How did this one go?`
+      : justRated
+        ? 'Thanks — the team will see that.'
+        : `You rated this ${rating.score} out of 5.`;
+  const askNote = justRated && rating?.current && !rating.comment;
+  box.innerHTML = `
+      <p class="fr-q">${escapeHtml(asked)}</p>
+      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((n) => `
+        <button type="button" data-score="${n}" aria-pressed="${n === shown}" aria-label="${n} out of 5${n === 1 ? ', poor' : n === 5 ? ', great' : ''}" class="${n <= shown ? 'on' : ''}">${ICONS.star}</button>`).join('')}
+      </div>
+      ${rating?.current && rating.comment ? `<p class="fr-said">“${escapeHtml(rating.comment)}”</p>` : ''}
+      ${askNote ? `
+      <div class="fr-note">
+        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${rating.score <= 2 ? 'What went wrong? (optional)' : 'Anything to add? (optional)'}"></textarea>
+        <button type="button" data-act="rating-note">Add note</button>
+      </div>` : ''}
+      ${rating ? '' : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
+      <p class="feedback-status" role="status"></p>`;
+
+  const stars = [...box.querySelectorAll('[data-score]')];
+  const paint = (upTo) => stars.forEach((b) => b.classList.toggle('on', Number(b.dataset.score) <= upTo));
+  const lock = (on) => box.querySelectorAll('button, textarea').forEach((el) => { el.disabled = on; });
+  const status = box.querySelector('.feedback-status');
+
+  async function send(score, comment) {
+    lock(true);
+    status.textContent = '';
+    try {
+      const saved = await client.rate(report.id, { score, comment });
+      drawRating(box, {
+        client, report, rating: saved, justRated: true, question, onRated, onError,
+      });
+      box.querySelector('.fr-note textarea')?.focus();
+      onRated?.(saved);
+    } catch (err) {
+      status.textContent = err.message;
+      lock(false);
+      paint(shown);
+      onError?.(err);
+    }
+  }
+
+  for (const btn of stars) {
+    const n = Number(btn.dataset.score);
+    btn.addEventListener('mouseenter', () => paint(n));
+    btn.addEventListener('focus', () => paint(n));
+    btn.addEventListener('blur', () => paint(shown));
+    btn.addEventListener('click', () => send(n));
+  }
+  box.querySelector('.stars').addEventListener('mouseleave', () => paint(shown));
+
+  box.querySelector('[data-act="rating-note"]')?.addEventListener('click', () => {
+    const note = box.querySelector('.fr-note textarea').value.trim();
+    if (!note) { box.querySelector('.fr-note')?.remove(); return; }
+    send(rating.score, note);
+  });
+}

package/src/panel/signin.js

@@ -37,7 +37,7 @@ export function mountSignIn(ctx) {
     // The call offer is the same errand as the form, so it goes with it — and
     // comes back only if the API had already said this project can take one.
     if (shut) callBtn.hidden = true;
-    else if (ctx.callOffered()) callBtn.hidden = false;
+    else if (ctx.callOffered() && !ctx.mustRate()) callBtn.hidden = false;
   }
 
   function drawWhoami() {

package/src/panel/styles.js

@@ -306,6 +306,53 @@ textarea { min-height: 76px; resize: vertical; }
 .seg button[aria-pressed=true]::before { opacity: 1; }
 .seg button:focus-visible { outline-offset: -2px; }
 
+/* ---------- report a bug, or give feedback ----------
+   The same stone track as the severity control, two wide segments, under the
+   header so it stays put while the form scrolls. Each form's own parts carry
+   bug-only or fb-only; the other screens (history, a conversation, a call)
+   carry neither, so a mode left on the panel cannot hide anything of theirs. */
+.modes {
+  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
+  margin: 12px var(--bc-pad) 0; padding: 3px; background: var(--bc-stone); border-radius: 999px;
+}
+.modes button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
+  height: 32px; padding: 0 8px; font: inherit; font-size: var(--bc-fs-sm); font-weight: 520; line-height: 1; white-space: nowrap;
+  color: var(--bc-muted); background: none; border: none; border-radius: 999px;
+  cursor: pointer; transition: background 180ms var(--bc-ease), color 180ms, box-shadow 180ms;
+}
+.modes button svg { font-size: 15px; flex: none; }
+.modes button:hover { color: var(--bc-fg); }
+.modes button[aria-pressed=true] {
+  background: var(--bc-raised); color: var(--bc-fg); font-weight: 600;
+  box-shadow: 0 1px 2px rgba(20,18,14,.10), 0 0 0 .5px rgba(20,18,14,.08);
+}
+.modes button:focus-visible { outline-offset: -2px; }
+.panel[data-mode="feedback"] .bug-only,
+.panel:not([data-mode="feedback"]) .fb-only { display: none !important; }
+
+/* ---------- feedback ---------- */
+.feedback { animation: bc-fade-in 200ms ease both; }
+.feedback textarea { min-height: 96px; }
+.feedback .kinds { display: flex; flex-wrap: wrap; gap: 6px; }
+.feedback .kinds .tool[aria-pressed=true] { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-on-accent); }
+.feedback .kinds .tool[aria-pressed=true] svg { color: currentColor; }
+.faces { display: flex; gap: 6px; }
+.face {
+  flex: 1 1 0; display: grid; place-items: center; height: 42px; padding: 0;
+  font: inherit; font-size: 24px; color: var(--bc-muted); background: var(--bc-stone);
+  border: 1px solid transparent; border-radius: var(--bc-r-md); cursor: pointer;
+  transition: background 160ms, color 160ms, transform 160ms var(--bc-ease);
+}
+.face:hover { color: var(--bc-fg); background: color-mix(in srgb, var(--bc-fg) 8%, var(--bc-stone)); }
+.face:active { transform: scale(.94); }
+.face[aria-pressed=true] { color: var(--bc-on-accent); background: var(--bc-accent); }
+.face:focus-visible { outline-offset: 2px; }
+.face-word { font-weight: 560; color: var(--bc-muted); }
+.fb-as { margin: 0; font-size: var(--bc-fs-xs); line-height: 1.45; color: var(--bc-muted); }
+.fb-as strong { color: var(--bc-fg); font-weight: 600; word-break: break-all; }
+.fb-who:empty { display: none; }
+
 /* ---------- attachments ----------
    Three ring pills in a row: optional, so they take one line, not a band of
    dashed drop zones. */
@@ -831,6 +878,34 @@ button.quiet:hover { color: var(--bc-fg); text-decoration-color: color-mix(in sr
 .history .sub .rated svg { width: 11px; height: 11px; color: #f0a81c; }
 .history .sub .rate-ask { color: var(--bc-fg); font-weight: 600; }
 
+/* ---------- a settled report waiting for its rating ----------
+   Above the form on the first screen: the same stars as under a report's
+   conversation, with the report they are about named on top. */
+.rate-due { margin: 0 0 14px; }
+.rate-due:focus { outline: none; }
+.rate-due:focus-visible { box-shadow: var(--bc-ring); }
+.rate-due .rd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
+.rate-due .rd-eyebrow {
+  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--bc-faint);
+}
+.rate-due.is-required .rd-eyebrow { color: var(--bc-fg); }
+.rate-due .rd-later { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+.rate-due .rd-report {
+  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center;
+  margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid var(--bc-border);
+}
+.rate-due .rd-ico {
+  grid-row: span 2; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
+  background: color-mix(in srgb, var(--bc-ok) 14%, transparent); color: var(--bc-ok);
+}
+.rate-due .rd-ico svg { width: 13px; height: 13px; }
+.rate-due .rd-ttl { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rate-due .rd-sub { font-size: var(--bc-fs-xs); color: var(--bc-muted); }
+
+/* What a required rating is holding: still in sight, plainly not yet. */
+.held { opacity: .42; transition: opacity 200ms ease; }
+@media (prefers-reduced-motion: reduce) { .held { transition: none; } }
+
 /* A call in progress, in place of the form.
    ---------------------------------------------------------------------------
    Deliberately not styled as a chat. Nothing arrives here to read — the

package/src/panel/thread.js

@@ -11,16 +11,12 @@ import {
   atLatest, scrollToLatest,
 } from './render.js';
 import { mountComposer } from './composer.js';
+import { drawRating, ratingKey } from './rating.js';
 
 // What each open thread was last drawn from, so a poll that brings nothing new
 // leaves the DOM (and the reader's place in it) alone.
 const threadDrawn = new WeakMap();
 
-/** What a drawn rating box was drawn from, so a refresh can tell if it moved. */
-function ratingKey(rating) {
-  return JSON.stringify(rating ? [rating.score, rating.current, rating.comment || null] : null);
-}
-
 /**
  * The rating's word on a history row: the score they gave, or a nudge on a
  * settled report that is waiting for one. Nothing on an open report.
@@ -336,10 +332,7 @@ export function mountThread(ctx) {
    * "How did we do?" — five stars under a settled report.
    *
    * Only where the API says a rating is being asked for: the report is settled
-   * and the project has not switched ratings off. One tap sends the score; a
-   * note is offered after it rather than before, because a form that asks for
-   * a sentence first is a form people close, and the score is the part that
-   * counts.
+   * and the project has not switched ratings off. The box itself is rating.js.
    *
    * Redrawn only when the rating itself changed. The thread refreshes on every
    * update and every few seconds while the assistant works, and a box rebuilt
@@ -358,69 +351,7 @@ export function mountThread(ctx) {
       box.className = 'fix-rating';
       (body.querySelector('.fix-verification') || body.querySelector('.report-head'))?.after(box);
     }
-    drawRating(box, report, report.rating || null);
-  }
-
-  function drawRating(box, report, rating, { justRated = false } = {}) {
-    box.dataset.key = ratingKey(rating);
-    // A rating given for an earlier fix stands, but it is not this fix's: the
-    // stars start empty and the sentence says what the old score was.
-    const shown = rating?.current ? rating.score : 0;
-    const question = !rating
-      ? 'How did we do?'
-      : !rating.current
-        ? `You rated an earlier fix ${rating.score} out of 5. How did this one go?`
-        : justRated
-          ? 'Thanks — the team will see that.'
-          : `You rated this ${rating.score} out of 5.`;
-    const askNote = justRated && rating?.current && !rating.comment;
-    box.innerHTML = `
-      <p class="fr-q">${escapeHtml(question)}</p>
-      <div class="stars" role="group" aria-label="Rate how this was handled, 1 to 5">${[1, 2, 3, 4, 5].map((n) => `
-        <button type="button" data-score="${n}" aria-pressed="${n === shown}" aria-label="${n} out of 5${n === 1 ? ', poor' : n === 5 ? ', great' : ''}" class="${n <= shown ? 'on' : ''}">${ICONS.star}</button>`).join('')}
-      </div>
-      ${rating?.current && rating.comment ? `<p class="fr-said">“${escapeHtml(rating.comment)}”</p>` : ''}
-      ${askNote ? `
-      <div class="fr-note">
-        <textarea maxlength="2000" aria-label="Add a note to your rating" placeholder="${rating.score <= 2 ? 'What went wrong? (optional)' : 'Anything to add? (optional)'}"></textarea>
-        <button type="button" data-act="rating-note">Add note</button>
-      </div>` : ''}
-      ${rating ? '' : '<p class="fr-hint">1 is poor, 5 is great.</p>'}
-      <p class="feedback-status" role="status"></p>`;
-
-    const stars = [...box.querySelectorAll('[data-score]')];
-    const paint = (upTo) => stars.forEach((b) => b.classList.toggle('on', Number(b.dataset.score) <= upTo));
-    const lock = (on) => box.querySelectorAll('button, textarea').forEach((el) => { el.disabled = on; });
-    const status = box.querySelector('.feedback-status');
-
-    async function send(score, comment) {
-      lock(true);
-      status.textContent = '';
-      try {
-        const saved = await client.rate(report.id, { score, comment });
-        drawRating(box, report, saved, { justRated: true });
-        box.querySelector('.fr-note textarea')?.focus();
-      } catch (err) {
-        status.textContent = err.message;
-        lock(false);
-        paint(shown);
-      }
-    }
-
-    for (const btn of stars) {
-      const n = Number(btn.dataset.score);
-      btn.addEventListener('mouseenter', () => paint(n));
-      btn.addEventListener('focus', () => paint(n));
-      btn.addEventListener('blur', () => paint(shown));
-      btn.addEventListener('click', () => send(n));
-    }
-    box.querySelector('.stars').addEventListener('mouseleave', () => paint(shown));
-
-    box.querySelector('[data-act="rating-note"]')?.addEventListener('click', () => {
-      const note = box.querySelector('.fr-note textarea').value.trim();
-      if (!note) { box.querySelector('.fr-note')?.remove(); return; }
-      send(rating.score, note);
-    });
+    drawRating(box, { client, report, rating: report.rating || null });
   }
 
   /**