@lightworkai.official/debug-capture 0.6.0

package/src/install.ts

@@ -0,0 +1,59 @@
+/**
+ * Arm the rolling collectors and mount the reporter. Idempotent and
+ * client-only, so it is safe to call from a mounted component's effect — which
+ * is exactly how every framework wrapper calls it.
+ */
+import { installActionTrail } from "./capture/actionTrail";
+import { installConsoleCapture } from "./capture/consoleBuffer";
+import { installCrashWatcher } from "./capture/crashWatcher";
+import { installNetworkCapture } from "./capture/networkBuffer";
+import { getConfig, isConfigured } from "./config";
+import { launch, onCrash } from "./reporter";
+import { strings } from "./ui/strings";
+import { showToast } from "./ui/toast";
+import { defineReporterElement, REPORTER_TAG } from "./ui/element";
+
+let armed = false;
+
+export interface InstallOptions {
+  /** Mount the built-in reporter UI. Off if the host renders its own. */
+  ui?: boolean;
+}
+
+export function installDebugCapture(options: InstallOptions = {}): void {
+  if (armed || typeof window === "undefined") return;
+  if (!isConfigured()) {
+    // Louder than a silent no-op: buffers that never armed produce an empty
+    // report weeks later, and nobody connects it back to a missing call.
+    console.error("[debug-capture] configureDebugCapture() must be called before install");
+    return;
+  }
+  armed = true;
+
+  installNetworkCapture();
+  installConsoleCapture();
+  installActionTrail();
+  installCrashWatcher();
+
+  if (options.ui === false) return;
+
+  /*
+   * A caught crash becomes an invitation, which is how the original catches
+   * bugs users would never think to report. Deliberately NOT an auto-opened
+   * reporter: screen capture needs a real click behind it, and taking over
+   * someone's screen because a promise rejected is not something a library
+   * should do uninvited.
+   */
+  const t = strings(getConfig().locale);
+  onCrash((reason) => {
+    showToast(reason.message ?? t.crashed, "error", {
+      label: t.crashAction,
+      onClick: () => launch(reason),
+    });
+  });
+
+  defineReporterElement();
+  if (!document.querySelector(REPORTER_TAG)) {
+    document.body.append(document.createElement(REPORTER_TAG));
+  }
+}

package/src/mytickets/api.ts

@@ -0,0 +1,226 @@
+/**
+ * The reporter's own tickets, read back from a Lightwork Support host.
+ *
+ * Everything here goes to `/ingest/me`, which needs two things: the realm's
+ * public key (which app is asking) and a host-signed identity token (who is
+ * asking). See `identity` in config.ts for why the second one exists — without
+ * it a public key would be enough to read anybody's reports.
+ */
+import { getConfig } from "../config";
+
+/** A board column as the realm configured it. Only public lanes are returned. */
+export interface StatusColumn {
+  key: string;
+  label: string;
+  description: string;
+  color: string;
+  bucket: "active" | "closed";
+  awaitingReply: boolean;
+}
+
+export interface RealmConfig {
+  realm: { id: string; slug: string; name: string };
+  timezone: string;
+  statusColumns: StatusColumn[];
+  featureFlags: { selfServiceReopen?: boolean; attachments?: boolean; conversation?: boolean };
+  locale: { default: string; labels: Record<string, string> };
+}
+
+export interface TicketMessage {
+  id: string;
+  authorId: string | null;
+  authorName: string | null;
+  authorRole: "REPORTER" | "AGENT";
+  body: string;
+  createdAt: string;
+  editedAt: string | null;
+}
+
+export interface TicketAttachment {
+  id: string;
+  objectKey: string;
+  filename: string | null;
+  contentType: string | null;
+  sizeBytes: number | null;
+}
+
+export interface MyTicket {
+  id: string;
+  number: number;
+  title: string;
+  description: string | null;
+  category: string | null;
+  routeUrl: string | null;
+  status: string;
+  priority: string;
+  resolutionNote: string | null;
+  reopened: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface MyTicketListItem extends MyTicket {
+  messageCount: number;
+  /** How many replies came from the team — "has anyone answered me yet". */
+  agentReplyCount: number;
+  lastMessage: { at: string; authorRole: "REPORTER" | "AGENT"; preview: string } | null;
+}
+
+export interface MyTicketDetail extends MyTicket {
+  messages: TicketMessage[];
+  attachments: TicketAttachment[];
+}
+
+/** One recorded status change. Internal lanes are already resolved server-side. */
+export interface StatusEvent {
+  id: string;
+  fromStatus: string | null;
+  toStatus: string;
+  via: string;
+  createdAt: string;
+}
+
+/** Thrown with the server's own words, so a panel can say what went wrong. */
+export class TicketApiError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+  ) {
+    super(message);
+  }
+}
+
+/** Raised when there is no signed-in reporter to ask about. */
+export class NoIdentityError extends Error {
+  constructor() {
+    super("[debug-capture] no reporter identity — configure `identity` to use the tickets panel");
+  }
+}
+
+function base(): string {
+  return getConfig().host.replace(/\/$/, "");
+}
+
+/**
+ * The host's current identity token.
+ *
+ * Read per request rather than once at configure time: these are short-lived by
+ * design, and a panel left open across lunch would otherwise hold a token that
+ * expired an hour ago. Caching belongs on the host's side, where it knows when
+ * it last minted one.
+ */
+async function identityToken(): Promise<string> {
+  const read = getConfig().identity;
+  if (!read) throw new NoIdentityError();
+  const token = await read();
+  if (!token) throw new NoIdentityError();
+  return token;
+}
+
+async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
+  const token = await identityToken();
+  const res = await fetch(`${base()}/ingest/me${path}`, {
+    ...init,
+    headers: {
+      "x-realm-key": getConfig().realmKey,
+      authorization: `Bearer ${token}`,
+      ...(init.body ? { "content-type": "application/json" } : {}),
+      ...(init.headers as Record<string, string> | undefined),
+    },
+  });
+  if (!res.ok) {
+    const detail = await res
+      .json()
+      .then((b: { error?: string }) => b.error)
+      .catch(() => null);
+    throw new TicketApiError(detail ?? `Request failed (${res.status})`, res.status);
+  }
+  return (await res.json()) as T;
+}
+
+export async function listMyTickets(): Promise<MyTicketListItem[]> {
+  const { items } = await request<{ items: MyTicketListItem[] }>("/tickets");
+  return items;
+}
+
+export function getMyTicket(id: string): Promise<MyTicketDetail> {
+  return request<MyTicketDetail>(`/tickets/${encodeURIComponent(id)}`);
+}
+
+export function getMyTicketByNumber(num: number): Promise<MyTicketDetail> {
+  return request<MyTicketDetail>(`/tickets/by-number/${num}`);
+}
+
+/**
+ * A short-lived URL for a file on one's own ticket.
+ *
+ * Fetched rather than pointed at: the endpoint needs the realm key and the
+ * identity token, and an `<img>` or an `<a download>` cannot send a header.
+ */
+export function getAttachmentUrl(attachmentId: string): Promise<{ url: string; filename: string | null }> {
+  return request<{ url: string; filename: string | null }>(`/attachments/${encodeURIComponent(attachmentId)}`);
+}
+
+export function getMyTicketHistory(id: string): Promise<StatusEvent[]> {
+  return request<StatusEvent[]>(`/tickets/${encodeURIComponent(id)}/history`);
+}
+
+export function replyToTicket(id: string, body: string): Promise<TicketMessage> {
+  return request<TicketMessage>(`/tickets/${encodeURIComponent(id)}/messages`, {
+    method: "POST",
+    body: JSON.stringify({ body }),
+  });
+}
+
+/**
+ * Rewrite one's own reply.
+ *
+ * The server refuses any message the caller did not write — authorship, not
+ * role — so this cannot touch the team's side of the thread.
+ */
+export function editMyMessage(ticketId: string, messageId: string, body: string): Promise<TicketMessage> {
+  return request<TicketMessage>(
+    `/tickets/${encodeURIComponent(ticketId)}/messages/${encodeURIComponent(messageId)}`,
+    { method: "PUT", body: JSON.stringify({ body }) },
+  );
+}
+
+export function reopenMyTicket(id: string, note?: string): Promise<MyTicket> {
+  return request<MyTicket>(`/tickets/${encodeURIComponent(id)}/reopen`, {
+    method: "POST",
+    body: JSON.stringify({ note: note?.trim() || undefined }),
+  });
+}
+
+export function uploadInlineImage(id: string, dataUri: string, filename?: string): Promise<{ url: string }> {
+  return request<{ url: string }>(`/tickets/${encodeURIComponent(id)}/inline-image`, {
+    method: "POST",
+    body: JSON.stringify({ dataUri, filename }),
+  });
+}
+
+/**
+ * The realm's status vocabulary. Public config, so no identity token — and
+ * cached for the life of the page, because it changes when an admin edits the
+ * board and not between two clicks of a list.
+ */
+let configPromise: Promise<RealmConfig> | null = null;
+
+export function fetchRealmConfig(): Promise<RealmConfig> {
+  if (!configPromise) {
+    const key = encodeURIComponent(getConfig().realmKey);
+    configPromise = fetch(`${base()}/ingest/config?key=${key}`)
+      .then((res) => {
+        if (!res.ok) throw new TicketApiError(`Config failed (${res.status})`, res.status);
+        return res.json() as Promise<RealmConfig>;
+      })
+      // A failed fetch must not be remembered as the answer: the next open
+      // should try again rather than reuse a rejected promise forever.
+      .catch((e) => {
+        configPromise = null;
+        throw e;
+      });
+  }
+  return configPromise;
+}
+

package/src/mytickets/format.ts

@@ -0,0 +1,191 @@
+/**
+ * The panel's decisions that are not DOM: how a ticket is named, dated, sorted,
+ * searched and described. Pure, so they can be tested without a browser — which
+ * matters here, because the DOM around them cannot be.
+ */
+import type { MyTicketListItem, StatusColumn } from "./api";
+
+/**
+ * `ROOT-1099`, from the realm's slug — the same key the board and the admin app
+ * print, so a reporter quoting a number is quoting the one support will search
+ * for. A realm with no usable slug falls back to `#1099` rather than inventing
+ * a prefix.
+ */
+export function ticketKey(slug: string | undefined, number: number): string {
+  const prefix = (slug ?? "").trim().toUpperCase().replace(/[^A-Z0-9]+/g, "");
+  return prefix ? `${prefix}-${number}` : `#${number}`;
+}
+
+/**
+ * `24 พ.ค. 2568 13:00` — the original's `DD MMM BBBB HH:mm`, from the platform's
+ * own Intl rather than a date library this package will not depend on.
+ *
+ * Formatted in the REALM's timezone, not the reader's. A support desk in
+ * Bangkok and a reporter travelling in Berlin must not disagree about which day
+ * a ticket was filed, and the realm is the side that also runs the "today"
+ * filters.
+ */
+export function formatDateTime(iso: string | null | undefined, timezone: string, locale: "th" | "en" | undefined): string {
+  if (!iso) return "—";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "—";
+  try {
+    return new Intl.DateTimeFormat(locale === "en" ? "en-GB" : "th-TH-u-ca-buddhist", {
+      dateStyle: "medium",
+      timeStyle: "short",
+      timeZone: timezone,
+    }).format(date);
+  } catch {
+    // An unknown timezone from config must not blank out every date on screen.
+    return date.toISOString().slice(0, 16).replace("T", " ");
+  }
+}
+
+/** Lookups over the realm's configured lanes, with sane answers for a key that isn't there. */
+export interface StatusMaps {
+  labelOf: (key: string) => string;
+  columnOf: (key: string) => StatusColumn | undefined;
+  isAwaitingReply: (key: string) => boolean;
+  isClosed: (key: string) => boolean;
+  /** Board order, for sorting a column of statuses the way the board reads. */
+  rankOf: (key: string) => number;
+  options: { value: string; label: string }[];
+}
+
+export function statusMaps(columns: StatusColumn[], allLabel: string): StatusMaps {
+  const byKey = new Map(columns.map((c) => [c.key, c]));
+  const order = columns.map((c) => c.key);
+  return {
+    // An unknown key prints itself rather than an empty pill: a lane deleted
+    // after a ticket entered it should still say something.
+    labelOf: (key) => byKey.get(key)?.label ?? key,
+    columnOf: (key) => byKey.get(key),
+    isAwaitingReply: (key) => byKey.get(key)?.awaitingReply === true,
+    isClosed: (key) => byKey.get(key)?.bucket === "closed",
+    rankOf: (key) => {
+      const i = order.indexOf(key);
+      return i === -1 ? order.length : i;
+    },
+    options: [{ value: "", label: allLabel }, ...columns.map((c) => ({ value: c.key, label: c.label }))],
+  };
+}
+
+/** Has the team written a solution note? */
+export function hasSolution(t: MyTicketListItem): boolean {
+  return Boolean(t.resolutionNote && t.resolutionNote.trim());
+}
+
+/** Has anyone from the team replied at all? */
+export function hasTeamReply(t: MyTicketListItem): boolean {
+  return t.agentReplyCount > 0;
+}
+
+/** Solution beats a reply beats silence — the order the column sorts in. */
+export function responseRank(t: MyTicketListItem): number {
+  return hasSolution(t) ? 2 : hasTeamReply(t) ? 1 : 0;
+}
+
+export type SortKey = "number" | "title" | "module" | "status" | "response" | "createdAt" | "updatedAt";
+
+export interface Sort {
+  key: SortKey;
+  direction: "asc" | "desc";
+}
+
+/**
+ * Filter by what the reporter SEES.
+ *
+ * The haystack is the rendered row — key, title, module, status label — because
+ * that is what someone searching has in front of them. Searching the raw status
+ * key would match `IN_PROGRESS` for a lane the reader only ever saw called
+ * กำลังดำเนินการ.
+ */
+export function matchesKeyword(
+  t: MyTicketListItem,
+  keyword: string,
+  slug: string | undefined,
+  labelOf: (key: string) => string,
+): boolean {
+  const needle = keyword.trim().toLowerCase();
+  if (!needle) return true;
+  const hay = [ticketKey(slug, t.number), String(t.number), t.title, t.category ?? "", labelOf(t.status)]
+    .join(" ")
+    .toLowerCase();
+  return hay.includes(needle);
+}
+
+/**
+ * Comparators for the orders a raw value compare gets wrong: status follows the
+ * board rather than the alphabet, dates are chronological rather than
+ * lexicographic, and the response column ranks by a signal that is not one field.
+ */
+export function compareBy(sort: Sort, maps: StatusMaps, slug: string | undefined) {
+  const direction = sort.direction === "asc" ? 1 : -1;
+  return (a: MyTicketListItem, b: MyTicketListItem): number => {
+    let result = 0;
+    switch (sort.key) {
+      case "number":
+        result = a.number - b.number;
+        break;
+      case "title":
+        result = (a.title ?? "").localeCompare(b.title ?? "", "th");
+        break;
+      case "module":
+        result = (a.category ?? "").localeCompare(b.category ?? "", "th");
+        break;
+      case "status":
+        result = maps.rankOf(a.status) - maps.rankOf(b.status);
+        break;
+      case "response":
+        result = responseRank(a) - responseRank(b);
+        break;
+      case "createdAt":
+        result = Date.parse(a.createdAt) - Date.parse(b.createdAt);
+        break;
+      case "updatedAt":
+        result = Date.parse(a.updatedAt) - Date.parse(b.updatedAt);
+        break;
+    }
+    // Ties resolve by ticket number so a re-sort never reshuffles equal rows —
+    // a list that changes order when you click the same header twice reads as a
+    // bug even when the sort is right.
+    return result !== 0 ? result * direction : (a.number - b.number) * direction;
+  };
+}
+
+/** Rows per page — the original's `defaultPageSize`. */
+export const PAGE_SIZE = 10;
+
+export function pageOf<T>(rows: T[], page: number, size = PAGE_SIZE): T[] {
+  return rows.slice((page - 1) * size, page * size);
+}
+
+export function pageCount(total: number, size = PAGE_SIZE): number {
+  return Math.max(1, Math.ceil(total / size));
+}
+
+/**
+ * The same ten colour tokens the board uses, as concrete pairs.
+ *
+ * A status arrives as DATA — a realm adds lanes whenever it likes — so a pill is
+ * coloured with an inline style from this map rather than a class a stylesheet
+ * could never know the name of. Keeping the values identical
+ * to the app's own STATUS_TONES is the point: a reporter and an agent looking at
+ * the same ticket should see the same colour for it.
+ */
+export const STATUS_TONES: Record<string, { fg: string; bg: string }> = {
+  blue: { fg: "#1c5cab", bg: "#e8f1fd" },
+  amber: { fg: "#92400e", bg: "#fef3c7" },
+  violet: { fg: "#4a3aa7", bg: "#ece9fb" },
+  emerald: { fg: "#0f766e", bg: "#d9f2ec" },
+  gray: { fg: "#4b5563", bg: "#f1f2f4" },
+  red: { fg: "#b91c1c", bg: "#fde8e8" },
+  sky: { fg: "#0369a1", bg: "#e0f2fe" },
+  rose: { fg: "#be123c", bg: "#ffe4e9" },
+  teal: { fg: "#0f766e", bg: "#d7f2ef" },
+  orange: { fg: "#c2410c", bg: "#ffedd5" },
+};
+
+export function statusTone(token: string | undefined): { fg: string; bg: string } {
+  return STATUS_TONES[token ?? ""] ?? STATUS_TONES.gray!;
+}

package/src/mytickets/sanitize.ts

@@ -0,0 +1,221 @@
+/**
+ * Rendering a ticket body inside somebody else's app.
+ *
+ * Bodies are HTML — the composer's formatting and its inline screenshots are the
+ * point of the thread, so stripping to text would lose what a reporter actually
+ * came to read. But that HTML was written by other people, and this package
+ * renders it inside a HOST application's page. Markup that ran there would run
+ * with the host's origin, against the host's session. A support widget must not
+ * be the way an app gets XSS.
+ *
+ * The support app solves this with DOMPurify. A package that every consumer
+ * installs cannot take that dependency for one screen, so this is the same
+ * POLICY over the platform's own parser: parse the string with DOMParser (never
+ * a regex), walk the result, and delete every node and attribute not on the
+ * list. Anything unrecognised is removed rather than escaped, and the walk is
+ * over an inert document, so nothing loads or executes while it happens.
+ */
+
+/** Tags an ordinary note actually uses. Everything else goes. */
+export const ALLOWED_TAGS = new Set([
+  "p", "br", "strong", "b", "em", "i", "u", "s", "code", "pre",
+  "ul", "ol", "li", "blockquote", "h1", "h2", "h3", "a", "img", "span",
+]);
+
+export const ALLOWED_ATTR = new Set(["href", "target", "rel", "src", "alt", "title"]);
+
+/** `/api/inline/<64 hex>` — the shape the support host mints for an embedded image. */
+const INLINE_PATH = /^\/api\/inline\/[a-f0-9]{64}$/i;
+
+/** Links: ordinary web destinations only. No javascript:, no data:. */
+export function isAllowedHref(url: string): boolean {
+  return /^(?:https?:\/\/|mailto:|#|\/)/i.test(url.trim());
+}
+
+/**
+ * Image sources: OUR inline images and nothing else.
+ *
+ * Not a tightening for its own sake. Any other src turns every ticket into a
+ * tracking pixel aimed at whoever opens it — a body can be written by a stranger
+ * who filed a report, and the reader here is the reporter, on the host's page.
+ * Accepts the server-relative form and the same path already made absolute
+ * against the configured host.
+ */
+export function isAllowedImageSrc(url: string, host: string): boolean {
+  try {
+    // Resolved against the host rather than pattern-matched, so the relative and
+    // absolute spellings of the same image get the same answer — and so that
+    // `//evil.example/api/inline/…` and `/api/inline/../../x` are judged by
+    // where they actually land, not by how they read.
+    const parsed = new URL(url.trim(), host);
+    return parsed.origin === new URL(host).origin && INLINE_PATH.test(parsed.pathname);
+  } catch {
+    return false;
+  }
+}
+
+const BLOCK_END = /<\/(p|div|li|h[1-6]|tr)\s*>/gi;
+const BREAK = /<br\s*\/?>/gi;
+const TAG = /<[^>]*>/g;
+const ENTITIES: Record<string, string> = {
+  "&nbsp;": " ", "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#39;": "'",
+};
+
+export function looksLikeHtml(body: string): boolean {
+  return /<[a-z/][^>]*>/i.test(body);
+}
+
+/** Tags out, line structure kept — for previews and anywhere text is all that fits. */
+export function toPlainText(body: string): string {
+  if (!looksLikeHtml(body)) return body;
+  return body
+    .replace(BREAK, "\n")
+    .replace(BLOCK_END, "\n")
+    .replace(TAG, "")
+    .replace(/&[a-z#0-9]+;/gi, (entity) => ENTITIES[entity.toLowerCase()] ?? entity)
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .join("\n");
+}
+
+/**
+ * Fill `target` with a safe rendering of `body`.
+ *
+ * A node rather than a string, deliberately: handing back HTML invites a caller
+ * to concatenate it with something else and re-parse the result, which is where
+ * sanitisers stop holding.
+ */
+export function renderBody(target: HTMLElement, body: string, host: string): void {
+  target.textContent = "";
+  if (!looksLikeHtml(body)) {
+    // Older plain-text messages. Line breaks are the only markup they have, and
+    // dropping them runs a written-out list into one paragraph.
+    for (const [i, line] of body.split("\n").entries()) {
+      if (i) target.append(document.createElement("br"));
+      target.append(document.createTextNode(line));
+    }
+    return;
+  }
+  // An inert document: parsing here neither runs scripts nor fetches an <img>.
+  const parsed = new DOMParser().parseFromString(body, "text/html");
+  for (const node of Array.from(parsed.body.childNodes)) {
+    const safe = clean(node, host);
+    if (safe) target.append(safe);
+  }
+}
+
+/**
+ * One node, cleaned — or null.
+ *
+ * A disallowed ELEMENT is unwrapped rather than dropped: a `<div>` around a
+ * paragraph is not an attack, and deleting it would take the paragraph with it.
+ * The exceptions are the tags whose content is not content at all — a script's
+ * text is code and a style's is CSS, and unwrapping either would print it.
+ */
+const DROP_WHOLE = new Set(["script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math"]);
+
+function clean(node: Node, host: string): Node | null {
+  if (node.nodeType === 3) return document.createTextNode(node.nodeValue ?? "");
+  if (node.nodeType !== 1) return null;
+
+  const source = node as Element;
+  const tag = source.tagName.toLowerCase();
+  if (DROP_WHOLE.has(tag)) return null;
+
+  const keep = ALLOWED_TAGS.has(tag);
+  const out = keep ? document.createElement(tag) : document.createDocumentFragment();
+
+  if (keep) {
+    const element = out as HTMLElement;
+    for (const attr of Array.from(source.attributes)) {
+      const name = attr.name.toLowerCase();
+      // Every `on*` handler fails this test, and so does anything else nobody
+      // listed — the allowlist is the rule, not a blocklist of known-bad names.
+      if (!ALLOWED_ATTR.has(name)) continue;
+      if (name === "href" && !isAllowedHref(attr.value)) continue;
+      if (name === "src") {
+        if (tag !== "img" || !isAllowedImageSrc(attr.value, host)) continue;
+        element.setAttribute("src", absolute(attr.value, host));
+        continue;
+      }
+      element.setAttribute(name, attr.value);
+    }
+    if (tag === "a") {
+      // Opening someone else's link must not hand it a handle on this page.
+      element.setAttribute("target", "_blank");
+      element.setAttribute("rel", "noopener noreferrer nofollow");
+    }
+    if (tag === "img" && !element.getAttribute("src")) return null;
+  }
+
+  for (const child of Array.from(source.childNodes)) {
+    const safe = clean(child, host);
+    if (safe) out.append(safe);
+  }
+  return out;
+}
+
+/**
+ * The same walk, but returning a string — for content going OUT.
+ *
+ * `renderBody` deliberately hands back a node, because handing back HTML invites
+ * a caller to concatenate and re-parse it. This one exists for the single case
+ * where a string is the only possible answer: the composer has to put what
+ * somebody typed into a JSON body.
+ *
+ * It matters for the same reason the display side does, from the other
+ * direction. A contenteditable takes whatever the clipboard had in it — a
+ * pasted block of a web page arrives with its scripts, its styles and its
+ * tracking pixels intact — and posting that unfiltered would store it for
+ * every future reader of the thread.
+ */
+export function cleanHtml(html: string, host: string): string {
+  const holder = document.createElement("div");
+  renderBody(holder, html, host);
+  /*
+   * Stored relative, displayed absolute.
+   *
+   * `renderBody` makes an inline image absolute because the panel runs on the
+   * HOST app's origin, where `/api/inline/…` would resolve to the host and 404.
+   * That is right for showing it and wrong for keeping it: a body stored with
+   * this deployment's hostname in it breaks if the deployment is ever renamed,
+   * and the support app's own editor stores the path. So the origin goes back
+   * off on the way out, and the display side puts it on again.
+   */
+  const origin = safeOrigin(host);
+  if (origin) {
+    for (const image of Array.from(holder.querySelectorAll("img"))) {
+      const src = image.getAttribute("src") ?? "";
+      if (src.startsWith(`${origin}/`)) image.setAttribute("src", src.slice(origin.length));
+    }
+  }
+  return holder.innerHTML;
+}
+
+function safeOrigin(host: string): string | null {
+  try {
+    return new URL(host).origin;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * True when there is nothing worth sending.
+ *
+ * An image alone counts as content — a screenshot with no words is the most
+ * common reply a reporter makes — but a contenteditable that has been typed in
+ * and cleared is full of empty tags and `&nbsp;`, and those are not.
+ */
+export function htmlIsEmpty(html: string): boolean {
+  if (!html) return true;
+  if (/<img\b/i.test(html)) return false;
+  return html.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
+}
+
+function absolute(url: string, host: string): string {
+  const value = url.trim();
+  if (!value.startsWith("/")) return value;
+  return `${host.replace(/\/$/, "")}${value}`;
+}