@lightworkai.official/debug-capture 0.13.0 → 0.14.0

package/src/ui/element.ts

@@ -24,6 +24,19 @@ import { CSS } from "./styles";
 
 export const REPORTER_TAG = "lw-debug-reporter";
 
+/**
+ * What was typed and not sent, kept for the next press in this tab — Gmail's
+ * compose: closing keeps the draft (DESIGN §7). ✕, ปิด and Escape all close;
+ * none of them is a decision to throw words away. Cleared when it is sent.
+ */
+interface Draft {
+  title: string;
+  detail: string;
+  asking: boolean;
+  typeId: string | null;
+}
+let draft: Draft | null = null;
+
 /**
  * Failed data-layer queries the host wants on the record — react-query, Apollo,
  * whatever it uses. Set by the host; read at capture time. A callback rather
@@ -82,6 +95,10 @@ function createReporterClass(): CustomElementConstructor {
     private annotator: Annotator | null = null;
     private bundle: DebugBundle | null = null;
     private busy = false;
+    /** The open form's words, read when it closes unsent. */
+    private keep: (() => Draft | null) | null = null;
+    /** What had the focus before the press — the host's button, usually — given back on close. */
+    private returnFocus: HTMLElement | null = null;
 
     constructor() {
       super();
@@ -95,6 +112,14 @@ function createReporterClass(): CustomElementConstructor {
       // shortcuts must not hear it (ui/keys). Once, on the root — it outlives
       // every open and close.
       containKeys(this.root);
+      // Escape closes the dialog — unless something inside it took the key
+      // first (a note being typed on the picture, a shape being let go of).
+      this.root.addEventListener("keydown", (event) => {
+        const e = event as KeyboardEvent;
+        if (e.key !== "Escape" || e.defaultPrevented || !this.root.querySelector("[role=dialog]")) return;
+        e.preventDefault();
+        this.close();
+      });
     }
 
     connectedCallback(): void {
@@ -119,23 +144,19 @@ function createReporterClass(): CustomElementConstructor {
     private async open(reason: DebugReason): Promise<void> {
       if (this.busy) return;
       this.busy = true;
+      const active = document.activeElement;
+      this.returnFocus = active instanceof HTMLElement && active !== document.body ? active : null;
       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.
+       * One door: the press takes the screen and opens the report form,
+       * always. Asking the team is a choice made IN that form — เป็นคำขอ?
+       * เลือกเรื่องที่ขอ — never a door before it (docs/WIDGET-ASK-PLAN.md): a
+       * chooser here cost every press one more click to serve the one in
+       * twelve that asks, and a press before the offer was read had no way to
+       * ask at all. The offer is read without waiting — the share needs this
+       * click — and the form shows the door whenever it lands.
        */
-      if (reason.type === "manual") {
-        const asks = requestTypesNow();
-        if (asks?.length) {
-          this.renderChooser(t, reason, asks);
-          return;
-        }
-        if (asks === null) void loadRequestTypes();
-      }
+      if (requestTypesNow() === null) void loadRequestTypes();
       await this.report(reason, t);
     }
 
@@ -165,117 +186,22 @@ function createReporterClass(): CustomElementConstructor {
         screenshotMethod: shot.method,
         erroredQueries: safeQueries(),
       });
-      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();
+      this.renderForm(t, reason);
     }
 
-    private close(): void {
+    /** Closed unsent, what was typed is kept for the next press; sent, it is gone. */
+    private close(sent = false): void {
+      if (sent) draft = null;
+      else if (this.keep) draft = this.keep() ?? draft;
+      this.keep = null;
       this.annotator?.destroy();
       this.annotator = null;
       this.bundle = null;
       this.busy = false;
       this.root.replaceChildren();
+      const back = this.returnFocus;
+      this.returnFocus = null;
+      if (back?.isConnected) back.focus();
     }
 
     private shell(t: Strings): HTMLElement {
@@ -302,88 +228,220 @@ function createReporterClass(): CustomElementConstructor {
       panel.append(head, el("p", "status", message));
     }
 
-    private renderForm(t: Strings): void {
+    /**
+     * The one dialog: a report — or, where the desk offers request types to
+     * its reporters, a request, the same dialog turned (docs/WIDGET-ASK-PLAN.md;
+     * Zendesk's and Freshdesk's widgets keep the kind inside the one form).
+     * What was typed, the marked picture and the page cross over; a request
+     * leaves the page's logs behind — they are a problem's evidence, not an
+     * ask's — and its picture can be taken off.
+     */
+    private renderForm(t: Strings, reason: DebugReason): void {
       const bundle = this.bundle;
       if (!bundle) return;
       const panel = this.shell(t);
+      let mode: "problem" | "request" = "problem";
+      let chosen: RequestTypeOption | null = null;
+      let select: HTMLSelectElement | null = null;
 
       const head = el("div", "head");
+      const heading = el("h2", "", t.title);
       const closeBtn = button("✕", "icon");
       closeBtn.setAttribute("aria-label", t.close);
       closeBtn.addEventListener("click", () => this.close());
-      head.append(el("h2", "", t.title), closeBtn);
+      head.append(heading, closeBtn);
+
+      // The other door: a quiet line under the heading, only where the desk offers something to ask.
+      const door = el("p", "door");
+      door.hidden = true;
+      const doorText = el("span");
+      const doorBtn = button("", "link");
+      doorBtn.dataset.switchKind = "";
+      door.append(doorText, doorBtn);
+
+      // What is asked for — the request's own rows.
+      const ask = el("div", "ask");
+      ask.hidden = true;
+      const typeHolder = el("div");
+      const about = el("p", "status", "");
+      ask.append(labelFor(t.requestTypeLabel, "", true), typeHolder, about);
+      const describe = () => {
+        if (!chosen) return;
+        about.textContent = [chosen.description, chosen.targetHours ? t.requestTarget.replace("{time}", hoursWords(t, chosen.targetHours)) : ""].filter(Boolean).join(" · ");
+      };
 
       const summary = document.createElement("input");
       summary.type = "text";
-      summary.placeholder = t.summaryPlaceholder;
-      const summaryLabel = labelFor(t.summaryLabel, t.summaryRequired, true);
-
+      const summaryLabel = labelFor("");
       const detail = document.createElement("textarea");
-      detail.placeholder = t.detailPlaceholder;
+      const detailLabel = labelFor("");
 
       const meta = el("div", "meta");
-      meta.innerHTML = "";
       const { context } = bundle;
-      for (const [key, value] of [
-        [t.reporter, `${context.user.fullName ?? "—"} (${context.user.email ?? "—"})`],
-        [t.page, context.route.href],
-        // No version row. It read "vundefined · undefined" once version and
-        // environment became optional, and it was telling the person filing the
-        // report something only the person reading it needs — both still travel
-        // with the bundle.
-        //
-        // The replay counts as one more thing captured, listed with the rest.
-        // It is the support team's debug log, taken the way the network and
-        // console logs are — not a choice put to the reporter. There was a
-        // tick box here once; the platform owner's call was that a report
-        // should always carry what makes it reproducible.
-        [
-          t.captured,
-          `${bundle.network.length} network · ${bundle.console.length} console · ${bundle.actionTrail.length} actions${
-            bundle.replay ? ` · ${t.replay} ${Math.round(bundle.replay.durationMs / 1000)}s` : ""
-          }`,
-        ],
-      ] as [string, string][]) {
+      const captured = `${bundle.network.length} network · ${bundle.console.length} console · ${bundle.actionTrail.length} actions${
+        bundle.replay ? ` · ${t.replay} ${Math.round(bundle.replay.durationMs / 1000)}s` : ""
+      }`;
+      // textContent, not innerHTML: every one of these values is attacker-
+      // influenced (a URL, a display name, a captured label).
+      const metaRow = (key: string, value: string) => {
         const row = document.createElement("div");
-        // textContent, not innerHTML: every one of these values is attacker-
-        // influenced (a URL, a display name, a captured label).
         const b = document.createElement("b");
         b.textContent = `${key}: `;
-        row.append(b, document.createTextNode(value));
+        const v = document.createTextNode(value);
+        row.append(b, v);
         meta.append(row);
-      }
+        return { b, v };
+      };
+      metaRow(t.reporter, `${context.user.fullName ?? "—"} (${context.user.email ?? "—"})`);
+      metaRow(t.page, context.route.href);
+      // No version row: it is for the person reading, not the one filing — it
+      // still travels with the bundle. The replay is listed with the rest of
+      // what was captured: the support team's debug log, not a choice put to
+      // the reporter.
+      const logs = metaRow(t.captured, captured);
+
+      // A request's picture is its own to keep or take off; a report always carries what it captured.
+      const shotChoice = document.createElement("label");
+      shotChoice.className = "shot-choice";
+      shotChoice.hidden = true;
+      const withShot = document.createElement("input");
+      withShot.type = "checkbox";
+      withShot.checked = true;
+      withShot.dataset.requestShot = "";
+      shotChoice.append(withShot, document.createTextNode(` ${t.requestWithShot}`));
+      const shot = bundle.screenshotDataUrl ? this.screenshotSection(t, bundle.screenshotDataUrl) : [el("p", "status", t.noScreenshot)];
+      // What to mark on the picture: the problem, or what is asked for.
+      const markWhat = bundle.screenshotDataUrl ? shot[0]! : null;
+      if (!bundle.screenshotDataUrl) shotChoice.replaceChildren();
 
       const status = el("p", "status", "");
       const submitBtn = button(t.submit, "primary");
-      submitBtn.disabled = true;
-      summary.addEventListener("input", () => {
-        submitBtn.disabled = summary.value.trim().length === 0;
+      const ready = () => {
+        submitBtn.disabled = summary.value.trim().length === 0 || (mode === "request" && !chosen);
+      };
+      summary.addEventListener("input", ready);
+
+      const apply = () => {
+        const asking = mode === "request";
+        heading.textContent = asking ? t.requestTitle : t.title;
+        panel.setAttribute("aria-label", asking ? t.requestTitle : t.title);
+        doorText.textContent = `${asking ? t.problemInstead : t.askInstead} `;
+        doorBtn.textContent = asking ? t.problemInsteadAction : t.askInsteadAction;
+        ask.hidden = !asking;
+        fillLabel(summaryLabel, asking ? t.requestSummaryLabel : t.summaryLabel, asking ? "" : t.summaryRequired, true);
+        summary.placeholder = asking ? t.requestSummaryPlaceholder : t.summaryPlaceholder;
+        fillLabel(detailLabel, asking ? t.requestDetailLabel : t.detailLabel);
+        detail.placeholder = asking ? t.requestDetailPlaceholder : t.detailPlaceholder;
+        logs.b.textContent = `${asking ? t.requestLeaves : t.captured}: `;
+        logs.v.textContent = asking ? t.requestLeavesWhat : captured;
+        shotChoice.hidden = !asking || !bundle.screenshotDataUrl;
+        if (markWhat) fillLabel(markWhat, asking ? t.requestAnnotateHint : t.annotateHint);
+        for (const node of shot) node.classList.toggle("dropped", asking && !withShot.checked);
+        submitBtn.textContent = asking ? t.requestSubmit : t.submit;
+        ready();
+      };
+      withShot.addEventListener("change", apply);
+      doorBtn.addEventListener("click", () => {
+        mode = mode === "problem" ? "request" : "problem";
+        apply();
+        (mode === "request" ? (select ?? summary) : summary).focus();
       });
 
-      panel.append(head, summaryLabel, summary, labelFor(t.detailLabel), detail, meta);
-      if (bundle.screenshotDataUrl) panel.append(...this.screenshotSection(t, bundle.screenshotDataUrl));
-      else panel.append(el("p", "status", t.noScreenshot));
+      /*
+       * What the desk offers, as soon as it is known: now, or when the read
+       * lands with the form already open. Only on a press by hand — a crash's
+       * invitation is a problem by definition.
+       */
+      const offer = (types: RequestTypeOption[]) => {
+        if (this.bundle !== bundle || reason.type !== "manual" || !types.length) return;
+        chosen = types[0]!;
+        if (types.length > 1) {
+          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();
+          });
+          typeHolder.replaceChildren(select);
+        } else typeHolder.replaceChildren(el("p", "ask-type", chosen.name));
+        describe();
+        door.hidden = false;
+      };
+      /*
+       * What was typed last time and not sent comes back, said so — with a
+       * way to clear it. A request goes back to being one once its type is
+       * offered again.
+       */
+      const restored = draft && (draft.title || draft.detail) ? draft : null;
+      const again = el("p", "draft");
+      again.hidden = !restored;
+      if (restored) {
+        summary.value = restored.title;
+        detail.value = restored.detail;
+        const clear = button(t.draftClear, "link");
+        clear.dataset.draftClear = "";
+        clear.addEventListener("click", () => {
+          summary.value = "";
+          detail.value = "";
+          draft = null;
+          again.hidden = true;
+          ready();
+          summary.focus();
+        });
+        again.append(document.createTextNode(`${t.draftRestored} · `), clear);
+      }
+      const known = requestTypesNow();
+      const offerAndRestore = (types: RequestTypeOption[]) => {
+        offer(types);
+        if (!restored?.asking || door.hidden) return;
+        const was = types.find((x) => x.id === restored.typeId);
+        if (was) {
+          chosen = was;
+          if (select) select.value = was.id;
+          describe();
+        }
+        mode = "request";
+        apply();
+      };
+      if (known) offerAndRestore(known);
+      else if (reason.type === "manual") void loadRequestTypes().then(offerAndRestore);
+      this.keep = () => ({ title: summary.value, detail: detail.value, asking: mode === "request", typeId: chosen?.id ?? null });
 
+      panel.append(head, door, again, ask, summaryLabel, summary, detailLabel, detail, meta, shotChoice, ...shot);
       const foot = el("div", "foot");
       const cancel = button(t.close);
       cancel.addEventListener("click", () => this.close());
       foot.append(cancel, status, el("span", "grow"), submitBtn);
       panel.append(foot);
+      apply();
 
       submitBtn.addEventListener("click", async () => {
         submitBtn.disabled = true;
         status.dataset.tone = "";
         status.textContent = t.submitting;
+        // Take the annotated image, not the raw capture — the drawing IS the
+        // report for most people.
+        const picture = () => (this.annotator?.hasShapes() ? this.annotator.toDataUrl() : bundle.screenshotDataUrl);
         try {
-          const filed = await submitBundle(summary.value.trim(), {
-            ...bundle,
-            note: detail.value,
-            // Take the annotated image, not the raw capture — the drawing IS the
-            // report for most people.
-            screenshotDataUrl: this.annotator?.hasShapes()
-              ? this.annotator.toDataUrl()
-              : bundle.screenshotDataUrl,
-          });
+          if (mode === "request" && chosen) {
+            const filed = await submitRequest({
+              ticketTypeId: chosen.id,
+              title: summary.value.trim(),
+              description: detail.value,
+              screenshotDataUrl: withShot.checked ? picture() : null,
+            });
+            const announced = this.dispatchEvent(new CustomEvent("lw-request-submitted", { detail: filed, bubbles: true, composed: true, cancelable: true }));
+            this.close(true);
+            if (announced) showToast(`${t.requestSubmitted} — #${filed.number}`, "success");
+            return;
+          }
+          const filed = await submitBundle(summary.value.trim(), { ...bundle, note: detail.value, screenshotDataUrl: picture() });
           // Cancelable: a host with its own toast system calls preventDefault()
           // and shows its own. Ours is the default, not the only option.
           const announced = this.dispatchEvent(
@@ -397,7 +455,7 @@ function createReporterClass(): CustomElementConstructor {
           // Close first, then announce. The dialog is what the user was looking
           // at, and a confirmation written into a panel that then closes says
           // nothing — which is why filing a ticket appeared to do nothing.
-          this.close();
+          this.close(true);
           if (announced) showToast(`${t.submitted} — #${filed.number}`, "success");
         } catch (error) {
           const message = failureMessage(error, t);
@@ -408,7 +466,7 @@ function createReporterClass(): CustomElementConstructor {
           showToast(message, "error");
           // The dialog stays open and nothing is cleared: what they wrote is
           // still in the box, and pressing again is the right thing to do.
-          submitBtn.disabled = false;
+          ready();
         }
       });
 
@@ -488,17 +546,6 @@ 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";
@@ -508,8 +555,12 @@ function button(text: string, className = ""): HTMLButtonElement {
 }
 
 function labelFor(text: string, hint = "", required = false): HTMLElement {
-  const label = document.createElement("label");
-  label.append(document.createTextNode(text));
+  return fillLabel(document.createElement("label"), text, hint, required);
+}
+
+/** A label's words, written again when the dialog turns from a report to a request. */
+function fillLabel(label: HTMLElement, text: string, hint = "", required = false): HTMLElement {
+  label.replaceChildren(document.createTextNode(text));
   if (required) {
     const star = document.createElement("span");
     star.className = "req";

package/src/ui/strings.ts

@@ -65,14 +65,14 @@ export interface Strings {
   handoffBlocked: string;
   handoffOpen: string;
   /*
-   * ขอให้ทีมดำเนินการ — offered beside แจ้งปัญหา when the desk opens request
-   * types to its reporters (requests.ts). A request asks for no screenshot.
+   * ขอให้ทีมดำเนินการ — the same dialog turned into a request, where the desk
+   * opens request types to its reporters (docs/WIDGET-ASK-PLAN.md): the door
+   * is a line in the report form, and back.
    */
-  chooseTitle: string;
-  chooseProblem: string;
-  chooseProblemHint: string;
-  chooseRequest: string;
-  chooseRequestHint: string;
+  askInstead: string;
+  askInsteadAction: string;
+  problemInstead: string;
+  problemInsteadAction: string;
   requestTitle: string;
   requestTypeLabel: string;
   /** Carries `{time}`. */
@@ -83,7 +83,15 @@ export interface Strings {
   requestDetailPlaceholder: string;
   requestSubmit: string;
   requestSubmitted: string;
-  back: string;
+  /** The picture, a request's to keep or take off. */
+  requestWithShot: string;
+  requestAnnotateHint: string;
+  /** What was typed last time and not sent, back in the form — and the way to clear it. */
+  draftRestored: string;
+  draftClear: string;
+  /** In the captured row, turned: what a request does NOT send. */
+  requestLeaves: string;
+  requestLeavesWhat: string;
   /** Carry `{n}`. */
   days: string;
   hours: string;
@@ -132,11 +140,10 @@ const th: Strings = {
   handoffFailed: "เปิดรายการที่แจ้งไว้ไม่สำเร็จ",
   handoffBlocked: "เบราว์เซอร์บล็อกการเปิดแท็บใหม่",
   handoffOpen: "เปิดในแท็บใหม่",
-  chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
-  chooseProblem: "แจ้งปัญหา",
-  chooseProblemHint: "มีอะไรเสียหรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
-  chooseRequest: "ขอให้ทีมดำเนินการ",
-  chooseRequestHint: "ขอสิทธิ์ ขอแก้ข้อมูล หรือขอให้ทีมทำบางอย่าง",
+  askInstead: "เป็นคำขอ?",
+  askInsteadAction: "เลือกเรื่องที่ขอ",
+  problemInstead: "เป็นปัญหาที่ต้องแก้?",
+  problemInsteadAction: "แจ้งปัญหาแทน",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
@@ -146,7 +153,12 @@ const th: Strings = {
   requestDetailPlaceholder: "สิ่งที่ทีมต้องรู้เพื่อดำเนินการ",
   requestSubmit: "ส่งคำขอ",
   requestSubmitted: "ส่งคำขอแล้ว",
-  back: "ย้อนกลับ",
+  requestWithShot: "แนบภาพหน้าจอนี้ไปกับคำขอ",
+  requestAnnotateHint: "ทำเครื่องหมายสิ่งที่ขอบนภาพ — วงกรอบ ชี้ลูกศร ไฮไลต์ หรือพิมพ์ข้อความ",
+  draftRestored: "ข้อความที่พิมพ์ไว้ครั้งก่อน ยังไม่ได้ส่ง",
+  draftClear: "ล้าง",
+  requestLeaves: "ไม่ส่งไปกับคำขอ",
+  requestLeavesWhat: "บันทึกการใช้งานของหน้านี้ — ใช้กับการแจ้งปัญหาเท่านั้น",
   days: "{n} วัน",
   hours: "{n} ชั่วโมง",
 };
@@ -194,11 +206,10 @@ 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",
+  askInstead: "Asking for something?",
+  askInsteadAction: "Choose what you need",
+  problemInstead: "Something broken?",
+  problemInsteadAction: "Report a problem instead",
   requestTitle: "Ask the team",
   requestTypeLabel: "What you need",
   requestTarget: "The team aims to finish within {time}",
@@ -208,7 +219,12 @@ const en: Strings = {
   requestDetailPlaceholder: "What the team needs to know to do it",
   requestSubmit: "Send request",
   requestSubmitted: "Request sent",
-  back: "Back",
+  requestWithShot: "Attach this screenshot to the request",
+  requestAnnotateHint: "Mark what you are asking about — box it, point at it, highlight it, or type on it",
+  draftRestored: "What you typed last time, not sent yet",
+  draftClear: "Clear",
+  requestLeaves: "Not sent with a request",
+  requestLeavesWhat: "this page's activity log — it is for problem reports only",
   days: "{n} days",
   hours: "{n} hours",
 };

package/src/ui/styles.ts

@@ -94,16 +94,23 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
 }
 .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;
+/* ขอให้ทีมดำเนินการ — the same dialog turned into a request (docs/WIDGET-ASK-PLAN.md).
+   The door is a quiet line under the heading: read by the one who asks,
+   costing nothing to the many who report. */
+[hidden] { display: none !important; }
+.door { margin: -8px 0 0; font-size: 13px; color: #64748b; }
+button.link {
+  display: inline; padding: 0; border: 0; border-radius: 4px; background: none;
+  font-size: 13px; font-weight: 600; color: #2563eb;
+  text-decoration: underline; text-underline-offset: 3px;
 }
-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; }
+button.link:hover:not(:disabled) { background: none; color: #1d4ed8; }
+button.link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.ask p { margin: 0; }
+.draft { margin: -8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eff6ff; font-size: 13px; color: #1e3a8a; }
+.ask .status { margin-top: 6px; }
+.ask-type { font-size: 14px; font-weight: 600; }
+.shot-choice { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
+.shot-choice input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; }
+.dropped { opacity: 0.35; pointer-events: none; }
 `;