@lightworkai.official/debug-capture 0.12.7 → 0.13.0

package/dist/ui/strings.d.ts

@@ -64,5 +64,24 @@ export interface Strings {
     handoffFailed: string;
     handoffBlocked: string;
     handoffOpen: string;
+    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;
 }
 export declare function strings(locale: "th" | "en" | undefined): Strings;

package/dist/ui/styles.d.ts

@@ -10,4 +10,4 @@
  * Everything is explicit for the same reason: the host's `body` font and colours
  * do not inherit past the boundary, so stating them is not belt-and-braces.
  */
-export declare const CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n\n.backdrop {\n  position: fixed; inset: 0; z-index: 2147483000;\n  display: flex; align-items: center; justify-content: center;\n  padding: 24px; background: rgba(15, 23, 42, 0.55);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans Thai\", sans-serif;\n  color: #0f172a;\n}\n.panel {\n  display: flex; flex-direction: column; gap: 16px;\n  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;\n  /* No bottom padding: the footer supplies its own and sits flush, so it can\n     stick to the panel's edge without a gap under it. */\n  padding: 24px 24px 0; border-radius: 16px; background: #fff;\n  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);\n}\n.head { display: flex; align-items: flex-start; gap: 12px; }\nh2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }\nlabel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }\n.req { color: #dc2626; }\n.hint { font-weight: 400; color: #64748b; }\ninput[type=\"text\"], textarea {\n  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\ninput[type=\"text\"]:focus, textarea:focus {\n  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);\n}\ntextarea { min-height: 88px; resize: vertical; }\n\n.meta {\n  padding: 12px 14px; border-radius: 10px; background: #f8fafc;\n  font-size: 13px; line-height: 1.7; color: #475569; word-break: break-all;\n}\n.meta b { color: #0f172a; font-weight: 600; }\n\n.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }\nbutton {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\nbutton:hover:not(:disabled) { background: #f1f5f9; }\nbutton:disabled { opacity: 0.5; cursor: not-allowed; }\nbutton[aria-pressed=\"true\"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }\nbutton.primary { background: #2563eb; border-color: #2563eb; color: #fff; }\nbutton.primary:hover:not(:disabled) { background: #1d4ed8; }\nbutton.icon { padding: 6px 10px; border-color: transparent; font-size: 18px; line-height: 1; }\n\n/* The on-image text editor. Absolutely placed over the canvas and matched to\n   the shape it becomes \u2014 same weight, same red, same white plate \u2014 so what you\n   type is what gets drawn, at the position you clicked. Sized in JS, because\n   the font size tracks the image's own scale. */\n.text-edit {\n  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;\n  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;\n  color: #e11d48; background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed #e11d48; border-radius: 4px; outline: none;\n  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);\n}\n.text-edit::placeholder { color: rgba(225, 29, 72, 0.45); }\n\ncanvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 10px; touch-action: none; }\n.shot { position: relative; }\n.status { font-size: 13px; color: #64748b; }\n.status[data-tone=\"error\"] { color: #dc2626; }\n/* Pinned to the bottom of the scrolling panel.\n   A screenshot is tall \u2014 often taller than the viewport \u2014 so \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 sat\n   below the fold and the last step of filing a report was \"scroll to the end\n   and find the button\". Sticky, with its own ground and a rule above it so the\n   annotated image scrolls underneath rather than bleeding into it. */\n.foot {\n  position: sticky; bottom: 0; z-index: 3;\n  display: flex; align-items: center; gap: 12px;\n  margin: 4px -24px 0; padding: 12px 24px;\n  background: #fff; border-top: 1px solid #e2e8f0;\n  border-radius: 0 0 16px 16px;\n}\n.foot .grow { flex: 1; }\n";
+export declare const CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n\n.backdrop {\n  position: fixed; inset: 0; z-index: 2147483000;\n  display: flex; align-items: center; justify-content: center;\n  padding: 24px; background: rgba(15, 23, 42, 0.55);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans Thai\", sans-serif;\n  color: #0f172a;\n}\n.panel {\n  display: flex; flex-direction: column; gap: 16px;\n  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;\n  /* No bottom padding: the footer supplies its own and sits flush, so it can\n     stick to the panel's edge without a gap under it. */\n  padding: 24px 24px 0; border-radius: 16px; background: #fff;\n  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);\n}\n.head { display: flex; align-items: flex-start; gap: 12px; }\nh2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }\nlabel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }\n.req { color: #dc2626; }\n.hint { font-weight: 400; color: #64748b; }\ninput[type=\"text\"], textarea, select {\n  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\ninput[type=\"text\"]:focus, textarea:focus, select:focus {\n  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);\n}\ntextarea { min-height: 88px; resize: vertical; }\n\n.meta {\n  padding: 12px 14px; border-radius: 10px; background: #f8fafc;\n  font-size: 13px; line-height: 1.7; color: #475569; word-break: break-all;\n}\n.meta b { color: #0f172a; font-weight: 600; }\n\n.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }\nbutton {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\nbutton:hover:not(:disabled) { background: #f1f5f9; }\nbutton:disabled { opacity: 0.5; cursor: not-allowed; }\nbutton[aria-pressed=\"true\"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }\nbutton.primary { background: #2563eb; border-color: #2563eb; color: #fff; }\nbutton.primary:hover:not(:disabled) { background: #1d4ed8; }\nbutton.icon { padding: 6px 10px; border-color: transparent; font-size: 18px; line-height: 1; }\n\n/* The on-image text editor. Absolutely placed over the canvas and matched to\n   the shape it becomes \u2014 same weight, same red, same white plate \u2014 so what you\n   type is what gets drawn, at the position you clicked. Sized in JS, because\n   the font size tracks the image's own scale. */\n.text-edit {\n  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;\n  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;\n  color: #e11d48; background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed #e11d48; border-radius: 4px; outline: none;\n  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);\n}\n.text-edit::placeholder { color: rgba(225, 29, 72, 0.45); }\n\ncanvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 10px; touch-action: none; }\n.shot { position: relative; }\n.status { font-size: 13px; color: #64748b; }\n.status[data-tone=\"error\"] { color: #dc2626; }\n/* Pinned to the bottom of the scrolling panel.\n   A screenshot is tall \u2014 often taller than the viewport \u2014 so \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 sat\n   below the fold and the last step of filing a report was \"scroll to the end\n   and find the button\". Sticky, with its own ground and a rule above it so the\n   annotated image scrolls underneath rather than bleeding into it. */\n.foot {\n  position: sticky; bottom: 0; z-index: 3;\n  display: flex; align-items: center; gap: 12px;\n  margin: 4px -24px 0; padding: 12px 24px;\n  background: #fff; border-top: 1px solid #e2e8f0;\n  border-radius: 0 0 16px 16px;\n}\n.foot .grow { flex: 1; }\n\n/* \u0E02\u0E2D\u0E43\u0E2B\u0E49\u0E17\u0E35\u0E21\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23: the chooser and the request form \u2014 a smaller dialog, no image in it. */\n.panel.narrow { width: min(560px, 100%); }\n.choices { display: grid; gap: 10px; padding-bottom: 24px; }\nbutton.choice {\n  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;\n  width: 100%; padding: 14px 16px; text-align: left; border-radius: 12px;\n}\nbutton.choice b { font-size: 15px; font-weight: 600; }\nbutton.choice span { font-size: 13px; font-weight: 400; color: #64748b; }\nbutton.choice:focus-visible { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }\n.panel.narrow p { margin: 0; }\n.ask-type { font-size: 14px; font-weight: 600; margin-top: -8px; }\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.12.7",
+  "version": "0.13.0",
   "description": "Report-a-problem widget: rolling network/console/action capture, optional rrweb session replay, annotated screenshot, and submission to a Lightwork Support host",
   "type": "module",
   "module": "./dist/index.mjs",

package/src/embed.ts

@@ -66,7 +66,13 @@ if (data.host && data.realmKey) {
     locale: data.locale === "en" ? "en" : "th",
     ...(data.replay !== undefined ? { replay: { seconds: Number(data.replay) || undefined } } : {}),
   });
-  installDebugCapture();
+  /*
+   * In <head>, the script runs before there is a <body> — and installing then
+   * threw on the first observer set on it, so the page had no reporter and no
+   * `lwReportProblem` either. Wait for the document when it is not there yet.
+   */
+  if (document.body) installDebugCapture();
+  else document.addEventListener("DOMContentLoaded", () => installDebugCapture(), { once: true });
 }
 
 // The only handle a no-bundler page gets. Call it from a button's onclick —

package/src/index.ts

@@ -22,6 +22,8 @@ export { launch, onLaunch, onCrash, emitCrash } from "./reporter";
 export { buildBundle, bundleToMarkdown, hasCause, bundleFileName, toCurl } from "./bundle";
 export { submitBundle } from "./submit";
 export type { FiledTicket } from "./submit";
+export { loadRequestTypes, requestTypesNow, submitRequest } from "./requests";
+export type { RequestTypeOption } from "./requests";
 export { errorSignature } from "./signature";
 export { trimToBudget, BUNDLE_BUDGET_BYTES } from "./budget";
 export { captureScreen } from "./screenshot";

package/src/install.ts

@@ -13,6 +13,7 @@ import { launch, onCrash } from "./reporter";
 import { strings } from "./ui/strings";
 import { showToast } from "./ui/toast";
 import { defineReporterElement, REPORTER_TAG } from "./ui/element";
+import { loadRequestTypes } from "./requests";
 
 let armed = false;
 
@@ -59,4 +60,13 @@ export function installDebugCapture(options: InstallOptions = {}): void {
   if (!document.querySelector(REPORTER_TAG)) {
     document.body.append(document.createElement(REPORTER_TAG));
   }
+
+  /*
+   * What the desk opens to its reporters, read once the page has settled —
+   * so a press of the button can offer ขอให้ทีมดำเนินการ without waiting
+   * (requests.ts). Late on purpose: it is never what the page came for.
+   */
+  const idle = (window as Window & { requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number }).requestIdleCallback;
+  if (idle) idle(() => void loadRequestTypes(), { timeout: 5000 });
+  else setTimeout(() => void loadRequestTypes(), 2000);
 }

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/server.ts

@@ -17,12 +17,56 @@
  */
 import { createHmac, randomUUID } from "node:crypto";
 
+/**
+ * One fact about a person's WORK, as the host knows it — their unit, their
+ * position — with the host's own label for it. The support desk shows these
+ * beside the person's name and records them with what the person does (an
+ * event registration takes them as its own), so nobody types their unit into
+ * a form the host could have filled.
+ *
+ * `key` is stable across people (it names a column in an export); `label` is
+ * what a person reads, in the host's language. Order matters: the first is
+ * the one drawn under a name.
+ */
+export interface SupportProfileFact {
+  key: string;
+  label: string;
+  value: string;
+}
+
 /** Whoever the host has authenticated. Email is the account key. */
 export interface SupportUser {
   /** The host's own id for this person, recorded so a changed email still matches. */
   id?: string | null;
   email: string;
   name?: string | null;
+  /** What the host knows about their work — most important first. Optional; bounded on the way in. */
+  profile?: SupportProfileFact[] | null;
+}
+
+/** How much of a profile rides in a token. It travels in a URL, so it is small on purpose. */
+export const PROFILE_MAX_FACTS = 10;
+const PROFILE_KEY = /^[a-z][a-z0-9_]{0,31}$/;
+
+/**
+ * A profile made safe to sign: known shape, stable keys, trimmed, bounded.
+ * A fact with no value is left out (an empty unit is not a unit). Null when
+ * there is nothing to say — the support side then keeps what it had.
+ */
+export function cleanProfile(profile: SupportProfileFact[] | null | undefined): SupportProfileFact[] | null {
+  if (!Array.isArray(profile)) return null;
+  const out: SupportProfileFact[] = [];
+  const seen = new Set<string>();
+  for (const f of profile) {
+    const key = typeof f?.key === "string" ? f.key.trim() : "";
+    const value = typeof f?.value === "string" ? f.value.trim() : "";
+    if (!PROFILE_KEY.test(key) || !value || seen.has(key)) continue;
+    seen.add(key);
+    const label = typeof f.label === "string" && f.label.trim() ? f.label.trim().slice(0, 40) : key;
+    out.push({ key, label, value: value.slice(0, 120) });
+    if (out.length >= PROFILE_MAX_FACTS) break;
+  }
+  return out.length ? out : null;
 }
 
 /**
@@ -65,6 +109,8 @@ export function createSupportToken(options: {
     sub: options.user.id?.trim() || email,
     email,
     name: options.user.name?.trim() || null,
+    // Only when there is one: an older support desk ignores the claim, a newer one records it.
+    ...(cleanProfile(options.user.profile) ? { profile: cleanProfile(options.user.profile) } : {}),
     // Spent once on arrival; without it the freshness window is a replay window.
     jti: randomUUID(),
     iat: now,
@@ -74,6 +120,38 @@ export function createSupportToken(options: {
   return { token: `${body}.${createHmac("sha256", options.secret).update(body).digest("base64url")}`, expiresIn };
 }
 
+/**
+ * The address that signs a person into the support desk and lands them on a
+ * page of it — for a host that sends people there by LINK rather than from
+ * its own button (a notice on a portal, a "sign in" door the desk bounces a
+ * signed-out reader to). The token is minted here, on the server, at the
+ * moment of the redirect; it lives two minutes and is spent on arrival.
+ *
+ *   redirect(supportSignInUrl({ host, realmKey, secret, user, returnPath: "/e/อบรม-a4f2" }))
+ *
+ * `returnPath` must be a path on the support desk; the desk decides again
+ * where it may land (its own reporter pages, or an event).
+ */
+export function supportSignInUrl(options: {
+  /** The support desk's origin, e.g. https://support.example.com */
+  host: string;
+  /** The realm's public key. */
+  realmKey: string;
+  secret: string;
+  user: SupportUser;
+  returnPath?: string | null;
+  ttlSeconds?: number;
+}): string {
+  const { token } = createSupportToken({ secret: options.secret, user: options.user, ttlSeconds: options.ttlSeconds });
+  const url = new URL("/sso", options.host.replace(/\/+$/, ""));
+  url.searchParams.set("realm", options.realmKey);
+  url.searchParams.set("token", token);
+  const back = options.returnPath?.trim();
+  // A path, never an address: the desk would refuse anything else anyway, so say so here first.
+  if (back && back.startsWith("/") && !back.startsWith("//")) url.searchParams.set("return", back);
+  return url.toString();
+}
+
 /**
  * A ready-made route handler, for the common case.
  *

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; }
 `;