@devaccel-labs/app-comments-toolbar 1.1.0 → 1.3.0

package/src/help/panel.ts

@@ -0,0 +1,840 @@
+/**
+ * The panel the pill opens: a small dialog anchored to the pill, not modal, with two parts.
+ *
+ * - **New request**: what the person needs, pictures of the page from the capture script, and Send. The
+ *   host's `submit` records it. A failed send keeps everything and the next send carries the same id.
+ * - **Your requests** (when the host gives `list`): what this person has sent and where each stands. Read
+ *   when the part is opened and after a send, never on a timer.
+ *
+ * Plain DOM, no React: `help-panel.js` is fetched the first time someone reaches for the pill and should be
+ * on the page at once. What is written and attached is kept here for as long as the pill is mounted, so it
+ * survives closing the panel; it is dropped with the pill, because the next person to sign in on the same
+ * page must not find it.
+ */
+import type { CommentToolCaptureApi } from "../capture/api.js";
+import { redactSecretSearchParams } from "../runtime/replay-model.js";
+import { HELP_PANEL_CSS } from "./panel-styles.js";
+import { ensureHelpStyles, type PanelHost, type PanelView } from "./pill.js";
+import {
+  isHelpError,
+  type HelpImage,
+  type HelpReceipt,
+  type HelpRequest,
+  type HelpTheme,
+  type SubmittedRequest,
+  type SubmittedRequestStatus,
+} from "./types.js";
+import { HELP_LIMITS } from "./wire.js";
+
+const STYLE_ID = "cth-style-panel";
+const DEFAULT_LABEL = "Need help?";
+const NOT_SENT = "That did not send. Check your connection and try again.";
+const NO_PICTURES = "Pictures are not available right now.";
+const NOT_PICTURED = "This page could not be pictured.";
+const NOT_LISTED = "Your requests could not be loaded.";
+const NOTHING_YET = "Nothing yet. What you send appears here.";
+/** The count of characters left is shown from here on. */
+const COUNT_FROM = 200;
+
+/** Said of a request the team merged into one it already had. The status follows it. */
+const CONSOLIDATED =
+  "We already have a ticket tracking this issue, so we\u2019ve consolidated your request into it.";
+
+const STATUS_WORDS: Record<SubmittedRequestStatus, string> = {
+  received: "Received",
+  in_progress: "In progress",
+  resolved: "Resolved",
+};
+
+const ICONS = {
+  close: "M4 4l8 8M12 4l-8 8",
+  camera:
+    "M2.5 5.5h2l1-1.5h5l1 1.5h2a1 1 0 0 1 1 1v5.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1zM8 11a2.2 2.2 0 1 0 0-4.4A2.2 2.2 0 0 0 8 11z",
+  pointer: "M3.5 2.5l9 4.2-3.8 1.5-1.5 3.8z M9.5 9.5l3 3",
+  check: "M3.5 8.5l3 3 6-7",
+} as const;
+
+type Part = "new" | "requests";
+
+type Picture = {
+  key: string;
+  image: HelpImage;
+  /** A `blob:` address for the thumbnail. */
+  url: string;
+  /** Taken by pointing: it goes when the pointing goes. */
+  pointed: boolean;
+};
+
+type Draft = {
+  id: string;
+  message: string;
+  pointed: { label: string } | null;
+  pictures: Picture[];
+};
+
+type Listing =
+  | { state: "idle" }
+  | { state: "loading" }
+  | { state: "failed" }
+  | { state: "ready"; rows: readonly SubmittedRequest[] };
+
+type Child = Node | string | null | false | undefined;
+type Attributes = Record<string, string | boolean | null | undefined | ((event: Event) => void)>;
+
+function h<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attributes: Attributes = {},
+  ...children: Child[]
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    if (typeof value === "function") node.addEventListener(name.slice(2), value);
+    else if (name === "class") node.className = String(value);
+    else node.setAttribute(name, value === true ? "" : value);
+  }
+  for (const child of children) {
+    if (child === null || child === undefined || child === false) continue;
+    node.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return node;
+}
+
+function icon(name: keyof typeof ICONS): SVGSVGElement {
+  const namespace = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(namespace, "svg");
+  svg.setAttribute("class", "cth-icon");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(namespace, "path");
+  path.setAttribute("d", ICONS[name]);
+  svg.appendChild(path);
+  return svg;
+}
+
+/** A request's own id: a random UUID, also where `crypto.randomUUID` is kept from insecure pages. */
+function newId(): string {
+  if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+  const hex = [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+
+/** An address the panel may link to: the host's own word for it, but never a script. */
+function linkable(value: unknown): string | null {
+  if (typeof value !== "string" || !value.trim()) return null;
+  try {
+    const url = new URL(value, window.location.href);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function oneLine(value: unknown, limit: number): string {
+  return typeof value === "string" ? value.replace(/\s+/g, " ").trim().slice(0, limit) : "";
+}
+
+/** "Just now", "5 minutes ago", "Yesterday", then the date. */
+export function whenWords(iso: string, now: number): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const minutes = Math.floor((now - then) / 60_000);
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days} days ago`;
+  const date = new Date(then);
+  return date.toLocaleDateString(undefined, {
+    day: "numeric",
+    month: "short",
+    ...(date.getFullYear() === new Date(now).getFullYear() ? {} : { year: "numeric" }),
+  });
+}
+
+/** The page's address as a request carries it: credentials in its query are not the support team's to see. */
+function pageAddress(): string {
+  const url = new URL(window.location.href);
+  redactSecretSearchParams(url);
+  // A fragment written as parameters (`#access_token=…`) is held to the same rule.
+  if (url.hash.includes("=")) {
+    const inner = new URL(`http://fragment.invalid/?${url.hash.slice(1)}`);
+    redactSecretSearchParams(inner);
+    url.hash = inner.search.slice(1);
+  }
+  return url.href.slice(0, HELP_LIMITS.url);
+}
+
+function isStatus(value: unknown): value is SubmittedRequestStatus {
+  return value === "received" || value === "in_progress" || value === "resolved";
+}
+
+/** The rows a host's `list` gave, newest first: only what is shaped like a request, and no more than fit. */
+function rowsOf(given: unknown): SubmittedRequest[] {
+  if (!Array.isArray(given)) throw new Error("list() must resolve with an array.");
+  return (given as Partial<SubmittedRequest>[])
+    .filter(
+      (row) =>
+        typeof row === "object" &&
+        row !== null &&
+        typeof row.id === "string" &&
+        typeof row.createdAt === "string" &&
+        isStatus(row.status),
+    )
+    .map((row) => row as SubmittedRequest)
+    .sort((a, b) => (Date.parse(b.createdAt) || 0) - (Date.parse(a.createdAt) || 0))
+    .slice(0, HELP_LIMITS.listed);
+}
+
+export function createPanel(host: PanelHost): PanelView {
+  ensureHelpStyles(STYLE_ID, HELP_PANEL_CSS);
+
+  let part: Part = "new";
+  let draft: Draft = { id: newId(), message: "", pointed: null, pictures: [] };
+  let sending = false;
+  let capturing = false;
+  let failure: string | null = null;
+  let notice: string | null = null;
+  let receipt: HelpReceipt | null = null;
+  let listing: Listing = { state: "idle" };
+  let listRun = 0;
+  let pictureSeq = 0;
+  let isOpen = false;
+  let destroyed = false;
+  let announceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const content = h("div", { class: "cth-content" });
+  const live = h("div", { class: "cth-live", role: "status", "aria-live": "polite" });
+  const section = h(
+    "section",
+    {
+      class: "cth-panel",
+      id: "cth-panel",
+      role: "dialog",
+      "aria-modal": "false",
+      tabindex: "-1",
+      "data-cs-help-ui": "panel",
+      onkeydown: (event) => onKey(event as KeyboardEvent),
+    },
+    content,
+    live,
+  );
+
+  const options = () => host.options();
+  const title = () => oneLine(options().label, 60) || DEFAULT_LABEL;
+  const theme = (): HelpTheme => options().theme ?? "auto";
+  const hasList = () => typeof options().list === "function";
+  const capturesOn = () => {
+    const captures = options().captures;
+    try {
+      return typeof captures === "function" ? captures() !== false : captures !== false;
+    } catch {
+      return false;
+    }
+  };
+  const canSend = () => {
+    const length = draft.message.trim().length;
+    return !sending && !capturing && length > 0 && length <= HELP_LIMITS.message;
+  };
+
+  /** Told to a screen reader. Cleared first, so the same sentence twice is said twice. */
+  function announce(message: string) {
+    live.textContent = "";
+    clearTimeout(announceTimer);
+    announceTimer = setTimeout(() => {
+      live.textContent = message;
+    }, 50);
+  }
+
+  function release(pictures: readonly Picture[]) {
+    for (const picture of pictures) URL.revokeObjectURL(picture.url);
+  }
+
+  // ----- Sending ------------------------------------------------------------------------------------------
+
+  function sentWords(given: HelpReceipt): string {
+    const reference = oneLine(given.reference, 60);
+    return reference ? `Request ${reference} received.` : "Request received.";
+  }
+
+  async function send() {
+    if (!canSend()) return;
+    const sent = draft;
+    const request: HelpRequest = {
+      id: sent.id,
+      message: sent.message.trim(),
+      pageUrl: pageAddress(),
+      route: window.location.pathname,
+      pointed: sent.pointed,
+      images: sent.pictures.map((picture) => picture.image),
+      client: {
+        userAgent: navigator.userAgent,
+        language: navigator.language,
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+      },
+    };
+    sending = true;
+    failure = null;
+    notice = null;
+    render();
+    try {
+      const given = (await (async () => options().submit(request))()) as HelpReceipt | null;
+      if (destroyed) return;
+      receipt = {
+        reference: oneLine(given?.reference, 60) || undefined,
+        url: linkable(given?.url) ?? undefined,
+        note: oneLine(given?.note, 200) || undefined,
+      };
+      release(sent.pictures);
+      draft = { id: newId(), message: "", pointed: null, pictures: [] };
+      sending = false;
+      render("sent");
+      announce([sentWords(receipt), receipt.note].filter(Boolean).join(" "));
+      // Read past the kept rows: the request just sent belongs at the top of them.
+      if (hasList()) void readList();
+    } catch (error) {
+      if (destroyed) return;
+      failure = isHelpError(error) ? oneLine(error.message, 300) : NOT_SENT;
+      sending = false;
+      render("send");
+    }
+  }
+
+  // ----- Your requests ------------------------------------------------------------------------------------
+
+  async function readList() {
+    const list = options().list;
+    if (typeof list !== "function") return;
+    const run = ++listRun;
+    // Rows already shown stay while they are read again.
+    if (listing.state !== "ready") {
+      listing = { state: "loading" };
+      render();
+    }
+    try {
+      const rows = rowsOf(await (async () => list())());
+      if (run !== listRun || destroyed) return;
+      listing = { state: "ready", rows };
+    } catch {
+      if (run !== listRun || destroyed) return;
+      listing = { state: "failed" };
+    }
+    render();
+  }
+
+  function show(next: Part) {
+    if (part === next) return;
+    part = next;
+    render(next === "new" ? "tab-new" : "tab-requests");
+    if (next === "requests") void readList();
+  }
+
+  // ----- Pictures -----------------------------------------------------------------------------------------
+
+  /**
+   * Runs one capture with the pill and the panel out of the way, and brings them back. The root is marked
+   * `data-cs-capture-ignore`, so it is in no picture even before it is hidden.
+   */
+  async function capture<T>(
+    focus: string,
+    run: (api: CommentToolCaptureApi) => Promise<T | null>,
+  ): Promise<T | null> {
+    if (capturing || sending) return null;
+    notice = null;
+    if (!capturesOn()) {
+      render();
+      return null;
+    }
+    capturing = true;
+    render(focus);
+    let api: CommentToolCaptureApi;
+    try {
+      api = await host.capture();
+    } catch {
+      if (destroyed) return null;
+      capturing = false;
+      notice = NO_PICTURES;
+      render(focus);
+      return null;
+    }
+    if (destroyed) return null;
+    let taken: T | null = null;
+    host.hide(true);
+    try {
+      taken = await run(api);
+    } catch {
+      notice = NOT_PICTURED;
+    }
+    if (destroyed) return null;
+    host.hide(false);
+    capturing = false;
+    return taken;
+  }
+
+  function attach(image: HelpImage, pointed: boolean): boolean {
+    if (draft.pictures.length >= HELP_LIMITS.images) return false;
+    pictureSeq += 1;
+    draft.pictures.push({
+      key: `picture-${pictureSeq}`,
+      image,
+      url: URL.createObjectURL(image.blob),
+      pointed,
+    });
+    return true;
+  }
+
+  function detach(match: (picture: Picture) => boolean) {
+    release(draft.pictures.filter(match));
+    draft.pictures = draft.pictures.filter((picture) => !match(picture));
+  }
+
+  async function addPicture() {
+    if (draft.pictures.length >= HELP_LIMITS.images) return;
+    const image = await capture("add-picture", (api) => api.screenshot({ theme: theme() }));
+    if (destroyed) return;
+    if (image && attach(image, false)) {
+      announce(`Picture added. ${draft.pictures.length} of ${HELP_LIMITS.images}.`);
+    }
+    render("add-picture");
+  }
+
+  async function pointAt() {
+    const target = await capture("point", (api) => api.pick({ theme: theme() }));
+    if (destroyed) return;
+    if (target) {
+      // One thing is pointed at: a second pointing takes the first one's place, picture and all.
+      detach((picture) => picture.pointed);
+      draft.pointed = {
+        label: oneLine(target.label, HELP_LIMITS.label) || "Something on the page",
+      };
+      if (target.image) attach(target.image, true);
+      announce(`Pointing at ${draft.pointed.label}.`);
+    }
+    render("point");
+  }
+
+  // ----- Drawing ------------------------------------------------------------------------------------------
+
+  function button(
+    key: string,
+    className: string,
+    onclick: () => void,
+    attributes: Attributes,
+    ...children: Child[]
+  ) {
+    return h(
+      "button",
+      { type: "button", class: className, "data-key": key, onclick, ...attributes },
+      ...children,
+    );
+  }
+
+  function tabs(): HTMLElement | null {
+    if (!hasList()) return null;
+    const tab = (which: Part, words: string) =>
+      button(
+        `tab-${which}`,
+        "cth-tab",
+        () => show(which),
+        {
+          role: "tab",
+          id: `cth-tab-${which}`,
+          "aria-selected": String(part === which),
+          "aria-controls": "cth-part",
+          tabindex: part === which ? "0" : "-1",
+          "data-cs-help-ui": `tab-${which}`,
+        },
+        words,
+      );
+    return h(
+      "div",
+      {
+        class: "cth-tabs",
+        role: "tablist",
+        "aria-label": title(),
+        onkeydown: (event) => {
+          const key = (event as KeyboardEvent).key;
+          if (key !== "ArrowLeft" && key !== "ArrowRight") return;
+          event.preventDefault();
+          show(part === "new" ? "requests" : "new");
+        },
+      },
+      tab("new", "New request"),
+      tab("requests", "Your requests"),
+    );
+  }
+
+  function form(): HTMLElement {
+    const left = HELP_LIMITS.message - draft.message.length;
+    const count = h(
+      "div",
+      { class: "cth-count", "data-cs-help-ui": "count" },
+      left <= COUNT_FROM ? `${left} left` : "",
+    );
+    const sendButton = button(
+      "send",
+      "cth-send",
+      () => void send(),
+      {
+        disabled: !canSend(),
+        "aria-busy": sending ? "true" : null,
+        "data-cs-help-ui": "send",
+      },
+      sending ? "Sending\u2026" : "Send",
+    );
+    const text = h("textarea", {
+      class: "cth-text",
+      id: "cth-message",
+      "data-key": "message",
+      "data-cs-help-ui": "message",
+      rows: "4",
+      maxlength: String(HELP_LIMITS.message),
+      placeholder: "Say what happened, and what you expected.",
+      readonly: sending,
+      oninput: () => {
+        draft.message = text.value;
+        const remaining = HELP_LIMITS.message - text.value.length;
+        count.textContent = remaining <= COUNT_FROM ? `${remaining} left` : "";
+        sendButton.disabled = !canSend();
+      },
+      onkeydown: (event) => {
+        const key = event as KeyboardEvent;
+        if (key.key === "Enter" && (key.metaKey || key.ctrlKey)) {
+          key.preventDefault();
+          void send();
+        }
+      },
+    });
+    text.value = draft.message;
+
+    const full = draft.pictures.length >= HELP_LIMITS.images;
+    const busy = sending || capturing;
+    const tools = capturesOn()
+      ? h(
+          "div",
+          { class: "cth-tools" },
+          button(
+            "add-picture",
+            "cth-tool",
+            () => void addPicture(),
+            { disabled: busy || full, "data-cs-help-ui": "add-picture" },
+            icon("camera"),
+            "Add a picture of this page",
+            draft.pictures.length > 0
+              ? h(
+                  "span",
+                  { class: "cth-tool-more" },
+                  `${draft.pictures.length} of ${HELP_LIMITS.images}`,
+                )
+              : null,
+          ),
+          button(
+            "point",
+            "cth-tool",
+            () => void pointAt(),
+            { disabled: busy, "data-cs-help-ui": "point" },
+            icon("pointer"),
+            draft.pointed ? "Point at something else" : "Point at what\u2019s wrong",
+          ),
+        )
+      : null;
+
+    const pointed = draft.pointed
+      ? h(
+          "div",
+          { class: "cth-chip", "data-cs-help-ui": "pointed" },
+          h(
+            "span",
+            { class: "cth-chip-text" },
+            "Pointing at ",
+            h("span", { class: "cth-chip-what" }, draft.pointed.label),
+          ),
+          button(
+            "unpoint",
+            "cth-x",
+            () => {
+              draft.pointed = null;
+              detach((picture) => picture.pointed);
+              render("point");
+            },
+            { "aria-label": "Stop pointing at it", disabled: busy },
+            icon("close"),
+          ),
+        )
+      : null;
+
+    const thumbs =
+      draft.pictures.length > 0
+        ? h(
+            "ul",
+            { class: "cth-thumbs", "aria-label": "Pictures" },
+            ...draft.pictures.map((picture, index) =>
+              h(
+                "li",
+                { class: "cth-thumb", "data-cs-help-ui": "picture" },
+                h("img", {
+                  class: "cth-thumb-img",
+                  src: picture.url,
+                  alt: picture.pointed
+                    ? `Picture ${index + 1}: what you pointed at`
+                    : `Picture ${index + 1} of this page`,
+                }),
+                button(
+                  `remove-${picture.key}`,
+                  "cth-thumb-x",
+                  () => {
+                    detach((each) => each === picture);
+                    render("add-picture");
+                    announce("Picture removed.");
+                  },
+                  { "aria-label": `Remove picture ${index + 1}`, disabled: busy },
+                  icon("close"),
+                ),
+              ),
+            ),
+          )
+        : null;
+
+    const more = options().moreOptions;
+    return h(
+      "form",
+      {
+        class: "cth-form",
+        novalidate: true,
+        onsubmit: (event) => {
+          event.preventDefault();
+          void send();
+        },
+      },
+      h("label", { class: "cth-q", for: "cth-message" }, "What do you need help with?"),
+      text,
+      count,
+      tools,
+      pointed,
+      thumbs,
+      notice ? h("p", { class: "cth-hint", "data-cs-help-ui": "notice" }, notice) : null,
+      failure
+        ? h("p", { class: "cth-alert", role: "alert", "data-cs-help-ui": "failure" }, failure)
+        : null,
+      h(
+        "div",
+        { class: "cth-foot" },
+        typeof more === "function"
+          ? button(
+              "more",
+              "cth-plain",
+              () => {
+                close();
+                more({ message: draft.message });
+              },
+              { disabled: busy, "data-cs-help-ui": "more" },
+              "More options",
+            )
+          : null,
+        sendButton,
+      ),
+    );
+  }
+
+  function sent(given: HelpReceipt): HTMLElement {
+    const address = linkable(given.url);
+    return h(
+      "div",
+      { class: "cth-sent", "data-cs-help-ui": "sent" },
+      h("span", { class: "cth-sent-mark" }, icon("check")),
+      h("p", { class: "cth-sent-title", "data-key": "sent", tabindex: "-1" }, sentWords(given)),
+      given.note ? h("p", { class: "cth-hint" }, given.note) : null,
+      h(
+        "p",
+        { class: "cth-hint" },
+        hasList() ? "It is in Your requests." : "The support team has it.",
+      ),
+      h(
+        "div",
+        { class: "cth-sent-actions" },
+        button(
+          "another",
+          "cth-plain",
+          () => {
+            receipt = null;
+            render("message");
+          },
+          { "data-cs-help-ui": "another" },
+          "Write another",
+        ),
+        address
+          ? h(
+              "a",
+              { class: "cth-plain", href: address, "data-key": "open", "data-cs-help-ui": "open" },
+              "Open it",
+            )
+          : null,
+      ),
+    );
+  }
+
+  function requests(): HTMLElement {
+    switch (listing.state) {
+      case "idle":
+      case "loading":
+        return h(
+          "p",
+          { class: "cth-empty", "data-cs-help-ui": "requests-loading" },
+          "Loading your requests\u2026",
+        );
+      case "failed":
+        return h(
+          "div",
+          { class: "cth-empty", "data-cs-help-ui": "requests-failed" },
+          h("p", { role: "alert" }, NOT_LISTED),
+          button("retry", "cth-plain", () => void readList(), {}, "Try again"),
+        );
+      case "ready": {
+        if (listing.rows.length === 0) {
+          return h("p", { class: "cth-empty", "data-cs-help-ui": "requests-empty" }, NOTHING_YET);
+        }
+        const now = Date.now();
+        return h(
+          "ul",
+          { class: "cth-list", "data-cs-help-ui": "requests" },
+          ...listing.rows.map((row) => {
+            const address = linkable(row.url);
+            const reference = oneLine(row.reference, 60);
+            const when = whenWords(row.createdAt, now);
+            const status = oneLine(row.statusLabel, 40) || STATUS_WORDS[row.status];
+            const inner: Child[] = [
+              h("span", { class: "cth-row-summary" }, oneLine(row.summary, 200) || "(no words)"),
+              h(
+                "span",
+                { class: "cth-row-meta" },
+                h("time", { datetime: row.createdAt }, when),
+                reference ? ` \u00b7 ${reference}` : null,
+              ),
+              h("span", { class: "cth-status", "data-status": row.status }, status),
+              row.consolidated === true
+                ? h(
+                    "span",
+                    { class: "cth-row-note", "data-cs-help-ui": "request-consolidated" },
+                    `${CONSOLIDATED} Status: ${status}`,
+                  )
+                : null,
+            ];
+            return h(
+              "li",
+              { class: "cth-row", "data-cs-help-ui": "request" },
+              address
+                ? h("a", { class: "cth-row-main", href: address }, ...inner)
+                : h("div", { class: "cth-row-main" }, ...inner),
+            );
+          }),
+        );
+      }
+      default: {
+        const unreachable: never = listing;
+        throw new Error(`Unhandled listing ${String(unreachable)}`);
+      }
+    }
+  }
+
+  /** Draws the panel as it stands. `focus` names the control that takes focus; left out, focus stays put. */
+  function render(focus?: string) {
+    if (!isOpen || destroyed) return;
+    const active = document.activeElement;
+    const held =
+      focus ??
+      (active instanceof HTMLElement && section.contains(active) ? active.dataset.key : undefined);
+    const caret =
+      active instanceof HTMLTextAreaElement && section.contains(active)
+        ? ([active.selectionStart, active.selectionEnd] as const)
+        : null;
+    const shown: Part = hasList() ? part : "new";
+    section.setAttribute("aria-label", title());
+    const tabList = tabs();
+    content.replaceChildren(
+      h(
+        "header",
+        { class: "cth-head" },
+        h("h2", { class: "cth-title" }, title()),
+        button("close", "cth-x", () => close(), { "aria-label": "Close" }, icon("close")),
+      ),
+      ...(tabList ? [tabList] : []),
+      h(
+        "div",
+        {
+          class: "cth-body",
+          id: "cth-part",
+          ...(hasList() ? { role: "tabpanel", "aria-labelledby": `cth-tab-${shown}` } : {}),
+        },
+        shown === "requests" ? requests() : receipt ? sent(receipt) : form(),
+      ),
+    );
+    if (held === undefined) return;
+    const next = section.querySelector<HTMLElement>(`[data-key="${held}"]`);
+    const target = next && !(next as HTMLButtonElement).disabled ? next : section;
+    target.focus({ preventScroll: true });
+    if (caret && target instanceof HTMLTextAreaElement) target.setSelectionRange(...caret);
+  }
+
+  function onKey(event: KeyboardEvent) {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    event.preventDefault();
+    event.stopPropagation();
+    close();
+  }
+
+  const pillKey = (event: KeyboardEvent) => {
+    if (event.key === "Escape" && isOpen) {
+      event.preventDefault();
+      close();
+    }
+  };
+  host.pill.addEventListener("keydown", pillKey);
+
+  function open() {
+    if (destroyed || isOpen) return;
+    isOpen = true;
+    host.root.appendChild(section);
+    host.pill.setAttribute("aria-expanded", "true");
+    host.pill.setAttribute("aria-controls", section.id);
+    const shown: Part = hasList() ? part : "new";
+    render(shown === "requests" ? "tab-requests" : receipt ? "sent" : "message");
+    if (shown === "requests") void readList();
+  }
+
+  function close() {
+    if (!isOpen) return;
+    const within = section.contains(document.activeElement);
+    isOpen = false;
+    section.remove();
+    host.pill.setAttribute("aria-expanded", "false");
+    // A confirmation has been read once the panel is closed: the next opening is a new request.
+    receipt = null;
+    if (within || document.activeElement === document.body) {
+      host.pill.focus({ preventScroll: true });
+    }
+  }
+
+  return {
+    get isOpen() {
+      return isOpen;
+    },
+    open,
+    close,
+    update: () => render(),
+    destroy() {
+      destroyed = true;
+      isOpen = false;
+      clearTimeout(announceTimer);
+      host.pill.removeEventListener("keydown", pillKey);
+      host.pill.setAttribute("aria-expanded", "false");
+      section.remove();
+      release(draft.pictures);
+      draft.pictures = [];
+    },
+  };
+}