@lightworkai.official/debug-capture 0.12.8 → 0.13.0

package/src/requests.ts

@@ -0,0 +1,106 @@
+/**
+ * ขอให้ทีมดำเนินการ — asking the team for something, from the app.
+ *
+ * A report is "something broke": it carries a screenshot and the page's logs,
+ * because those are what make it reproducible. A request is "please do this"
+ * — reset my password, give me access — and nothing about the screen helps,
+ * so it asks for no screen share and sends no bundle. The desk decides what
+ * may be asked (its request types opened to reporters, GET
+ * /ingest/request-types); where it opens none, the widget is exactly what it
+ * was.
+ *
+ * Read AHEAD of a launch, not at it: `getDisplayMedia` must be called inside
+ * the click that opened the widget, so a launch cannot wait on the network to
+ * find out whether to ask "report or request?" first. Installing the widget
+ * starts the read; a launch uses whatever has arrived.
+ */
+import { getConfig, appInfo, resolveModule } from "./config";
+import { failureOf, identityHeader, ReportError, type FiledTicket } from "./submit";
+
+export interface RequestTypeOption {
+  id: string;
+  name: string;
+  description: string;
+  /** How long the team means to take, in hours — null when it has not said. */
+  targetHours: number | null;
+}
+
+let known: RequestTypeOption[] | null = null;
+let reading: Promise<RequestTypeOption[]> | null = null;
+
+const hostOf = () => getConfig().host.replace(/\/$/, "");
+
+/** What the desk opens to its reporters, as far as is known right now — null before the first read lands. */
+export function requestTypesNow(): RequestTypeOption[] | null {
+  return known;
+}
+
+/**
+ * Ask the desk once. Never throws: a desk that answers nothing useful — an
+ * older one without the endpoint (404), a network blip — offers nothing, and
+ * the widget stays a report button.
+ */
+export function loadRequestTypes(): Promise<RequestTypeOption[]> {
+  if (reading) return reading;
+  reading = (async () => {
+    try {
+      const res = await fetch(`${hostOf()}/ingest/request-types`, { headers: { "x-realm-key": getConfig().realmKey } });
+      const body = res.ok ? ((await res.json()) as { types?: unknown }) : null;
+      known = Array.isArray(body?.types) ? body.types.filter(isOption) : [];
+    } catch {
+      known = [];
+      // A failed read may be tried again on the next launch.
+      reading = null;
+    }
+    return known ?? [];
+  })();
+  return reading;
+}
+
+function isOption(t: unknown): t is RequestTypeOption {
+  const o = t as Partial<RequestTypeOption> | null;
+  return !!o && typeof o.id === "string" && typeof o.name === "string";
+}
+
+/** Forget what was read — for tests, and for a host that changes realm. */
+export function resetRequestTypes(): void {
+  known = null;
+  reading = null;
+}
+
+/**
+ * Send a request. The same door as a report (POST /ingest/tickets), with the
+ * type it asks for — the desk starts its steps and never folds two people's
+ * same request into one. Who is asking comes from the identity token when the
+ * host has one, as for a report.
+ */
+export async function submitRequest(input: { ticketTypeId: string; title: string; description: string }): Promise<FiledTicket> {
+  const config = getConfig();
+  let user: { email?: string | null; fullName?: string | null } = {};
+  try {
+    user = config.user?.() ?? {};
+  } catch {
+    user = {};
+  }
+  const here = typeof window === "undefined" ? null : window.location;
+  const body = {
+    title: input.title,
+    description: input.description.trim() || undefined,
+    ticketTypeId: input.ticketTypeId,
+    appName: appInfo().name,
+    category: here ? resolveModule(here.pathname)?.label : undefined,
+    routeUrl: here?.href,
+    priority: "MEDIUM",
+    requesterEmail: user.email ?? undefined,
+    requesterName: user.fullName ?? undefined,
+  };
+  const res = await fetch(`${hostOf()}/ingest/tickets`, {
+    method: "POST",
+    headers: { "content-type": "application/json", "x-realm-key": config.realmKey, ...(await identityHeader()) },
+    body: JSON.stringify(body),
+  }).catch(() => {
+    throw new ReportError("request never left the browser", "offline");
+  });
+  if (!res.ok) throw await failureOf(res);
+  return (await res.json()) as FiledTicket;
+}

package/src/submit.ts

@@ -76,7 +76,7 @@ export function bundleAttachment(bundle: DebugBundle): { dataUri: string; filena
  * endpoint is having a bad day — a bug report is the last thing that should
  * fail because of a side quest.
  */
-async function identityHeader(): Promise<Record<string, string>> {
+export async function identityHeader(): Promise<Record<string, string>> {
   const provider = getConfig().identity;
   if (!provider) return {};
   try {
@@ -220,20 +220,23 @@ export async function submitBundle(title: string, bundle: DebugBundle): Promise<
     throw new ReportError("report never left the browser", "offline");
   });
 
-  if (!res.ok) {
-    // The ingest endpoint answers 429 with a retry-after; anything else carries
-    // an { error } body. Surface whichever it is — "failed" alone sends someone
-    // reading a network tab they may not be able to open.
-    const retryAfter = res.headers.get("retry-after");
-    const detail = await res
-      .json()
-      .then((b: { error?: string }) => b.error)
-      .catch(() => null);
-    if (res.status === 429) throw new ReportError("rate limited", "rateLimited", retryAfter ?? undefined);
-    // 502/503/504 come from whatever is in front of the desk while it is being
-    // replaced, and the body is that thing's error page, not a sentence for us.
-    if (UNAVAILABLE.has(res.status)) throw new ReportError("desk unavailable", "unavailable");
-    throw new ReportError(detail ?? `Report failed (${res.status})`, "rejected", undefined, res.status);
-  }
+  if (!res.ok) throw await failureOf(res);
   return (await res.json()) as FiledTicket;
 }
+
+/** The send that did not go through, as one of the four failures — shared with a request's send (requests.ts). */
+export async function failureOf(res: Response): Promise<ReportError> {
+  // The ingest endpoint answers 429 with a retry-after; anything else carries
+  // an { error } body. Surface whichever it is — "failed" alone sends someone
+  // reading a network tab they may not be able to open.
+  const retryAfter = res.headers.get("retry-after");
+  const detail = await res
+    .json()
+    .then((b: { error?: string }) => b.error)
+    .catch(() => null);
+  if (res.status === 429) return new ReportError("rate limited", "rateLimited", retryAfter ?? undefined);
+  // 502/503/504 come from whatever is in front of the desk while it is being
+  // replaced, and the body is that thing's error page, not a sentence for us.
+  if (UNAVAILABLE.has(res.status)) return new ReportError("desk unavailable", "unavailable");
+  return new ReportError(detail ?? `Report failed (${res.status})`, "rejected", undefined, res.status);
+}

package/src/ui/element.ts

@@ -13,6 +13,7 @@ import { buildBundle } from "../bundle";
 import { getConfig } from "../config";
 import { onLaunch } from "../reporter";
 import { captureScreen } from "../screenshot";
+import { loadRequestTypes, requestTypesNow, submitRequest, type RequestTypeOption } from "../requests";
 import { ReportError, submitBundle } from "../submit";
 import type { DebugBundle, DebugReason, ErroredQuery } from "../types";
 import { createAnnotator, type Annotator, type AnnotatorTool } from "./annotator";
@@ -120,6 +121,26 @@ function createReporterClass(): CustomElementConstructor {
       this.busy = true;
       const t = strings(getConfig().locale);
 
+      /*
+       * Pressed by hand, on a desk that takes requests from its reporters:
+       * ask first whether this is a problem or a request. Read from what is
+       * already known — waiting on the network here would spend the click the
+       * screen share needs; a read not landed yet is the old dialog, and the
+       * next press will have it.
+       */
+      if (reason.type === "manual") {
+        const asks = requestTypesNow();
+        if (asks?.length) {
+          this.renderChooser(t, reason, asks);
+          return;
+        }
+        if (asks === null) void loadRequestTypes();
+      }
+      await this.report(reason, t);
+    }
+
+    /** A report: the screen first, then the form — see open(). Called inside a click, with nothing awaited before the capture. */
+    private async report(reason: DebugReason, t: Strings): Promise<void> {
       /*
        * Capture BEFORE anything of ours is on screen.
        *
@@ -147,6 +168,108 @@ function createReporterClass(): CustomElementConstructor {
       this.renderForm(t);
     }
 
+    /** แจ้งปัญหา or ขอให้ทีมดำเนินการ — two cards, nothing else. */
+    private renderChooser(t: Strings, reason: DebugReason, types: RequestTypeOption[]): void {
+      const panel = this.shell(t);
+      panel.classList.add("narrow");
+      panel.setAttribute("aria-label", t.chooseTitle);
+      const head = el("div", "head");
+      const closeBtn = button("✕", "icon");
+      closeBtn.setAttribute("aria-label", t.close);
+      closeBtn.addEventListener("click", () => this.close());
+      head.append(el("h2", "", t.chooseTitle), closeBtn);
+
+      const problem = choice(t.chooseProblem, t.chooseProblemHint);
+      problem.dataset.choose = "problem";
+      // Our own dialog leaves the screen before the share starts, or it is in the picture.
+      problem.addEventListener("click", () => {
+        this.root.replaceChildren();
+        void this.report(reason, t);
+      });
+      const ask = choice(t.chooseRequest, t.chooseRequestHint);
+      ask.dataset.choose = "request";
+      ask.addEventListener("click", () => this.renderRequestForm(t, reason, types));
+
+      const choices = el("div", "choices");
+      choices.append(problem, ask);
+      panel.append(head, choices);
+      problem.focus();
+    }
+
+    /** A request: what is asked for, a subject, a line or two — no screenshot, no logs. */
+    private renderRequestForm(t: Strings, reason: DebugReason, types: RequestTypeOption[]): void {
+      const panel = this.shell(t);
+      panel.classList.add("narrow");
+      panel.setAttribute("aria-label", t.requestTitle);
+      const head = el("div", "head");
+      const closeBtn = button("✕", "icon");
+      closeBtn.setAttribute("aria-label", t.close);
+      closeBtn.addEventListener("click", () => this.close());
+      head.append(el("h2", "", t.requestTitle), closeBtn);
+
+      let chosen: RequestTypeOption = types[0]!;
+      const about = el("p", "status", "");
+      const describe = () => {
+        const parts = [chosen.description, chosen.targetHours ? t.requestTarget.replace("{time}", hoursWords(t, chosen.targetHours)) : ""].filter(Boolean);
+        about.textContent = parts.join(" · ");
+      };
+      const typeRow: HTMLElement[] = [labelFor(t.requestTypeLabel, "", true)];
+      if (types.length > 1) {
+        const select = document.createElement("select");
+        select.dataset.requestType = "";
+        for (const option of types) {
+          const o = document.createElement("option");
+          o.value = option.id;
+          o.textContent = option.name;
+          select.append(o);
+        }
+        select.addEventListener("change", () => {
+          chosen = types.find((x) => x.id === select.value) ?? chosen;
+          describe();
+        });
+        typeRow.push(select);
+      } else typeRow.push(el("p", "ask-type", chosen.name));
+      describe();
+
+      const summary = document.createElement("input");
+      summary.type = "text";
+      summary.placeholder = t.requestSummaryPlaceholder;
+      summary.maxLength = 300;
+      const detail = document.createElement("textarea");
+      detail.placeholder = t.requestDetailPlaceholder;
+
+      const status = el("p", "status", "");
+      const submitBtn = button(t.requestSubmit, "primary");
+      submitBtn.disabled = true;
+      summary.addEventListener("input", () => {
+        submitBtn.disabled = summary.value.trim().length === 0;
+      });
+      const back = button(t.back);
+      back.addEventListener("click", () => this.renderChooser(t, reason, types));
+      const foot = el("div", "foot");
+      foot.append(back, status, el("span", "grow"), submitBtn);
+      panel.append(head, ...typeRow, about, labelFor(t.requestSummaryLabel, "", true), summary, labelFor(t.requestDetailLabel), detail, foot);
+
+      submitBtn.addEventListener("click", async () => {
+        submitBtn.disabled = true;
+        status.dataset.tone = "";
+        status.textContent = t.submitting;
+        try {
+          const filed = await submitRequest({ ticketTypeId: chosen.id, title: summary.value.trim(), description: detail.value });
+          const announced = this.dispatchEvent(new CustomEvent("lw-request-submitted", { detail: filed, bubbles: true, composed: true, cancelable: true }));
+          this.close();
+          if (announced) showToast(`${t.requestSubmitted} — #${filed.number}`, "success");
+        } catch (error) {
+          const message = failureMessage(error, t);
+          status.dataset.tone = "error";
+          status.textContent = message;
+          showToast(message, "error");
+          submitBtn.disabled = false;
+        }
+      });
+      summary.focus();
+    }
+
     private close(): void {
       this.annotator?.destroy();
       this.annotator = null;
@@ -360,6 +483,22 @@ function el(tag: string, className = "", text = ""): HTMLElement {
   return node;
 }
 
+/** "3 วัน" or "4 ชั่วโมง" — the way the desk's setting offers it. */
+function hoursWords(t: Strings, h: number): string {
+  return h >= 24 && h % 24 === 0 ? t.days.replace("{n}", String(h / 24)) : t.hours.replace("{n}", String(h));
+}
+
+/** A card of a choice: its name, and a line under it. */
+function choice(title: string, hint: string): HTMLButtonElement {
+  const node = button("", "choice");
+  const b = document.createElement("b");
+  b.textContent = title;
+  const span = document.createElement("span");
+  span.textContent = hint;
+  node.append(b, span);
+  return node;
+}
+
 function button(text: string, className = ""): HTMLButtonElement {
   const node = document.createElement("button");
   node.type = "button";

package/src/ui/strings.ts

@@ -64,6 +64,29 @@ export interface Strings {
   handoffFailed: string;
   handoffBlocked: string;
   handoffOpen: string;
+  /*
+   * ขอให้ทีมดำเนินการ — offered beside แจ้งปัญหา when the desk opens request
+   * types to its reporters (requests.ts). A request asks for no screenshot.
+   */
+  chooseTitle: string;
+  chooseProblem: string;
+  chooseProblemHint: string;
+  chooseRequest: string;
+  chooseRequestHint: string;
+  requestTitle: string;
+  requestTypeLabel: string;
+  /** Carries `{time}`. */
+  requestTarget: string;
+  requestSummaryLabel: string;
+  requestSummaryPlaceholder: string;
+  requestDetailLabel: string;
+  requestDetailPlaceholder: string;
+  requestSubmit: string;
+  requestSubmitted: string;
+  back: string;
+  /** Carry `{n}`. */
+  days: string;
+  hours: string;
 }
 
 const th: Strings = {
@@ -109,6 +132,23 @@ const th: Strings = {
   handoffFailed: "เปิดรายการที่แจ้งไว้ไม่สำเร็จ",
   handoffBlocked: "เบราว์เซอร์บล็อกการเปิดแท็บใหม่",
   handoffOpen: "เปิดในแท็บใหม่",
+  chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
+  chooseProblem: "แจ้งปัญหา",
+  chooseProblemHint: "มีอะไรเสียหรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
+  chooseRequest: "ขอให้ทีมดำเนินการ",
+  chooseRequestHint: "ขอสิทธิ์ ขอแก้ข้อมูล หรือขอให้ทีมทำบางอย่าง",
+  requestTitle: "ขอให้ทีมดำเนินการ",
+  requestTypeLabel: "เรื่องที่ขอ",
+  requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
+  requestSummaryLabel: "หัวข้อ",
+  requestSummaryPlaceholder: "ขออะไร — สั้น ๆ",
+  requestDetailLabel: "รายละเอียด (ไม่บังคับ)",
+  requestDetailPlaceholder: "สิ่งที่ทีมต้องรู้เพื่อดำเนินการ",
+  requestSubmit: "ส่งคำขอ",
+  requestSubmitted: "ส่งคำขอแล้ว",
+  back: "ย้อนกลับ",
+  days: "{n} วัน",
+  hours: "{n} ชั่วโมง",
 };
 
 const en: Strings = {
@@ -154,6 +194,23 @@ const en: Strings = {
   handoffFailed: "Could not open your reports",
   handoffBlocked: "Your browser blocked the new tab",
   handoffOpen: "Open in a new tab",
+  chooseTitle: "How can the team help?",
+  chooseProblem: "Report a problem",
+  chooseProblemHint: "Something is broken or not working — with a screenshot",
+  chooseRequest: "Ask the team",
+  chooseRequestHint: "Access, a data change, or something done for you",
+  requestTitle: "Ask the team",
+  requestTypeLabel: "What you need",
+  requestTarget: "The team aims to finish within {time}",
+  requestSummaryLabel: "Subject",
+  requestSummaryPlaceholder: "What do you need — briefly",
+  requestDetailLabel: "Details (optional)",
+  requestDetailPlaceholder: "What the team needs to know to do it",
+  requestSubmit: "Send request",
+  requestSubmitted: "Request sent",
+  back: "Back",
+  days: "{n} days",
+  hours: "{n} hours",
 };
 
 export function strings(locale: "th" | "en" | undefined): Strings {

package/src/ui/styles.ts

@@ -34,11 +34,11 @@ h2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }
 label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
 .req { color: #dc2626; }
 .hint { font-weight: 400; color: #64748b; }
-input[type="text"], textarea {
+input[type="text"], textarea, select {
   width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
   border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;
 }
-input[type="text"]:focus, textarea:focus {
+input[type="text"]:focus, textarea:focus, select:focus {
   outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
 }
 textarea { min-height: 88px; resize: vertical; }
@@ -93,4 +93,17 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
   border-radius: 0 0 16px 16px;
 }
 .foot .grow { flex: 1; }
+
+/* ขอให้ทีมดำเนินการ: the chooser and the request form — a smaller dialog, no image in it. */
+.panel.narrow { width: min(560px, 100%); }
+.choices { display: grid; gap: 10px; padding-bottom: 24px; }
+button.choice {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+  width: 100%; padding: 14px 16px; text-align: left; border-radius: 12px;
+}
+button.choice b { font-size: 15px; font-weight: 600; }
+button.choice span { font-size: 13px; font-weight: 400; color: #64748b; }
+button.choice:focus-visible { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
+.panel.narrow p { margin: 0; }
+.ask-type { font-size: 14px; font-weight: 600; margin-top: -8px; }
 `;