@guidelytech/guide-runtime 0.8.0 → 0.9.0

package/dist/messenger.js

@@ -1,12 +1,13 @@
 import {
   createHelpView,
   el,
-  listItem
-} from "./chunk-4FKYF6OB.js";
-import "./chunk-7DOGZKWD.js";
+  resultRow,
+  startableGuide
+} from "./chunk-KJRXCITD.js";
+import "./chunk-PG7CMBHD.js";
 
 // src/messenger.ts
-import { foldPathIds, pageLabel } from "@guidelytech/shared/runtime";
+import { foldPathIds, matchesHelpQuery, pageLabel } from "@guidelytech/shared/runtime";
 
 // src/howto-view.ts
 var pct = (v) => `${(v * 100).toFixed(3)}%`;
@@ -67,6 +68,15 @@ function renderHowTo(doc, howTo, onShowMe) {
     show.addEventListener("click", () => onShowMe(guideKey));
     wrap.appendChild(show);
   }
+  if (howTo.video && /^https?:\/\//i.test(howTo.video.url)) {
+    const video = el(doc, "video", "g-howto-video");
+    video.src = howTo.video.url;
+    video.controls = true;
+    video.preload = "metadata";
+    video.playsInline = true;
+    video.setAttribute("aria-label", `Video: ${howTo.title}`);
+    wrap.appendChild(video);
+  }
   const list = el(doc, "ol", "g-howto-steps");
   let n = 0;
   for (const s of howTo.steps) {
@@ -100,6 +110,275 @@ function renderHowTo(doc, howTo, onShowMe) {
   return wrap;
 }
 
+// src/complaint-view.ts
+import { MAX_COMPLAINT_ANSWER_LENGTH, MAX_COMPLAINT_ATTACHMENT_BYTES, MAX_COMPLAINT_LENGTH } from "@guidelytech/shared/runtime";
+var emptyComplaintDraft = (description = "") => ({ description, answers: {}, email: "", attachment: null, error: null, sending: false, checked: false });
+var COMPLAINT_STEPS = [
+  ["open", "Received"],
+  ["in_review", "In review"],
+  ["resolved", "Resolved"]
+];
+var complaintStatusLabel = (s) => COMPLAINT_STEPS.find(([k]) => k === s)?.[1] ?? s;
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function complaintProblem(category, draft, needsEmail) {
+  for (const f of category.fields) if (f.required && !(draft.answers[f.id] ?? "").trim()) return `${f.label} is required.`;
+  if (!draft.description.trim()) return "Tell us what happened.";
+  if (needsEmail && !EMAIL.test(draft.email.trim())) return "Enter your email address so the team can reply.";
+  return null;
+}
+function complaintAnswers(category, draft) {
+  const out = {};
+  for (const f of category.fields) {
+    const v = (draft.answers[f.id] ?? "").trim();
+    if (v) out[f.id] = v.slice(0, MAX_COMPLAINT_ANSWER_LENGTH);
+  }
+  return out;
+}
+function statusPill(doc, status) {
+  return el(doc, "span", `g-m-pill g-m-pill-${status}`, complaintStatusLabel(status));
+}
+function dot(doc, color) {
+  const d = el(doc, "span", "g-m-cat-dot");
+  if (/^#[0-9a-fA-F]{6}$/.test(color)) d.style.background = color;
+  d.setAttribute("aria-hidden", "true");
+  return d;
+}
+function categoryList(doc, categories, onPick) {
+  const wrap = el(doc, "div", "g-m-form");
+  const intro = el(doc, "div");
+  intro.append(el(doc, "h3", "g-m-form-title", "What's it about?"), el(doc, "p", "g-m-card-sub", "Picking the right one gets it to the right team faster."));
+  wrap.appendChild(intro);
+  const list = el(doc, "div", "g-m-cats");
+  list.setAttribute("role", "list");
+  for (const c of categories) {
+    const b = el(doc, "button", "g-m-card g-m-row g-m-center g-m-cat");
+    b.type = "button";
+    b.setAttribute("role", "listitem");
+    b.appendChild(dot(doc, c.color));
+    const text = el(doc, "span", "g-m-grow");
+    text.appendChild(el(doc, "span", "g-m-card-title", c.name));
+    if (c.description) text.appendChild(el(doc, "span", "g-m-card-sub", c.description));
+    b.appendChild(text);
+    b.addEventListener("click", () => onPick(c));
+    list.appendChild(b);
+  }
+  wrap.appendChild(list);
+  return wrap;
+}
+var fieldSeq = 0;
+function field(doc, label, control, opts = {}) {
+  const id = `g-m-f${++fieldSeq}`;
+  control.id = id;
+  const wrap = el(doc, "div", "g-m-field");
+  const l = el(doc, "label", "g-m-label", label);
+  l.htmlFor = id;
+  if (opts.optional) l.appendChild(el(doc, "span", "g-m-optional", " (optional)"));
+  wrap.append(l, control);
+  if (opts.hint) {
+    const hint = el(doc, "span", "g-m-hint", opts.hint);
+    hint.id = `${id}-hint`;
+    control.setAttribute("aria-describedby", hint.id);
+    wrap.appendChild(hint);
+  }
+  if (opts.invalid) control.setAttribute("aria-invalid", "true");
+  return wrap;
+}
+function complaintForm(doc, o) {
+  const { category, draft } = o;
+  const form = el(doc, "form", "g-m-form");
+  form.noValidate = true;
+  const picked = el(doc, "div", "g-m-picked g-m-row g-m-center");
+  picked.append(dot(doc, category.color), el(doc, "span", "g-m-grow g-m-card-title", category.name));
+  if (o.canChangeCategory) {
+    const change = el(doc, "button", "g-m-text-btn", "Change");
+    change.type = "button";
+    change.setAttribute("aria-label", `Change category (${category.name})`);
+    change.addEventListener("click", o.onChangeCategory);
+    picked.appendChild(change);
+  }
+  form.appendChild(picked);
+  for (const f of category.fields) {
+    const missing = draft.checked && f.required && !(draft.answers[f.id] ?? "").trim();
+    let control;
+    if (f.type === "choice") {
+      const select = el(doc, "select", "g-input");
+      const option = (label, value) => {
+        const o2 = el(doc, "option", "", label);
+        o2.value = value;
+        return o2;
+      };
+      select.appendChild(option(f.required ? "Choose one" : "Choose one (optional)", ""));
+      for (const opt of f.options ?? []) select.appendChild(option(opt, opt));
+      select.value = draft.answers[f.id] ?? "";
+      select.addEventListener("change", () => draft.answers[f.id] = select.value);
+      control = select;
+    } else {
+      const input = el(doc, "input", "g-input");
+      input.type = "text";
+      input.maxLength = MAX_COMPLAINT_ANSWER_LENGTH;
+      input.value = draft.answers[f.id] ?? "";
+      input.addEventListener("input", () => draft.answers[f.id] = input.value);
+      control = input;
+    }
+    if (f.required) control.required = true;
+    form.appendChild(field(doc, f.label, control, { optional: !f.required, invalid: missing }));
+  }
+  const what = el(doc, "textarea", "g-input g-m-textarea");
+  what.rows = 5;
+  what.maxLength = MAX_COMPLAINT_LENGTH;
+  what.required = true;
+  what.value = draft.description;
+  what.placeholder = "What went wrong, and when?";
+  what.addEventListener("input", () => draft.description = what.value);
+  form.appendChild(field(doc, "What happened?", what, { invalid: draft.checked && !draft.description.trim() }));
+  if (o.needsEmail) {
+    const email = el(doc, "input", "g-input");
+    email.type = "email";
+    email.autocomplete = "email";
+    email.required = true;
+    email.value = draft.email;
+    email.addEventListener("input", () => draft.email = email.value);
+    form.appendChild(field(doc, "Your email", email, { hint: "So the team can reply to you.", invalid: draft.checked && !EMAIL.test(draft.email.trim()) }));
+  }
+  const files = el(doc, "div", "g-m-attach");
+  if (draft.attachment) {
+    const a = draft.attachment;
+    const row = el(doc, "div", "g-m-row g-m-center g-m-attached");
+    if (a.previewUrl) {
+      const img = el(doc, "img", "g-m-thumb");
+      img.src = a.previewUrl;
+      img.alt = "";
+      img.addEventListener("error", () => img.remove());
+      row.appendChild(img);
+    }
+    row.appendChild(el(doc, "span", "g-m-grow g-m-ellipsis", a.fileName));
+    const remove = el(doc, "button", "g-m-text-btn", "Remove");
+    remove.type = "button";
+    remove.setAttribute("aria-label", `Remove ${a.fileName}`);
+    remove.addEventListener("click", o.onRemoveFile);
+    row.appendChild(remove);
+    files.appendChild(row);
+  } else {
+    const input = el(doc, "input", "g-m-file");
+    input.type = "file";
+    input.accept = "image/png,image/jpeg,image/webp,image/gif";
+    input.tabIndex = -1;
+    input.setAttribute("aria-hidden", "true");
+    input.addEventListener("change", () => {
+      const file = input.files?.[0];
+      if (file) o.onPickFile(file);
+    });
+    const pick = el(doc, "button", "g-m-attach-btn", "Attach a screenshot");
+    pick.type = "button";
+    pick.addEventListener("click", () => input.click());
+    files.append(input, pick);
+  }
+  form.appendChild(files);
+  const foot = el(doc, "div", "g-m-form-foot");
+  foot.appendChild(el(doc, "p", "g-m-hint", "We'll include the page you're on so the team can look into it."));
+  if (draft.error) {
+    const err = el(doc, "p", "g-m-error", draft.error);
+    err.setAttribute("role", "alert");
+    foot.appendChild(err);
+  }
+  const submit = el(doc, "button", "g-btn g-btn-primary g-m-wide", draft.sending ? "Sending\u2026" : "Submit complaint");
+  submit.type = "submit";
+  submit.disabled = draft.sending;
+  foot.appendChild(submit);
+  form.appendChild(foot);
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (!draft.sending) o.onSubmit();
+  });
+  return form;
+}
+function statusTracker(doc, status) {
+  const list = el(doc, "ol", "g-m-steps");
+  list.setAttribute("aria-label", "Progress");
+  const at = COMPLAINT_STEPS.findIndex(([k]) => k === status);
+  COMPLAINT_STEPS.forEach(([, label], i) => {
+    const li = el(doc, "li", `g-m-step${i <= at ? " g-m-step-done" : ""}`);
+    if (i === at) li.setAttribute("aria-current", "step");
+    li.append(el(doc, "span", "g-m-step-dot"), el(doc, "span", "g-m-step-label", label));
+    list.appendChild(li);
+  });
+  return list;
+}
+function complaintSent(doc, o) {
+  const wrap = el(doc, "div", "g-m-form g-m-sent");
+  const top = el(doc, "div", "g-m-sent-top");
+  const tick = el(doc, "span", "g-m-sent-tick");
+  tick.setAttribute("aria-hidden", "true");
+  tick.textContent = "\u2713";
+  const p = el(doc, "p", "g-m-card-sub");
+  p.append("Your reference is ", el(doc, "strong", "", o.complaint.reference), ". The team will reply in this conversation, so check back here.");
+  top.append(tick, el(doc, "h3", "g-m-form-title", "We've got your complaint"), p);
+  wrap.appendChild(top);
+  const details = el(doc, "dl", "g-m-card g-m-static g-m-details");
+  const row = (k, v) => {
+    const r = el(doc, "div", "g-m-detail");
+    r.append(el(doc, "dt", "", k), el(doc, "dd", "", v));
+    details.appendChild(r);
+  };
+  row("Category", o.complaint.categoryName);
+  o.answers.slice(0, 3).forEach(([k, v]) => row(k, v));
+  wrap.appendChild(details);
+  wrap.appendChild(statusTracker(doc, o.complaint.status));
+  const open = el(doc, "button", "g-btn g-btn-primary g-m-wide", "Add more detail");
+  open.type = "button";
+  open.addEventListener("click", o.onOpenConversation);
+  const home = el(doc, "button", "g-btn g-btn-secondary g-m-wide", "Back to home");
+  home.type = "button";
+  home.addEventListener("click", o.onHome);
+  wrap.append(open, home);
+  return wrap;
+}
+var MAX_SIDE = 1600;
+async function readScreenshot(doc, file) {
+  if (!/^image\/(png|jpeg|webp|gif)$/.test(file.type)) throw new Error("Attach a PNG, JPEG, WebP or GIF image.");
+  if (file.size > 25 * 1024 * 1024) throw new Error("That image is too large.");
+  const win = doc.defaultView;
+  const asDataUrl = (blob) => new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(String(r.result));
+    r.onerror = () => reject(new Error("The image couldn't be read."));
+    r.readAsDataURL(blob);
+  });
+  let dataUrl = null;
+  let scaled = false;
+  try {
+    const url = win?.URL.createObjectURL(file);
+    if (!url) throw new Error("no URL");
+    const img = await new Promise((resolve, reject) => {
+      const i = new Image();
+      i.onload = () => resolve(i);
+      i.onerror = () => reject(new Error("decode"));
+      i.src = url;
+    }).finally(() => win?.URL.revokeObjectURL(url));
+    const scale = Math.min(1, MAX_SIDE / Math.max(img.naturalWidth || 1, img.naturalHeight || 1));
+    const canvas = doc.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(img.naturalWidth * scale));
+    canvas.height = Math.max(1, Math.round(img.naturalHeight * scale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("no canvas");
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    for (const q of [0.85, 0.7, 0.5]) {
+      dataUrl = canvas.toDataURL("image/jpeg", q);
+      if ((dataUrl.length - dataUrl.indexOf(",") - 1) * 0.75 <= MAX_COMPLAINT_ATTACHMENT_BYTES) break;
+    }
+    scaled = true;
+  } catch {
+    dataUrl = file.size <= MAX_COMPLAINT_ATTACHMENT_BYTES ? await asDataUrl(file) : null;
+  }
+  if (!dataUrl) throw new Error("That image is too large. Screenshots can be up to 2 MB.");
+  const data = dataUrl.slice(dataUrl.indexOf(",") + 1);
+  if (data.length * 0.75 > MAX_COMPLAINT_ATTACHMENT_BYTES) throw new Error("That image is too large. Screenshots can be up to 2 MB.");
+  const name = (file.name || "screenshot").slice(0, 180);
+  return { fileName: scaled ? `${name.replace(/\.[a-z0-9]+$/i, "")}.jpg` : name, data, previewUrl: dataUrl };
+}
+
 // src/messenger-styles.ts
 var MESSENGER_STYLES = `
 :host([data-g-messenger="bottom-right"]) .g-launcher.g-pos-bottom-right{right:72px}
@@ -109,7 +388,15 @@ var MESSENGER_STYLES = `
 .g-m-launcher:focus-visible{outline:2px solid var(--g-primary);outline-offset:3px}
 .g-m-launcher svg{width:26px;height:26px;fill:currentColor}
 .g-m-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--g-bg)}
-.g-messenger{bottom:76px;height:min(640px,calc(100vh - 110px))}
+.g-messenger{bottom:76px;height:min(640px,calc(100vh - 110px));transition:width .2s ease,height .2s ease,max-height .2s ease}
+.g-messenger.g-m-expanded{width:min(720px,calc(100vw - 32px));height:calc(100vh - 110px);max-height:calc(100vh - 110px)}
+.g-m-expanded .g-rc-article,.g-m-expanded .g-m-scroll{padding:24px clamp(20px,5vw,40px)}
+.g-m-expanded .g-rc-article>.g-title{font-size:24px;line-height:1.25;margin-bottom:12px}
+.g-m-expanded .g-rc-article .g-body{font-size:15px}
+.g-m-head.g-m-sizable{padding-right:92px}
+.g-m-size{position:absolute;right:48px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
+.g-m-size .g-m-ico{width:18px;height:18px}
+.g-m-size:hover,.g-m-size:focus-visible{background:rgba(255,255,255,.18);outline:none}
 .g-m-head{padding:16px 48px 14px 20px;background:var(--g-primary);color:var(--g-primary-text);position:relative;display:flex;align-items:center;gap:8px;min-height:56px}
 .g-m-head .g-close{color:inherit;top:50%;transform:translateY(-50%)}
 .g-m-head .g-close:hover,.g-m-head .g-close:focus-visible{background:rgba(255,255,255,.18);color:inherit}
@@ -179,6 +466,7 @@ var MESSENGER_STYLES = `
 .g-howto-desc,.g-howto-note{color:var(--g-muted);font-size:13px}
 .g-howto p{margin:0 0 6px;white-space:pre-line}
 .g-howto-show{width:100%;margin:6px 0 4px}
+.g-howto-video{display:block;width:100%;max-height:260px;margin:8px 0 4px;border-radius:8px;background:#000}
 .g-howto-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
 .g-howto-step h4{margin:4px 0 0;font-size:15px}
 .g-howto-tip,.g-howto-alert{border-left:3px solid var(--g-primary);background:var(--g-subtle);border-radius:6px;padding:8px 10px;font-size:13px}
@@ -248,6 +536,52 @@ var MESSENGER_STYLES = `
 .g-m-asks{align-items:flex-start}
 .g-m-chip.g-m-ask{border-color:var(--g-primary);color:var(--g-primary);font-weight:600;border-radius:999px;padding:8px 14px;min-height:36px}
 .g-m-chip.g-m-ask:disabled{opacity:.5;cursor:not-allowed}
+.g-m-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
+.g-m-pill{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;white-space:nowrap;background:#fef3c7;color:#92400e}
+.g-m-pill-in_review{background:#e0e7ff;color:#3730a3}
+.g-m-pill-resolved{background:#dcfce7;color:#166534}
+.g-m-complain .g-m-badge-ico{background:#fef3e2;color:#b45309}
+.g-m-complaint{align-self:stretch;gap:10px;border:1px solid var(--g-border);background:var(--g-subtle);border-radius:10px;padding:10px 12px}
+.g-m-chip-ico{width:16px;height:16px}
+.g-m-offer{gap:6px}
+.g-m-form{display:flex;flex-direction:column;gap:14px;margin:0}
+.g-m-form-title{margin:0;font-size:17px;font-weight:600}
+.g-m-cats{display:flex;flex-direction:column;gap:10px}
+.g-m-cats .g-m-card{margin:0;gap:12px;min-height:44px}
+.g-m-cat-dot{width:10px;height:10px;border-radius:999px;background:var(--g-muted);flex:none}
+.g-m-picked{gap:8px;border:1px solid var(--g-border);background:var(--g-subtle);border-radius:10px;padding:8px 12px}
+.g-m-text-btn{border:0;background:transparent;color:var(--g-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 4px;min-height:32px}
+.g-m-text-btn:hover{text-decoration:underline}
+.g-m-text-btn:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px;border-radius:4px}
+.g-m-field{display:flex;flex-direction:column;gap:4px}
+.g-m-label{font-weight:600;font-size:13px}
+.g-m-optional{font-weight:400;color:var(--g-muted)}
+.g-m-hint{color:var(--g-muted);font-size:12px;margin:0}
+.g-m-error{color:#b91c1c;font-size:13px;margin:0}
+.g-scope[data-theme="dark"] .g-m-error{color:#fca5a5}
+.g-m-field .g-input[aria-invalid="true"]{border-color:#dc2626}
+.g-m-textarea{min-height:110px}
+.g-m-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.g-m-attach-btn{align-self:flex-start;border:1px dashed var(--g-border);background:var(--g-bg);color:var(--g-text);font:inherit;font-size:13px;border-radius:8px;padding:8px 12px;cursor:pointer;min-height:36px}
+.g-m-attach-btn:hover{background:var(--g-subtle)}
+.g-m-attach-btn:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+.g-m-attached{gap:10px;border:1px solid var(--g-border);border-radius:8px;padding:6px 8px;font-size:13px}
+.g-m-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;background:var(--g-subtle);flex:none}
+.g-m-form-foot{display:flex;flex-direction:column;gap:10px;margin-top:4px}
+.g-m-sent{gap:12px}
+.g-m-sent-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:8px}
+.g-m-sent-top p{max-width:300px;margin:0}
+.g-m-sent-tick{width:52px;height:52px;border-radius:999px;background:#dcfce7;color:#15803d;display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:700}
+.g-m-details{margin:0;display:flex;flex-direction:column;gap:8px}
+.g-m-detail{display:flex;justify-content:space-between;gap:12px;font-size:13px}
+.g-m-detail dt{color:var(--g-muted)}
+.g-m-detail dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
+.g-m-steps{list-style:none;margin:4px 0;padding:0;display:flex;justify-content:space-between;position:relative}
+.g-m-steps::before{content:"";position:absolute;top:6px;left:12%;right:12%;height:2px;background:var(--g-border)}
+.g-m-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;font-size:12px;color:var(--g-muted)}
+.g-m-step-dot{width:14px;height:14px;border-radius:999px;border:2px solid var(--g-border);background:var(--g-bg);box-sizing:border-box}
+.g-m-step-done{color:var(--g-text);font-weight:600}
+.g-m-step-done .g-m-step-dot{background:var(--g-primary);border-color:var(--g-primary)}
 `;
 
 // src/render-safe.ts
@@ -353,7 +687,10 @@ var ICONS = {
   article: ["M6 3h9l4 4v14H6z", "M9 12h6", "M9 16h6"],
   ask: ["M4 5h16v11H8l-4 4z", "M9 9.5h6", "M9 12.5h4"],
   search: ["M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14z", "m20 20-3.5-3.5"],
-  circle: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"]
+  circle: ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z"],
+  expand: ["M15 3h6v6", "M21 3l-7 7", "M9 21H3v-6", "M3 21l7-7"],
+  flag: ["M5 21V4", "M5 4h12l-2.5 4L17 12H5"],
+  collapse: ["M4 14h6v6", "M3 21l7-7", "M20 10h-6V4", "M21 3l-7 7"]
 };
 function icon(doc, name, cls = "g-m-ico") {
   const svg = doc.createElementNS(SVG_NS, "svg");
@@ -432,6 +769,7 @@ function renderMessenger(options) {
   let current = null;
   const streaming = /* @__PURE__ */ new Map();
   let sending = false;
+  let complaintDraft = emptyComplaintDraft();
   let draft = "";
   let articles = null;
   let articlesLoading = false;
@@ -506,8 +844,38 @@ function renderMessenger(options) {
       options.onOpenChecklist?.(id);
     },
     onArticleView: options.onArticleView,
-    extra: (q) => howToItems(q)
+    extra: (q) => howToItems(q),
+    guides: () => options.guides ?? [],
+    onShowMe: (key) => startWalkthrough(key),
+    onArticleChange: () => syncSize()
   });
+  let docCollapsed = false;
+  let sizeButton = null;
+  const readingDoc = () => open && (view.kind === "howto" || view.kind === "tab" && view.tab === "help" && help.isArticleOpen());
+  function syncSize() {
+    const reading = readingDoc();
+    if (!reading) docCollapsed = false;
+    panel.classList.toggle("g-m-expanded", reading && !docCollapsed);
+    head.classList.toggle("g-m-sizable", reading);
+    if (!reading) {
+      sizeButton?.remove();
+      sizeButton = null;
+      return;
+    }
+    if (!sizeButton) {
+      sizeButton = el(doc, "button", "g-m-size");
+      sizeButton.type = "button";
+      sizeButton.addEventListener("click", () => {
+        docCollapsed = !docCollapsed;
+        syncSize();
+      });
+      head.appendChild(sizeButton);
+    }
+    sizeButton.textContent = "";
+    sizeButton.appendChild(icon(doc, docCollapsed ? "expand" : "collapse"));
+    sizeButton.setAttribute("aria-label", docCollapsed ? "Expand" : "Collapse");
+    sizeButton.title = docCollapsed ? "Expand" : "Collapse";
+  }
   const unreadTotal = () => conversations.reduce((n, c) => n + (c.unread > 0 ? 1 : 0), 0);
   const updateBadge = () => {
     const n = unreadTotal();
@@ -515,7 +883,13 @@ function renderMessenger(options) {
     badge.textContent = n > 9 ? "9+" : String(n);
     launcher.setAttribute("aria-label", n ? `Open ${config.name}, ${n} unread` : `Open ${config.name}`);
   };
-  const upsertConversation = (c) => {
+  const withComplaint = (c) => {
+    if (c.complaint) return c;
+    const known = conversations.find((x) => x.id === c.id)?.complaint ?? (current?.id === c.id ? current.complaint : void 0);
+    return known ? { ...c, complaint: known } : c;
+  };
+  const upsertConversation = (incoming) => {
+    const c = withComplaint(incoming);
     conversations = [c, ...conversations.filter((x) => x.id !== c.id)].sort((a, b) => b.lastMessageAt.localeCompare(a.lastMessageAt));
     if (current?.id === c.id) current = c;
     updateBadge();
@@ -550,15 +924,19 @@ function renderMessenger(options) {
   const pageHowTos = () => (howTos?.forPage ?? []).map((id) => howTos?.howTos.find((h) => h.id === id)).filter((h) => !!h);
   const stepsLabel = (h) => `${h.stepCount} ${h.stepCount === 1 ? "step" : "steps"}`;
   const openHowTo = (id) => go({ kind: "howto", id, from: view });
+  const startWalkthrough = (guideKey) => {
+    setOpen(false);
+    options.onStartGuide?.(guideKey);
+  };
   function howToItems(q) {
-    const list = q ? (howTos?.howTos ?? []).filter((h) => h.title.toLowerCase().includes(q) || h.description.toLowerCase().includes(q)).slice(0, 10) : [];
+    const list = q ? (howTos?.howTos ?? []).filter((h) => matchesHelpQuery(`${h.title} ${h.description}`, q)).slice(0, 10) : [];
     if (!list.length) return [];
     return [
       el(doc, "div", "g-rc-section", `How-tos (${list.length})`),
       ...list.map((h) => {
-        const b = listItem(doc, "\u{1F4CB}", h.title, h.description || stepsLabel(h));
-        b.addEventListener("click", () => openHowTo(h.id));
-        return b;
+        const key = h.guideKey && startableGuide(options.guides, h.guideKey) ? h.guideKey : null;
+        const sub = [h.hasVideo ? "Video" : "", stepsLabel(h)].filter(Boolean).join(" \xB7 ");
+        return resultRow(doc, "\u{1F4CB}", h.title, h.description ? `${sub} \xB7 ${h.description}` : sub, () => openHowTo(h.id), key ? () => startWalkthrough(key) : void 0);
       })
     ];
   }
@@ -570,6 +948,7 @@ function renderMessenger(options) {
   });
   function renderHead(title, back) {
     head.textContent = "";
+    sizeButton = null;
     head.hidden = false;
     if (back) {
       const b = el(doc, "button", "g-m-back");
@@ -609,9 +988,9 @@ function renderMessenger(options) {
       i.appendChild(icon(doc, ico));
       b.append(i, el(doc, "span", "", label));
       if (tab === "news" && latest.some((n) => n.unread)) {
-        const dot = el(doc, "span", "g-m-tab-dot");
-        dot.setAttribute("aria-label", "New");
-        i.appendChild(dot);
+        const dot2 = el(doc, "span", "g-m-tab-dot");
+        dot2.setAttribute("aria-label", "New");
+        i.appendChild(dot2);
       }
       b.addEventListener("click", () => go({ kind: "tab", tab }));
       tabs.appendChild(b);
@@ -625,7 +1004,10 @@ function renderMessenger(options) {
     const text = el(doc, "div", "g-m-grow");
     if (label) text.appendChild(el(doc, "div", "g-m-card-label", label));
     text.append(el(doc, "div", "g-m-card-title g-m-ellipsis", c.subject || "Conversation"), el(doc, "div", "g-m-card-sub g-m-ellipsis", c.lastMessagePreview));
-    row.append(text, el(doc, "span", "g-m-time", relativeTime(c.lastMessageAt)));
+    const side = el(doc, "span", "g-m-side");
+    side.appendChild(el(doc, "span", "g-m-time", relativeTime(c.lastMessageAt)));
+    if (c.complaint) side.appendChild(statusPill(doc, c.complaint.status));
+    row.append(text, side);
     card.appendChild(row);
     card.setAttribute("aria-label", `${label ? `${label}: ` : ""}${c.subject || "Conversation"}${c.unread ? ", unread" : ""}`);
     card.addEventListener("click", () => go({ kind: "thread", conversationId: c.id }));
@@ -836,7 +1218,10 @@ function renderMessenger(options) {
     hello.append(el(doc, "span", "g-m-hello-1", v.firstName ? `Hi ${v.firstName}.` : "Hi there."), el(doc, "span", "g-m-hello-2", "How can we help?"));
     inner.append(top, hello);
     inner.appendChild(actionCard({ title: "Send us a message", sub: messageSub(), trail: true, onClick: () => go({ kind: "thread", conversationId: null }) }));
-    const recent = conversations[0];
+    if (canComplain()) inner.appendChild(actionCard({ title: "File a complaint", sub: "Tell us what went wrong. You'll get a reference.", lead: iconTile("flag"), onClick: () => startComplaint(null), cls: "g-m-complain" }));
+    const filed = latestComplaint();
+    if (filed) inner.appendChild(conversationCard(filed, "Your complaint"));
+    const recent = conversations.find((c) => c.id !== filed?.id);
     if (recent) inner.appendChild(conversationCard(recent, recent.status === "closed" && !recent.unread ? "Recent conversation" : "Continue the conversation"));
     if (config.status) inner.appendChild(statusCard(config.status));
     if (cards.progress) progressCards(v).forEach((c) => inner.appendChild(c));
@@ -861,6 +1246,102 @@ function renderMessenger(options) {
     scroll.append(hero, inner);
     main.appendChild(scroll);
   }
+  const complaintCategories = () => config.complaints?.categories ?? [];
+  const needsEmail = () => visitor().identified === false;
+  const canComplain = () => !!api.fileComplaint && complaintCategories().length > 0 && (!needsEmail() || !!config.complaints?.anonymous);
+  function latestComplaint() {
+    let best = null;
+    for (const c of conversations) if (c.complaint && (!best || c.complaint.createdAt > best.complaint.createdAt)) best = c;
+    return best;
+  }
+  function userMessagesText() {
+    return messages.filter((m) => m.author === "user" && m.body.trim()).slice(-3).map((m) => m.body.trim()).join("\n\n").slice(0, 4e3);
+  }
+  function startComplaint(categoryId) {
+    const cats = complaintCategories();
+    const picked = categoryId ? cats.find((c) => c.id === categoryId) : cats.length === 1 ? cats[0] : void 0;
+    const from = view.kind === "tab" || view.kind === "thread" ? view : { kind: "tab", tab: "home" };
+    complaintDraft = emptyComplaintDraft(complaintDraft.description);
+    if (picked) go({ kind: "complaint-form", categoryId: picked.id, conversationId: null, from });
+    else go({ kind: "complaint-category", conversationId: null, from });
+  }
+  function complaintBanner(c) {
+    const b = el(doc, "div", "g-m-complaint g-m-row g-m-center");
+    b.setAttribute("role", "status");
+    b.appendChild(icon(doc, "flag", "g-m-ico g-m-lead"));
+    const text = el(doc, "span", "g-m-grow");
+    text.append(el(doc, "span", "g-m-card-title", c.reference), el(doc, "span", "g-m-card-sub", c.categoryName));
+    b.append(text, statusPill(doc, c.status));
+    return b;
+  }
+  function renderComplaintCategories(v) {
+    renderHead("File a complaint", () => go(v.from));
+    const scroll = el(doc, "div", "g-m-scroll");
+    scroll.appendChild(categoryList(doc, complaintCategories(), (c) => go({ kind: "complaint-form", categoryId: c.id, conversationId: v.conversationId, from: v.from })));
+    main.appendChild(scroll);
+  }
+  function renderComplaintForm(v) {
+    const category = complaintCategories().find((c) => c.id === v.categoryId);
+    if (!category) return go({ kind: "complaint-category", conversationId: v.conversationId, from: v.from });
+    const back = () => complaintCategories().length > 1 && !v.conversationId ? go({ kind: "complaint-category", conversationId: v.conversationId, from: v.from }) : go(v.from);
+    renderHead("File a complaint", back);
+    const scroll = el(doc, "div", "g-m-scroll");
+    const draft2 = complaintDraft;
+    scroll.appendChild(
+      complaintForm(doc, {
+        category,
+        draft: draft2,
+        needsEmail: needsEmail(),
+        canChangeCategory: complaintCategories().length > 1,
+        onChangeCategory: () => go({ kind: "complaint-category", conversationId: v.conversationId, from: v.from }),
+        onPickFile: (file) => {
+          draft2.error = null;
+          readScreenshot(doc, file).then((a) => draft2.attachment = a).catch((e) => draft2.error = e instanceof Error ? e.message : "That image couldn't be attached.").finally(() => {
+            if (view === v) render();
+          });
+        },
+        onRemoveFile: () => {
+          draft2.attachment = null;
+          render();
+        },
+        onSubmit: () => submitComplaint(v, category)
+      })
+    );
+    main.appendChild(scroll);
+  }
+  function submitComplaint(v, category) {
+    const draft2 = complaintDraft;
+    const problem = complaintProblem(category, draft2, needsEmail());
+    draft2.checked = true;
+    draft2.error = problem;
+    if (problem || !api.fileComplaint) return render();
+    draft2.sending = true;
+    render();
+    const answers = complaintAnswers(category, draft2);
+    api.fileComplaint({
+      categoryId: category.id,
+      description: draft2.description.trim(),
+      answers,
+      email: needsEmail() ? draft2.email.trim() : null,
+      conversationId: v.conversationId,
+      attachment: draft2.attachment ? { fileName: draft2.attachment.fileName, data: draft2.attachment.data } : null
+    }).then((res) => {
+      upsertConversation({ ...res.conversation, unread: 0 });
+      complaintDraft = emptyComplaintDraft();
+      const labels = category.fields.filter((f) => answers[f.id]).map((f) => [f.label, answers[f.id]]);
+      if (view === v) go({ kind: "complaint-sent", complaint: res.complaint, conversationId: res.conversation.id, answers: labels });
+    }).catch((e) => {
+      draft2.sending = false;
+      draft2.error = (e instanceof Error && e.message ? e.message : "Your complaint couldn't be sent.").replace(/^[\w.]+: /, "");
+      if (view === v) render();
+    });
+  }
+  function renderComplaintSent(v) {
+    renderHead(v.complaint.reference, () => go({ kind: "tab", tab: "home" }));
+    const scroll = el(doc, "div", "g-m-scroll");
+    scroll.appendChild(complaintSent(doc, { complaint: v.complaint, answers: v.answers, onOpenConversation: () => go({ kind: "thread", conversationId: v.conversationId }), onHome: () => go({ kind: "tab", tab: "home" }) }));
+    main.appendChild(scroll);
+  }
   function renderHowToView(id, from) {
     const cached = howToCache.get(id);
     renderHead(cached?.title ?? "How-to", () => go(from));
@@ -973,8 +1454,20 @@ function renderMessenger(options) {
     if (m.status === "pending") bubble.setAttribute("aria-busy", "true");
     bubble.dataset.messageId = m.id;
     wrap.appendChild(bubble);
-    if (m.citations.length || m.suggestedGuides.length || m.howTos?.length) {
+    const offer = m.complaintOffer && canComplain() ? complaintCategories().find((c) => c.id === m.complaintOffer.categoryId) : void 0;
+    if (m.citations.length || m.suggestedGuides.length || m.howTos?.length || offer) {
       const chips = el(doc, "div", "g-m-chips");
+      if (offer) {
+        const b = el(doc, "button", "g-m-chip g-m-guide g-m-offer");
+        b.type = "button";
+        b.append(icon(doc, "flag", "g-m-ico g-m-chip-ico"), el(doc, "span", "", `File a complaint \xB7 ${offer.name}`));
+        b.addEventListener("click", () => {
+          const conversationId = current?.id ?? null;
+          complaintDraft = emptyComplaintDraft(userMessagesText());
+          go({ kind: "complaint-form", categoryId: offer.id, conversationId, from: view });
+        });
+        chips.appendChild(b);
+      }
       for (const g of m.suggestedGuides) {
         const b = el(doc, "button", "g-m-chip g-m-guide", `\u25B6 Show me: ${g.name}`);
         b.type = "button";
@@ -1004,6 +1497,7 @@ function renderMessenger(options) {
     if (!log) return;
     const atBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 40;
     log.textContent = "";
+    if (current?.complaint) log.appendChild(complaintBanner(current.complaint));
     if (!messages.length) {
       const v = visitor();
       const label = v.path ? pageLabel(v.path) : null;
@@ -1123,6 +1617,9 @@ function renderMessenger(options) {
     sendButton = null;
     if (view.kind === "thread") renderThread(view.conversationId);
     else if (view.kind === "howto") renderHowToView(view.id, view.from);
+    else if (view.kind === "complaint-category") renderComplaintCategories(view);
+    else if (view.kind === "complaint-form") renderComplaintForm(view);
+    else if (view.kind === "complaint-sent") renderComplaintSent(view);
     else if (view.tab === "home") renderHome();
     else if (view.tab === "messages") renderMessagesTab();
     else if (view.tab === "news" && news().length) renderNewsTab();
@@ -1131,6 +1628,7 @@ function renderMessenger(options) {
       renderHome();
     } else renderHelpTab();
     renderTabs();
+    syncSize();
   }
   const handlers = (seq) => ({
     onConversation(c) {
@@ -1159,8 +1657,8 @@ function renderMessenger(options) {
         upsertMessage(m);
         options.onMessage?.(m, c);
       }
-      upsertConversation({ ...c, unread: 0 });
-      current = { ...c, unread: 0 };
+      current = withComplaint({ ...c, unread: 0 });
+      upsertConversation(current);
     },
     onError() {
     }
@@ -1213,8 +1711,8 @@ function renderMessenger(options) {
         return !prev || prev.status !== m.status || prev.body !== m.body;
       });
       res.messages.forEach(upsertMessage);
-      upsertConversation({ ...res.conversation, unread: 0 });
-      current = { ...res.conversation, unread: 0 };
+      current = withComplaint({ ...res.conversation, unread: 0 });
+      upsertConversation(current);
       if (changed || messages.length !== before) {
         renderLog();
         res.messages.filter((m) => m.author !== "user").forEach((m) => options.onMessage?.(m, res.conversation));
@@ -1240,7 +1738,7 @@ function renderMessenger(options) {
         api.loadMessages(next.conversationId).then((res) => {
           if (seq !== threadSeq) return;
           res.messages.forEach(upsertMessage);
-          current = { ...res.conversation, unread: 0 };
+          current = withComplaint({ ...res.conversation, unread: 0 });
           upsertConversation(current);
           renderHead(current.subject || "Conversation", () => go({ kind: "tab", tab: "messages" }));
           renderLog();
@@ -1278,6 +1776,7 @@ function renderMessenger(options) {
     } else {
       if (threadTimer) clearTimeout(threadTimer);
       threadTimer = null;
+      syncSize();
       options.onClose?.();
     }
   };
@@ -1315,6 +1814,11 @@ function renderMessenger(options) {
       setOpen(true);
       openArticle(id);
     },
+    openComplaint(categoryId) {
+      if (!canComplain()) return;
+      setOpen(true);
+      startComplaint(categoryId ?? null);
+    },
     refresh() {
       if (destroyed) return;
       if (!open) {