@lightworkai.official/debug-capture 0.14.1 → 0.14.2

package/src/ui/element.ts

@@ -148,18 +148,76 @@ function createReporterClass(): CustomElementConstructor {
       this.returnFocus = active instanceof HTMLElement && active !== document.body ? active : null;
       const t = strings(getConfig().locale);
       /*
-       * 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.
+       * The owner's order (docs/WIDGET-ASK-PLAN.md, 0.14.2): where the desk
+       * offers something to ask, the press asks first — แจ้งปัญหา or คำขอ —
+       * because a request has no use for the screen and must not be asked to
+       * share it. Read from what is already known, never awaited: the share
+       * has to start inside the press that chose แจ้งปัญหา. An offer not read
+       * yet is the report as it always was, and its form shows the two cards
+       * when the offer lands.
        */
-      if (requestTypesNow() === null) void loadRequestTypes();
+      const offered = requestTypesNow();
+      if (offered === null) void loadRequestTypes();
+      if (reason.type === "manual" && offered?.length) {
+        this.renderChooser(t, reason);
+        return;
+      }
       await this.report(reason, t);
     }
 
+    /** แจ้งปัญหา or คำขอ — the two cards, before anything is asked of the browser. */
+    private renderChooser(t: Strings, reason: DebugReason): 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 = kindButton("problem", BUG, t.kindProblem, 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 = kindButton("request", WORKFLOW, t.kindRequest, t.chooseRequestHint);
+      ask.dataset.choose = "request";
+      // A request: no share asked for. The page's address still travels with it.
+      ask.addEventListener("click", () => {
+        this.bundle = buildBundle({ reason, note: "", screenshotDataUrl: null, screenshotMethod: "none", erroredQueries: safeQueries() });
+        this.renderForm(t, reason, "request");
+      });
+      const choices = el("div", "kinds choose");
+      choices.append(problem, ask);
+      choices.addEventListener("keydown", (e) => {
+        if (!ARROWS.includes(e.key)) return;
+        e.preventDefault();
+        (this.root.activeElement === problem ? ask : problem).focus();
+      });
+      panel.append(head, choices);
+      problem.focus();
+    }
+
+    /**
+     * คำขอ → แจ้งปัญหา on a request that began with no screen: the share is
+     * asked for now, inside this press, with our dialog off the screen. What
+     * was typed crosses over; a share refused goes back to the request, as it
+     * was.
+     */
+    private async switchToReport(t: Strings, reason: DebugReason, carried: Draft): Promise<void> {
+      this.root.replaceChildren();
+      const shot = await captureScreen();
+      if (shot.method === "cancelled") {
+        this.renderForm(t, reason, "request", { ...carried, asking: true });
+        return;
+      }
+      this.bundle = buildBundle({ reason, note: "", screenshotDataUrl: shot.dataUrl, screenshotMethod: shot.method, erroredQueries: safeQueries() });
+      this.renderForm(t, reason, "problem", carried);
+    }
+
     /** 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> {
       /*
@@ -186,7 +244,7 @@ function createReporterClass(): CustomElementConstructor {
         screenshotMethod: shot.method,
         erroredQueries: safeQueries(),
       });
-      this.renderForm(t, reason);
+      this.renderForm(t, reason, "problem");
     }
 
     /** Closed unsent, what was typed is kept for the next press; sent, it is gone. */
@@ -236,11 +294,13 @@ function createReporterClass(): CustomElementConstructor {
      * 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 {
+    private renderForm(t: Strings, reason: DebugReason, start: "problem" | "request", carried?: Draft): void {
       const bundle = this.bundle;
       if (!bundle) return;
       const panel = this.shell(t);
-      let mode: "problem" | "request" = "problem";
+      let mode: "problem" | "request" = start;
+      // Was the screen asked for? A request chosen first was not — แจ้งปัญหา asks for it then.
+      const screenTaken = start === "problem" || !!bundle.screenshotDataUrl;
       let chosen: RequestTypeOption | null = null;
 
       const head = el("div", "head");
@@ -251,27 +311,24 @@ function createReporterClass(): CustomElementConstructor {
       head.append(heading, closeBtn);
 
       /*
-       * แจ้งปัญหา or คำขอ — two cards under the heading, the way the desk's own
-       * สร้างเวิร์กโฟลว์ asks it, shown only where the desk offers something to
-       * ask. แจ้งปัญหา is chosen as the form opens (the press is a report for
-       * most, so no click is added); either card switches the form, any time,
-       * and nothing typed is lost by it.
+       * แจ้งปัญหา or คำขอ — the same two cards the press chose from, kept under
+       * the heading so the form can be switched any time with nothing typed
+       * lost (to แจ้งปัญหา from a request that began with no screen, the
+       * share is asked for then — switchToReport). Shown only where the desk
+       * offers something to ask.
        */
       const kinds = el("div", "kinds");
       kinds.hidden = true;
       kinds.setAttribute("role", "radiogroup");
       kinds.setAttribute("aria-label", t.chooseTitle);
       const kindCard = (kind: "problem" | "request", icon: IconNode, title: string, hint: string) => {
-        const card = button("", "kind");
+        const card = kindButton(kind, icon, title, hint);
         card.setAttribute("role", "radio");
-        card.dataset.kind = kind;
-        const top = el("span", "kind-top");
-        top.append(svgIcon(icon), el("b", "", title));
-        card.append(top, el("span", "kind-hint", hint), svgIcon(CHECK, "tick"));
         card.addEventListener("click", () => setMode(kind));
         return card;
       };
-      const problemCard = kindCard("problem", BUG, t.kindProblem, t.kindProblemHint);
+      // From a request that began with no screen, แจ้งปัญหา will ask for it — said on the card, as the chooser says it.
+      const problemCard = kindCard("problem", BUG, t.kindProblem, screenTaken ? t.kindProblemHint : t.chooseProblemHint);
       const requestCard = kindCard("request", WORKFLOW, t.kindRequest, t.kindRequestHint);
       kinds.append(problemCard, requestCard);
       // A radio group's own keys: an arrow moves the choice, and the focus with it.
@@ -366,16 +423,24 @@ function createReporterClass(): CustomElementConstructor {
         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);
+        for (const node of shot) {
+          node.classList.toggle("dropped", asking && !withShot.checked);
+          // A request that began with no screen has no picture to speak of.
+          node.hidden = asking && !bundle.screenshotDataUrl;
+        }
         submitBtn.textContent = asking ? t.requestSubmit : t.submit;
         ready();
       };
       withShot.addEventListener("change", apply);
-      function setMode(next: "problem" | "request"): void {
+      const setMode = (next: "problem" | "request"): void => {
         if (next === mode) return;
+        if (next === "problem" && !screenTaken) {
+          void this.switchToReport(t, reason, { title: summary.value, detail: detail.value, asking: false, typeId: chosen?.id ?? null });
+          return;
+        }
         mode = next;
         apply();
-      }
+      };
 
       /*
        * What the desk offers, as soon as it is known: now, or when the read
@@ -422,12 +487,11 @@ function createReporterClass(): CustomElementConstructor {
       };
       /*
        * 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.
+       * way to clear it. Carried across a switch, the words are simply there.
        */
-      const restored = draft && (draft.title || draft.detail) ? draft : null;
+      const restored = carried ?? (draft && (draft.title || draft.detail) ? draft : null);
       const again = el("p", "draft");
-      again.hidden = !restored;
+      again.hidden = !restored || !!carried;
       if (restored) {
         summary.value = restored.title;
         detail.value = restored.detail;
@@ -446,14 +510,13 @@ function createReporterClass(): CustomElementConstructor {
       const known = requestTypesNow();
       const offerAndRestore = (types: RequestTypeOption[]) => {
         offer(types);
-        if (!restored?.asking || kinds.hidden) return;
+        // The kind is the press's choice; a request's type comes back as it was.
+        if (mode !== "request" || kinds.hidden || !restored?.typeId) return;
         const was = types.find((x) => x.id === restored.typeId);
         if (was) {
           chosen = was;
           markType();
         }
-        mode = "request";
-        apply();
       };
       if (known) offerAndRestore(known);
       else if (reason.type === "manual") void loadRequestTypes().then(offerAndRestore);
@@ -623,6 +686,16 @@ const CLOCK: IconNode = [
 ];
 const CHECK: IconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
 const SVG_NS = "http://www.w3.org/2000/svg";
+/** A card for แจ้งปัญหา or คำขอ — the chooser's and the form's, one drawing. */
+function kindButton(kind: "problem" | "request", icon: IconNode, title: string, hint: string): HTMLButtonElement {
+  const card = button("", "kind");
+  card.dataset.kind = kind;
+  const top = el("span", "kind-top");
+  top.append(svgIcon(icon), el("b", "", title));
+  card.append(top, el("span", "kind-hint", hint), svgIcon(CHECK, "tick"));
+  return card;
+}
+
 function svgIcon(nodes: IconNode, className = "icon"): SVGSVGElement {
   const svg = document.createElementNS(SVG_NS, "svg");
   for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", class: className })) svg.setAttribute(k, v);

package/src/ui/strings.ts

@@ -74,6 +74,9 @@ export interface Strings {
   kindProblemHint: string;
   kindRequest: string;
   kindRequestHint: string;
+  /** On the cards before anything is asked of the browser: what each will do. */
+  chooseProblemHint: string;
+  chooseRequestHint: string;
   requestTitle: string;
   requestTypeLabel: string;
   /** Carries `{time}`. */
@@ -146,6 +149,8 @@ const th: Strings = {
   kindProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้",
   kindRequest: "คำขอ",
   kindRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล",
+  chooseProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
+  chooseRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล — ไม่ต้องแชร์หน้าจอ",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
@@ -213,6 +218,8 @@ const en: Strings = {
   kindProblemHint: "Something is broken or not working",
   kindRequest: "Request",
   kindRequestHint: "Ask the team to do something, like access or a data change",
+  chooseProblemHint: "Something is broken or not working — with a screenshot",
+  chooseRequestHint: "Ask the team to do something, like access or a data change — no screen sharing",
   requestTitle: "Ask the team",
   requestTypeLabel: "What you need",
   requestTarget: "The team aims to finish within {time}",

package/src/ui/styles.ts

@@ -99,6 +99,11 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
    สร้างเวิร์กโฟลว์ asks it; what is asked for as cards, the way the portal lists it. */
 [hidden] { display: none !important; }
 .kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -4px; }
+/* Before anything is asked of the browser: the same two cards, a little larger, in a smaller dialog. */
+.panel.narrow { width: min(560px, 100%); }
+.kinds.choose { margin: 0 0 24px; }
+.kinds.choose button.kind { padding: 16px 18px; gap: 6px; }
+.kinds.choose .kind-hint { font-size: 13px; }
 button.kind {
   position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
   padding: 12px 34px 12px 14px; text-align: left; border-radius: 12px;