@lightworkai.official/debug-capture 0.13.0 → 0.14.1

package/src/ui/strings.ts

@@ -65,14 +65,15 @@ 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): two cards
+   * under the heading, แจ้งปัญหา chosen as it opens, either one any time.
    */
   chooseTitle: string;
-  chooseProblem: string;
-  chooseProblemHint: string;
-  chooseRequest: string;
-  chooseRequestHint: string;
+  kindProblem: string;
+  kindProblemHint: string;
+  kindRequest: string;
+  kindRequestHint: string;
   requestTitle: string;
   requestTypeLabel: string;
   /** Carries `{time}`. */
@@ -83,7 +84,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;
@@ -133,10 +142,10 @@ const th: Strings = {
   handoffBlocked: "เบราว์เซอร์บล็อกการเปิดแท็บใหม่",
   handoffOpen: "เปิดในแท็บใหม่",
   chooseTitle: "ต้องการให้ทีมช่วยเรื่องอะไร",
-  chooseProblem: "แจ้งปัญหา",
-  chooseProblemHint: "มีอะไรเสียหรือใช้งานไม่ได้ — แนบภาพหน้าจอ",
-  chooseRequest: "ขอให้ทีมดำเนินการ",
-  chooseRequestHint: "ขอสิทธิ์ ขอแก้ข้อมูล หรือขอให้ทีมทำบางอย่าง",
+  kindProblem: "แจ้งปัญหา",
+  kindProblemHint: "มีอะไรเสีย หรือใช้งานไม่ได้",
+  kindRequest: "คำขอ",
+  kindRequestHint: "ขอให้ทีมทำ เช่น ขอสิทธิ์ ขอแก้ข้อมูล",
   requestTitle: "ขอให้ทีมดำเนินการ",
   requestTypeLabel: "เรื่องที่ขอ",
   requestTarget: "ทีมตั้งใจให้เสร็จภายใน {time}",
@@ -146,7 +155,12 @@ const th: Strings = {
   requestDetailPlaceholder: "สิ่งที่ทีมต้องรู้เพื่อดำเนินการ",
   requestSubmit: "ส่งคำขอ",
   requestSubmitted: "ส่งคำขอแล้ว",
-  back: "ย้อนกลับ",
+  requestWithShot: "แนบภาพหน้าจอนี้ไปกับคำขอ",
+  requestAnnotateHint: "ทำเครื่องหมายสิ่งที่ขอบนภาพ — วงกรอบ ชี้ลูกศร ไฮไลต์ หรือพิมพ์ข้อความ",
+  draftRestored: "ข้อความที่พิมพ์ไว้ครั้งก่อน ยังไม่ได้ส่ง",
+  draftClear: "ล้าง",
+  requestLeaves: "ไม่ส่งไปกับคำขอ",
+  requestLeavesWhat: "บันทึกการใช้งานของหน้านี้ — ใช้กับการแจ้งปัญหาเท่านั้น",
   days: "{n} วัน",
   hours: "{n} ชั่วโมง",
 };
@@ -195,10 +209,10 @@ const en: Strings = {
   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",
+  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}",
@@ -208,7 +222,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,55 @@ 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):
+   แจ้งปัญหา · คำขอ 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; }
+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;
 }
-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; }
+.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;
+  text-decoration: underline; text-underline-offset: 3px;
+}
+button.link:hover:not(:disabled) { background: none; color: #1d4ed8; }
+button.link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.ask p { margin: 0; }
+.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; }
 `;