@lightworkai.official/debug-capture 0.14.0 → 0.14.1

package/src/ui/element.ts

@@ -242,7 +242,6 @@ function createReporterClass(): CustomElementConstructor {
       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);
@@ -251,23 +250,52 @@ function createReporterClass(): CustomElementConstructor {
       closeBtn.addEventListener("click", () => this.close());
       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);
+      /*
+       * แจ้งปัญหา 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.
+       */
+      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");
+        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);
+      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.
+      kinds.addEventListener("keydown", (e) => {
+        if (!ARROWS.includes(e.key)) return;
+        e.preventDefault();
+        setMode(mode === "problem" ? "request" : "problem");
+        (mode === "problem" ? problemCard : requestCard).focus();
+      });
 
-      // What is asked for — the request's own rows.
+      // What is asked for: one card each — the type's own words and how long the team means to take, as the portal shows them.
       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 typeList = el("div", "types");
+      typeList.setAttribute("role", "radiogroup");
+      typeList.setAttribute("aria-label", t.requestTypeLabel);
+      ask.append(labelFor(t.requestTypeLabel, "", true), typeList);
+      const typeCards: HTMLButtonElement[] = [];
+      const markType = () => {
+        for (const card of typeCards) {
+          const on = card.dataset.requestType === chosen?.id;
+          card.setAttribute("aria-checked", String(on));
+          card.tabIndex = on ? 0 : -1;
+        }
       };
 
       const summary = document.createElement("input");
@@ -323,10 +351,12 @@ function createReporterClass(): CustomElementConstructor {
 
       const apply = () => {
         const asking = mode === "request";
-        heading.textContent = asking ? t.requestTitle : t.title;
+        heading.textContent = kinds.hidden ? t.title : t.chooseTitle;
         panel.setAttribute("aria-label", asking ? t.requestTitle : t.title);
-        doorText.textContent = `${asking ? t.problemInstead : t.askInstead} `;
-        doorBtn.textContent = asking ? t.problemInsteadAction : t.askInsteadAction;
+        for (const [card, on] of [[problemCard, !asking], [requestCard, asking]] as const) {
+          card.setAttribute("aria-checked", String(on));
+          card.tabIndex = on ? 0 : -1;
+        }
         ask.hidden = !asking;
         fillLabel(summaryLabel, asking ? t.requestSummaryLabel : t.summaryLabel, asking ? "" : t.summaryRequired, true);
         summary.placeholder = asking ? t.requestSummaryPlaceholder : t.summaryPlaceholder;
@@ -341,11 +371,11 @@ function createReporterClass(): CustomElementConstructor {
         ready();
       };
       withShot.addEventListener("change", apply);
-      doorBtn.addEventListener("click", () => {
-        mode = mode === "problem" ? "request" : "problem";
+      function setMode(next: "problem" | "request"): void {
+        if (next === mode) return;
+        mode = next;
         apply();
-        (mode === "request" ? (select ?? summary) : summary).focus();
-      });
+      }
 
       /*
        * What the desk offers, as soon as it is known: now, or when the read
@@ -355,23 +385,40 @@ function createReporterClass(): CustomElementConstructor {
       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);
+        typeCards.length = 0;
+        for (const option of types) {
+          const card = button("", "type");
+          card.setAttribute("role", "radio");
+          card.dataset.requestType = option.id;
+          const body = el("span", "type-body");
+          body.append(el("b", "", option.name));
+          if (option.description) body.append(el("span", "type-hint", option.description));
+          if (option.targetHours) {
+            const due = el("span", "type-due");
+            due.append(svgIcon(CLOCK), document.createTextNode(t.requestTarget.replace("{time}", hoursWords(t, option.targetHours))));
+            body.append(due);
           }
-          select.addEventListener("change", () => {
-            chosen = types.find((x) => x.id === select!.value) ?? chosen;
-            describe();
+          card.append(svgIcon(WORKFLOW), body);
+          card.addEventListener("click", () => {
+            chosen = option;
+            markType();
+            ready();
           });
-          typeHolder.replaceChildren(select);
-        } else typeHolder.replaceChildren(el("p", "ask-type", chosen.name));
-        describe();
-        door.hidden = false;
+          typeCards.push(card);
+        }
+        typeList.replaceChildren(...typeCards);
+        typeList.onkeydown = (e) => {
+          if (!ARROWS.includes(e.key) || !chosen) return;
+          e.preventDefault();
+          const at = types.findIndex((x) => x.id === chosen!.id);
+          const step = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1;
+          chosen = types[(at + step + types.length) % types.length]!;
+          markType();
+          typeCards.find((c) => c.dataset.requestType === chosen!.id)?.focus();
+        };
+        markType();
+        kinds.hidden = false;
+        apply();
       };
       /*
        * What was typed last time and not sent comes back, said so — with a
@@ -399,12 +446,11 @@ function createReporterClass(): CustomElementConstructor {
       const known = requestTypesNow();
       const offerAndRestore = (types: RequestTypeOption[]) => {
         offer(types);
-        if (!restored?.asking || door.hidden) return;
+        if (!restored?.asking || kinds.hidden) return;
         const was = types.find((x) => x.id === restored.typeId);
         if (was) {
           chosen = was;
-          if (select) select.value = was.id;
-          describe();
+          markType();
         }
         mode = "request";
         apply();
@@ -413,7 +459,7 @@ function createReporterClass(): CustomElementConstructor {
       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);
+      panel.append(head, kinds, again, ask, summaryLabel, summary, detailLabel, detail, meta, shotChoice, ...shot);
       const foot = el("div", "foot");
       const cancel = button(t.close);
       cancel.addEventListener("click", () => this.close());
@@ -546,6 +592,48 @@ 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));
 }
 
+const ARROWS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+
+/*
+ * The desk's own icons (lucide, as its สร้างเวิร์กโฟลว์ and the portal draw
+ * them), carried as their few nodes: the widget takes no icon library.
+ */
+type IconNode = [string, Record<string, string>][];
+const BUG: IconNode = [
+  ["path", { d: "M12 20v-9" }],
+  ["path", { d: "M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" }],
+  ["path", { d: "M14.12 3.88 16 2" }],
+  ["path", { d: "M21 21a4 4 0 0 0-3.81-4" }],
+  ["path", { d: "M21 5a4 4 0 0 1-3.55 3.97" }],
+  ["path", { d: "M22 13h-4" }],
+  ["path", { d: "M3 21a4 4 0 0 1 3.81-4" }],
+  ["path", { d: "M3 5a4 4 0 0 0 3.55 3.97" }],
+  ["path", { d: "M6 13H2" }],
+  ["path", { d: "m8 2 1.88 1.88" }],
+  ["path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13" }],
+];
+const WORKFLOW: IconNode = [
+  ["rect", { width: "8", height: "8", x: "3", y: "3", rx: "2" }],
+  ["path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }],
+  ["rect", { width: "8", height: "8", x: "13", y: "13", rx: "2" }],
+];
+const CLOCK: IconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10" }],
+  ["path", { d: "M12 6v6l4 2" }],
+];
+const CHECK: IconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+const SVG_NS = "http://www.w3.org/2000/svg";
+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);
+  for (const [tag, attrs] of nodes) {
+    const node = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v);
+    svg.append(node);
+  }
+  return svg;
+}
+
 function button(text: string, className = ""): HTMLButtonElement {
   const node = document.createElement("button");
   node.type = "button";

package/src/ui/strings.ts

@@ -66,13 +66,14 @@ export interface Strings {
   handoffOpen: string;
   /*
    * ขอให้ทีมดำเนินการ — 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.
+   * opens request types to its reporters (docs/WIDGET-ASK-PLAN.md): two cards
+   * under the heading, แจ้งปัญหา chosen as it opens, either one any time.
    */
-  askInstead: string;
-  askInsteadAction: string;
-  problemInstead: string;
-  problemInsteadAction: string;
+  chooseTitle: string;
+  kindProblem: string;
+  kindProblemHint: string;
+  kindRequest: string;
+  kindRequestHint: string;
   requestTitle: string;
   requestTypeLabel: string;
   /** Carries `{time}`. */
@@ -140,10 +141,11 @@ const th: Strings = {
   handoffFailed: "เปิดรายการที่แจ้งไว้ไม่สำเร็จ",
   handoffBlocked: "เบราว์เซอร์บล็อกการเปิดแท็บใหม่",
   handoffOpen: "เปิดในแท็บใหม่",
-  askInstead: "เป็นคำขอ?",
-  askInsteadAction: "เลือกเรื่องที่ขอ",
-  problemInstead: "เป็นปัญหาที่ต้องแก้?",
-  problemInsteadAction: "แจ้งปัญหาแทน",
+  chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
+  kindProblem: "แจ้งปัญหา",
+  kindProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้",
+  kindRequest: "คำขอ",
+  kindRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
@@ -206,10 +208,11 @@ const en: Strings = {
   handoffFailed: "Could not open your reports",
   handoffBlocked: "Your browser blocked the new tab",
   handoffOpen: "Open in a new tab",
-  askInstead: "Asking for something?",
-  askInsteadAction: "Choose what you need",
-  problemInstead: "Something broken?",
-  problemInsteadAction: "Report a problem instead",
+  chooseTitle: "How can the team help?",
+  kindProblem: "Report a problem",
+  kindProblemHint: "Something is broken or not working",
+  kindRequest: "Request",
+  kindRequestHint: "Ask the team to do something, like access or a data change",
   requestTitle: "Ask the team",
   requestTypeLabel: "What you need",
   requestTarget: "The team aims to finish within {time}",

package/src/ui/styles.ts

@@ -94,11 +94,45 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
 }
 .foot .grow { flex: 1; }
 
-/* ขอให้ทีมดำเนินการ — 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. */
+/* ขอให้ทีมดำเนินการ — the same dialog turned into a request (docs/WIDGET-ASK-PLAN.md):
+   แจ้งปัญหา · คำขอ as two cards under the heading, the way the desk's own
+   สร้างเวิร์กโฟลว์ asks it; what is asked for as cards, the way the portal lists it. */
 [hidden] { display: none !important; }
-.door { margin: -8px 0 0; font-size: 13px; color: #64748b; }
+.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -4px; }
+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;
+}
+.kind-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
+.kind-top b { font-weight: 600; }
+.kind-hint { font-size: 13px; font-weight: 400; line-height: 1.5; color: #64748b; }
+button.kind .icon { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; }
+button.kind[data-kind="request"] .icon { color: #1d4ed8; }
+button.kind .tick { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: #2563eb; opacity: 0; }
+button.kind[aria-checked="true"], button.kind[aria-checked="true"]:hover:not(:disabled) {
+  border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px #2563eb;
+}
+button.kind[aria-checked="true"] .tick { opacity: 1; }
+button.kind:focus-visible, button.type:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
+button.kind[aria-checked="true"]:focus-visible { box-shadow: inset 0 0 0 1px #2563eb, 0 0 0 3px rgba(37, 99, 235, 0.25); }
+.types { display: grid; gap: 8px; }
+button.type {
+  display: flex; align-items: flex-start; gap: 10px; width: 100%;
+  padding: 10px 12px; text-align: left; border-radius: 10px;
+}
+button.type .icon { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: #64748b; }
+button.type[aria-checked="true"], button.type[aria-checked="true"]:hover:not(:disabled) { border-color: #2563eb; background: #eff6ff; }
+button.type[aria-checked="true"] .icon { color: #2563eb; }
+.type-body { display: grid; gap: 2px; min-width: 0; }
+.type-body b { font-size: 14px; font-weight: 600; }
+.type-hint { font-size: 13px; font-weight: 400; color: #64748b; }
+.type-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: #64748b; }
+button.type .type-due .icon { width: 12px; height: 12px; margin: 0; }
+/* A phone: the two kinds still side by side — their names are the choice; the hints stay short. */
+@media (max-width: 480px) {
+  .kind-hint { font-size: 12px; }
+  button.kind { padding: 10px 30px 10px 12px; }
+}
 button.link {
   display: inline; padding: 0; border: 0; border-radius: 4px; background: none;
   font-size: 13px; font-weight: 600; color: #2563eb;
@@ -107,10 +141,8 @@ button.link {
 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; }
+.draft { margin: -8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eff6ff; font-size: 13px; color: #1e3a8a; }
 `;