@lightworkai.official/debug-capture 0.6.0

package/src/ui/arrow.ts

@@ -0,0 +1,62 @@
+/**
+ * Where an arrow's shaft stops and its head begins.
+ *
+ * The shaft used to run all the way to the tip with the head painted over it,
+ * which leaves a spur: the shaft has width, the head's base edge is angled, and
+ * the corners of a thick line poke out past that edge on one side. It reads as a
+ * notch in the arrowhead, and once seen it cannot be unseen.
+ *
+ * So the shaft stops at the head's base instead. Pure geometry, kept out of the
+ * canvas so it can be checked without one.
+ */
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface ArrowPath {
+  /** Null when the arrow is shorter than its own head — then it is head only. */
+  shaft: { from: Point; to: Point } | null;
+  /** Tip first, then the two base corners. */
+  head: [Point, Point, Point];
+}
+
+/** Half-angle of the head. 30° gives a head that reads as an arrow at any size. */
+const SPREAD = Math.PI / 6;
+/**
+ * Stop the shaft a hair inside the base rather than exactly on it. Meeting
+ * exactly leaves a light seam where two antialiased edges abut.
+ */
+const OVERLAP = 0.92;
+
+export function arrowPath(from: Point, to: Point, headLength: number): ArrowPath {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const length = Math.hypot(dx, dy);
+  const angle = Math.atan2(dy, dx);
+
+  const head: [Point, Point, Point] = [
+    { x: to.x, y: to.y },
+    {
+      x: to.x - headLength * Math.cos(angle - SPREAD),
+      y: to.y - headLength * Math.sin(angle - SPREAD),
+    },
+    {
+      x: to.x - headLength * Math.cos(angle + SPREAD),
+      y: to.y - headLength * Math.sin(angle + SPREAD),
+    },
+  ];
+
+  // Distance from tip to the middle of the base edge — where the shaft belongs.
+  const inset = headLength * Math.cos(SPREAD) * OVERLAP;
+  if (length <= inset) return { shaft: null, head };
+
+  return {
+    shaft: {
+      from,
+      to: { x: to.x - inset * Math.cos(angle), y: to.y - inset * Math.sin(angle) },
+    },
+    head,
+  };
+}

package/src/ui/element.ts

@@ -0,0 +1,362 @@
+/**
+ * `<lw-debug-reporter>` — the whole reporter UI, once.
+ *
+ * Written as a custom element rather than three framework components on
+ * purpose. The dialog and its annotator are the bulk of this package; three
+ * ports would be three sets of bugs in the same canvas code, drifting apart the
+ * first time one of them got a fix. The framework packages wrap THIS.
+ *
+ * The element renders nothing until something calls `launch()`. Mount it once,
+ * app-wide, and forget it.
+ */
+import { buildBundle } from "../bundle";
+import { getConfig } from "../config";
+import { onLaunch } from "../reporter";
+import { captureScreen } from "../screenshot";
+import { submitBundle } from "../submit";
+import type { DebugBundle, DebugReason, ErroredQuery } from "../types";
+import { createAnnotator, type Annotator, type AnnotatorTool } from "./annotator";
+import { strings, type Strings } from "./strings";
+import { showToast } from "./toast";
+import { CSS } from "./styles";
+
+export const REPORTER_TAG = "lw-debug-reporter";
+
+/**
+ * Failed data-layer queries the host wants on the record — react-query, Apollo,
+ * whatever it uses. Set by the host; read at capture time. A callback rather
+ * than an import, because this package will not take a data library as a
+ * dependency to read two fields off it.
+ */
+let erroredQueries: () => ErroredQuery[] = () => [];
+export function setErroredQueriesSource(read: () => ErroredQuery[]): void {
+  erroredQueries = read;
+}
+
+const TOOLS: { tool: AnnotatorTool; key: keyof Strings }[] = [
+  { tool: "rect", key: "toolRect" },
+  { tool: "arrow", key: "toolArrow" },
+  { tool: "highlight", key: "toolHighlight" },
+  { tool: "text", key: "toolText" },
+];
+
+/**
+ * The element class is built INSIDE this function, never at module scope.
+ *
+ * `class X extends HTMLElement` evaluates the moment the module loads, and on a
+ * server there is no HTMLElement — so a top-level class here crashed any app
+ * that rendered on the server. Next, Nuxt and Angular Universal all do: a
+ * `'use client'` component is still server-rendered for the first paint, so
+ * importing this package anywhere in the tree took the whole route down with
+ * "ReferenceError: HTMLElement is not defined".
+ *
+ * It compiled and built perfectly, which is the trap — a bundler never
+ * evaluates the class, so nothing fails until a request hits a real server.
+ */
+function createReporterClass(): CustomElementConstructor {
+  return class DebugReporterElement extends HTMLElement {
+    private root: ShadowRoot;
+    private stop: (() => void) | null = null;
+    private annotator: Annotator | null = null;
+    private bundle: DebugBundle | null = null;
+    private busy = false;
+
+    constructor() {
+      super();
+      // attachShadow is allowed here. Setting an attribute is NOT: the custom
+      // elements spec requires an element to gain no attributes and no children
+      // during construction, and document.createElement enforces it by throwing
+      // "NotSupportedError: The result must not have attributes". Marking the
+      // element in the constructor cost every consumer a crash at mount.
+      this.root = this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback(): void {
+      // Excluded from the DOM screenshot fallback, which would otherwise
+      // photograph the dialog asking for the photograph. Set on connect, which
+      // is the first point the spec allows an attribute.
+      this.dataset.debugReporter = "true";
+      this.stop = onLaunch((reason) => void this.open(reason));
+    }
+
+    disconnectedCallback(): void {
+      this.stop?.();
+      this.stop = null;
+      this.close();
+    }
+
+    /**
+     * Must run synchronously from the click that triggered it: `getDisplayMedia`
+     * is gated on a user gesture, and a single `await` before it loses that
+     * gesture and the browser refuses with an error that explains nothing.
+     */
+    private async open(reason: DebugReason): Promise<void> {
+      if (this.busy) return;
+      this.busy = true;
+      const t = strings(getConfig().locale);
+
+      /*
+       * Capture BEFORE anything of ours is on screen.
+       *
+       * This used to paint a "กำลังเก็บภาพหน้าจอ…" panel first, and
+       * getDisplayMedia photographs the tab — so every report arrived with our
+       * own dialog sitting in the middle of the evidence, covering whatever the
+       * user was about to point at. The browser's own share prompt is the
+       * feedback here; a second one of ours costs the screenshot.
+       */
+      const shot = await captureScreen();
+      if (shot.method === "cancelled") {
+        // The user dismissed the share picker. That is a decision, not an error:
+        // close, and never quietly fall back to a DOM capture they refused.
+        this.close();
+        return;
+      }
+
+      this.bundle = buildBundle({
+        reason,
+        note: "",
+        screenshotDataUrl: shot.dataUrl,
+        screenshotMethod: shot.method,
+        erroredQueries: safeQueries(),
+      });
+      this.renderForm(t);
+    }
+
+    private close(): void {
+      this.annotator?.destroy();
+      this.annotator = null;
+      this.bundle = null;
+      this.busy = false;
+      this.root.replaceChildren();
+    }
+
+    private shell(t: Strings): HTMLElement {
+      const style = document.createElement("style");
+      style.textContent = CSS;
+      const backdrop = document.createElement("div");
+      backdrop.className = "backdrop";
+      const panel = document.createElement("div");
+      panel.className = "panel";
+      panel.setAttribute("role", "dialog");
+      panel.setAttribute("aria-modal", "true");
+      panel.setAttribute("aria-label", t.title);
+      backdrop.append(panel);
+      this.root.replaceChildren(style, backdrop);
+      return panel;
+    }
+
+    /** A bare panel with one line — used when there is nothing to show but a
+   *  message. Deliberately never shown DURING capture: see open(). */
+  private renderShell(t: Strings, message: string): void {
+      const panel = this.shell(t);
+      const head = el("div", "head");
+      head.append(el("h2", "", t.title));
+      panel.append(head, el("p", "status", message));
+    }
+
+    private renderForm(t: Strings): void {
+      const bundle = this.bundle;
+      if (!bundle) return;
+      const panel = this.shell(t);
+
+      const head = el("div", "head");
+      const closeBtn = button("✕", "icon");
+      closeBtn.setAttribute("aria-label", t.close);
+      closeBtn.addEventListener("click", () => this.close());
+      head.append(el("h2", "", t.title), closeBtn);
+
+      const summary = document.createElement("input");
+      summary.type = "text";
+      summary.placeholder = t.summaryPlaceholder;
+      const summaryLabel = labelFor(t.summaryLabel, t.summaryRequired, true);
+
+      const detail = document.createElement("textarea");
+      detail.placeholder = t.detailPlaceholder;
+
+      const meta = el("div", "meta");
+      meta.innerHTML = "";
+      const { context } = bundle;
+      for (const [key, value] of [
+        [t.reporter, `${context.user.fullName ?? "—"} (${context.user.email ?? "—"})`],
+        [t.page, context.route.href],
+        // No version row. It read "vundefined · undefined" once version and
+        // environment became optional, and it was telling the person filing the
+        // report something only the person reading it needs — both still travel
+        // with the bundle.
+        [
+          t.captured,
+          `${bundle.network.length} network · ${bundle.console.length} console · ${bundle.actionTrail.length} actions`,
+        ],
+      ] as [string, string][]) {
+        const row = document.createElement("div");
+        // textContent, not innerHTML: every one of these values is attacker-
+        // influenced (a URL, a display name, a captured label).
+        const b = document.createElement("b");
+        b.textContent = `${key}: `;
+        row.append(b, document.createTextNode(value));
+        meta.append(row);
+      }
+
+      const status = el("p", "status", "");
+      const submitBtn = button(t.submit, "primary");
+      submitBtn.disabled = true;
+      summary.addEventListener("input", () => {
+        submitBtn.disabled = summary.value.trim().length === 0;
+      });
+
+      panel.append(head, summaryLabel, summary, labelFor(t.detailLabel), detail, meta);
+      if (bundle.screenshotDataUrl) panel.append(...this.screenshotSection(t, bundle.screenshotDataUrl));
+      else panel.append(el("p", "status", t.noScreenshot));
+
+      const foot = el("div", "foot");
+      const cancel = button(t.close);
+      cancel.addEventListener("click", () => this.close());
+      foot.append(cancel, status, el("span", "grow"), submitBtn);
+      panel.append(foot);
+
+      submitBtn.addEventListener("click", async () => {
+        submitBtn.disabled = true;
+        status.dataset.tone = "";
+        status.textContent = t.submitting;
+        try {
+          const filed = await submitBundle(summary.value.trim(), {
+            ...bundle,
+            note: detail.value,
+            // Take the annotated image, not the raw capture — the drawing IS the
+            // report for most people.
+            screenshotDataUrl: this.annotator?.hasShapes()
+              ? this.annotator.toDataUrl()
+              : bundle.screenshotDataUrl,
+          });
+          // Cancelable: a host with its own toast system calls preventDefault()
+          // and shows its own. Ours is the default, not the only option.
+          const announced = this.dispatchEvent(
+            new CustomEvent("lw-report-submitted", {
+              detail: filed,
+              bubbles: true,
+              composed: true,
+              cancelable: true,
+            }),
+          );
+          // Close first, then announce. The dialog is what the user was looking
+          // at, and a confirmation written into a panel that then closes says
+          // nothing — which is why filing a ticket appeared to do nothing.
+          this.close();
+          if (announced) showToast(`${t.submitted} — #${filed.number}`, "success");
+        } catch (error) {
+          const message = error instanceof Error ? error.message : t.failed;
+          status.dataset.tone = "error";
+          status.textContent = message;
+          // Also a toast: the dialog is long, and on a small screen its footer
+          // is below the fold at the moment the button is pressed.
+          showToast(`${t.failed} — ${message}`, "error");
+          submitBtn.disabled = false;
+        }
+      });
+
+      summary.focus();
+    }
+
+    private screenshotSection(t: Strings, dataUrl: string): HTMLElement[] {
+      const label = labelFor(t.annotateHint);
+      const tools = el("div", "tools");
+      const canvas = document.createElement("canvas");
+      const wrap = el("div", "shot");
+      wrap.append(canvas);
+
+      const toolButtons: HTMLButtonElement[] = [];
+      const setPressed = (active: HTMLButtonElement | null) => {
+        for (const b of toolButtons) b.setAttribute("aria-pressed", String(b === active));
+      };
+
+      for (const { tool, key } of TOOLS) {
+        const btn = button(t[key]);
+        btn.setAttribute("aria-pressed", "false");
+        btn.addEventListener("click", () => {
+          const pressed = btn.getAttribute("aria-pressed") === "true";
+          setPressed(pressed ? null : btn);
+          this.annotator?.setTool(pressed ? null : tool);
+        });
+        toolButtons.push(btn);
+        tools.append(btn);
+      }
+      tools.append(el("span", "sep"));
+      const del = button(t.deleteSelected);
+      del.addEventListener("click", () => this.annotator?.deleteSelected());
+      const clear = button(t.clearAll);
+      clear.addEventListener("click", () => {
+        this.annotator?.clear();
+        setPressed(null);
+      });
+      tools.append(del, clear);
+
+      const image = new Image();
+      image.onload = () => {
+        // A backing store at the image's own size keeps the drawing crisp; CSS
+        // scales it down to the dialog.
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+        this.annotator = createAnnotator(canvas, image, () => {
+        setPressed(null);
+        // Enabled only with something selected, so it is obvious that ลบที่เลือก
+        // acts on a selection and not on the whole drawing.
+        del.disabled = !this.annotator?.hasSelection();
+      });
+      };
+      image.src = dataUrl;
+
+      return [label, tools, el("p", "status", t.annotateHelp), wrap];
+    }
+  };
+}
+
+function safeQueries(): ErroredQuery[] {
+  try {
+    return erroredQueries();
+  } catch {
+    return [];
+  }
+}
+
+function el(tag: string, className = "", text = ""): HTMLElement {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text) node.textContent = text;
+  return node;
+}
+
+function button(text: string, className = ""): HTMLButtonElement {
+  const node = document.createElement("button");
+  node.type = "button";
+  node.textContent = text;
+  if (className) node.className = className;
+  return node;
+}
+
+function labelFor(text: string, hint = "", required = false): HTMLElement {
+  const label = document.createElement("label");
+  label.append(document.createTextNode(text));
+  if (required) {
+    const star = document.createElement("span");
+    star.className = "req";
+    star.textContent = " *";
+    label.append(star);
+  }
+  if (hint) {
+    const span = document.createElement("span");
+    span.className = "hint";
+    span.textContent = ` ${hint}`;
+    label.append(span);
+  }
+  return label;
+}
+
+/**
+ * Idempotent, and the ONLY thing that touches HTMLElement. A second app-wide
+ * mount must not throw on a taken tag name, and a server must be able to import
+ * this module without evaluating a browser class.
+ */
+export function defineReporterElement(): void {
+  if (typeof window === "undefined" || customElements.get(REPORTER_TAG)) return;
+  customElements.define(REPORTER_TAG, createReporterClass());
+}

package/src/ui/strings.ts

@@ -0,0 +1,113 @@
+/**
+ * The reporter's own words. Thai by default because that is who files these,
+ * with English for hosts that need it.
+ *
+ * Deliberately a flat map, not a translation framework: this is one dialog, and
+ * an i18n dependency in a package every host installs would be a tax on all of
+ * them for thirty strings.
+ */
+export interface Strings {
+  title: string;
+  summaryLabel: string;
+  summaryRequired: string;
+  summaryPlaceholder: string;
+  detailLabel: string;
+  detailPlaceholder: string;
+  annotateTitle: string;
+  annotateHint: string;
+  /** Footer of the standalone annotator dialog — NOT the reporter's own submit. */
+  annotateApply: string;
+  cancel: string;
+  toolRect: string;
+  toolArrow: string;
+  toolHighlight: string;
+  toolText: string;
+  deleteSelected: string;
+  clearAll: string;
+  annotateHelp: string;
+  capturing: string;
+  noScreenshot: string;
+  cancelled: string;
+  close: string;
+  submit: string;
+  submitting: string;
+  submitted: string;
+  crashed: string;
+  crashAction: string;
+  failed: string;
+  captured: string;
+  reporter: string;
+  page: string;
+}
+
+const th: Strings = {
+  title: "รายงานปัญหา",
+  summaryLabel: "หัวข้อปัญหา",
+  summaryRequired: "(ต้องกรอกก่อนแจ้งปัญหา)",
+  summaryPlaceholder: "สรุปปัญหาสั้น ๆ เช่น กดบันทึกร่างแล้ว error",
+  detailLabel: "อธิบายปัญหา (ไม่บังคับ)",
+  detailPlaceholder: "เกิดอะไรขึ้น? กำลังทำอะไรอยู่ตอนที่พบปัญหา?",
+  annotateTitle: "วาดบนรูป",
+  annotateHint: "ทำเครื่องหมายจุดที่มีปัญหาก่อนแนบ — วงกรอบ ชี้ลูกศร ไฮไลต์ หรือพิมพ์ข้อความ",
+  annotateApply: "ใช้รูปนี้",
+  cancel: "ยกเลิก",
+  toolRect: "กรอบ",
+  toolArrow: "ลูกศร",
+  toolHighlight: "ไฮไลต์",
+  toolText: "ข้อความ",
+  deleteSelected: "ลบที่เลือก",
+  clearAll: "ล้างทั้งหมด",
+  annotateHelp:
+    "เลือกเครื่องมือแล้วลากบนรูป · ไม่ได้เลือกเครื่องมือ = ย้าย/ปรับขนาดสิ่งที่วาดไว้ · กดกากบาทมุมขวาบนของรูปทรงเพื่อลบ",
+  capturing: "กำลังเก็บภาพหน้าจอ…",
+  noScreenshot: "ไม่มีภาพหน้าจอ — ยังส่งรายงานได้",
+  cancelled: "ยกเลิกการเก็บภาพหน้าจอแล้ว",
+  close: "ปิด",
+  submit: "แจ้งปัญหา",
+  submitting: "กำลังส่ง…",
+  submitted: "แจ้งปัญหาสำเร็จ",
+  crashed: "เกิดข้อผิดพลาดในระบบ",
+  crashAction: "แจ้งปัญหา",
+  failed: "ส่งรายงานไม่สำเร็จ",
+  captured: "เก็บข้อมูลแล้ว",
+  reporter: "ผู้แจ้ง",
+  page: "หน้า",
+};
+
+const en: Strings = {
+  title: "Report a problem",
+  summaryLabel: "Summary",
+  summaryRequired: "(required)",
+  summaryPlaceholder: "One line, e.g. saving a draft returns an error",
+  detailLabel: "Details (optional)",
+  detailPlaceholder: "What happened? What were you doing at the time?",
+  annotateTitle: "Draw on the image",
+  annotateHint: "Mark what went wrong before attaching — box it, point at it, highlight it, or type on it",
+  annotateApply: "Use this image",
+  cancel: "Cancel",
+  toolRect: "Box",
+  toolArrow: "Arrow",
+  toolHighlight: "Highlight",
+  toolText: "Text",
+  deleteSelected: "Delete selected",
+  clearAll: "Clear all",
+  annotateHelp:
+    "Pick a tool and drag on the image · no tool selected = move/resize what you drew · press the ✕ on a shape to delete it",
+  capturing: "Capturing the screen…",
+  noScreenshot: "No screenshot — you can still send the report",
+  cancelled: "Screen capture cancelled",
+  close: "Close",
+  submit: "Send report",
+  submitting: "Sending…",
+  submitted: "Report sent",
+  crashed: "Something went wrong",
+  crashAction: "Report it",
+  failed: "Could not send the report",
+  captured: "Captured",
+  reporter: "Reporter",
+  page: "Page",
+};
+
+export function strings(locale: "th" | "en" | undefined): Strings {
+  return locale === "en" ? en : th;
+}

package/src/ui/styles.ts

@@ -0,0 +1,96 @@
+/**
+ * The dialog's stylesheet, as a string for the shadow root.
+ *
+ * A shadow root is the whole reason this is a custom element. The widget drops
+ * into apps we do not control, next to Tailwind or Bootstrap or Angular
+ * Material, and any of them would otherwise reach in and restyle it — or be
+ * restyled BY it. Inside a shadow root neither can happen, so there is no reset
+ * to fight, no specificity race, and no class-name prefix scheme to maintain.
+ *
+ * Everything is explicit for the same reason: the host's `body` font and colours
+ * do not inherit past the boundary, so stating them is not belt-and-braces.
+ */
+export const CSS = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+
+.backdrop {
+  position: fixed; inset: 0; z-index: 2147483000;
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: rgba(15, 23, 42, 0.55);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
+  color: #0f172a;
+}
+.panel {
+  display: flex; flex-direction: column; gap: 16px;
+  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;
+  /* No bottom padding: the footer supplies its own and sits flush, so it can
+     stick to the panel's edge without a gap under it. */
+  padding: 24px 24px 0; border-radius: 16px; background: #fff;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
+}
+.head { display: flex; align-items: flex-start; gap: 12px; }
+h2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
+label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
+.req { color: #dc2626; }
+.hint { font-weight: 400; color: #64748b; }
+input[type="text"], textarea {
+  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
+  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;
+}
+input[type="text"]:focus, textarea:focus {
+  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
+}
+textarea { min-height: 88px; resize: vertical; }
+
+.meta {
+  padding: 12px 14px; border-radius: 10px; background: #f8fafc;
+  font-size: 13px; line-height: 1.7; color: #475569; word-break: break-all;
+}
+.meta b { color: #0f172a; font-weight: 600; }
+
+.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }
+button {
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500;
+  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;
+}
+button:hover:not(:disabled) { background: #f1f5f9; }
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+button[aria-pressed="true"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
+button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
+button.primary:hover:not(:disabled) { background: #1d4ed8; }
+button.icon { padding: 6px 10px; border-color: transparent; font-size: 18px; line-height: 1; }
+
+/* The on-image text editor. Absolutely placed over the canvas and matched to
+   the shape it becomes — same weight, same red, same white plate — so what you
+   type is what gets drawn, at the position you clicked. Sized in JS, because
+   the font size tracks the image's own scale. */
+.text-edit {
+  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;
+  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;
+  color: #e11d48; background: rgba(255, 255, 255, 0.92);
+  border: 1px dashed #e11d48; border-radius: 4px; outline: none;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
+}
+.text-edit::placeholder { color: rgba(225, 29, 72, 0.45); }
+
+canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 10px; touch-action: none; }
+.shot { position: relative; }
+.status { font-size: 13px; color: #64748b; }
+.status[data-tone="error"] { color: #dc2626; }
+/* Pinned to the bottom of the scrolling panel.
+   A screenshot is tall — often taller than the viewport — so แจ้งปัญหา sat
+   below the fold and the last step of filing a report was "scroll to the end
+   and find the button". Sticky, with its own ground and a rule above it so the
+   annotated image scrolls underneath rather than bleeding into it. */
+.foot {
+  position: sticky; bottom: 0; z-index: 3;
+  display: flex; align-items: center; gap: 12px;
+  margin: 4px -24px 0; padding: 12px 24px;
+  background: #fff; border-top: 1px solid #e2e8f0;
+  border-radius: 0 0 16px 16px;
+}
+.foot .grow { flex: 1; }
+`;