@lightworkai.official/debug-capture 0.14.2 → 0.15.0

package/dist/ui/ring.d.ts

@@ -0,0 +1,19 @@
+export interface RingCall {
+    id: string;
+    ticketKey: string;
+    ticketTitle: string;
+}
+export interface RingHandlers {
+    /** Runs INSIDE the press: a tab can be opened only there, before anything is awaited. */
+    open: () => void;
+    decline: () => void;
+}
+/** "เรื่อง CALL-12 · title" — the line under the card's title. Pure, for the tests. */
+export declare function ringAbout(template: string, call: RingCall): string;
+/** Show the ring for this call — once; the same call again changes nothing. */
+export declare function showRing(call: RingCall, handlers: RingHandlers): void;
+/** Opened: the card says where to answer, and stops ringing. `blockedUrl` — the browser refused the tab: a link, which is a fresh press. */
+export declare function ringOpened(blockedUrl?: string): void;
+/** The call is no longer ringing for this person — answered, declined, missed or ended. */
+export declare function hideRing(id?: string): void;
+export declare function ringShownFor(): string | null;

package/dist/ui/strings.d.ts

@@ -66,14 +66,23 @@ export interface Strings {
     handoffOpen: string;
     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;
@@ -94,5 +103,15 @@ export interface Strings {
     /** Carry `{n}`. */
     days: string;
     hours: string;
+    /** A call from the support team (ui/ring). `ringAbout` carries `{key}` and `{title}`. */
+    ringTitle: string;
+    ringAbout: string;
+    ringHow: string;
+    ringOpen: string;
+    ringDecline: string;
+    ringOpened: string;
+    ringBlocked: string;
+    ringClose: string;
+    ringTab: string;
 }
 export declare function strings(locale: "th" | "en" | undefined): Strings;

package/dist/ui/styles.d.ts

@@ -10,4 +10,4 @@
  * Everything is explicit for the same reason: the host's `body` font and colours
  * do not inherit past the boundary, so stating them is not belt-and-braces.
  */
-export declare const CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n\n.backdrop {\n  position: fixed; inset: 0; z-index: 2147483000;\n  display: flex; align-items: center; justify-content: center;\n  padding: 24px; background: rgba(15, 23, 42, 0.55);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans Thai\", sans-serif;\n  color: #0f172a;\n}\n.panel {\n  display: flex; flex-direction: column; gap: 16px;\n  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;\n  /* No bottom padding: the footer supplies its own and sits flush, so it can\n     stick to the panel's edge without a gap under it. */\n  padding: 24px 24px 0; border-radius: 16px; background: #fff;\n  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);\n}\n.head { display: flex; align-items: flex-start; gap: 12px; }\nh2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }\nlabel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }\n.req { color: #dc2626; }\n.hint { font-weight: 400; color: #64748b; }\ninput[type=\"text\"], textarea, select {\n  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\ninput[type=\"text\"]:focus, textarea:focus, select:focus {\n  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);\n}\ntextarea { min-height: 88px; resize: vertical; }\n\n.meta {\n  padding: 12px 14px; border-radius: 10px; background: #f8fafc;\n  font-size: 13px; line-height: 1.7; color: #475569; word-break: break-all;\n}\n.meta b { color: #0f172a; font-weight: 600; }\n\n.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }\nbutton {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\nbutton:hover:not(:disabled) { background: #f1f5f9; }\nbutton:disabled { opacity: 0.5; cursor: not-allowed; }\nbutton[aria-pressed=\"true\"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }\nbutton.primary { background: #2563eb; border-color: #2563eb; color: #fff; }\nbutton.primary:hover:not(:disabled) { background: #1d4ed8; }\nbutton.icon { padding: 6px 10px; border-color: transparent; font-size: 18px; line-height: 1; }\n\n/* The on-image text editor. Absolutely placed over the canvas and matched to\n   the shape it becomes \u2014 same weight, same red, same white plate \u2014 so what you\n   type is what gets drawn, at the position you clicked. Sized in JS, because\n   the font size tracks the image's own scale. */\n.text-edit {\n  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;\n  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;\n  color: #e11d48; background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed #e11d48; border-radius: 4px; outline: none;\n  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);\n}\n.text-edit::placeholder { color: rgba(225, 29, 72, 0.45); }\n\ncanvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 10px; touch-action: none; }\n.shot { position: relative; }\n.status { font-size: 13px; color: #64748b; }\n.status[data-tone=\"error\"] { color: #dc2626; }\n/* Pinned to the bottom of the scrolling panel.\n   A screenshot is tall \u2014 often taller than the viewport \u2014 so \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 sat\n   below the fold and the last step of filing a report was \"scroll to the end\n   and find the button\". Sticky, with its own ground and a rule above it so the\n   annotated image scrolls underneath rather than bleeding into it. */\n.foot {\n  position: sticky; bottom: 0; z-index: 3;\n  display: flex; align-items: center; gap: 12px;\n  margin: 4px -24px 0; padding: 12px 24px;\n  background: #fff; border-top: 1px solid #e2e8f0;\n  border-radius: 0 0 16px 16px;\n}\n.foot .grow { flex: 1; }\n\n/* \u0E02\u0E2D\u0E43\u0E2B\u0E49\u0E17\u0E35\u0E21\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23 \u2014 the same dialog turned into a request (docs/WIDGET-ASK-PLAN.md):\n   \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 \u00B7 \u0E04\u0E33\u0E02\u0E2D as two cards under the heading, the way the desk's own\n   \u0E2A\u0E23\u0E49\u0E32\u0E07\u0E40\u0E27\u0E34\u0E23\u0E4C\u0E01\u0E42\u0E1F\u0E25\u0E27\u0E4C asks it; what is asked for as cards, the way the portal lists it. */\n[hidden] { display: none !important; }\n.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -4px; }\n/* Before anything is asked of the browser: the same two cards, a little larger, in a smaller dialog. */\n.panel.narrow { width: min(560px, 100%); }\n.kinds.choose { margin: 0 0 24px; }\n.kinds.choose button.kind { padding: 16px 18px; gap: 6px; }\n.kinds.choose .kind-hint { font-size: 13px; }\nbutton.kind {\n  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;\n  padding: 12px 34px 12px 14px; text-align: left; border-radius: 12px;\n}\n.kind-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }\n.kind-top b { font-weight: 600; }\n.kind-hint { font-size: 13px; font-weight: 400; line-height: 1.5; color: #64748b; }\nbutton.kind .icon { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; }\nbutton.kind[data-kind=\"request\"] .icon { color: #1d4ed8; }\nbutton.kind .tick { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: #2563eb; opacity: 0; }\nbutton.kind[aria-checked=\"true\"], button.kind[aria-checked=\"true\"]:hover:not(:disabled) {\n  border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px #2563eb;\n}\nbutton.kind[aria-checked=\"true\"] .tick { opacity: 1; }\nbutton.kind:focus-visible, button.type:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }\nbutton.kind[aria-checked=\"true\"]:focus-visible { box-shadow: inset 0 0 0 1px #2563eb, 0 0 0 3px rgba(37, 99, 235, 0.25); }\n.types { display: grid; gap: 8px; }\nbutton.type {\n  display: flex; align-items: flex-start; gap: 10px; width: 100%;\n  padding: 10px 12px; text-align: left; border-radius: 10px;\n}\nbutton.type .icon { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: #64748b; }\nbutton.type[aria-checked=\"true\"], button.type[aria-checked=\"true\"]:hover:not(:disabled) { border-color: #2563eb; background: #eff6ff; }\nbutton.type[aria-checked=\"true\"] .icon { color: #2563eb; }\n.type-body { display: grid; gap: 2px; min-width: 0; }\n.type-body b { font-size: 14px; font-weight: 600; }\n.type-hint { font-size: 13px; font-weight: 400; color: #64748b; }\n.type-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: #64748b; }\nbutton.type .type-due .icon { width: 12px; height: 12px; margin: 0; }\n/* A phone: the two kinds still side by side \u2014 their names are the choice; the hints stay short. */\n@media (max-width: 480px) {\n  .kind-hint { font-size: 12px; }\n  button.kind { padding: 10px 30px 10px 12px; }\n}\nbutton.link {\n  display: inline; padding: 0; border: 0; border-radius: 4px; background: none;\n  font-size: 13px; font-weight: 600; color: #2563eb;\n  text-decoration: underline; text-underline-offset: 3px;\n}\nbutton.link:hover:not(:disabled) { background: none; color: #1d4ed8; }\nbutton.link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }\n.ask p { margin: 0; }\n.shot-choice { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }\n.shot-choice input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; }\n.dropped { opacity: 0.35; pointer-events: none; }\n.draft { margin: -8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eff6ff; font-size: 13px; color: #1e3a8a; }\n";
+export declare const CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n\n.backdrop {\n  position: fixed; inset: 0; z-index: 2147483000;\n  display: flex; align-items: center; justify-content: center;\n  padding: 24px; background: rgba(15, 23, 42, 0.55);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Noto Sans Thai\", sans-serif;\n  color: #0f172a;\n}\n.panel {\n  display: flex; flex-direction: column; gap: 16px;\n  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;\n  /* No bottom padding: the footer supplies its own and sits flush, so it can\n     stick to the panel's edge without a gap under it. */\n  padding: 24px 24px 0; border-radius: 16px; background: #fff;\n  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);\n}\n.head { display: flex; align-items: flex-start; gap: 12px; }\nh2 { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }\nlabel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }\n.req { color: #dc2626; }\n.hint { font-weight: 400; color: #64748b; }\ninput[type=\"text\"], input[type=\"search\"], textarea, select {\n  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\ninput[type=\"text\"]:focus, input[type=\"search\"]:focus, textarea:focus, select:focus {\n  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);\n}\ntextarea { min-height: 88px; resize: vertical; }\n\n.meta {\n  padding: 12px 14px; border-radius: 10px; background: #f8fafc;\n  font-size: 13px; line-height: 1.7; color: #475569; word-break: break-all;\n}\n.meta b { color: #0f172a; font-weight: 600; }\n\n.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n.sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 4px; }\nbutton {\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 500;\n  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: inherit;\n}\nbutton:hover:not(:disabled) { background: #f1f5f9; }\nbutton:disabled { opacity: 0.5; cursor: not-allowed; }\nbutton[aria-pressed=\"true\"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }\nbutton.primary { background: #2563eb; border-color: #2563eb; color: #fff; }\nbutton.primary:hover:not(:disabled) { background: #1d4ed8; }\nbutton.icon { padding: 6px 10px; border-color: transparent; font-size: 18px; line-height: 1; }\n\n/* The on-image text editor. Absolutely placed over the canvas and matched to\n   the shape it becomes \u2014 same weight, same red, same white plate \u2014 so what you\n   type is what gets drawn, at the position you clicked. Sized in JS, because\n   the font size tracks the image's own scale. */\n.text-edit {\n  position: absolute; z-index: 2; margin: 0; padding: 2px 4px;\n  font-family: system-ui, sans-serif; font-weight: 600; line-height: 1.25;\n  color: #e11d48; background: rgba(255, 255, 255, 0.92);\n  border: 1px dashed #e11d48; border-radius: 4px; outline: none;\n  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);\n}\n.text-edit::placeholder { color: rgba(225, 29, 72, 0.45); }\n\ncanvas { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 10px; touch-action: none; }\n.shot { position: relative; }\n.status { font-size: 13px; color: #64748b; }\n.status[data-tone=\"error\"] { color: #dc2626; }\n/* Pinned to the bottom of the scrolling panel.\n   A screenshot is tall \u2014 often taller than the viewport \u2014 so \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 sat\n   below the fold and the last step of filing a report was \"scroll to the end\n   and find the button\". Sticky, with its own ground and a rule above it so the\n   annotated image scrolls underneath rather than bleeding into it. */\n.foot {\n  position: sticky; bottom: 0; z-index: 3;\n  display: flex; align-items: center; gap: 12px;\n  margin: 4px -24px 0; padding: 12px 24px;\n  background: #fff; border-top: 1px solid #e2e8f0;\n  border-radius: 0 0 16px 16px;\n}\n.foot .grow { flex: 1; }\n\n/* \u0E02\u0E2D\u0E43\u0E2B\u0E49\u0E17\u0E35\u0E21\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23 \u2014 the same dialog turned into a request (docs/WIDGET-ASK-PLAN.md):\n   \u0E41\u0E08\u0E49\u0E07\u0E1B\u0E31\u0E0D\u0E2B\u0E32 \u00B7 \u0E04\u0E33\u0E02\u0E2D as two cards under the heading, the way the desk's own\n   \u0E2A\u0E23\u0E49\u0E32\u0E07\u0E40\u0E27\u0E34\u0E23\u0E4C\u0E01\u0E42\u0E1F\u0E25\u0E27\u0E4C asks it; what is asked for as cards, the way the portal lists it. */\n[hidden] { display: none !important; }\n/* The press's choice: two cards in a smaller dialog, before anything is asked of the browser. */\n.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n/* In the form, the choice is made: one quiet line under the heading to switch. */\n.door { margin: -8px 0 0; font-size: 13px; color: #64748b; }\n.panel.narrow { width: min(560px, 100%); }\n.kinds.choose { margin: 0 0 24px; }\n.kinds.choose button.kind { padding: 16px 18px; gap: 6px; }\n.kinds.choose .kind-hint { font-size: 13px; }\nbutton.kind {\n  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;\n  padding: 12px 34px 12px 14px; text-align: left; border-radius: 12px;\n}\n.kind-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }\n.kind-top b { font-weight: 600; }\n.kind-hint { font-size: 13px; font-weight: 400; line-height: 1.5; color: #64748b; }\nbutton.kind .icon { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; }\nbutton.kind[data-kind=\"request\"] .icon { color: #1d4ed8; }\nbutton.kind .tick { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: #2563eb; opacity: 0; }\nbutton.kind[aria-checked=\"true\"], button.kind[aria-checked=\"true\"]:hover:not(:disabled) {\n  border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px #2563eb;\n}\nbutton.kind[aria-checked=\"true\"] .tick { opacity: 1; }\nbutton.kind:focus-visible, button.type:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }\nbutton.kind[aria-checked=\"true\"]:focus-visible { box-shadow: inset 0 0 0 1px #2563eb, 0 0 0 3px rgba(37, 99, 235, 0.25); }\n.types { display: grid; gap: 6px; }\n/* A long list scrolls in its own height, so the title and \u0E2A\u0E48\u0E07\u0E04\u0E33\u0E02\u0E2D stay near. */\n.types.long { max-height: 300px; overflow-y: auto; padding: 2px; margin: -2px; overscroll-behavior: contain; }\n.type-search { margin-bottom: 8px; }\n.ask .type-count { margin: 6px 0 0; font-size: 12px; }\n/* The rest are one line: only the chosen one opens up with its words and the team's time. */\nbutton.type:not([aria-checked=\"true\"]) { padding: 8px 12px; align-items: center; }\nbutton.type:not([aria-checked=\"true\"]) .type-hint, button.type:not([aria-checked=\"true\"]) .type-due { display: none; }\nbutton.type:not([aria-checked=\"true\"]) .type-body b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\nbutton.type:not([aria-checked=\"true\"]) .icon { margin-top: 0; }\nbutton.type {\n  display: flex; align-items: flex-start; gap: 10px; width: 100%;\n  padding: 10px 12px; text-align: left; border-radius: 10px;\n}\nbutton.type .icon { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: #64748b; }\nbutton.type[aria-checked=\"true\"], button.type[aria-checked=\"true\"]:hover:not(:disabled) { border-color: #2563eb; background: #eff6ff; }\nbutton.type[aria-checked=\"true\"] .icon { color: #2563eb; }\n.type-body { display: grid; gap: 2px; min-width: 0; }\n.type-body b { font-size: 14px; font-weight: 600; }\n.type-hint { font-size: 13px; font-weight: 400; color: #64748b; }\n.type-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: #64748b; }\nbutton.type .type-due .icon { width: 12px; height: 12px; margin: 0; }\n/* A phone: the two kinds still side by side \u2014 their names are the choice; the hints stay short. */\n@media (max-width: 480px) {\n  .kind-hint { font-size: 12px; }\n  button.kind { padding: 10px 30px 10px 12px; }\n}\nbutton.link {\n  display: inline; padding: 0; border: 0; border-radius: 4px; background: none;\n  font-size: 13px; font-weight: 600; color: #2563eb;\n  text-decoration: underline; text-underline-offset: 3px;\n}\nbutton.link:hover:not(:disabled) { background: none; color: #1d4ed8; }\nbutton.link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }\n.ask p { margin: 0; }\n.shot-choice { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }\n.shot-choice input { width: 16px; height: 16px; margin: 0; accent-color: #2563eb; }\n.dropped { opacity: 0.35; pointer-events: none; }\n.draft { margin: -8px 0 0; padding: 8px 12px; border-radius: 10px; background: #eff6ff; font-size: 13px; color: #1e3a8a; }\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "description": "Report-a-problem widget: rolling network/console/action capture, optional rrweb session replay, annotated screenshot, and submission to a Lightwork Support host",
   "type": "module",
   "module": "./dist/index.mjs",

package/src/config.ts

@@ -149,6 +149,18 @@ export interface DebugCaptureConfig {
   /** UI language. Only affects the built-in reporter's own strings. */
   locale?: "th" | "en";
 
+  /**
+   * The ring for a call from the support team. Default true.
+   *
+   * With `identity` set and calls switched on for the desk, the reporter's own
+   * live connection to the support host is held here — the one their portal
+   * tab holds, proven with the same signed token — so a call from the team
+   * rings in this app, as a card, and opens the reporter's request on the
+   * support host to answer it (the call itself happens there). `false` leaves
+   * calls to the support host and the invitation the team sends.
+   */
+  ring?: boolean;
+
   /**
    * Where this library's own notifications go.
    *

package/src/index.ts

@@ -42,6 +42,8 @@ export { redactBody, redactHeaders, redactLabel, redactUrl, REDACTED } from "./c
 // `defineReporterElement()` builds it in the browser, where it exists.
 export { defineReporterElement, setErroredQueriesSource, REPORTER_TAG } from "./ui/element";
 export { showToast } from "./ui/toast";
+// A call from the support team, rung in the host app — started by install; a host that renders its own UI may start or stop it.
+export { startLiveRing, stopLiveRing } from "./live";
 
 /*
  * The annotator ENGINE, shared by every framework package.

package/src/install.ts

@@ -14,6 +14,7 @@ import { strings } from "./ui/strings";
 import { showToast } from "./ui/toast";
 import { defineReporterElement, REPORTER_TAG } from "./ui/element";
 import { loadRequestTypes } from "./requests";
+import { startLiveRing } from "./live";
 
 let armed = false;
 
@@ -69,4 +70,12 @@ export function installDebugCapture(options: InstallOptions = {}): void {
   const idle = (window as Window & { requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number }).requestIdleCallback;
   if (idle) idle(() => void loadRequestTypes(), { timeout: 5000 });
   else setTimeout(() => void loadRequestTypes(), 2000);
+
+  /*
+   * A call from the support team rings here (live.ts) — when the host vouches
+   * for who is signed in and the desk has calls on. Late, like the request
+   * types: the page came for something else.
+   */
+  if (idle) idle(() => startLiveRing(), { timeout: 8000 });
+  else setTimeout(() => startLiveRing(), 3000);
 }

package/src/live.ts

@@ -0,0 +1,227 @@
+/**
+ * The ring for a call from the support team, in the host app.
+ *
+ * A reporter lives in the app they report from, not on the support host; a
+ * call from the team used to reach them only by the invitation in their
+ * email. So, when the host vouches for who is signed in (`identity`) and the
+ * desk has calls switched on, the widget holds the reporter's OWN live
+ * connection to the support host — the one their portal tab holds, traded
+ * for the host's signed token at `/ingest/live-ticket`, told about their own
+ * requests and calls and nothing else — and a call rings here as a card.
+ *
+ * Answering happens on the support host, where the call's media lives: the
+ * card's button opens the reporter's request there, signed in by the same
+ * hand-off the portal button uses — a tab opened INSIDE the press (a browser
+ * allows nothing later), its address set once the token is in hand.
+ *
+ * Quiet by design. No identity, calls off, a support host older than this
+ * package, a token refused: no socket, no card, nothing in the console — the
+ * widget does exactly what it did before.
+ */
+import { getConfig } from "./config";
+import { preparePortalUrl } from "./portal";
+import { hideRing, ringOpened, ringShownFor, showRing } from "./ui/ring";
+
+export interface RingingCall {
+  id: string;
+  ticketId: string;
+  ticketKey: string;
+  ticketTitle: string;
+  status: string;
+  ringUntil: string;
+  side?: string | null;
+}
+
+const RETRY_MS = [2000, 5000, 15_000, 30_000, 60_000];
+const PING_MS = 20_000;
+
+let started = false;
+let stopped = false;
+/** Asked for a token and got none — nobody signed in yet. A few slow tries, then quiet: never a request a minute forever. */
+let tokenless = 0;
+const TOKENLESS_MAX = 5;
+let socket: WebSocket | null = null;
+let retry = 0;
+let pinger: ReturnType<typeof setInterval> | undefined;
+let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+let expiry: ReturnType<typeof setTimeout> | undefined;
+
+const base = (host: string) => (host.endsWith("/") ? host : `${host}/`);
+
+/** `wss://support.example/api/presence/ws?t=…` — the support host's scheme, the socket's own path. Pure, for the tests. */
+export function liveSocketUrl(host: string, ticket: string): string {
+  const url = new URL("api/presence/ws", base(host));
+  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+  url.searchParams.set("t", ticket);
+  return url.toString();
+}
+
+/** Where the card sends them: their request, with the call — the support host rings it there. Pure, for the tests. */
+export function answerPath(call: Pick<RingingCall, "id" | "ticketId">): string {
+  return `/me/tickets/${call.ticketId}?call=${call.id}`;
+}
+
+/** Is this a call ringing for the person at this widget? */
+export function ringsHere(call: Pick<RingingCall, "status" | "side">): boolean {
+  return call.status === "ringing" && (call.side === "reporter" || call.side === undefined || call.side === null);
+}
+
+async function hostToken(): Promise<string | null> {
+  const provider = getConfig().identity;
+  if (!provider) return null;
+  try {
+    return (await provider()) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+async function post(path: string, token: string): Promise<Response> {
+  const config = getConfig();
+  return fetch(new URL(path, base(config.host)).toString(), {
+    method: "POST",
+    headers: { "content-type": "application/json", "x-realm-key": config.realmKey, authorization: `Bearer ${token}` },
+    body: "{}",
+  });
+}
+
+/** Start listening for calls. Idempotent; a no-op without identity, or with `ring: false`. */
+export function startLiveRing(): void {
+  if (started || typeof window === "undefined" || typeof WebSocket === "undefined") return;
+  const config = getConfig();
+  if (!config.identity || config.ring === false) return;
+  started = true;
+  stopped = false;
+  void connect();
+}
+
+/** Let go — the socket, the card, the timers. For a host that unmounts, and for the tests. */
+export function stopLiveRing(): void {
+  stopped = true;
+  started = false;
+  clearTimeout(reconnectTimer);
+  clearInterval(pinger);
+  clearTimeout(expiry);
+  try {
+    socket?.close(1000, "bye");
+  } catch {
+    /* already */
+  }
+  socket = null;
+  hideRing();
+}
+
+function schedule(slow = false): void {
+  if (stopped) return;
+  const wait = slow ? RETRY_MS[RETRY_MS.length - 1]! : RETRY_MS[Math.min(retry++, RETRY_MS.length - 1)]!;
+  clearTimeout(reconnectTimer);
+  reconnectTimer = setTimeout(() => void connect(), wait);
+}
+
+async function connect(): Promise<void> {
+  if (stopped) return;
+  const token = await hostToken();
+  // Nobody signed in to the host yet: ask again, slowly — a few times, then stop.
+  if (!token) {
+    if (++tokenless >= TOKENLESS_MAX) {
+      stopped = true;
+      return;
+    }
+    return schedule(true);
+  }
+  tokenless = 0;
+  let res: Response;
+  try {
+    res = await post("ingest/live-ticket", token);
+  } catch {
+    return schedule();
+  }
+  // A token the desk does not accept, or a support host from before the ring: nothing to do, and nothing to say.
+  if (res.status === 401 || res.status === 404 || res.status === 403) {
+    stopped = true;
+    return;
+  }
+  if (!res.ok) return schedule(res.status === 429);
+  let out: { calls?: boolean; ticket?: string | null; call?: RingingCall | null };
+  try {
+    out = await res.json();
+  } catch {
+    return schedule();
+  }
+  // Calls off for this desk: no socket at all.
+  if (!out.calls || !out.ticket) {
+    stopped = true;
+    return;
+  }
+  if (out.call) hear(out.call);
+  const ws = new WebSocket(liveSocketUrl(getConfig().host, out.ticket));
+  socket = ws;
+  ws.onopen = () => {
+    retry = 0;
+    clearInterval(pinger);
+    pinger = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "ping" }));
+    }, PING_MS);
+  };
+  ws.onmessage = (e) => {
+    try {
+      const frame = JSON.parse(String(e.data)) as { type?: string; call?: RingingCall };
+      if (frame.type === "call-state" && frame.call) hear(frame.call);
+    } catch {
+      /* not ours to read */
+    }
+  };
+  ws.onclose = () => {
+    clearInterval(pinger);
+    if (socket === ws) socket = null;
+    schedule();
+  };
+}
+
+/** The support host's word on a call: ringing here shows the card; anything else takes it away. */
+function hear(call: RingingCall): void {
+  if (!ringsHere(call)) return hideRing(call.id);
+  showRing(call, { open: () => answer(call), decline: () => void decline(call) });
+  // Never longer than it rings: a socket that dropped mid-ring must not leave a card up for good.
+  clearTimeout(expiry);
+  const left = new Date(call.ringUntil).getTime() - Date.now();
+  expiry = setTimeout(() => {
+    if (ringShownFor() === call.id) hideRing(call.id);
+  }, Math.max(5000, left + 5000));
+}
+
+/**
+ * เปิดเพื่อรับสาย. The tab is opened HERE, inside the press — after an await the
+ * browser would call it an unasked-for popup — then sent to the signed-in
+ * link once the host's token arrives. The support host is told the reporter
+ * is coming, so the ring waits for the hand-off and the team sees it.
+ */
+function answer(call: RingingCall): void {
+  const tab = window.open("about:blank", "_blank");
+  void (async () => {
+    const token = await hostToken();
+    if (token) void post(`ingest/calls/${call.id}/coming`, token).catch(() => undefined);
+    let url: string;
+    try {
+      url = await preparePortalUrl(answerPath(call));
+    } catch {
+      tab?.close();
+      return;
+    }
+    if (tab && !tab.closed) {
+      tab.location.href = url;
+      try {
+        tab.opener = null;
+      } catch {
+        /* open either way */
+      }
+      ringOpened();
+    } else ringOpened(url);
+  })();
+}
+
+async function decline(call: RingingCall): Promise<void> {
+  hideRing(call.id);
+  const token = await hostToken();
+  if (token) await post(`ingest/calls/${call.id}/decline`, token).catch(() => undefined);
+}

package/src/portal.ts

@@ -79,6 +79,9 @@ async function prepareUrl(returnTo?: string): Promise<string> {
   return supportPortalUrl(config.host, config.realmKey, token, returnTo);
 }
 
+/** The signed-in link to a path on the support host — for a caller that opened its own tab first (the call ring, ui/ring). */
+export const preparePortalUrl = prepareUrl;
+
 /** False when the browser refused — a popup blocker, almost always. */
 function navigate(url: string, target: OpenPortalOptions["target"]): boolean {
   if (target === "_self") {

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