@lightworkai.official/debug-capture 0.14.2 → 0.14.3

package/src/ui/element.ts

@@ -311,41 +311,47 @@ function createReporterClass(): CustomElementConstructor {
       head.append(heading, closeBtn);
 
       /*
-       * แจ้งปัญหา 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.
+       * The kind was chosen at the press (renderChooser); the form names it in
+       * its heading and keeps one quiet line to switch — the owner: "no need
+       * to be card style since that select it on the first dialog". Switching
+       * keeps what was typed; to แจ้งปัญหา from a request that began with no
+       * screen, the share is asked for at that press (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 = kindButton(kind, icon, title, hint);
-        card.setAttribute("role", "radio");
-        card.addEventListener("click", () => setMode(kind));
-        return card;
-      };
-      // 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.
-      kinds.addEventListener("keydown", (e) => {
-        if (!ARROWS.includes(e.key)) return;
-        e.preventDefault();
-        setMode(mode === "problem" ? "request" : "problem");
-        (mode === "problem" ? problemCard : requestCard).focus();
-      });
+      const door = el("p", "door");
+      door.hidden = true;
+      const doorText = el("span");
+      const doorBtn = button("", "link");
+      doorBtn.dataset.switchKind = "";
+      doorBtn.addEventListener("click", () => setMode(mode === "problem" ? "request" : "problem"));
+      door.append(doorText, doorBtn);
 
-      // 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.
+      /*
+       * What is asked for: a row each. The one chosen opens up — its words and
+       * how long the team means to take, as the portal shows them — and the
+       * rest stay one line, so a desk with 10 or 20 types is still a list to
+       * read, not a page to scroll. From SEARCH_FROM types there is a search
+       * over them, and the list scrolls within its own height.
+       */
       const ask = el("div", "ask");
       ask.hidden = true;
+      const typeSearch = document.createElement("input");
+      // A search, not a text field: the title stays the dialog's one text input.
+      typeSearch.type = "search";
+      typeSearch.className = "type-search";
+      typeSearch.placeholder = t.requestTypeSearch;
+      typeSearch.setAttribute("aria-label", t.requestTypeSearch);
+      typeSearch.dataset.requestTypeSearch = "";
+      typeSearch.hidden = true;
       const typeList = el("div", "types");
       typeList.setAttribute("role", "radiogroup");
       typeList.setAttribute("aria-label", t.requestTypeLabel);
-      ask.append(labelFor(t.requestTypeLabel, "", true), typeList);
+      const typeNone = el("p", "status", t.requestTypeNone);
+      typeNone.hidden = true;
+      // A long list says how many it holds — the rows past its edge are otherwise unseen.
+      const typeCount = el("p", "status type-count", "");
+      typeCount.hidden = true;
+      ask.append(labelFor(t.requestTypeLabel, "", true), typeSearch, typeList, typeNone, typeCount);
       const typeCards: HTMLButtonElement[] = [];
       const markType = () => {
         for (const card of typeCards) {
@@ -353,6 +359,13 @@ function createReporterClass(): CustomElementConstructor {
           card.setAttribute("aria-checked", String(on));
           card.tabIndex = on ? 0 : -1;
         }
+        // The chosen one in view inside the list's own scroll, never the dialog's.
+        const on = typeCards.find((c) => c.dataset.requestType === chosen?.id);
+        if (on && typeList.scrollHeight > typeList.clientHeight) {
+          const top = on.offsetTop - typeList.offsetTop;
+          if (top < typeList.scrollTop) typeList.scrollTop = top;
+          else if (top + on.offsetHeight > typeList.scrollTop + typeList.clientHeight) typeList.scrollTop = top + on.offsetHeight - typeList.clientHeight;
+        }
       };
 
       const summary = document.createElement("input");
@@ -408,12 +421,11 @@ function createReporterClass(): CustomElementConstructor {
 
       const apply = () => {
         const asking = mode === "request";
-        heading.textContent = kinds.hidden ? t.title : t.chooseTitle;
+        heading.textContent = asking ? t.requestTitle : t.title;
         panel.setAttribute("aria-label", asking ? t.requestTitle : t.title);
-        for (const [card, on] of [[problemCard, !asking], [requestCard, asking]] as const) {
-          card.setAttribute("aria-checked", String(on));
-          card.tabIndex = on ? 0 : -1;
-        }
+        doorText.textContent = `${asking ? t.problemInstead : t.askInstead} `;
+        // From a request that began with no screen, แจ้งปัญหา will ask for it — said on the line.
+        doorBtn.textContent = asking ? (screenTaken ? t.problemInsteadAction : t.problemInsteadShare) : t.askInsteadAction;
         ask.hidden = !asking;
         fillLabel(summaryLabel, asking ? t.requestSummaryLabel : t.summaryLabel, asking ? "" : t.summaryRequired, true);
         summary.placeholder = asking ? t.requestSummaryPlaceholder : t.summaryPlaceholder;
@@ -472,17 +484,49 @@ function createReporterClass(): CustomElementConstructor {
           typeCards.push(card);
         }
         typeList.replaceChildren(...typeCards);
+        // ↑ ↓ among the rows the search leaves.
         typeList.onkeydown = (e) => {
           if (!ARROWS.includes(e.key) || !chosen) return;
           e.preventDefault();
-          const at = types.findIndex((x) => x.id === chosen!.id);
+          const shown = types.filter((x, i) => !typeCards[i]!.hidden);
+          if (!shown.length) return;
+          const at = shown.findIndex((x) => x.id === chosen!.id);
           const step = e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 1;
-          chosen = types[(at + step + types.length) % types.length]!;
+          chosen = shown[at < 0 ? 0 : (at + step + shown.length) % shown.length]!;
           markType();
           typeCards.find((c) => c.dataset.requestType === chosen!.id)?.focus();
         };
+        typeList.classList.toggle("long", types.length >= SEARCH_FROM);
+        typeSearch.hidden = types.length < SEARCH_FROM;
+        const count = (n: number) => {
+          typeCount.hidden = types.length < SEARCH_FROM || n === 0;
+          typeCount.textContent = t.requestTypeCount.replace("{n}", String(n));
+        };
+        count(types.length);
+        typeSearch.oninput = () => {
+          const q = typeSearch.value.trim().toLowerCase();
+          let first: RequestTypeOption | null = null;
+          types.forEach((x, i) => {
+            const hit = !q || `${x.name} ${x.description}`.toLowerCase().includes(q);
+            typeCards[i]!.hidden = !hit;
+            if (hit && !first) first = x;
+          });
+          typeNone.hidden = !!first;
+          count(typeCards.filter((c) => !c.hidden).length);
+          // The choice follows the search when the one chosen is filtered out.
+          if (first && chosen && typeCards[types.indexOf(chosen)]!.hidden) chosen = first;
+          markType();
+          ready();
+        };
+        // Enter in the search goes to the chosen row, not the send button.
+        typeSearch.onkeydown = (e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter") {
+            e.preventDefault();
+            typeCards.find((c) => c.dataset.requestType === chosen?.id && !c.hidden)?.focus();
+          }
+        };
         markType();
-        kinds.hidden = false;
+        door.hidden = false;
         apply();
       };
       /*
@@ -511,7 +555,7 @@ function createReporterClass(): CustomElementConstructor {
       const offerAndRestore = (types: RequestTypeOption[]) => {
         offer(types);
         // The kind is the press's choice; a request's type comes back as it was.
-        if (mode !== "request" || kinds.hidden || !restored?.typeId) return;
+        if (mode !== "request" || door.hidden || !restored?.typeId) return;
         const was = types.find((x) => x.id === restored.typeId);
         if (was) {
           chosen = was;
@@ -522,7 +566,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, kinds, again, ask, summaryLabel, summary, detailLabel, detail, meta, shotChoice, ...shot);
+      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());
@@ -656,6 +700,8 @@ function hoursWords(t: Strings, h: number): string {
 }
 
 const ARROWS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+/** From this many request types, the list gets a search and scrolls in its own height. */
+const SEARCH_FROM = 7;
 
 /*
  * The desk's own icons (lucide, as its สร้างเวิร์กโฟลว์ and the portal draw

package/src/ui/strings.ts

@@ -65,20 +65,29 @@ export interface Strings {
   handoffBlocked: string;
   handoffOpen: string;
   /*
-   * ขอให้ทีมดำเนินการ — the same dialog turned into a request, where the desk
-   * opens request types to its reporters (docs/WIDGET-ASK-PLAN.md): two cards
-   * under the heading, แจ้งปัญหา chosen as it opens, either one any time.
+   * ขอให้ทีมดำเนินการ, where the desk opens request types to its reporters
+   * (docs/WIDGET-ASK-PLAN.md): the press asks first with two cards; the form
+   * keeps one quiet line to switch.
    */
   chooseTitle: string;
   kindProblem: string;
-  kindProblemHint: string;
   kindRequest: string;
-  kindRequestHint: string;
+  askInstead: string;
+  askInsteadAction: string;
+  problemInstead: string;
+  problemInsteadAction: string;
+  /** The same, from a request that began with no screen: the share will be asked for. */
+  problemInsteadShare: string;
   /** On the cards before anything is asked of the browser: what each will do. */
   chooseProblemHint: string;
   chooseRequestHint: string;
   requestTitle: string;
   requestTypeLabel: string;
+  /** Over a long list of types: the search, and what it says when nothing matches. */
+  requestTypeSearch: string;
+  requestTypeNone: string;
+  /** Carries `{n}`. */
+  requestTypeCount: string;
   /** Carries `{time}`. */
   requestTarget: string;
   requestSummaryLabel: string;
@@ -146,13 +155,19 @@ const th: Strings = {
   handoffOpen: "เปิดในแท็บใหม่",
   chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
   kindProblem: "แจ้งปัญหา",
-  kindProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้",
   kindRequest: "คำขอ",
-  kindRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล",
+  askInstead: "เป็นคำขอ?",
+  askInsteadAction: "เลือกเรื่องที่ขอ",
+  problemInstead: "เป็นปัญหาที่ต้องแก้?",
+  problemInsteadAction: "แจ้งปัญหาแทน",
+  problemInsteadShare: "แจ้งปัญหาแทน (แนบภาพหน้าจอ)",
   chooseProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
   chooseRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล — ไม่ต้องแชร์หน้าจอ",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
+  requestTypeSearch: "ค้นหาเรื่องที่ขอ",
+  requestTypeNone: "ไม่พบเรื่องที่ขอ — ลองคำอื่น",
+  requestTypeCount: "{n} เรื่อง — เลื่อนดูหรือพิมพ์ค้นหา",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
   requestSummaryLabel: "หัวข้อ",
   requestSummaryPlaceholder: "ขออะไร — สั้น ๆ",
@@ -215,13 +230,19 @@ const en: Strings = {
   handoffOpen: "Open in a new tab",
   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",
+  askInstead: "Asking for something?",
+  askInsteadAction: "Choose what you need",
+  problemInstead: "Something broken?",
+  problemInsteadAction: "Report a problem instead",
+  problemInsteadShare: "Report a problem instead (with a screenshot)",
   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",
+  requestTypeSearch: "Search what you need",
+  requestTypeNone: "Nothing matches — try another word",
+  requestTypeCount: "{n} to choose from — scroll or search",
   requestTarget: "The team aims to finish within {time}",
   requestSummaryLabel: "Subject",
   requestSummaryPlaceholder: "What do you need — briefly",

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, select {
+input[type="text"], input[type="search"], 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, select:focus {
+input[type="text"]:focus, input[type="search"]: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; }
@@ -98,8 +98,10 @@ canvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; b
    แจ้งปัญหา · คำขอ 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; }
-.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. */
+/* The press's choice: two cards in a smaller dialog, before anything is asked of the browser. */
+.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+/* In the form, the choice is made: one quiet line under the heading to switch. */
+.door { margin: -8px 0 0; font-size: 13px; color: #64748b; }
 .panel.narrow { width: min(560px, 100%); }
 .kinds.choose { margin: 0 0 24px; }
 .kinds.choose button.kind { padding: 16px 18px; gap: 6px; }
@@ -120,7 +122,16 @@ button.kind[aria-checked="true"], button.kind[aria-checked="true"]:hover:not(:di
 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; }
+.types { display: grid; gap: 6px; }
+/* A long list scrolls in its own height, so the title and ส่งคำขอ stay near. */
+.types.long { max-height: 300px; overflow-y: auto; padding: 2px; margin: -2px; overscroll-behavior: contain; }
+.type-search { margin-bottom: 8px; }
+.ask .type-count { margin: 6px 0 0; font-size: 12px; }
+/* The rest are one line: only the chosen one opens up with its words and the team's time. */
+button.type:not([aria-checked="true"]) { padding: 8px 12px; align-items: center; }
+button.type:not([aria-checked="true"]) .type-hint, button.type:not([aria-checked="true"]) .type-due { display: none; }
+button.type:not([aria-checked="true"]) .type-body b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+button.type:not([aria-checked="true"]) .icon { margin-top: 0; }
 button.type {
   display: flex; align-items: flex-start; gap: 10px; width: 100%;
   padding: 10px 12px; text-align: left; border-radius: 10px;